GregoireHebert/lissajous.html

## 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>