Skip to content

Instantly share code, notes, and snippets.

@joshparkerj

joshparkerj/gist:5ac795d37f88532e9816ee8c51be2e31

Created June 26, 2023 21:13
Show Gist options
  • Save joshparkerj/5ac795d37f88532e9816ee8c51be2e31 to your computer and use it in GitHub Desktop.
Save joshparkerj/5ac795d37f88532e9816ee8c51be2e31 to your computer and use it in GitHub Desktop.
Download ZIP
fans
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>fans</title>
<style>
.fan,
.inner-ring,
.outer-led,
.inner-led {
border-radius: 100%;
}
.fan,
.inner-ring {
border: 1px solid black;
margin: auto;
margin-top: 8vh;
position: relative;
}
.fan {
height: 40vh;
width: 40vh;
margin-top: 6vh;
}
.inner-ring {
height: 24vh;
width: 24vh;
}
.outer-led,
.inner-led {
position: absolute;
inset: 0;
}
</style>
</head>
<body>
<div class="fan" id="upper-fan"></div>
<div class="fan" id="lower-fan"></div>
<script>
const textColor = "rgb(0,255,97)";
const tracks = [
[
[75, textColor],
[22, "black"],
[10, textColor],
[85, "black"],
[74, textColor],
[220, "black"],
],
[
[83, textColor],
[14, "black"],
[18, textColor],
[77, "black"],
[82, textColor],
[212, "black"],
],
[
[94, textColor],
[3, "black"],
[42, textColor],
[53, "black"],
[94, textColor],
[200, "black"],
],
[
[0, textColor],
[73, "black"],
[21, textColor],
[14, "black"],
[57, textColor],
[100, "black"],
[21, textColor],
[200, "black"],
],
[
[0, textColor],
[73, "black"],
[21, textColor],
[30, "black"],
[57, textColor],
[84, "black"],
[21, textColor],
[200, "black"],
],
[
[0, textColor],
[73, "black"],
[21, textColor],
[76, "black"],
[21, textColor],
[74, "black"],
[21, textColor],
[200, "black"],
],
[
[20, textColor],
[53, "black"],
[21, textColor],
[30, "black"],
[57, textColor],
[84, "black"],
[21, textColor],
[200, "black"],
],
[
[20, textColor],
[53, "black"],
[21, textColor],
[14, "black"],
[57, textColor],
[100, "black"],
[21, textColor],
[200, "black"],
],
[
[94, textColor],
[3, "black"],
[42, textColor],
[53, "black"],
[94, textColor],
[200, "black"],
],
[
[83, textColor],
[14, "black"],
[18, textColor],
[77, "black"],
[82, textColor],
[212, "black"],
],
[
[75, textColor],
[22, "black"],
[10, textColor],
[85, "black"],
[74, textColor],
[220, "black"],
],
];
document.querySelectorAll(".fan").forEach((fan, fanNumber) => {
const innerRing = document.createElement("div");
innerRing.setAttribute("class", "inner-ring");
const innerLEDs = new Array(8).fill().map((_, i) => {
const innerLED = document.createElement("div");
innerLED.setAttribute("class", "inner-led");
innerLED.style.setProperty("--c", "black");
innerLED.setAttribute("id", `inner-led-${fanNumber}-${i}`);
const background = `conic-gradient(from ${
i * (1 / 8) - 1 / 16
}turn, var(--c) 0.125turn, rgba(0, 0, 0, 0) 0.0turn)`;
innerLED.style.setProperty("background", background);
return innerLED;
});
const outerLEDs = new Array(16).fill().map((_, i) => {
const outerLED = document.createElement("div");
outerLED.setAttribute("class", "outer-led");
outerLED.setAttribute("id", `outer-led-${fanNumber}-${i}`);
outerLED.style.setProperty("--c", "black");
const background = `conic-gradient(from ${
i * (1 / 16) - 1 / 32
}turn, var(--c) 0.0625turn, rgba(0, 0, 0, 0) 0.0turn)`;
outerLED.style.setProperty("background", background);
return outerLED;
});
innerLEDs.forEach((innerLED) => {
innerRing.appendChild(innerLED);
});
outerLEDs.forEach((outerLED) => {
fan.appendChild(outerLED);
});
fan.appendChild(innerRing);
});
const makeSwitch = function makeSwitch(e, t) {
let i = 0;
const sw = function sw() {
const [timeoutLength, color] = tracks[t][i % tracks[t].length];
e.style.setProperty("--c", color);
setTimeout(sw, (timeoutLength * 10000) / 286);
i++;
};
sw();
};
const putOnTrack = (s, t, d) => {
setTimeout(
() => makeSwitch(document.querySelector(s), t),
(d * 10000) / 286
);
};
// center track
putOnTrack("#outer-led-1-8", 5, 0);
putOnTrack("#inner-led-1-4", 5, 32);
putOnTrack("#inner-led-1-0", 5, 78);
putOnTrack("#outer-led-1-0", 5, 108);
putOnTrack("#outer-led-0-8", 5, 155);
putOnTrack("#inner-led-0-4", 5, 184);
putOnTrack("#inner-led-0-0", 5, 230);
putOnTrack("#outer-led-0-0", 5, 262);
// tracks left of center from left to right.
putOnTrack("#outer-led-1-12", 0, 55);
putOnTrack("#outer-led-0-12", 0, 208);
putOnTrack("#outer-led-1-11", 1, 35);
putOnTrack("#outer-led-1-13", 1, 75);
putOnTrack("#outer-led-0-11", 1, 185);
putOnTrack("#outer-led-0-13", 1, 225);
putOnTrack("#outer-led-1-10", 2, 15);
putOnTrack("#inner-led-1-6", 2, 55);
putOnTrack("#outer-led-1-14", 2, 90);
putOnTrack("#outer-led-0-10", 2, 170);
putOnTrack("#inner-led-0-6", 2, 210);
putOnTrack("#outer-led-0-14", 2, 250);
putOnTrack("#outer-led-1-9", 3, 3);
putOnTrack("#outer-led-1-15", 3, 104);
putOnTrack("#outer-led-0-9", 3, 158);
putOnTrack("#outer-led-0-15", 3, 257);
putOnTrack("#inner-led-1-5", 4, 35);
putOnTrack("#inner-led-1-7", 4, 75);
putOnTrack("#inner-led-0-5", 4, 185);
putOnTrack("#inner-led-0-7", 4, 225);
// tracks right of center from right to left.
putOnTrack("#outer-led-1-4", 10, 55);
putOnTrack("#outer-led-0-4", 10, 208);
putOnTrack("#outer-led-1-5", 9, 35);
putOnTrack("#outer-led-1-3", 9, 75);
putOnTrack("#outer-led-0-5", 9, 185);
putOnTrack("#outer-led-0-3", 9, 225);
putOnTrack("#outer-led-1-6", 8, 15);
putOnTrack("#inner-led-1-2", 8, 55);
putOnTrack("#outer-led-1-2", 8, 90);
putOnTrack("#outer-led-0-6", 8, 170);
putOnTrack("#inner-led-0-2", 8, 210);
putOnTrack("#outer-led-0-2", 8, 250);
putOnTrack("#outer-led-1-7", 7, 3);
putOnTrack("#outer-led-1-1", 7, 104);
putOnTrack("#outer-led-0-7", 7, 158);
putOnTrack("#outer-led-0-1", 7, 257);
putOnTrack("#inner-led-1-3", 6, 35);
putOnTrack("#inner-led-1-1", 6, 75);
putOnTrack("#inner-led-0-3", 6, 185);
putOnTrack("#inner-led-0-1", 6, 225);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment