diff options
| Commit | 4e1941908000424b26713c185e2cf907d8428e43 (patch) | |
|---|---|---|
| Author | 2022-10-22 21:59:24 +0300 | |
| Committer | 2022-10-22 21:59:24 +0300 | |
| Files | 809f32a507cbe7bf6fe4b255a44a67dd979b672d | |
| uni-projects-4e1941908000424b26713c185e2cf907d8428e43.tar uni-projects-4e1941908000424b26713c185e2cf907d8428e43.tar.gz uni-projects-4e1941908000424b26713c185e2cf907d8428e43.zip | ||
| Parent | 083017dac65fda5c171ca0b223686f0f1773a157 (diff) | |
[WGL/P02] Solved practicum exercises
10 files changed, 813 insertions, 0 deletions
diff --git a/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0201.html b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0201.html new file mode 100644 index 0000000..f0f22bf --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0201.html @@ -0,0 +1,64 @@ +<!DOCTYPE html>
+
+<head>
+ <meta charset="utf-8"/>
+ <title>Септагон</title>
+
+ <script src="webgl-fmi.js"></script>
+
+ <script id="vshader" type="x-shader/x-vertex">
+ attribute vec2 aXY;
+ void main ()
+ {
+ gl_Position = vec4(aXY,0,1);
+ gl_PointSize = 10.0;
+ }
+ </script>
+
+ <script id="fshader" type="x-shader/x-fragment">
+ void main( )
+ {
+ gl_FragColor = vec4(0,0,0,1);
+ }
+ </script>
+
+ <script>
+ function start( )
+ {
+ gl = getContext("picasso");
+ glprog = getProgram("vshader","fshader");
+
+ aXY = gl.getAttribLocation(glprog,"aXY");
+
+ gl.clearColor(1,1,1,1);
+ gl.clear(gl.COLOR_BUFFER_BIT);
+
+ var data = [ ]; // В този масив трябва да са 7-те точки
+ const aspectRatio = 600 / 400;
+ const n = 7;
+ const r = 0.8;
+
+ for (var i = 1; i <= n; i++)
+ data.push(Math.sin(2.0 * Math.PI * i / n) * r / aspectRatio, Math.cos(2.0 * Math.PI * i / n) * r);
+
+ var buf = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+ gl.vertexAttribPointer(aXY, 2, gl.FLOAT, false, 0, 0);
+ gl.enableVertexAttribArray(aXY);
+ gl.drawArrays(gl.POINTS, 0, n);
+ }
+ </script>
+</head>
+
+<body onload="start()">
+ <h2>Септагон</h2>
+
+ <noscript>
+ Искаме JavaScript, но няма!
+ </noscript>
+
+ <canvas id="picasso" width="600" height="400" style="border: solid;">
+ Искаме canvas, но няма!
+ </canvas>
+</body>
diff --git a/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0202.html b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0202.html new file mode 100644 index 0000000..0bd14dd --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0202.html @@ -0,0 +1,69 @@ +<!DOCTYPE html>
+
+<head>
+ <meta charset="utf-8"/>
+ <title>Мрежа</title>
+
+ <script src="webgl-fmi.js"></script>
+
+ <script id="vshader" type="x-shader/x-vertex">
+ attribute vec2 aXY;
+ void main ()
+ {
+ gl_Position = vec4(aXY,0,1);
+ gl_PointSize = 10.0;
+ }
+ </script>
+
+ <script id="fshader" type="x-shader/x-fragment">
+ void main( )
+ {
+ gl_FragColor = vec4(0,0,0,1);
+ }
+ </script>
+
+ <script>
+ function start( )
+ {
+ gl = getContext("picasso");
+ glprog = getProgram("vshader","fshader");
+
+ aXY = gl.getAttribLocation(glprog,"aXY");
+
+ gl.clearColor(1,1,1,1);
+ gl.clear(gl.COLOR_BUFFER_BIT);
+
+ var n = 18;
+ var m = 15;
+
+ const vSpacing = 2 / m;
+ const hSpacing = 2 / n;
+
+ var points = [];
+ for (var row = 1; row <= m; row++) {
+ var evenRowOffset = (row % 2 == 0) ? -hSpacing / 2 : 0;
+ for (var col = 1 + (1 - row % 2); col <= n; col++)
+ points.push(col * hSpacing - 1 - hSpacing / 2 + evenRowOffset, row * vSpacing - 1 - vSpacing / 2);
+ }
+
+ var vertexBuf = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuf);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);
+ gl.vertexAttribPointer(aXY, 2, gl.FLOAT, false, 0, 0);
+ gl.enableVertexAttribArray(aXY);
+ gl.drawArrays(gl.POINTS, 0, n * m - Math.floor(m / 2));
+ }
+ </script>
+</head>
+
+<body onload="start()">
+ <h2>Мрежа</h2>
+
+ <noscript>
+ Искаме JavaScript, но няма!
+ </noscript>
+
+ <canvas id="picasso" width="600" height="400" style="border: solid;">
+ Искаме canvas, но няма!
+ </canvas>
+</body>
diff --git a/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0203.html b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0203.html new file mode 100644 index 0000000..827b463 --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0203.html @@ -0,0 +1,69 @@ +<!DOCTYPE html>
+
+<head>
+ <meta charset="utf-8"/>
+ <title>Цветни точки</title>
+
+ <script src="webgl-fmi.js"></script>
+
+ <script id="vshader" type="x-shader/x-vertex">
+ attribute vec2 aXY;
+ attribute float aGreen;
+ varying float vGreen;
+ void main ()
+ {
+ gl_Position = vec4(aXY,0,1);
+ vGreen = aGreen;
+ }
+ </script>
+
+ <script id="fshader" type="x-shader/x-fragment">
+ precision lowp float;
+ varying float vGreen;
+ void main( )
+ {
+ gl_FragColor = vec4(1,vGreen,0,1);
+ }
+ </script>
+
+ <script>
+ function start( )
+ {
+ gl = getContext("picasso");
+ glprog = getProgram("vshader","fshader");
+
+ aXY = gl.getAttribLocation(glprog,"aXY");
+ aGreen = gl.getAttribLocation(glprog,"aGreen");
+
+ gl.clearColor(1,1,1,1);
+ gl.clear(gl.COLOR_BUFFER_BIT);
+
+ var n = 100000;
+
+ var points = [];
+ for (var i = 0; i < n; i++)
+ points.push(random(-1, 1), random(-1, 1), random(0, 1));
+
+ var buf = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);
+ gl.vertexAttribPointer(aXY, 2, gl.FLOAT, false, 3*FLOATS, 0*FLOATS);
+ gl.vertexAttribPointer(aGreen, 1, gl.FLOAT, false, 3*FLOATS, 2*FLOATS);
+ gl.enableVertexAttribArray(aXY);
+ gl.enableVertexAttribArray(aGreen);
+ gl.drawArrays(gl.POINTS, 0, n);
+ }
+ </script>
+</head>
+
+<body onload="start()">
+ <h2>Цветни точки</h2>
+
+ <noscript>
+ Искаме JavaScript, но няма!
+ </noscript>
+
+ <canvas id="picasso" width="600" height="400" style="border: solid;">
+ Искаме canvas, но няма!
+ </canvas>
+</body>
diff --git a/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0204.html b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0204.html new file mode 100644 index 0000000..9206a04 --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0204.html @@ -0,0 +1,82 @@ +<!DOCTYPE html>
+
+<head>
+ <meta charset="utf-8"/>
+ <title>Космата окръжност</title>
+
+ <script src="webgl-fmi.js"></script>
+
+ <script id="vshader" type="x-shader/x-vertex">
+ attribute vec2 aXY;
+ attribute vec3 aRGB;
+ varying vec3 vRGB;
+ void main ()
+ {
+ gl_Position = vec4(aXY,0,1);
+ gl_PointSize = 4.0;
+ vRGB = aRGB;
+ }
+ </script>
+
+ <script id="fshader" type="x-shader/x-fragment">
+ precision mediump float;
+ varying vec3 vRGB;
+ void main( )
+ {
+ gl_FragColor = vec4(vRGB,1);
+ }
+ </script>
+
+ <script>
+ function start( )
+ {
+ gl = getContext("picasso");
+ glprog = getProgram("vshader","fshader");
+
+ aXY = gl.getAttribLocation(glprog,"aXY");
+ aRGB = gl.getAttribLocation(glprog,"aRGB");
+
+ gl.clearColor(1,1,1,1);
+ gl.clear(gl.COLOR_BUFFER_BIT);
+
+ var n = 150;
+ const aspectRatio = 600 / 400;
+
+ var points = [];
+ const circleR = 0.7;
+ const maxHairAddon = 0.3;
+ const hairyDegr = 360 / n;
+ for (var degr = 0; degr < 360; degr++) {
+ var x = Math.sin(2.0 * Math.PI * degr / 360) / aspectRatio;
+ var y = Math.cos(2.0 * Math.PI * degr / 360);
+ points.push(x * circleR, y * circleR, 0, 0, 0);
+ if (degr % hairyDegr < 1) {
+ var r = random(0.05, maxHairAddon);
+ points.push(x * (circleR + r), y * (circleR + r), 0, 0, 0);
+ points.push(x * circleR, y * circleR, 0, 0, 0);
+ }
+ }
+
+ var buf = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);
+ gl.vertexAttribPointer(aXY, 2, gl.FLOAT, false, 5 * FLOATS, 0 * FLOATS);
+ gl.vertexAttribPointer(aRGB, 3, gl.FLOAT, false, 5 * FLOATS, 2 * FLOATS);
+ gl.enableVertexAttribArray(aXY);
+ gl.enableVertexAttribArray(aRGB);
+ gl.drawArrays(gl.LINE_LOOP, 0, 360 + 2 * n);
+ }
+ </script>
+</head>
+
+<body onload="start()">
+ <h2>Космата окръжност</h2>
+
+ <noscript>
+ Искаме JavaScript, но няма!
+ </noscript>
+
+ <canvas id="picasso" width="600" height="400" style="border: solid;">
+ Искаме canvas, но няма!
+ </canvas>
+</body>
diff --git a/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0205.html b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0205.html new file mode 100644 index 0000000..37c4127 --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0205.html @@ -0,0 +1,79 @@ +<!DOCTYPE html>
+
+<head>
+ <meta charset="utf-8"/>
+ <title>GLSL пеперуда</title>
+
+ <script src="webgl-fmi.js"></script>
+
+ <script id="vshader" type="x-shader/x-vertex">
+ #define PI 3.1415926538
+ #define ASPECT_RATIO 1.5
+
+ attribute float aPoint;
+ attribute float aPointCnt;
+
+ attribute vec3 aRGB;
+ varying vec3 vRGB;
+
+ void main ()
+ {
+ float alpha = aPoint * (360.0 / aPointCnt) * (PI / 180.0);
+ float mag = (exp(cos(alpha)) - 2.0 * cos(4.0 * alpha) + pow(sin(alpha / 15.0), 5.0)) / 2.475;
+ gl_Position = vec4(mag * sin(alpha) / ASPECT_RATIO, mag * cos(alpha) - 0.268, 0, 1);
+ gl_PointSize = 4.0;
+ vRGB = aRGB;
+ }
+ </script>
+
+ <script id="fshader" type="x-shader/x-fragment">
+ precision mediump float;
+ varying vec3 vRGB;
+ void main( )
+ {
+ gl_FragColor = vec4(vRGB,1);
+ }
+ </script>
+
+ <script>
+ function start( )
+ {
+ gl = getContext("picasso");
+ glprog = getProgram("vshader","fshader");
+
+ aPoint = gl.getAttribLocation(glprog, "aPoint");
+ aPointCnt = gl.getAttribLocation(glprog, "aPointCnt");
+ aRGB = gl.getAttribLocation(glprog,"aRGB");
+
+ gl.clearColor(1,1,1,1);
+ gl.clear(gl.COLOR_BUFFER_BIT);
+
+ var n = 250;
+ var data = [ ];
+ for(var i=0; i<n; i++) data.push(i);
+
+ var buf = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER,buf);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+
+ gl.vertexAttrib3f(aRGB,1,0.2,0);
+
+ gl.vertexAttribPointer(aPoint, 1, gl.FLOAT, false, 0, 0);
+ gl.enableVertexAttribArray(aPoint);
+ gl.vertexAttrib1f(aPointCnt, n);
+ gl.drawArrays(gl.LINE_LOOP,0,n);
+ }
+ </script>
+</head>
+
+<body onload="start()">
+ <h2>GLSL пеперуда</h2>
+
+ <noscript>
+ Искаме JavaScript, но няма!
+ </noscript>
+
+ <canvas id="picasso" width="600" height="400" style="border: solid;">
+ Искаме canvas, но няма!
+ </canvas>
+</body>
diff --git a/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0206.html b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0206.html new file mode 100644 index 0000000..b1dbf82 --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0206.html @@ -0,0 +1,88 @@ +<!DOCTYPE html>
+
+<head>
+ <meta charset="utf-8"/>
+ <title>Синус-косинус</title>
+
+ <script src="webgl-fmi.js"></script>
+
+ <script id="vshader" type="x-shader/x-vertex">
+ attribute vec2 aXY;
+ attribute vec3 aRGB;
+ varying vec3 vRGB;
+ void main ()
+ {
+ gl_Position = vec4(aXY,0,1);
+ gl_PointSize = 4.0;
+ vRGB = aRGB;
+ }
+ </script>
+
+ <script id="fshader" type="x-shader/x-fragment">
+ precision mediump float;
+ varying vec3 vRGB;
+ void main( )
+ {
+ gl_FragColor = vec4(vRGB,1);
+ }
+ </script>
+
+ <script>
+ function start( )
+ {
+ gl = getContext("picasso");
+ glprog = getProgram("vshader","fshader");
+
+ aXY = gl.getAttribLocation(glprog,"aXY");
+ aRGB = gl.getAttribLocation(glprog,"aRGB");
+
+ gl.clearColor(1,1,1,1);
+ gl.clear(gl.COLOR_BUFFER_BIT);
+
+ // Общо n зъба
+ var n = 20;
+ var data = [];
+
+ // Axies
+ data.push( 0.9, 0, 0, 0, 0);
+ data.push(-0.9, 0, 0, 0, 0);
+ data.push( 0, 0.9, 0, 0, 0);
+ data.push( 0, -0.9, 0, 0, 0);
+
+ // Figure
+ const aspectRatio = 600 / 400;
+ const range = 3;
+ var step = 1.8 / n;
+ for (var x = -0.9; x < 0.899; x += step) {
+ data.push(x, Math.sin(x * range) / range, 1, 0, 0);
+ data.push(x, Math.cos(x * range) / range, 1, 0, 0);
+ var tx = x + step / 2;
+ data.push(tx, Math.cos(tx * range) / range, 1, 0, 0);
+ data.push(tx, Math.sin(tx * range) / range, 1, 0, 0);
+ }
+
+ var buf = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER,buf);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+
+ gl.enableVertexAttribArray(aXY);
+ gl.enableVertexAttribArray(aRGB);
+ gl.vertexAttribPointer(aXY,2,gl.FLOAT,false, 5 * FLOATS, 0);
+ gl.vertexAttribPointer(aRGB, 3, gl.FLOAT, false, 5 * FLOATS, 2 * FLOATS);
+ gl.drawArrays(gl.LINES, 0, 4);
+ gl.drawArrays(gl.LINE_STRIP, 4, n * 4);
+ }
+ </script>
+</head>
+
+<body onload="start()">
+ <h2>Синус-косинус</h2>
+
+ <noscript>
+ Искаме JavaScript, но няма!
+ </noscript>
+
+ <canvas id="picasso" width="600" height="400" style="border: solid;">
+ Искаме canvas, но няма!
+ </canvas>
+</body>
diff --git a/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0207.html b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0207.html new file mode 100644 index 0000000..4d17ef7 --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0207.html @@ -0,0 +1,100 @@ +<!DOCTYPE html>
+
+<head>
+ <meta charset="utf-8"/>
+ <title>Ямайка</title>
+
+ <script src="webgl-fmi.js"></script>
+
+ <script id="vshader" type="x-shader/x-vertex">
+ attribute vec2 aXY;
+ attribute vec3 aRGB;
+ varying vec3 vRGB;
+ void main ()
+ {
+ gl_Position = vec4(aXY,0,1);
+ gl_PointSize = 4.0;
+ vRGB = aRGB;
+ }
+ </script>
+
+ <script id="fshader" type="x-shader/x-fragment">
+ precision mediump float;
+ varying vec3 vRGB;
+ void main( )
+ {
+ gl_FragColor = vec4(vRGB,1);
+ }
+ </script>
+
+ <script>
+ function start( )
+ {
+ gl = getContext("picasso");
+ glprog = getProgram("vshader","fshader");
+
+ aXY = gl.getAttribLocation(glprog,"aXY");
+ aRGB = gl.getAttribLocation(glprog,"aRGB");
+
+ gl.clearColor(1,0.84,0,1);
+ gl.clear(gl.COLOR_BUFFER_BIT);
+
+ var data = [];
+
+ var black = [0, 0, 0];
+ // Left triangle
+ data.push(-1, 0.8);
+ data = data.concat(black);
+ data.push(-1, -0.8);
+ data = data.concat(black);
+ data.push(-0.2, 0);
+ data = data.concat(black);
+ // Right triangle
+ data.push(1, 0.8);
+ data = data.concat(black);
+ data.push(1, -0.8);
+ data = data.concat(black);
+ data.push(0.2, 0);
+ data = data.concat(black);
+
+ var green = [0, 0.5, 0];
+ // Top triangle
+ data.push(-0.8, 1);
+ data = data.concat(green);
+ data.push(0.8, 1);
+ data = data.concat(green);
+ data.push(0, 0.2);
+ data = data.concat(green);
+ // Bottom triangle
+ data.push(-0.8, -1);
+ data = data.concat(green);
+ data.push(0.8, -1);
+ data = data.concat(green);
+ data.push(0, -0.2);
+ data = data.concat(green);
+
+ var buf = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER,buf);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+
+ gl.enableVertexAttribArray(aXY);
+ gl.vertexAttribPointer(aXY,2,gl.FLOAT,false, 5 * FLOATS, 0);
+ gl.enableVertexAttribArray(aRGB);
+ gl.vertexAttribPointer(aRGB, 3, gl.FLOAT, false, 5 * FLOATS, 2 * FLOATS);
+
+ gl.drawArrays(gl.TRIANGLES, 0, 4 * 3);
+ }
+ </script>
+</head>
+
+<body onload="start()">
+ <h2>Ямайка</h2>
+
+ <noscript>
+ Искаме JavaScript, но няма!
+ </noscript>
+
+ <canvas id="picasso" width="600" height="300" style="border: solid;">
+ Искаме canvas, но няма!
+ </canvas>
+</body>
diff --git a/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0208.html b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0208.html new file mode 100644 index 0000000..6cd2470 --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0208.html @@ -0,0 +1,101 @@ +<!DOCTYPE html>
+
+<head>
+ <meta charset="utf-8"/>
+ <title>Триъгълник на Рольо</title>
+
+ <script src="webgl-fmi.js"></script>
+
+ <script id="vshader" type="x-shader/x-vertex">
+ attribute vec2 aXY;
+ attribute vec3 aRGB;
+ varying vec3 vRGB;
+ void main ()
+ {
+ gl_Position = vec4(aXY,0,1);
+ gl_PointSize = 4.0;
+ vRGB = aRGB;
+ }
+ </script>
+
+ <script id="fshader" type="x-shader/x-fragment">
+ precision mediump float;
+ varying vec3 vRGB;
+ void main( )
+ {
+ gl_FragColor = vec4(vRGB,1);
+ }
+ </script>
+
+ <script>
+ function start( )
+ {
+ gl = getContext("picasso");
+ glprog = getProgram("vshader","fshader");
+
+ aXY = gl.getAttribLocation(glprog,"aXY");
+ aRGB = gl.getAttribLocation(glprog,"aRGB");
+
+ gl.clearColor(1,1,1,1);
+ gl.clear(gl.COLOR_BUFFER_BIT);
+
+ // параметър n за точност на дъгите в триъгълника
+ var n = 50;
+ var data = [];
+
+ const aspectRatio = 600 / 400;
+ const size = 0.8;
+ const r = 2 * size;
+ const step = 60 / n;
+
+ // Bottom-left point, right side
+ var originX = -size / aspectRatio;
+ var originY = -size + 0.2;
+ data.push(originX, originY);
+
+ for (var i = 30; i < 91; i += step)
+ data.push(Math.sin(2.0 * Math.PI * i / 360) * r / aspectRatio + originX, Math.cos(2.0 * Math.PI * i / 360) * r + originY);
+
+ // Bottom-right point, left side
+ var originX = size / aspectRatio;
+ data.push(originX, originY);
+
+ for (var i = 270; i < 331; i += step)
+ data.push(Math.sin(2 * Math.PI * i / 360) * r / aspectRatio + originX, Math.cos(2 * Math.PI * i / 360) * r + originY);
+
+ // Top point, bottom side
+ var originX = 0;
+ var originY = Math.sqrt(r * r - size * size) - size + 0.2;
+ data.push(originX, originY);
+
+ for (var i = 210; i > 149; i -= step)
+ data.push(Math.sin(2 * Math.PI * i / 360) * r / aspectRatio + originX, Math.cos(2 * Math.PI * i / 360) * r + originY);
+
+ // WebGL stuff
+ var buf = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER,buf);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+
+ gl.vertexAttrib3f(aRGB,1,0.5,0);
+
+ gl.enableVertexAttribArray(aXY);
+ gl.vertexAttribPointer(aXY,2,gl.FLOAT,false,0,0);
+
+ gl.drawArrays(gl.TRIANGLE_FAN, 0, 2 + n);
+ gl.drawArrays(gl.TRIANGLE_FAN, 2 + n, 2 + n);
+ gl.drawArrays(gl.TRIANGLE_FAN, 2 * (2 + n), 2 + n);
+ }
+ </script>
+</head>
+
+<body onload="start()">
+ <h2>Триъгълник на Рольо</h2>
+
+ <noscript>
+ Искаме JavaScript, но няма!
+ </noscript>
+
+ <canvas id="picasso" width="600" height="400" style="border: solid;">
+ Искаме canvas, но няма!
+ </canvas>
+</body>
diff --git a/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0209.html b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0209.html new file mode 100644 index 0000000..51728d9 --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/Problem 0209.html @@ -0,0 +1,83 @@ +<!DOCTYPE html>
+
+<head>
+ <meta charset="utf-8"/>
+ <title>Колело на цветовете</title>
+
+ <script src="webgl-fmi.js"></script>
+
+ <script id="vshader" type="x-shader/x-vertex">
+ attribute vec2 aXY;
+ attribute vec3 aRGB;
+ varying vec3 vRGB;
+ void main ()
+ {
+ gl_Position = vec4(aXY,0,1);
+ gl_PointSize = 4.0;
+ vRGB = aRGB;
+ }
+ </script>
+
+ <script id="fshader" type="x-shader/x-fragment">
+ precision mediump float;
+ varying vec3 vRGB;
+ void main( )
+ {
+ gl_FragColor = vec4(vRGB,1);
+ }
+ </script>
+
+ <script>
+ function start( )
+ {
+ gl = getContext("picasso");
+ glprog = getProgram("vshader","fshader");
+
+ aXY = gl.getAttribLocation(glprog,"aXY");
+ aRGB = gl.getAttribLocation(glprog,"aRGB");
+
+ gl.clearColor(1,1,1,1);
+ gl.clear(gl.COLOR_BUFFER_BIT);
+
+ // брой сегменти n
+ var n = 60;
+
+ var points = [];
+ const aspectRatio = 600 / 400;
+ const r = 0.8;
+
+ points.push(0, 0, 1, 1, 1);
+ const step = 360 / n;
+ // https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB_alternative
+ function hueToRgbf(n, H) {
+ var k = (n + H / 60) % 6;
+ return 1 - Math.max(0, Math.min(k, 4-k, 1));
+ }
+ const offset = 90;
+ for (var i = 0; i < 361; i += step) {
+ points.push(Math.sin(2 * Math.PI * (i + offset) / 360) * r / aspectRatio, Math.cos(2 * Math.PI * (i + offset) / 360) * r, hueToRgbf(5, i), hueToRgbf(3, i), hueToRgbf(1, i));
+ }
+
+ var buf = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);
+ gl.vertexAttribPointer(aXY, 2, gl.FLOAT, false, 5 * FLOATS, 0);
+ gl.vertexAttribPointer(aRGB, 3, gl.FLOAT, false, 5 * FLOATS, 2 * FLOATS);
+ gl.enableVertexAttribArray(aXY);
+ gl.enableVertexAttribArray(aRGB);
+ gl.drawArrays(gl.TRIANGLE_FAN, 0, n + 2);
+ }
+ </script>
+</head>
+
+<body onload="start()">
+ <h2>Колело на цветовете</h2>
+
+ <noscript>
+ Искаме JavaScript, но няма!
+ </noscript>
+
+ <canvas id="picasso" width="600" height="400" style="border: solid;">
+ Искаме canvas, но няма!
+ </canvas>
+</body>
diff --git a/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/webgl-fmi.js b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/webgl-fmi.js new file mode 100644 index 0000000..62bfda8 --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/02-Practice-17.10.2022/webgl-fmi.js @@ -0,0 +1,78 @@ +
+var gl; // глобален WebGL контекст
+var glprog; // глобална GLSL програма
+
+// брой байтове в един WebGL FLOAT (трябва да са 4 байта)
+var FLOATS = Float32Array.BYTES_PER_ELEMENT;
+
+// връща WebGL контекст, свързан с HTML елемент с даден id
+function getContext(id)
+{
+ var canvas = document.getElementById(id);
+ if (!canvas)
+ {
+ alert("Искаме canvas с id=\""+id+"\", а няма!");
+ return null;
+ }
+
+ var context = canvas.getContext("webgl");
+ if (!context)
+ {
+ context = canvas.getContext("experimental-webgl");
+ }
+
+ if (!context)
+ {
+ alert("Искаме WebGL контекст, а няма!");
+ }
+
+ return context;
+}
+
+// връща компилиран шейдър
+function getShader(id,type)
+{
+ var source = document.getElementById(id).text;
+ var shader = gl.createShader(type);
+
+ gl.shaderSource(shader,source);
+ gl.compileShader(shader);
+ if (!gl.getShaderParameter(shader,gl.COMPILE_STATUS))
+ {
+ alert(gl.getShaderInfoLog(shader));
+ return null;
+ }
+
+ return shader;
+}
+
+
+// връща готова програма
+function getProgram(idv,idf)
+{
+ var vShader = getShader(idv,gl.VERTEX_SHADER);
+ var fShader = getShader(idf,gl.FRAGMENT_SHADER);
+
+ if (!vShader || !fShader) {return null;}
+
+ var shaderProgram = gl.createProgram();
+ gl.attachShader(shaderProgram,vShader);
+ gl.attachShader(shaderProgram,fShader);
+ gl.linkProgram(shaderProgram);
+
+ if (!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS))
+ {
+ alert(gl.getProgramInfoLog(shaderProgram));
+ return null;
+ }
+
+ gl.useProgram(shaderProgram);
+ return shaderProgram;
+}
+
+
+// случайно дробно число в интервал
+function random(a,b)
+{
+ return a+(b-a)*Math.random();
+}
\ No newline at end of file |
