Merging Canvas With HTML Website

p5.js Coding Questions
1

Hello, I’m relatively new to HTML, CSS, and recently JS. I was inspired from https://ertdfgcvb.xyz/ to create something like that website with the js animations and mouse tracking interactions/trail for my first project.

After emailing the creator, he forwarded me to p5.js. So, I started watching YouTube videos about p5.js, how to create animations within p5, and all that jazz.

So, after two days of working on this in my free time I created an interactive block of dots that spell out the name of my website, gif here (https://gyazo.com/2f189a334fd6bf8b170c47ced48f97ef).

Now, I want to take that animated text and place it on the top of my personal website like a header followed by all my other html content below it but, to have it all as one. Not just the canvas on the top followed by straight html on the bottom, basically the whole page being a canvas with the initial interactive header on the top followed by all my information below. Since I want to eventually add some type of interactive aspect to the paragraphs and other parts within my html.

Eventually, I would also like to add something like that mouse tracer effect shown on his website (ertdfgcvb.xyz) how would I go about doing that?

Any help is appreciated :slight_smile: sorry if I’m sounding confusing or confused. Mainly because I am that’s why I’m posting here in the first place lol.

2 Likes
2

Do you mean something that looks like a fixed background effect?

If you haven’t seen it already, this web page contains information about positioning your canvas:

1 Like
3

I’m not sure if you meant this, but these lines make sure your sketch always covers the entire page.

function setup() {
	createCanvas(windowWidth, windowHeight);
}

function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
}
4

This helped a ton but, I found a tutorial explaining how to use absolute positioning plus the use of windowWidth, windowHight, windowResize shown in the link you gave me while also using the z-axis to put a transparent canvas in front of html content. Thanks for giving me this link though, helped a ton and led me to the tutorial.

1 Like