Unable to Center and fill the viewport with the sketch p5.js
Question
I am attempting to center my sketch but I am having trouble doing so. I want my canvas to take up the entire screen on desktop and mobile and always have my sketch in the middle. What am I missing?
Before, I would just use
function windowResized() {
resizeCanvas(windowWidth, windowHeight)
}
and it would work. I'm guessing this is because of the positioning of my animation, but I have no idea what to do with it.
Here's what I got so far: JS fiddle
HTML
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="resources\p5.js"></script> <script src="resources\p5.dom.js"></script> <script src="resources\p5.sound.js"></script> <script type="text/javascript" src="js\app.js"></script> <link rel="stylesheet" href="css\style.css"> <title>Breathe</title> </head> <body> </body> </html>
CSS
* { margin: 0; padding: 0; box-sizing: border-box; }JavaScript ( p5.js )
let outerDiam = 0; let cnv; let mySounds = [] function centerCanvas() { let x = (windowWidth - width) / 2; let y = (windowHeight - height) / 2; cnv.position(x, y); } function setup() { cnv = createCanvas(windowWidth, windowHeight); centerCanvas(); } function windowResized() { centerCanvas(); } function draw() { background(220); for (let i = 0; i < 5; i++){ let diam = outerDiam - 30 * i; if (diam > 0) { let fade = map(diam, 0, width, 0, 255); stroke(fade); noFill(); ellipse(300, 300, diam); } } outerDiam = outerDiam + 2; } function mousePressed() { outerDiam = 0; }
1 answers
solution1
1 ACCPTED 2019-10-25 07:17:46
Relativity of the canvas to the "viewport"
When you create a canvas, depending on where your js script is doing that in HTML, it will be within the normal HTML flow as a block element(not 100% sure about this, but confident).
Therefore centering the canvas with respect to the viewport should be handled in the parent containing our script, in this case, our HTML file. p5.js's wiki on positioning the canvas offers a solid and concise scenario-based documented solution that is very relevant to you!
Understanding the canvas anatomy
When you create the canvas it takes the top-left corner of the canvas as the origin and set's up the coordinate system as shown below
Now the actual problem
When you create that ellipse it's always going to be in the position 300,300 due to ellipse(300, 300, diam); . Now the question is how do you center that breathing to the canvas?
There are a few ways!
- Draw the ellipse in the middle of the canvas.
- Make the canvas big enough for just the breathing effect and have the canvas background match your page's background color and position the script in the center using HTML or CSS
These are just 2 ways to achieve what you want to do. There's a whole lot more.
NOTE: I am keeping my explanation fairly simple by not mentioning rectMode or ellipseMode and etc. You may go and look them up in the documentation they might offer a little help. Good Luck!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.