<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Blooming</title>
<style>
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #222;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js"></script>
<!--
© Adam Murray 2025
https://adammurray.link/
Creative Commons License
Attribution-NonCommercial-ShareAlike 4.0 International
https://creativecommons.org/licenses/by-nc-sa/4.0/
-->
<script>
function setup() {
const dim = Math.min(Math.min(1000, windowWidth), windowHeight) - 60;
createCanvas(dim, dim).parent("processing-canvas");
angleMode(DEGREES);
colorMode(HSB);
background("white");
}
function draw() {
let radius = width;
let step = 15 + pow(2, frameCount / 1000);
let colorOffset = frameCount / 3;
if (step > 360) {
noLoop();
return;
}
fill(0, 0);
translate(width / 2, height / 2);
for (let i = 0; i < 1080; i += step) {
fill((colorOffset + i / 4) % 360, 100, 100, 0.01);
circle(0, -height / 2, radius);
rotate(step);
}
}
</script>
</head>
<body>
<div id="processing-canvas"></div>
</body>
</html>