Animated particle constellations in 42 lines of JavaScript (slicker.me)
from monica_b1998@lemmy.world to programming@programming.dev on 04 Nov 2025 03:12
https://lemmy.world/post/38298394

#programming

threaded - newest

chisel@piefed.social on 04 Nov 2025 04:01 next collapse

Am I crazy, or is that code drawing every line twice?

monica_b1998@lemmy.world on 04 Nov 2025 04:16 collapse

I think it’s drawing some lines twice, but I didn’t think it’s worth adding more lines to prevent it. Suggestions, anyone? Edit: I updated line 18 to let j = i + 1;

sping@lemmy.sdf.org on 04 Nov 2025 04:25 collapse

Well j = i + 1, and drop the equality test.

monica_b1998@lemmy.world on 04 Nov 2025 04:29 collapse

done, thanks a bunch!

chisel@piefed.social on 05 Nov 2025 03:16 collapse

Nice! This is a fun demo btw, makes me want to play around with canvas. I’ve never really come across a need for it besides things like hacky camera implementations.

monica_b1998@lemmy.world on 05 Nov 2025 03:34 collapse

Glad to hear you enjoyed it!

bleistift2@sopuli.xyz on 04 Nov 2025 20:28 next collapse

Line 10: indentation

bleistift2@sopuli.xyz on 04 Nov 2025 20:29 collapse

If you’re iterating over a whole array and need the index, like in ll.15f., you can instead write

particles.forEach((particle, i) => {
  // loop body
})

There may be a performance hit (I haven’t tested it) because you’re invoking a function on each iteration. And it’s mostly a stylistic choice.