Full Page Canvas for Album Art Project

p5.js Project Guidance
1

I have an idea to make a website for an album my friends and I made that does some interactive stuff with photos that a user would upload and then with p5 various effects and stuff would happen. I was thinking of just covering the whole page with a canvas and then doing all the cool stuff there. Is this a terrible idea? Would processing an image be very laggy? Would having that big of a canvas be a problem? Is there a different technology you would recommend, or technologies that would work with p5 that would be make this easier/possible? Is asking 4 questions in a row a bad way to form a forum post?

Any help would be much appreciated!
Thanks!

2 Likes
2

Making a canvas that’s the whole web page has worked for fine for me with multiple projects. However it’s somewhat dependent on who’s using the website if their computer is on the older side and wasn’t very powerful to begin with it might not do too well but that goes for p5 sketches in general.

Pixel based image manipulation can be kinda slow in the browser. So depending on what processing you’re planning to do that could be the biggest bottleneck. You can look into using pixi.js which will make use of a graphics card to make things faster but got a bit more of a learning curve and less built in features.

I’ve found the best way to know if your idea will work is to make a quick prototype that will give you an idea of if it will be functional and then refine that if you think it will.

Here’s the basics of how I start a sketch that I want to be full screen.

// styles either in html or css file
html, body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

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

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

YOU ARE THE BEST! Thanks for getting back to me and thanks for all the guidance. I’m gonna get started soon and I’ll report back with what I’ve learned!