@@webbae Thanks for the response - that sucks. Is there any other way to use your own BG in Webflow (eg. White BG section, Grey BG Section, etc)? LIke any alternative suggestions? p.s Love your work
HI @webbae I tried developing this cool effect by referring to your tutorial, Although I am getting one rectangle visible all the time. Can you help me understand how to remove that?
You can hide the section with your CSS and do a media match query with Javascript to only run the code above a certain screen size. Check out how I use match media in this video: th-cam.com/video/MX1Tbh67oaM/w-d-xo.htmlsi=KpUewo5j9qdrjR-w
p5.js calls it automatically. it's designer to be beginner friendly in that way but it's also a bit unintuitive if you have some JS experience already.
Wow epic work! Very inspiring. Thanks so much for sharing. (I shall now subscribe!)
Thank you man!
Serving up hot code!! DALLE has nothing over p5 + a dude who knows his for loops
They love me for my fors.
that's really cooool
had fun making this effect. :) Feels really unique.
For the Webflow implementation, how do you make the BG transparent it is currently set to black?
Thanks!
You can’t do transparent bg with p5 canvas. But you can draw it the same color as your background!
@@webbae Thanks for the response - that sucks. Is there any other way to use your own BG in Webflow (eg. White BG section, Grey BG Section, etc)?
LIke any alternative suggestions?
p.s Love your work
@@dereksoup you can specify a BG color to draw on the canvas with the background() function, yes! I'm not sure that answers your question though...
All good - appreciate your response. Keep up the great work!@@webbae
Can we make that interaction in webflow directly? While they have logic , variable, and powerful interaction control panel
not quite. You can get pretty close using a fixed css grid but can only highlight the active (mouse hovered) square that way.
HI @webbae
I tried developing this cool effect by referring to your tutorial, Although I am getting one rectangle visible all the time. Can you help me understand how to remove that?
Sure hop in Discord and send me a code snippet.
Hey, Thanks for the reply@@webbae
It was solved.
Amazing tutorial, I've got it working perfectly. Wondering how to hide on mobile?
You can hide the section with your CSS and do a media match query with Javascript to only run the code above a certain screen size. Check out how I use match media in this video: th-cam.com/video/MX1Tbh67oaM/w-d-xo.htmlsi=KpUewo5j9qdrjR-w
it's around the 11 minute mark.
Thanks! @@webbae really appreciate the response *subscribed
hey how to set this grid as a background of a div, not on the top of the page?
you can set the parent container with a p5 function. you'll need to make sure to account for the width and height of course!
where do you call the setup function?
p5.js calls it automatically. it's designer to be beginner friendly in that way but it's also a bit unintuitive if you have some JS experience already.