commit be9cf38ae65cc7e9521b25e6a3427aba22d0c3e4
parent 7b90122b905fd56a7dbcbbf72d297ac8373a2451
Author: Yuval Langer <yuval.langer@gmail.com>
Date: Sat, 19 Mar 2022 20:38:35 +0200
Add a trail.
Diffstat:
1 file changed, 51 insertions(+), 19 deletions(-)
diff --git a/html/the-dancing-polygon-screensaver/main.js b/html/the-dancing-polygon-screensaver/main.js
@@ -3,11 +3,15 @@
Math.TAU = 2 * Math.PI;
(function() {
- let polygon_vertices = [];
+ let start_time;
+ let elapsed_time;
+ let previous_timestamp;
+
+ let polygons_vertices = [];
let polygon_velocity = [];
- let hsv = [0, 1, 0.7];
- let color_wheel_velocity = 0.001;
+ let hsv_values = [[0, 1, 0.7]];
+ let color_wheel_velocity = 0.01;
function hsv_to_rgb(hue, saturation, value) {
// https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB
@@ -73,11 +77,9 @@ Math.TAU = 2 * Math.PI;
}
};
- function draw_polygon(ctx, polygon_vertices) {
+ function draw_polygon(ctx, polygon_vertices, rgb) {
ctx.beginPath();
- let rgb = hsv_to_rgb(hsv[0], hsv[1], hsv[2]).map(x => 255 * x);
-
ctx.strokeStyle = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
ctx.moveTo(polygon_vertices[0][0], polygon_vertices[0][1]);
@@ -99,19 +101,53 @@ Math.TAU = 2 * Math.PI;
return direction_vector;
}
- function step(e) {
+ function step(timestamp) {
+ if (start_time === undefined) {
+ start_time = timestamp;
+ }
+
+ elapsed_time = timestamp - start_time;
+
+ delta_time = timestamp - previous_timestamp;
+
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
-
ctx.clearRect(0, 0, canvas.width, canvas.height);
- move_polygon(polygon_vertices, polygon_velocity);
+ if (polygons_vertices.length >= 50) {
+ // Remove oldest polygon, the one at position 0.
+ polygons_vertices = polygons_vertices.slice(1, polygons_vertices.length);
+ hsv_values = hsv_values.slice(1, hsv_values.length);
+ }
+
+ // Get the newest polygon at position n-1.
+ let current_polygon_vertices = polygons_vertices[polygons_vertices.length - 1];
+ let current_hsv_value = hsv_values[hsv_values.length - 1];
+
+ // Clone our latest polygon.
+ let new_polygon_vertices = current_polygon_vertices.map(vertex => vertex.map(axis => axis));
+ let new_hsv_value = current_hsv_value.map(axis => axis);
+
+ move_polygon(new_polygon_vertices, polygon_velocity);
+ new_hsv_value[0] = (new_hsv_value[0] + color_wheel_velocity) % 1;
+
+ polygons_vertices.push(new_polygon_vertices);
+ hsv_values.push(new_hsv_value);
+
+ for (let current_polygon = 0; current_polygon < polygons_vertices.length; current_polygon++) {
+ let rgb = hsv_to_rgb(
+ hsv_values[current_polygon][0],
+ hsv_values[current_polygon][1],
+ hsv_values[current_polygon][2],
+ ).map(x => 255 * x);
+ draw_polygon(ctx, polygons_vertices[current_polygon], rgb);
+ }
+
+ console.info(polygons_vertices);
- draw_polygon(ctx, polygon_vertices);
+ previous_timestamp = timestamp;
- hsv[0] = (hsv[0] + color_wheel_velocity) % 1;
-
window.requestAnimationFrame(step)
}
@@ -119,21 +155,17 @@ Math.TAU = 2 * Math.PI;
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
- polygon_vertices = [
+ polygons_vertices = [[
[canvas.width / 2, canvas.height / 3],
[2 * canvas.width / 3, 2 * canvas.height / 3],
[canvas.width / 3, 2 * canvas.height / 3],
- ];
+ ]];
polygon_velocity = [
uniform_random_direction(),
uniform_random_direction(),
uniform_random_direction(),
- ];
-
- draw_polygon(ctx, polygon_vertices);
-
- move_polygon(polygon_vertices, polygon_velocity);
+ ].map(vertex => vertex.map(axis => 10 * axis));
window.requestAnimationFrame(step);
}