GMartigny/infinity.html

## infinity.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Infinity</title>
</head>
<body>
<script type="module">
    import gif from "https://unpkg.com/@pencil.js/gif/dist/gif.esm.js";
    import { OffScreenCanvas, Square, Color } from "https://unpkg.com/pencil.js/dist/pencil.esm.js";

    const nbFrames = 300;

    const scene = new OffScreenCanvas(600, 300, {
        fill: "#f5f5f5",
    });

    const fill = new Color(0, 0, 1);
    const elms = [];
    const options = {
        origin: "center",
    }
    for (let i = 0; i < 20; ++i) {
        const size = elms[i - 1] ? elms[i - 1].size * 0.92 : 80;
        const elm = new Square(undefined, size, options);
        elms.push(elm);
    }

    const { sin, cos, PI } = Math;
    const { width, height } = scene;
    const setOptions = (e, x) => {
        e.options.rotation = x;
        e.options.fill = fill.clone().hue(x).saturation(0.7);
        e.position.set(
            (width / 2) + (cos(x * PI * 2) * width / 2.5),
            (height / 2) + (sin(x * PI * 4) * height / 4),
        );
    }

    scene
        .add(...elms.slice().reverse())
        .on("draw", () => {
            const x = scene.frameCount / nbFrames;
            const margin = 0.05;
            elms.forEach((e, i) => setOptions(e, x - (margin * i)));
        }, true);

    console.log("Working ...");
    console.time("gif");
    gif(scene, nbFrames).then((img) => {
        console.timeEnd("gif");
        document.body.appendChild(img);
    });
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Infinity</title>
	</head>
	<body>
	<script type="module">
	import gif from "https://unpkg.com/@pencil.js/gif/dist/gif.esm.js";
	import { OffScreenCanvas, Square, Color } from "https://unpkg.com/pencil.js/dist/pencil.esm.js";

	const nbFrames = 300;

	const scene = new OffScreenCanvas(600, 300, {
	fill: "#f5f5f5",
	});

	const fill = new Color(0, 0, 1);
	const elms = [];
	const options = {
	origin: "center",
	}
	for (let i = 0; i < 20; ++i) {
	const size = elms[i - 1] ? elms[i - 1].size * 0.92 : 80;
	const elm = new Square(undefined, size, options);
	elms.push(elm);
	}

	const { sin, cos, PI } = Math;
	const { width, height } = scene;
	const setOptions = (e, x) => {
	e.options.rotation = x;
	e.options.fill = fill.clone().hue(x).saturation(0.7);
	e.position.set(
	(width / 2) + (cos(x * PI * 2) * width / 2.5),
	(height / 2) + (sin(x * PI * 4) * height / 4),
	);
	}

	scene
	.add(...elms.slice().reverse())
	.on("draw", () => {
	const x = scene.frameCount / nbFrames;
	const margin = 0.05;
	elms.forEach((e, i) => setOptions(e, x - (margin * i)));
	}, true);

	console.log("Working ...");
	console.time("gif");
	gif(scene, nbFrames).then((img) => {
	console.timeEnd("gif");
	document.body.appendChild(img);
	});
	</script>
	</body>
	</html>