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?
@@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
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.
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: ua-cam.com/video/MX1Tbh67oaM/v-deo.htmlsi=KpUewo5j9qdrjR-w
Wow epic work! Very inspiring. Thanks so much for sharing. (I shall now subscribe!)
Thanks Brian!
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.
Serving up hot code!! DALLE has nothing over p5 + a dude who knows his for loops
They love me for my fors.
Thank you man!
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.
Hey, Thanks so much for this one. Can you share code repo?
Code is in the cloneable
@@webbae Yes, got it and I wanted to use it in react js, so, converted the code then.
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.
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!
that's really cooool
had fun making this effect. :) Feels really unique.
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: ua-cam.com/video/MX1Tbh67oaM/v-deo.htmlsi=KpUewo5j9qdrjR-w
it's around the 11 minute mark.
Thanks! @@webbae really appreciate the response *subscribed