GregoireHebert · November 25, 2021 09:26 · GregoireHebert · Nov 22, 2018
diff --git a/lissajous.html b/lissajous.html
 <!doctype html>
 <html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Table de courbes de Lissajous">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Table de courbes de Lissajous</title>
        <style type="text/css">
        	body { background-color: black; }
        </style>
    </head>
    <body>
    	<canvas id="lissajous" width="800" height="800"></canvas>
        
        <script type="text/javascript">
        	const canvas = document.getElementById('lissajous');
 			const canvasWidth = canvas.width;
 			const canvasHeight = canvas.height;
 			const ctx = canvas.getContext("2d");
 			
 			ctx.strokeStyle = '#ffffff';
 			ctx.fillStyle = '#ffffff';

 			let angle = 0.0;
 			let diameter = 80;
 			let cols = canvasWidth / diameter - 1;
 			let rows = canvasHeight / diameter - 1;
 			let r = diameter / 2;

 			let curves = [[]];

 			class curve {
 				constructor() {
 					this.points = [];
 					this.current = {x: 0, y: 0};
 				}

 				reset () {
 					this.points = [];
 				}
  
 				drawPoints () {
 					for (var i = 1; i < this.points.length-2; i++) {
 						ctx.fillRect(this.points[i].x, this.points[i].y, 1, 1);
 				   	}
 				}

 				setX (x) { this.current.x = x; }
 				setY (y) { this.current.y = y; }

 				addPoint () {
 					this.points.push(this.current);
 					this.current = {x: 0, y: 0};
 				}
 			}

 			for (let i=0; i<cols; i++) {
 				curves[i] = [];
 				for (let j=0; j<rows; j++) {
 					curves[i][j] = new curve();
 				}
 			}

 			function drawPaths () {
 				for (let i=0; i<cols; i++) {
 					for (let j=0; j<rows; j++) {
 						console.log(i, j);
 						curves[i][j].addPoint();
 						curves[i][j].drawPoints();
 					}
 				}
 			}

 			function drawEllipse (x, y) {
 				ctx.beginPath();
 				ctx.arc(x, y, r, 0, 2 * Math.PI, false);
 				ctx.stroke();
 			}

 			function drawPosition (x, y) {
 			  	ctx.beginPath();
 				ctx.arc(x, y, 4, 0, 2 * Math.PI, true);
 				ctx.fill();
 			}

 			function drawCols () {
 				for (let i=0; i<cols; i++) {
 					let cx = diameter+(r)+diameter*i;
 					let cy = r;

 					drawEllipse(cx, cy);
 					let x = r * Math.cos(angle * (i+1) - (Math.PI / 2));
 					let y = r * Math.sin(angle * (i+1) - (Math.PI / 2));

 					drawPosition(cx+x, cy+y);

 					ctx.beginPath();
 					ctx.moveTo(cx+x, 0);
 					ctx.lineTo(cx+x, canvasHeight);
 					ctx.stroke();

 					for (let j=0; j<rows; j++) {
 						curves[j][i].setX(cx + x);
 					}
 				}
 			}

 			function drawRows () {
 				for (let j=0; j<rows; j++) {
 					let cx = r ;
 					let cy = diameter+(r)+diameter*j;

 					drawEllipse(cx, cy);
 					let x = r * Math.cos(angle * (j+1) - (Math.PI / 2));
 					let y = r * Math.sin(angle * (j+1) - (Math.PI / 2));

 					drawPosition(cx+x, cy+y);

 					ctx.beginPath();
 					ctx.moveTo(0, cy+y);
 					ctx.lineTo(canvasWidth, cy+y);
 					ctx.stroke();

 					for (let i=0; i<cols; i++) {
 						curves[j][i].setY(cy + y);
 					}
 				}
 			}

 			setInterval(() => {
 				ctx.clearRect(0,0,canvasWidth,canvasHeight);
 				drawCols();
 				drawRows();
 				drawPaths();
 				angle += 0.01;

 				if (angle > Math.PI*2) {
 					for (let i=0; i<cols; i++) {
 						for (let j=0; j<rows; j++) {
 							curves[i][j].reset()
 						}
 					}

 					angle = 0;
 				}

 			}, 20);

        </script>
    </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="description" content="Table de courbes de Lissajous">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Table de courbes de Lissajous</title>
	<style type="text/css">
	body { background-color: black; }
	</style>
	</head>
	<body>
	<canvas id="lissajous" width="800" height="800"></canvas>

	<script type="text/javascript">
	const canvas = document.getElementById('lissajous');
	const canvasWidth = canvas.width;
	const canvasHeight = canvas.height;
	const ctx = canvas.getContext("2d");

	ctx.strokeStyle = '#ffffff';
	ctx.fillStyle = '#ffffff';

	let angle = 0.0;
	let diameter = 80;
	let cols = canvasWidth / diameter - 1;
	let rows = canvasHeight / diameter - 1;
	let r = diameter / 2;

	let curves = [[]];

	class curve {
	constructor() {
	this.points = [];
	this.current = {x: 0, y: 0};
	}

	reset () {
	this.points = [];
	}

	drawPoints () {
	for (var i = 1; i < this.points.length-2; i++) {
	ctx.fillRect(this.points[i].x, this.points[i].y, 1, 1);
	}
	}

	setX (x) { this.current.x = x; }
	setY (y) { this.current.y = y; }

	addPoint () {
	this.points.push(this.current);
	this.current = {x: 0, y: 0};
	}
	}

	for (let i=0; i<cols; i++) {
	curves[i] = [];
	for (let j=0; j<rows; j++) {
	curves[i][j] = new curve();
	}
	}

	function drawPaths () {
	for (let i=0; i<cols; i++) {
	for (let j=0; j<rows; j++) {
	console.log(i, j);
	curves[i][j].addPoint();
	curves[i][j].drawPoints();
	}
	}
	}

	function drawEllipse (x, y) {
	ctx.beginPath();
	ctx.arc(x, y, r, 0, 2 * Math.PI, false);
	ctx.stroke();
	}

	function drawPosition (x, y) {
	ctx.beginPath();
	ctx.arc(x, y, 4, 0, 2 * Math.PI, true);
	ctx.fill();
	}

	function drawCols () {
	for (let i=0; i<cols; i++) {
	let cx = diameter+(r)+diameter*i;
	let cy = r;

	drawEllipse(cx, cy);
	let x = r * Math.cos(angle * (i+1) - (Math.PI / 2));
	let y = r * Math.sin(angle * (i+1) - (Math.PI / 2));

	drawPosition(cx+x, cy+y);

	ctx.beginPath();
	ctx.moveTo(cx+x, 0);
	ctx.lineTo(cx+x, canvasHeight);
	ctx.stroke();

	for (let j=0; j<rows; j++) {
	curves[j][i].setX(cx + x);
	}
	}
	}

	function drawRows () {
	for (let j=0; j<rows; j++) {
	let cx = r ;
	let cy = diameter+(r)+diameter*j;

	drawEllipse(cx, cy);
	let x = r * Math.cos(angle * (j+1) - (Math.PI / 2));
	let y = r * Math.sin(angle * (j+1) - (Math.PI / 2));

	drawPosition(cx+x, cy+y);

	ctx.beginPath();
	ctx.moveTo(0, cy+y);
	ctx.lineTo(canvasWidth, cy+y);
	ctx.stroke();

	for (let i=0; i<cols; i++) {
	curves[j][i].setY(cy + y);
	}
	}
	}

	setInterval(() => {
	ctx.clearRect(0,0,canvasWidth,canvasHeight);
	drawCols();
	drawRows();
	drawPaths();
	angle += 0.01;

	if (angle > Math.PI*2) {
	for (let i=0; i<cols; i++) {
	for (let j=0; j<rows; j++) {
	curves[i][j].reset()
	}
	}

	angle = 0;
	}

	}, 20);

	</script>
	</body>
	</html>