How to make every drawing scale if canvas size is changed

Processing Coding Questions
1

I’m very new to coding and was wondering how i could change this code to scale if the canvas size was to change.

I know its not the nicest or cleanest code but it works for how I understand it currently.

void setup()
{
  size(1000, 600); 
}

void draw()
{
  sky();
  ground();
  river(); 
  house(); 
 
  moon(width * 0.85, height * 0.0, 1);
  
    rock(width * 0.41, height * 0.89, 1); 
    rock(width * 0.25, height * 0.83, 1); 
    rock(width * 0.28, height * 0.85, 1); 
    rock(width * 0.22, height * 0.56, 1); 
    rock(width * 0.20, height * 0.57, 1); 
    rock(width * 0.25, height * 0.57, 1); 
  
  flower(); 
    flower(width * 0.18, height * 0.05, 1);
    flower(width * 0.2, height * -0.25, 1);
    flower(width * 0.7, height * -0.3, 1);
    flower(width * 0.5, height * 0.1, 1);
    flower(width * 0.46, height * -0.1, 1);
  
  bird();
    bird(width * 0.05, height * 0.1, 1);
    bird(width * 0.1, height * 0.05, 1);
    
  ltree(); 
    ltree(width * 0.20, height * 0.0, 1);
    ltree(width * 0.10, height * 0.20, 1);
    ltree(width * 0.25, height * 0.25, 1);
    ltree(width * -0.07, height * 0.25, 1);
    ltree(width * 0.18, height * 0.40, 1); 
    ltree(width * 0.01, height * 0.40, 1);
  
  stree();
    stree(width * -0.2, height * 0.0, 1); 
    stree(width * 0, height * 0.3, 1);
    stree(width * -0.1, height * 0.4, 1);
    stree(width * 0.05, height * 0.45, 1);
    stree(width * -0.42, height * 0.45, 1);
    stree(width * -0.42, height * 0.20, 1);
    
    rock(width * 0.07, height * 0.73, 1);
    flower(width * -0.17, height * -0.11, 1);
}


void sky()
{
 background (111, 96, 224);
}

void ground()
{
  fill (60, 181, 92);
  rect(0, 300, 1000, 300);
}

// Copy and paste of  birds
void bird(float x, float y, float s)
{
  pushMatrix();
  translate(x, y);
  scale(s);
  bird();  
  popMatrix();
}

void bird()
{
  pushMatrix(); 
  
  noFill(); 
  arc(600, 60, 20, 20, PI+QUARTER_PI, TWO_PI); // left wing arc
  arc(618, 65, 20, 20, PI+QUARTER_PI, TWO_PI); // right wing arc 
  
  popMatrix(); 
}

// House with roof, windows, doors 
void house()
{
  pushMatrix();
  
  stroke(20); 
  // House
  fill(70, 71, 74); 
  rect(30, 200, 200, 100);
  triangle(25, 200, 130, 100, 235, 200); // displace roof for perspective
  
  // Windows
  fill(168, 204, 215); // clear colour for visual effect as see through
  rect(40, 225, 40, 30); 
  rect(180, 225, 40, 30);
  
  // Door
  fill(193, 154, 107);
  rect(110, 225, 40, 75); 
  
  // Handle
  fill(0);
  circle(145, 265, 2); 
  
  popMatrix(); 
}

// Duplication of large trees
void ltree (float x, float y, float s)
{
  pushMatrix();
  translate(x, y);
  scale(s);
  ltree();  
  popMatrix();
}

// large tree
void ltree()
{
  
  pushMatrix(); 
  // tree trunk 
  translate(640, 300);
  fill(134,109,38);
  rect (-7.5, -120, 20, 120);
  
  //layers of branches
  fill(53, 84, 38);
  translate (0, -50);  // drawing origin set to top of trunk
  triangle (0, -60, -80, 10, 80, 10);  // 1st layer of branches
  fill(66, 105, 47); 
  translate (0, -70);   
  triangle (0,0, -70, 60, 70, 60);  // 2nd layer of branches
  fill(64, 112, 40);
  translate (0, 20); 
  triangle (0, -40, -60, 20, 60, 20);  // 3rd layer of branches
  fill(80, 131, 59); 
  translate(0,  -20); 
  triangle(0, -40, -50, 20, 50, 20); // 4th layer of brnaches
  
  popMatrix(); 
   
}

