Neon Kinetic Chain banner

Neon Kinetic Chain

Created by: aneezakiran07
3 devlogs
2h 24m 49s

A physics cool thingy that runs in the browser. Move your mouse and a glowing rope follows it. Move fast and it heats up from blue to pink.

Demo Repository

README

Loading README...
aneezakiran07
aneezakiran07 shipped Neon Kinetic Chain
about 4 hours ago

Shipped this project!

HI!!
So I built a neon physics rope that follows your mouse
It starts cool blue and as you move faster it heats up to hot pink like its burning from friction.. just move your mouse and watch it loop and spiral and its so satisfying(for me tho)
the hardest part was making it FEEL right. The physics worked on day one but it felt off…. getting this satisfying feeling took tuning like 5 numbers that all break each other
Also spent way too long on the glow :”)

For Nerds:

used six concept Verlet integration, constraints, multi-pass glow, heat color, and motion trails in this project

aneezakiran07
aneezakiran07 worked on Neon Kinetic Chain
about 4 hours ago
0h 55m logged

HUD, readme button, and concept dialog (see demo video)

  • HUD panel appears in the bottom-left corner with two live bars, speed and heat( the thing that is driving this whole concept)
  • a small circular button sits in the top-right corner and opens the readme dialog on click
  • the dialog ? is on top right corner which explains this project
  • the dialog closes via the X button or pressing Esc
  • dialog explains six concept sections explain Verlet integration, constraints, multi-pass glow, heat color, and motion trails in Super Simple language(i hope so you get it)

edit: my commits got all messed up, i pushed and only main got pushed cuz ( i just reused my prev terminal commands for commiting again and that command was only pushing one file so it all got messed up :”) then i wanted to remove my commit and it ended up removing the files from my laptop also :”) thank got it worked on ctrl+z otherwise i would have been cooked esp 1 day before ft)

0
aneezakiran07
aneezakiran07 worked on Neon Kinetic Chain
about 7 hours ago
0h 47m logged

glow, heat color, and motion trails

  • the chain now draws in three passes per frame instead of one single stroke and together the three passes fake a neon tube glow
  • mouse speed is captured on every move event
  • raw speed is set till max of 60
  • heat is smoothed across frames so color fades in and out instead of snapping( kinda cool )
  • speed decays by 0.85 each frame so the chain ends( end is not a good word here since it dont just disappear but i don’t know what else to say) when the mouse stops
Attachment
0
aneezakiran07
aneezakiran07 worked on Neon Kinetic Chain
2 days ago
0h 42m logged

physics foundation, chain follows mouse

  • a fullscreen dark canvas since i don’t wanna design any UI :)
  • the head node is pinned to the mouse position every frame
  • each tail node moves using Verlet integration, implying velocity from position history
  • gravity of 0.18px per frame pulls the tail down naturally
  • damping of 0.92 bleeds off energy so the chain settles instead of oscillating forever( FANCY WORDS IK)
  • the chain draws as a single continuous white line with rounded caps
  • a small white dot marks the cursor position since the system cursor is hidden
  • touch events are supported so it works on mobile too
0