bombinans/genuary2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First cut of 06

Browse Source
This commit is contained in:
Mike Lynch 2026-01-06 18:00:00 +11:00
parent 5f9c29e29d
commit 52616dd10e
2 changed files with 94 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
06/animate.js Normal file
View File

@ -0,0 +1,66 @@
const WIDTH = 800;
const HEIGHT = 800;
const NCRITTERS = 100;
const pointer = { x: 0, y: 0 };
const svg = document.getElementsByTagName("svg")[0];
svg.addEventListener(
"pointermove",
(e) => {
pointer.x = e.clientX;
pointer.y = e.clientY;
},
false
);
class Critter {
constructor() {
this.x = Math.random() * WIDTH;
this.y = Math.random() * HEIGHT;
this.vx = Math.random() * 0.1 - 0.05;
this.vy = Math.random() * 0.1 - 0.05;
this.status = "go";
this.init();
this.update();
}
init() {
this.elt = document.createElement("circle");
this.elt.setAttribute("fill", "blue");
this.elt.setAttribute("r", 10);
this.elt.setAttribute("opacity", "50%");
svg.addChild(this.elt);
}
update() {
this.x += this.vx;
this.y += this.vy;
this.elt.setAttribute("cx", this.x);
this.elt.setAttribute("cy", this.y);
}
}
const critters = [];
for( let i = 0; i++; i < NCRITTERS) {
critters.push(new Critter);
}
function animate() {
requestAnimationFrame(animate);
const rect = svg.getBoundingClientRect();
const x = pointer.x - rect.left;
const y = pointer.y - rect.top;
for( const c of critters ) {
c.update();
}
}
animate();

28
06/index.html Normal file
View File

@ -0,0 +1,28 @@
<html>
<head>
<title>etc.mikelynch.org | Genuary 2026</title>
<link rel="stylesheet" href="../styles.css" />
</head>
<body>
<div id="main">
<h1>Genuary 2026 - </h1>
<p>Prompt: Lights on/off. Make something that changes when you switch on or off the “digital” lights.</p>
<p></p>
<p><a href="../">Back</a></p>
<p><a href="https://git.tilde.town/bombinans/genuary2026/src/branch/main/06/genuary05.py">The Python script</p>
<script src="animate.js">
</script>
</body>
</html>