kaka.farm

commit 7adacf3f0bea89d8d87f1de1ab4e173c9e1a0d7a
parent 2d8279ba6932628c3cc2b716b74ae469ebce5a2f
Author: Yuval Langer <yuval.langer@gmail.com>
Date:   Sat, 19 Mar 2022 22:18:45 +0200

Make specific functions for polygons step and color step. Also put a few parameters as variables at the top.

Diffstat:
M
html/the-dancing-polygon-screensaver/main.js
 | 
63
+++++++++++++++++++++++++++++++++++++++++++--------------------

1 file changed, 43 insertions(+), 20 deletions(-)
diff --git a/html/the-dancing-polygon-screensaver/main.js b/html/the-dancing-polygon-screensaver/main.js
@@ -13,6 +13,9 @@ Math.TAU = 2 * Math.PI;
 	let hsv_values = [[0, 1, 0.7]];
 	let color_wheel_velocity = 0.01;
 
+	let wanted_number_of_polygons = 50;
+	let pixels_per_step = 10;
+
 	function hsv_to_rgb(hue, saturation, value) {
 		// https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB
 		// H in [0, 1] (position on the color wheel)
@@ -101,40 +104,42 @@ Math.TAU = 2 * Math.PI;
 		return direction_vector;
 	}
 
-	function step(timestamp) {
-		if (start_time === undefined) {
-			start_time = timestamp;
+	function step_polygons() {
+		if (polygons_vertices.length >= wanted_number_of_polygons) {
+			// Remove oldest polygon, the one at position 0.
+			polygons_vertices = polygons_vertices.slice(1, polygons_vertices.length);
 		}
 
-		elapsed_time = timestamp - start_time;
+		// Get the newest polygon at position n-1.
+		let current_polygon_vertices = polygons_vertices[polygons_vertices.length - 1];
 
-		delta_time = timestamp - previous_timestamp;
+		// Clone our latest polygon.
+		let new_polygon_vertices = current_polygon_vertices.map(vertex => vertex.map(axis => axis));
 
-		let canvas = document.getElementById('canvas');
-		let ctx = canvas.getContext('2d');
+		move_polygon(new_polygon_vertices, polygon_velocity);
 
-		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		polygons_vertices.push(new_polygon_vertices);
+	}
 
-		if (polygons_vertices.length >= 50) {
-			// Remove oldest polygon, the one at position 0.
-			polygons_vertices = polygons_vertices.slice(1, polygons_vertices.length);
+	function step_hsv_values() {
+		if (hsv_values.length >= wanted_number_of_polygons) {
+			// Remove oldest hsv value, the one at position 0.
 			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];
+
+		// Get the newest hsv_value at position n-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));
+		// Clone.
 		let new_hsv_value = current_hsv_value.map(axis => axis);
 
-		move_polygon(new_polygon_vertices, polygon_velocity);
+		// Spin the hue around in the color wheel.
 		new_hsv_value[0] = (new_hsv_value[0] + color_wheel_velocity) % 1;
 
-		polygons_vertices.push(new_polygon_vertices);
 		hsv_values.push(new_hsv_value);
+	}
 
+	function draw_polygons(ctx, polygons_vertices, hsv_values) {
 		for (let current_polygon = 0; current_polygon < polygons_vertices.length; current_polygon++) {
 			let rgb = hsv_to_rgb(
 				hsv_values[current_polygon][0],
@@ -143,8 +148,26 @@ Math.TAU = 2 * Math.PI;
 			).map(x => 255 * x);
 			draw_polygon(ctx, polygons_vertices[current_polygon], rgb);
 		}
+	}
+
+	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);
+
+		step_polygons();
+		step_hsv_values();
 
-		console.info(polygons_vertices);
+		draw_polygons(ctx, polygons_vertices, hsv_values);
 
 		previous_timestamp = timestamp;
 
@@ -165,7 +188,7 @@ Math.TAU = 2 * Math.PI;
 			uniform_random_direction(),
 			uniform_random_direction(),
 			uniform_random_direction(),
-		].map(vertex => vertex.map(axis => 10 * axis));
+		].map(vertex => vertex.map(axis => pixels_per_step * axis));
 
 		window.requestAnimationFrame(step);
 	}