P5.js and HTML code Combined
When adding HTML elements I noticed that the canvas was drawn after add the HTML elements such as in the example below.
I search option how to use a canvas as a background I found a another video by Daniel Shiffman explain how to manipulate the position of a canvas with in a browser.
This is done change the CSS style z-index, usually each element has default value of z-index of 1. By change the z-index to -1 that canvas will be drawn in the background. Also i aligned the canvas on the top.
adding the code to the:
<head>
<style>
canvas {vertical-align: top; z-index: -1}
For the full screen effect i had to change this to be the full size of the window. in the p5.js references there is an option to make the canvas the size of the browser window height and width.
createCanvas(windowWidth, windowHeight);
i noticed that when the browser window was change after the canvas was drawn that size was not changed. i wanted the size to be responsive to the size of the browser window even if the visitor changed the window while visiting the site.
P5.js has a function the is searching for an event called window resized:
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
This event always listened if the browser size has changed, and when it noticed this event it redraws the canvas to the new browser window size.
When adding text to the HTML file, I noticed a large block of text would overflow at the bottom of the canvas. and u would be able to scroll pas the canvas.
Using HTML i created a DIV scrollable text box.
Giving the Div element a specific width using a percentage of the browser window. I found 40% to be a sufficient number for the text to in the middle. However for the height using a % would not be responsive to that size. I found after searching online, using 'vh' would be responsive to the drawn page.
<div id="system" class="center" style=" height:85vh;width:40%;border:0px;margin-right: auto; margin-left: auto;font:20px/30px Georgia, Garamond, Serif;overflow:auto">
This would be how the majority of the text would be displayed.
The visitor would need to scroll through the text to read and in turn the scroll would interact with the stars adding some speed to them.