although I have some experience with processing, I am new to p5.js. For an academic work, I want to create a website with multiple interactive experiences. I want this website to be one single page, no links no nothing, just one single scroll.
For this, I would want to have multiple canvases along the long scroll. I would also want that these interactive experiences just start when the user is in the correct position of the scroll. I can think of multiple solutions for my problem, but i am not sure how to implement them, neither what is the best one.
Is it possible to do that with one single page? Is it possible to put the canvas into divs and then display it in order with css?
One other solution that came to my mind is to create multiple pages, but simulate that is just one using some sort of animation to simulate the scroll, this one would guarantee that the user is always viewing the canvas in full screen, but I’m not sure he could control it with the normal scroll bar.
Is there any simple solution? Thanks in advance.
Advertisement
Answer
It sounds like you’re looking for instance mode.
Instance mode lets you do exactly what you’re describing: you can create multiple sketches and add them all to the page.
You can also use the parent() function to put your canvas in a specific div. Shameless self-promotion: here is a tutorial that includes placing a canvas in a specific div.
I would start with getting those pieces working before you worry about the scroll. But once you’re ready, I would look into setting up a scroll listener in JavaScript and triggering your instance mode sketches at certain values.
Good luck!