diff options
[WGL/HW02] Implemented randomly colored wavy stripes
1 files changed, 94 insertions, 0 deletions
| -rw-r--r-- | Year 2/Computer Graphics with WebGL/Homework 02 - The rug/Homework.html | 94 |
diff --git a/Year 2/Computer Graphics with WebGL/Homework 02 - The rug/Homework.html b/Year 2/Computer Graphics with WebGL/Homework 02 - The rug/Homework.html new file mode 100644 index 0000000..e141f00 --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/Homework 02 - The rug/Homework.html @@ -0,0 +1,94 @@ +<!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);
+
+ // брой ленти m
+ var m = 11;
+ var data = [];
+
+ // от тук до края на функцията да се сложи код,
+ // който създава и рисува m цветни вълнообразни ленти
+ const aspectRatio = 600 / 400;
+ const resolution = 50;
+ const lineAreaWidths = 2 / 11;
+ const maxAmplitude = lineAreaWidths / 2.1;
+
+ const step = 2 / resolution;
+ var prevFrequency = 0;
+ for (var x = -1; x < 1; x += lineAreaWidths) {
+ var frequency = Math.random() * 2.4 + 0.8; // [0.8, 3.2]
+ var colR = Math.random() + 0.2;
+ var colG = Math.random() + 0.2;
+ var colB = Math.random() + 0.2;
+ for (var y = 1; y > -1.0001; y -= step) {
+ data.push((x + maxAmplitude * Math.sin(Math.PI * (y + 1) * prevFrequency)), y, colR, colG, colB);
+ data.push((x + lineAreaWidths + maxAmplitude * Math.sin(Math.PI * (y + 1) * frequency)), y, colR, colG, colB);
+ }
+ prevFrequency = frequency;
+ }
+
+ 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, 5 * 4, 0);
+ gl.vertexAttribPointer(aRGB, 3, gl.FLOAT, false, 5 * 4, 2 * 4);
+ gl.enableVertexAttribArray(aXY);
+ gl.enableVertexAttribArray(aRGB);
+
+ var acc = 0;
+ for (var i = 0; i < m; i++) {
+ gl.drawArrays(gl.TRIANGLE_STRIP, acc, 2 * resolution + 2);
+ acc += 2 * resolution + 2;
+ }
+ }
+ </script>
+</head>
+
+<body onload="start()">
+ <h2>Чергата</h2>
+
+ <noscript>
+ Искаме JavaScript, но няма!
+ </noscript>
+
+ <canvas id="picasso" width="600" height="400" style="border: solid;">
+ Искаме canvas, но няма!
+ </canvas>
+</body>
|