[ad_1]
In this Q&A, I look at how to place a p5.js sketch as a full background on a web page. I cover HTML/CSS concepts such as the CSS property “z-index”) as well as p5.js functions like windowResize() and resizeCanvas().
Support this channel on Patreon:
Send me your questions and coding challenges!:
Contact:
Source Code for the Video Lessons:
p5.js:
Processing:
For More Creative Coding Q&A:
For More HTML/CSS/DOM Videos:
Help us caption & translate this video!
by
Tags:
Thank you Dan! Thank you for everything you have done to bring web development back to life. I saw your name on multiple p5 library contributions. Your videos on machine learninf are great as well!
Shoutout to someone who is passionate. You inspire me, Dan 🙂
Just finished your p5.js tutorial playlist. Really great series! Thanks so much!
Hi Dan, how can i do all this z-index stuff to a rect? Thanks!
Hello, Dan. Great video! Q: If we use p5 to make something , since draw keeps on redrawing ad nauseam, if I simply keep a page open, is it not wasteful, like a car with its engine running?
Can someone tell me how to create two canvases in a single sketch.js file
when i use it using context(canvas) it gives an error that says 'Context not defined'
where is the code for it i looked everywhere for the draw code on your new github and still cant find it ?
when you put background in setup function and resize window it loses its background and i couldnt fix it
How do I prevent the canvas from turning white and erasing all my circles when I resize screen?
var canvas; //make this var to make changes
function windowResized() { //updates size
resizeCanvas(windowWidth, windowHeight);
}
function setup() {
canvas = createCanvas(windowWidth, windowHeight);
canvas.position(0, 0);
canvas.style('z-index', '-1'); //takes canvas to back
background(0);
}
function draw() {
noStroke(); //no border
fill(mouseX,mouseY,255,255 – map(mouseY,0,height,0,255));
ellipse(mouseX,mouseY,100,100);
}
Help, it says canvas.position is not an function!
Hi, I have a question. Does the resizing the canvas work if you scroll the page? I tried this example on my page and it didn't work.
You are the best coding teacher i have ever seen…i wish you could be my teacher for all the other programming languages i want to learn…
really nice
can you make a 3d asteroid generator using noise? (essentially an abstract low poly figure using noise)
Cool, also found out about z-index on my own, and I'm glad you use that way too 🙂 I'm curious to know if anyone knows of another way.
I however prefer to create a blank section in the HTML, with an id="canvasHolder". I do all the styling I need in a css file (z-index & position). Then I simply select this section as a variable (using select() from p5.dom.js) and parent my canvas to it. Doesn't make it simpler, simply makes the whole thing clearer if other people work on the html without working on the javascript.
I would love to one day see a video about expanding code or reusing it, with tips and tricks on how you can make a simply physics function for example and reuse it in other projects without too much of a problem.
Hi Dan, where is the best place to submit a coding project idea? I would love to see how a simple text-based adventure would be coded. Something like the excelent mobile app LifeLine. I am more interested how an early descision impacts events later in the adventure.
Leave a Reply