# How to make every drawing scale if canvas size is changed

**URL:** <https://discourse.processing.org/t/how-to-make-every-drawing-scale-if-canvas-size-is-changed/18697>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [March 16, 2020, 6:12am UTC](https://discourse.processing.org/t/how-to-make-every-drawing-scale-if-canvas-size-is-changed/18697 "2020-03-16T06:12:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dan99](https://avatars.discourse-cdn.com/v4/letter/d/eada6e/32.png) [@Dan99](https://discourse.processing.org/u/Dan99)\
**Post date:** [March 16, 2020, 6:12am UTC](https://discourse.processing.org/t/how-to-make-every-drawing-scale-if-canvas-size-is-changed/18697/1 "2020-03-16T06:12:50Z")

</div>

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.

```auto
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();
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 16, 2020, 12:23pm UTC](https://discourse.processing.org/t/how-to-make-every-drawing-scale-if-canvas-size-is-changed/18697/3 "2020-03-16T12:23:31Z")

</div>

Hello,

Welcome to the Processing forum.

Please format your code:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

Some references to get you started:

> **[setResizable() / Reference](https://processing.org/reference/setResizable_.html)**
>
> By default, Processing sketches can't be resized. When surface.setResizable(true) is used within a sketch, the window can be resized while it's running. There are more features of …

> **[scale() / Reference](https://processing.org/reference/scale_.html)**
>
> Increases or decreases the size of a shape by expanding and contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percen…

> **[Scale / Examples](https://processing.org/examples/scale.html)**
>
> Paramenters for the scale() function are values specified as decimal percentages. For example, the method call scale(2.0) will increase the dimension of the shape by 200 percent. Objects always scale …

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/aa5a90bf8d73fb69f1120c23c55abd2429dd8a3d.png)  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3104e1b625ed761b19f9f2cd00641362a0696cb5.png)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7f2dc946602a23a86875597e59b6348b745fa117.png)

`:)`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 31, 2020, 12:42pm UTC](https://discourse.processing.org/t/how-to-make-every-drawing-scale-if-canvas-size-is-changed/18697/6 "2020-03-31T12:42:58Z")

</div>

Hello,

[Your post here](https://discourse.processing.org/t/how-to-make-every-drawing-scale-if-canvas-size-is-changed/18697/4) is very similar to [your other post](https://discourse.processing.org/t/cloud-animation-processing-basics/19216).

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/](https://processing.org/)

And take it one step at a time.