How to share your assignments properly

Uploading assets to open processing is a bit of a pain, so from now on we are going to share the sketches directly from the web editor.

Here’s a submission template

Post title: The title of the piece (+assignment name)

A representative screenshot: you can right click on the canvas and do “save image as…”

Link to the sketch in full screen mode:
1- Log in  to https://editor.p5js.org
2- save sketch
3- export > full screen will show you the link

Link to the sketch in code editor mode: just use the URL of your browser, it’s shareable

 

How to make things look better in full screen

This is not a requirement but if you want to make your sketch use the full window size you can create a canvas the size of the window
createCanvas(windowWidth, windowHeight);

And make sure that everything is displayed in relationship to a variable canvas size

rect(width/2, height/2, 100,100);

If your sketch has a fixed width it will appear to the left of the window and on a white background. That’s usually NOT what you want but there is a quick fix.

Open the style.css, it’s among the sketch files. Add these instructions to it:


html {
background-color: #e2ce8f;
}

canvas {
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}