xxxxxxxxxx
14
This code is forked from https://editor.p5js.org/itsai0724/sketches/B1xmLvw6G by itsai0724.
This copy additonally demonstrates to include a number of HTML elements in one page, but hide most of them and only show the ones for a certain view.
(I also changed the mode number from 0…2 to 1…3, to match the function names in the code.)
Add the CSS class if-screen-1, if-screen-2, etc. to an HTML element in order to have it only appear when the sketch is mode 1, mode 2, etc. index.html has an example of this. It also demonstrates that:
- An element can have other class names in addition to the if-screen-1 etc. class name.
- Several elements can all be labeled with if-screen-1 (or any other name). Then they will all appear or disappear together.
In order for this to work, the setMode function in sketch.js sets the class name of the HTML document body, and the style.css code hides elements that have the class name if-screen-1 unless the document body has the class name screen-1.
You can add more modes by editing the CSS.