diff options
[WGL/P03] Added work from practicum
1 files changed, 90 insertions, 0 deletions
| -rw-r--r-- | Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/Problem 0301.html | 90 |
diff --git a/Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/Problem 0301.html b/Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/Problem 0301.html new file mode 100644 index 0000000..a7f7e6f --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/03-Practice-24.10.2022/Problem 0301.html @@ -0,0 +1,90 @@ +<!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*vec2(1.0/1.5,1),0,1);
+ }
+ </script>
+
+ <script id="fshader" type="x-shader/x-fragment">
+ precision mediump float;
+ uniform vec3 uColor;
+ void main( )
+ {
+ gl_FragColor = vec4(uColor,1);
+ }
+ </script>
+
+ <script>
+ function start( )
+ {
+ gl = getContext("picasso");
+ glprog = getProgram("vshader","fshader");
+
+ aXY = gl.getAttribLocation(glprog,"aXY");
+ uColor = gl.getUniformLocation(glprog,"uColor");
+
+ gl.clearColor(1,1,1,1);
+ gl.clear(gl.COLOR_BUFFER_BIT);
+
+ // точки по ролката
+ var n = 360;
+
+ // създаване на окръжности
+ var data = [ ];
+ for(var i=0; i<n; i++)
+ data.push(Math.cos(2.0*Math.PI*i/n),Math.sin(2.0*Math.PI*i/n));
+
+ const innerCircleR = 0.14;
+ for (var i = 0; i < n; i++)
+ data.push(Math.cos(2 * Math.PI * i / n) * innerCircleR, Math.sin(2 * Math.PI * i / n) * innerCircleR);
+
+ const holes = 6;
+ const innerR = 0.25;
+ const outerR = 0.85;
+ const spacingDegr = 22;
+ var degrStep = n / holes;
+ for (var hole = 0; hole < holes; hole++) {
+ var maxDegr = (hole + 1) * degrStep - spacingDegr;
+ for (var i = hole * degrStep; i < maxDegr; i++)
+ data.push(Math.cos(2 * Math.PI * i / n) * outerR, Math.sin(2 * Math.PI * i / n) * outerR);
+ for (var i = maxDegr; i > hole * degrStep; i--)
+ data.push(Math.cos(2 * Math.PI * i / n) * innerR, Math.sin(2 * Math.PI * i / n) * innerR);
+ }
+
+ var buf = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER,buf);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+
+ gl.uniform3f(uColor,0.3,0.7,0.2);
+ gl.enableVertexAttribArray(aXY);
+ gl.vertexAttribPointer(aXY,2,gl.FLOAT,false,0,0);
+
+ gl.drawArrays(gl.LINE_LOOP,0,n);
+ gl.drawArrays(gl.LINE_LOOP, n, n);
+ for (var i = 0; i < holes; i++)
+ gl.drawArrays(gl.LINE_LOOP, 2 * n + i * (degrStep - spacingDegr) * 2, (degrStep - spacingDegr) * 2);
+ }
+ </script>
+</head>
+
+<body onload="start()">
+ <h2>Филмова ролка</h2>
+
+ <noscript>
+ Искаме JavaScript, но няма!
+ </noscript>
+
+ <canvas id="picasso" width="600" height="400" style="border: solid;">
+ Искаме canvas, но няма!
+ </canvas>
+</body>
|