diff options
| Commit | e607fcc649e1fb5f4a13b5c5ad81207843b4a96f (patch) | |
|---|---|---|
| Author | 2022-10-23 09:32:21 +0300 | |
| Committer | 2022-10-23 09:32:21 +0300 | |
| Files | cd08dda2d312358d7ebea6d46e86f465225d64f0 | |
| uni-projects-e607fcc649e1fb5f4a13b5c5ad81207843b4a96f.tar uni-projects-e607fcc649e1fb5f4a13b5c5ad81207843b4a96f.tar.gz uni-projects-e607fcc649e1fb5f4a13b5c5ad81207843b4a96f.zip | ||
| Parent | bd034236fc1d3b1b07b5f9f07312ebee162abfe4 (diff) | |
[WGL/HW02] Reworked variable names and placements, added comments, added random function
1 files changed, 45 insertions, 21 deletions
| -rw-r--r-- | Year 2/Computer Graphics with WebGL/Homework 02 - The rug/Homework.html | 66 |
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 index 23d72fb..ea2dd2c 100644 --- 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 @@ -45,27 +45,49 @@ // от тук до края на функцията да се сложи код,
// който създава и рисува m цветни вълнообразни ленти
- const resolution = 50;
- const lineAreaWidths = 2 / 11;
- const separatorWidth = 0.02;
- const maxAmplitude = lineAreaWidths / 2.1 - separatorWidth;
- const step = 2 / resolution;
+
+ var verticalSegments = 50;
+ var separatorWidth = 0.02;
+ var contourColor = [0, 0, 0];
+ var frequencyRange = [0.8, 3.2];
+ var redRange = [0.5, 1];
+ var greenRange = [0.5, 1];
+ var blueRange = [0.5, 0.9];
+
+ // Може би ще е по-добре тази функция да се изведе в webgl-fmi.js
+ function random(range) {
+ return Math.random() * (range[1] - range[0]) + range[0];
+ }
+
+ // 2.07 за да може най-десния контур (който се "скрива" от дясната граница на рисувателната повърхност) да е по-скрит
+ var stripeWidth = 2.07 / m;
+ var maxAmplitude = stripeWidth / 2 - separatorWidth;
+ var yStep = 2 / verticalSegments;
+
var prevFrequency = 0;
- for (var x = -1; x < 1.0001; x += lineAreaWidths) {
- var frequency = Math.random() * 2.4 + 0.8; // [0.8, 3.2]
- var colR = Math.random() * 0.6 + 0.5;
- var colG = Math.random() * 0.6 + 0.5;
- var colB = Math.random() * 0.57 + 0.5;
- for (var y = 1; y > -1.0001; y -= step) {
+ for (var x = -1; x < 1.0001; x += stripeWidth) {
+ var frequency = random(frequencyRange);
+ var colR = random(redRange);
+ var colG = random(greenRange);
+ var colB = random(blueRange);
+
+ // Цветна ивица
+ for (var y = 1; y > -1.0001; y -= yStep) { // -1.0001 за да има със сигурност точка на дъното на рисувателната повърхност
+ // Точка от лявата страна на ивицата
data.push(x + maxAmplitude * Math.sin(Math.PI * (y + 1) * prevFrequency), y, colR, colG, colB);
- data.push(x + lineAreaWidths - separatorWidth + maxAmplitude * Math.sin(Math.PI * (y + 1) * frequency), y, colR, colG, colB);
+ // Точка от дясната страна на ивицата
+ data.push(x + maxAmplitude * Math.sin(Math.PI * (y + 1) * frequency) + stripeWidth - separatorWidth, y, colR, colG, colB);
}
- for (var y = 1; y > -1.0001; y -= step) {
- data.push(x + maxAmplitude * Math.sin(Math.PI * (y + 1) * prevFrequency), y, 0, 0, 0);
+ // Лява контурна линия (изчислява се точно както точките от лявата страна на ивицата)
+ for (var y = 1; y > -1.0001; y -= yStep) {
+ data.push(x + maxAmplitude * Math.sin(Math.PI * (y + 1) * prevFrequency), y);
+ data = data.concat(contourColor);
}
- for (var y = 1; y > -1.0001; y -= step) {
- data.push(x + lineAreaWidths - separatorWidth + maxAmplitude * Math.sin(Math.PI * (y + 1) * frequency), y, 0, 0, 0);
+ // Дясна контурна линия (изчислява се точно както точките от дясната страна на ивицата)
+ for (var y = 1; y > -1.0001; y -= yStep) {
+ data.push(x + maxAmplitude * Math.sin(Math.PI * (y + 1) * frequency) + stripeWidth - separatorWidth, y);
+ data = data.concat(contourColor);
}
prevFrequency = frequency;
}
@@ -73,17 +95,19 @@ 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.vertexAttribPointer(aRGB, 3, gl.FLOAT, false, 5 * 4, 2 * 4);
gl.enableVertexAttribArray(aRGB);
var acc = 0;
for (var i = 0; i < m; i++) {
- gl.drawArrays(gl.TRIANGLE_STRIP, acc, 2 * resolution + 2);
- gl.drawArrays(gl.LINE_STRIP, acc + 2 * resolution + 2, resolution + 1);
- gl.drawArrays(gl.LINE_STRIP, acc + 3 * resolution + 3, resolution + 1);
- acc += 4 * resolution + 4;
+ gl.drawArrays(gl.TRIANGLE_STRIP, acc , 2 * verticalSegments + 2);
+ gl.drawArrays(gl.LINE_STRIP , acc += 2 * verticalSegments + 2, verticalSegments + 1);
+ gl.drawArrays(gl.LINE_STRIP , acc += verticalSegments + 1 , verticalSegments + 1);
+ acc += verticalSegments + 1;
}
}
</script>
|