// Duplication small trees
void stree (float x, float y, float s)
{
  pushMatrix();
  translate(x, y);
  scale(s);
  stree();  
  popMatrix();
}

// small trees
void stree()
{
  pushMatrix(); 
  
  translate(-140, 0); 
  fill(98, 78, 44); 
  rect(600, 240, 10, 60); // tree trunk 
  quad(610, 270, 610, 260, 620, 245, 625, 245); // tree branch  
  quad(600, 260, 600, 255, 590, 245, 585, 245); // tree branch 
  
  fill(71, 144, 0); 
  circle(605, 215, 60); 
  circle(635, 235, 40); // leaves 
  circle(580, 240, 30); 

  popMatrix(); 
}

//Enchanted river protecting house
void river()
{
  pushMatrix(); 
  noStroke(); 
  fill(96, 220, 224);
  rect(300, 301, 120, 150, 0, 0, 20, 0); // smooth the corners for a smooth finish
  rect(100, 350, 200, 101, 30, 0, 0, 0); 
  rect(100, 450, 120, 150); 
  triangle(220, 450, 220, 500, 245 ,450); // adds and edge for river flow
  
  popMatrix(); 
}

// Flowers 
void flower ( float x, float y, float s)
{
  
  pushMatrix();
  translate (x, y);
  scale (s);
  flower();
  popMatrix();
}
 
void flower()
{
  pushMatrix();

  fill(209, 206, 6); 
  translate (250, 480);
  circle (0, 0, 10); 
  fill(0 ,104, 56); 
  rect(-3, 4, 5, 20); 


int numPetals = 14; 
for (int i = 0 ; i < numPetals; i++)
{
  fill( 255, 255, 255); 
  ellipse (0, -10, 5, 10);
  rotate (radians (float(360) / numPetals)); //10 degrees
}

  popMatrix();
}

// Rocks 
void rock ( float x, float y, float s)
{
  pushMatrix();
  translate (x, y);
  scale (s);
  rock();
  popMatrix();
}

void rock()
{
  pushMatrix();  
  fill(150, 159, 178);
  arc(0 , 0, 40,  60, PI,  TWO_PI);
   

  popMatrix();
}

// Moon 
void moon ( float x, float y, float s)
{
 
  pushMatrix();
  translate (x, y);
  scale (s);
  moon();
  popMatrix();
}
 
void moon() 
{
  pushMatrix();
  
  scale(1.5, 1.5);
  //front side of moon
  fill(244, 241, 201);   
  beginShape(POLYGON);
  vertex(35, 20); //first anchor point
  bezierVertex(80, 0, 80, 75, 30, 75);
  bezierVertex(45, 75, 60, 25, 35, 20);
  endShape();
  
  popMatrix();
}
3

Hello,

Welcome to the Processing forum.

Please format your code:
https://discourse.processing.org/faq#format-your-code

Some references to get you started:

You can scale both x and y as per reference:

x float: percentage to scale the object in the x-axis|
y float: percentage to scale the object in the y-axis|

This will scale everything with some changes to your code:

  • Add surface.setResizable(true); to setup() so you can resize active canvas when running sketch.
  • Put scale(x, y) at the start of draw and use a scaling percentage for x and y; you can do the math.
  • Scaling percentage can be a ratio of resized width and initial width and do similar for height.
  • Change the width and height (vary with canvas size) references in code (functions) so they are fixed values; for example iniWidth and iniHeight can be initial width and height.

I did the above and was able to resize canvas and it resized everything.

image
image

image
image632×504 37.6 KB

:)

6

Hello,

Your post here is very similar to your other post.

I am unable to assist you; we volunteer our time here and I have other priorities at this time.

There are lots of resources out there for you to explore and learn from.

Start here:
https://processing.org/

And take it one step at a time.

2 Likes