Add speed modulation

Author: laurentbouquin

src/code/js/animation.js

@@ -23,15 +23,15 @@ function generateAnimations({ element }) {
 	} else {
 		for (let elem of pathElements) {
 			// console.log('animate', elem);
-			switch (elem.type) {
+			switch (elem.element.type) {
 				case 'userInput':
-					generateUserInputAnimation(elem);
+					generateUserInputAnimation(elem.element);
 					break;
 				case 'lut':
-					generateLUTAnimation(elem);
+					generateLUTAnimation(elem.element);
 					break;
 				case 'DFF':
-					generateDFFAnimation(elem);
+					generateDFFAnimation(elem.element);
 					break;
 
 				default:
@@ -99,7 +99,7 @@ async function move(element, distances) {
 		if (index >= steps.length) return;
 
 		element.animate([steps[index]], {
-			duration: speedValue,
+			duration: speedValue / speedLevelsInt[currentSpeedIndex],
 			fill: 'forwards'
 		}).onfinish = () => {
 			// Apply styles to maintain position
@@ -150,9 +150,9 @@ async function animatePath(i) {
     }
 
     if (isPaused) return;
-    
-    let type = pathElements[i].type;
-    let id = pathElements[i].id;
+    let type = pathElements[i].element.type;
+    let id = pathElements[i].element.id;
+	console.log('type :', type, 'id :', id);
     if (type == "DFF") type = "ff";
 
     let elem = document.getElementById(`animation-${type}-${id}`);
@@ -167,10 +167,13 @@ async function animatePath(i) {
     let wiresLength = wire4 != null 
         ? (wire5 != null ? 5 : 4)
         : 3;
+
+	speedValue = pathElements[i].Timing != null ? pathElements[i].Timing * 5 / wiresLength: 2000;
 
     animateElement(elem, [wire1, wire2, wire3, wire4, wire5]);
 
     setTimeout(() => {
+		console.log('element', pathElements[i]);
         if (i < pathElements.length - 2) {
             elem.remove();
             generateAnimations({ element: elem });
@@ -181,5 +184,5 @@ async function animatePath(i) {
             play.firstChild.className = 'fa-solid top-bar fa-circle-play';
             isPaused = true;
         }
-    }, wiresLength * speedValue);
+    }, speedValue * wiresLength / speedLevelsInt[currentSpeedIndex]);
 }

src/code/js/parse-json-to-data.js

@@ -1,8 +1,12 @@
 function sortElements(luts, flipFlops, ios, connections) {
-	let UI = connections.find(connection => { return connection.Input.type === 'userInput' });
+	let timing;
+	let UI = connections.find(connection => {
+		timing = connection.Timing;
+		return connection.Input.type === 'userInput'
+	});
 	let UIIndex = connections.indexOf(UI);
 
-	pathElements.push(UI.Input);
+	pathElements.push({ element: UI.Input, Timing: timing });
 
 	displayInput(UI.Input.type);
 	let currentElement = connections[UIIndex].Output;
@@ -23,11 +27,12 @@ function sortElements(luts, flipFlops, ios, connections) {
 		let ff = flipFlops.find(ff => { return ff.id.toString() === currentElement.id });
 		displayFlipFlop(ff.id, ff.connections[0].id, ff.connections[1].id, ff.connections[2].id);
 	}
-	
-	pathElements.push(currentElement);
+
+	pathElements.push({ element: currentElement, Timing: timing });
 	if (connections.find(connection => connection.Output.type === 'userOutput')) {
 		while (currentElement.type != 'userOutput') {
 			let nextElement = connections.find(connection => {
+				timing = connection.Timing;
 				return (connection.Input.type === currentElement.type && connection.Input.id === currentElement.id)
 			}).Output;
 
@@ -45,7 +50,7 @@ function sortElements(luts, flipFlops, ios, connections) {
 			}
 
 			currentElement = nextElement;
-			pathElements.push(currentElement);
+			pathElements.push({ element: currentElement, Timing: timing });
 		}
 	}
 

src/code/js/variables.js

@@ -10,9 +10,10 @@ const zoomLevels = ["25%", "50%", "75%", "100%", "125%", "150%", "175%", "200%"]
 let currentZoomIndex= 3;
 
 const speedLevels = ["x0.5", "x1", "x2", "x4", "x8", "x16", "x32"];
+const speedLevelsInt = [.5, 1, 2, 4, 8, 16, 32];
 let currentSpeedIndex= 1;
 
-const speedValue = 200;
+let speedValue;
 
 let currentTheme = "dark";