MESMERIZING Wandering Dots Hero in p5.js and Webflow

[@beehivenetwork2099]

Cool effect, thank you. Will u keep up with this series and show us more complex effects? Btw. how do u find those fancy websites? ;)

[@webbae]

yes! I'm having fun binge creating p5 content haha. I find the fancy websites through curation sites like awwwards and god.ly. It's nice when they have an option to filter by JS libraries used.

[@webbae]

also twitter. just keep my eyes out for cool stuff and bookmark it.

[@heatherliu6856]

My new favorite verb is ‘LERPIN’
Use case: “these loitering line-cutting fools need to LERP themselves and wait like the rest of us”

[@webbae]

😤 "The rules don't apply to me, I will LERP myself to the front of this line using a higher interpolation amount."

[@heatherliu6856]

@@webbae these sideshow maniacs need to lerp their cars back into the lane

[@brookeshary]

Hi! how would you add color to these circles?

[@webbae]

Hi! You can use the fill() function.
chat.openai.com/share/025d0e7c-c9ed-4439-ac37-624cc3bd1c99

[@fluidblocks]

Hi!
I tried to make it with a transparent background, but the dots are drawn a line after them :)
Is it possible to make this animation with a transparent bg?

[@webbae]

Hey Soma - unfortunately we have to draw the background each time to clear the circles drawn in the previous frame. This allows us to use it as a background but not OVER other content as you've discovered. You might try adapting the code to utilize DOM elements and a tweening library like GSAP for that purpose. You could store the dot positions in an array and update the top/left or transform translateX/Y properties. I'm not sure how performant it would be! Probably fine with a few dots.

[@brookeshary]

@@webbae and @fluidblocks, I was able to make a transparent background by just clearing the background after each frame.
//clear the background after each frame
function draw() {
clear(); // Clear the background (translucent) each frame...