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

Added darkness layer

Browse Source
This commit is contained in:
Mike Lynch 2026-01-06 21:22:25 +11:00
parent 18a21bb899
commit e93fd30849
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
06/animate.js
View File

@ -1,6 +1,6 @@
const WIDTH = 400; const WIDTH = 800;
const HEIGHT = 400; const HEIGHT = 800;
const NCRITTERS = 10; const NCRITTERS = 10;
const CLOSE = 20; const CLOSE = 20;
const BOUNCE = 0.02; const BOUNCE = 0.02;
@ -9,6 +9,8 @@ const pointer = { x: 0, y: 0 };
const critters = []; const critters = [];
let lights = "off";
function dist(c1, c2) { function dist(c1, c2) {
const dx = c1.x - c2.x; const dx = c1.x - c2.x;
const dy = c1.y - c2.y; const dy = c1.y - c2.y;
@ -82,12 +84,23 @@ document.addEventListener('DOMContentLoaded', () => {
c.init(i); c.init(i);
c.update(); c.update();
critters.push(c); critters.push(c);
console.log(`added critter ${i}`);
} }
svg.addEventListener("click", () => {
const dark = document.getElementById("dark");
if( lights === "on" ) {
lights = "off";
dark.setAttribute("fill-opacity", "0.8");
} else {
lights = "on";
dark.setAttribute("fill-opacity", "0");
}
});
} else { } else {
console.log("Can't find svg element");
} }
}); });

1
06/index.html
View File

@ -16,6 +16,7 @@
<div id="container"> <div id="container">
<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg"> <svg width="800" height="800" xmlns="http://www.w3.org/2000/svg">
<rect id="dark" x="0" y="0" width="800" height="800" fill="black" fill-opacity="0.8"></rect>
<circle id="c000" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle> <circle id="c000" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
<circle id="c001" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle> <circle id="c001" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
<circle id="c002" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle> <circle id="c002" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>