How to dynamically adjust the height and width of drawings in p5.js ?

Question

I have a rectangle which depends on the windowWidth. I want the rectangle and its drawings inside to dynamically adjust its size depending on windowWidth.

Here is my partial code which does a drawing.

//Hardcoded date and time
var date = '15/05/17';
var time = '23:05';
var totaltime = '5h 45m';
var completeddate = '18/05/17';
var timeoflast = '4:50';
var canvas;
var canvasheight = 200;
var yellowrectanglewidth = 100;
var yellowrectangleheight = 59;

function setup() {


canvasheight = windowHeight / 3.7;
canvas =  createCanvas(windowWidth,canvasheight);
//canvas.style('display', 'block');
canvas.parent('sketch-holder');

//Image
leftend = loadImage("leftend.png");
rightend = loadImage("rightend.png");

yellowrectanglewidth = windowWidth - 160;

}

function draw() {


//Main Rectangle
fill(67, 67, 73);
rect(0, 0, windowWidth, canvasheight);

//Firstyellowrect
fill(215, 198, 170);
rect(90, canvasheight /9, yellowrectanglewidth, yellowrectangleheight);
//Secondyellowrect
rect(90, canvasheight /2.2, yellowrectanglewidth, yellowrectangleheight);

//Left End
//Text date
textSize(15);
fill(215, 198, 170);
text(date, 10, canvasheight/6);
//Text Time

fill(215, 198, 170);
text(time, 20, canvasheight/3 - 10);

//Image
image(leftend, 20,canvasheight/3 , 70, 40);


//Text Time
textSize(25);
fill(215, 198, 170);
text(totaltime, 5,canvasheight / 3 + 70);

//Right End
textSize(15);
fill(215, 198, 170);
text(completeddate, windowWidth - 60, canvasheight/6);

fill(215, 198, 170);
text(timeoflast, windowWidth - 40, canvasheight/3 - 10);

//Image 2
image(rightend, windowWidth - 70,canvasheight/3, 70, 40);

}

As you can see here, I am trying to make most of my drawings depend on the windowWidth here. As I want the size of my drawings to increase and decrease depending on WindowWidth.

Is there an easier way to do all this ?

score 0 · Accepted Answer · answered Feb 19 '18 at 17:22

I'm not totally sure what you're asking: is there an easier way to do what specifically?

But what you have in general looks okay. You'd normally use the width and height variables to draw a scene that scales with the size of the canvas. That's pretty much what you're already doing, so I think your code is fine.

Shameless self-promotion: here is a tutorial on using the width and height variables. It's for Processing, but all of the same ideas apply for P5.js.

If you have a more specific question, please post a MCVE (just a single ellipse or rectangle should do it) in a new question, and we'll go from there. Good luck.

How to dynamically adjust the height and width of drawings in p5.js ?

1 Answers1