GMartigny/equalizer.html

## equalizer.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Looping gifs</title>
</head>
<body>
<script src="https://unpkg.com/pencil.js"></script>
<script src="https://unpkg.com/@pencil.js/gif"></script>
<script src="https://unpkg.com/tumult/dist/tumult.min.js"></script>
<script>
    const { Perlin3 } = tumult;
    const { OffScreenCanvas, Container, Rectangle, LinearGradient, gif, Math: M, Position } = Pencil;
    const scene = new OffScreenCanvas(568, 300);

    const noise = new Perlin3();

    const { width, height } = scene;

    const synthWidth = width * 0.8;
    const synthHeight = height * 0.6;
    const nbBars = 30;
    const margin = 4;
    const synth = new Container([(width - synthWidth) / 2, (height - synthHeight) / 2 + synthHeight], {
        scale: [1, -1],
    });

    const barsWidth = Math.round(synthWidth / nbBars);
    const barsOptions = {
        fill: new LinearGradient(undefined, [0, synthHeight], {
            0: "#15c20a",
            1: "#da0d19",
        }),
    };
    const bars = [];
    for (let i = 0; i < nbBars; ++i) {
        bars.push(new Rectangle([Math.floor(i * barsWidth), 0], barsWidth - margin, 0, barsOptions));
    }
    synth.add(...bars, new Rectangle([0, -margin - 4], synthWidth, 4, {
        fill: "#333",
    }));
    scene.add(synth);

    const nbFrame = 50;

    const norm = new Position(0, 1);
    synth.on("draw", () => {
        const pos = norm.clone().rotate(synth.frameCount / nbFrame);
        const coords = [pos.x + 10, pos.y + 10];
        bars.forEach((bar, i) => {
            const value = noise.octavate(2, i / 6, ...coords);
            const corrected = M.map(value, -0.7, 0.7, 0, 1) ** 2;
            bar.height = M.lerp(bar.height, corrected * synthHeight, 1);
        });
    }, true);

    console.log("Working ...");
    console.time("gif");
    gif(scene, nbFrame, {
        speed: 0.15,
        alphaThreshold: 1e-5,
    }).then((img) => {
        console.timeEnd("gif");
        document.body.appendChild(img);
    });
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Looping gifs</title>
	</head>
	<body>
	<script src="https://unpkg.com/pencil.js"></script>
	<script src="https://unpkg.com/@pencil.js/gif"></script>
	<script src="https://unpkg.com/tumult/dist/tumult.min.js"></script>
	<script>
	const { Perlin3 } = tumult;
	const { OffScreenCanvas, Container, Rectangle, LinearGradient, gif, Math: M, Position } = Pencil;
	const scene = new OffScreenCanvas(568, 300);

	const noise = new Perlin3();

	const { width, height } = scene;

	const synthWidth = width * 0.8;
	const synthHeight = height * 0.6;
	const nbBars = 30;
	const margin = 4;
	const synth = new Container([(width - synthWidth) / 2, (height - synthHeight) / 2 + synthHeight], {
	scale: [1, -1],
	});

	const barsWidth = Math.round(synthWidth / nbBars);
	const barsOptions = {
	fill: new LinearGradient(undefined, [0, synthHeight], {
	0: "#15c20a",
	1: "#da0d19",
	}),
	};
	const bars = [];
	for (let i = 0; i < nbBars; ++i) {
	bars.push(new Rectangle([Math.floor(i * barsWidth), 0], barsWidth - margin, 0, barsOptions));
	}
	synth.add(...bars, new Rectangle([0, -margin - 4], synthWidth, 4, {
	fill: "#333",
	}));
	scene.add(synth);

	const nbFrame = 50;

	const norm = new Position(0, 1);
	synth.on("draw", () => {
	const pos = norm.clone().rotate(synth.frameCount / nbFrame);
	const coords = [pos.x + 10, pos.y + 10];
	bars.forEach((bar, i) => {
	const value = noise.octavate(2, i / 6, ...coords);
	const corrected = M.map(value, -0.7, 0.7, 0, 1) ** 2;
	bar.height = M.lerp(bar.height, corrected * synthHeight, 1);
	});
	}, true);

	console.log("Working ...");
	console.time("gif");
	gif(scene, nbFrame, {
	speed: 0.15,
	alphaThreshold: 1e-5,
	}).then((img) => {
	console.timeEnd("gif");
	document.body.appendChild(img);
	});
	</script>
	</body>
	</html>