# How to go about scaling a set of objects all together?

**URL:** <https://discourse.processing.org/t/how-to-go-about-scaling-a-set-of-objects-all-together/6231>\
**Category:** Coding Questions\
**Created:** [December 2, 2018, 11:39pm UTC](https://discourse.processing.org/t/how-to-go-about-scaling-a-set-of-objects-all-together/6231 "2018-12-02T23:39:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![francium401](https://avatars.discourse-cdn.com/v4/letter/f/977dab/32.png) [@francium401](https://discourse.processing.org/u/francium401)\
**Post date:** [December 2, 2018, 11:39pm UTC](https://discourse.processing.org/t/how-to-go-about-scaling-a-set-of-objects-all-together/6231/1 "2018-12-02T23:39:57Z")

</div>

I have drawn four triangles to form a tree-looking object. I want to scale all the triangles it to a bigger size so that the tree looks bigger, say for example 200%. What do I need to do to achieve this?

```auto
void setup(){
  size(1000, 1330);
  smooth();
  noStroke();
}

void draw(){
 pushMatrix();
  translate(-125, -330);  
  triangle(155, 1330, 165, 1330, 160, 1187);
  triangle(150, 1318, 170, 1318, 160, 1262);
  triangle(154, 1282, 166, 1282, 160, 1240);
  triangle(156, 1252, 164, 1252, 160, 1220); 
  popMatrix(); 
}

```

---

<div class="post-metadata">

**Author:** ![bryan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bryan/32/2538_2.png) [@bryan](https://discourse.processing.org/u/bryan)\
**Post date:** [December 3, 2018, 12:54am UTC](https://discourse.processing.org/t/how-to-go-about-scaling-a-set-of-objects-all-together/6231/2 "2018-12-03T00:54:12Z")

</div>

Hi, first of all, i recommend you to use small values to create your figure. this will allow you to understand where the vertices of the triangle will be placed. second, if you want to move your figure to any place, you only have to use the translate function (that’s why you have to create your figure with small values), here’s a quick version of your code with some upgrades:

```auto
int scalling = 1; // for scalling
void setup() {
  size(500, 500);
  smooth();
  noStroke();
}

void draw() {
  background(0);
  pushMatrix();
  translate(width/2, height/2);
  scale(scalling);
  beginShape(TRIANGLES);
  vertex(5, 230);
  vertex(15, 230);
  vertex(10, 87);
  
  vertex(0, 218);
  vertex(20, 218);
  vertex(10, 162);
  
  vertex(4, 182);
  vertex(16, 182);
  vertex(10, 140);

  vertex(6, 152);
  vertex(14, 152);
  vertex(10, 120);
   
  endShape();
  popMatrix();
}

```

I strongly recommend you to create an object “Tree”, there are many tutorials of how to create an object and also check out the PShape class. Daniel Shiffman tutorials are really good. And also this page [https://funprogramming.org/](https://funprogramming.org/) is a good place to learn

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 4, 2018, 12:54am UTC](https://discourse.processing.org/t/how-to-go-about-scaling-a-set-of-objects-all-together/6231/3 "2018-12-04T00:54:05Z")

</div>

Even without objects you can still begin to work with trees by putting your code in a function called `tree()`.

I recommend changing your triangle coordinates so that they are related to 0,0 in a more direct way. Then when you draw a tree at x,y the results are easy to understand. At that point you can loop and draw trees many times, and you can call `scale()` to change the scale at which you draw trees. Below are a few simple changes to your code to demonstrate this.

```auto
void setup() {
  size(400, 400);
  smooth();
  noStroke();
  fill(255);
}

void draw() {
  for(int i=0; i<10; i++){
    tree(i * 40, 0);
  }
  scale(2);
  for(int i=0; i<10; i++){
    tree(i * 20, 50);
  }
}

void tree(float x, float y) {
  pushMatrix();
  translate(x, y);
  triangle(5, 143, 15, 143, 10, 0);
  triangle(0, 138, 20, 138, 10, 82);
  triangle(4, 102, 16, 102, 10, 60);
  triangle(6, 72, 14, 72, 10, 40);  
  popMatrix();
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 4, 2018, 4:26am UTC](https://discourse.processing.org/t/how-to-go-about-scaling-a-set-of-objects-all-together/6231/4 "2018-12-04T04:26:41Z")

</div>

if you want make the tree position random, but remember it, sorry need to make

> class Tree

the fake 3D effect by scale(fy) would be just depending on the Y position.

```auto
// https://discourse.processing.org/t/how-to-go-about-scaling-a-set-of-objects-all-together/6231/3

int many = 20;
Tree[] forest = new Tree[many];

void setup() {
 size(400, 400);
 smooth();
 for (int i=0; i<many; i++) forest[i] = new Tree(random(380), random(5,80));  
}

void draw() {
 background(100, 100, 20);
 for (Tree tree : forest ) tree.draw();
}

class Tree {
 float x, y;
 Tree(float x, float y) {
   this.x=x;
   this.y=y;
 }
 public void draw() {
   fill(50, 150, 0);
   stroke(50, 145, 0);
   pushMatrix();
   translate(x, y);
   scale(y/40.0);
   triangle(5, 143, 15, 143, 10, 0);
   triangle(0, 138, 20, 138, 10, 82);
   triangle(4, 102, 16, 102, 10, 60);
   triangle(6, 72, 14, 72, 10, 40);  
   popMatrix();
 }
}

```

now made a updated version,

- it draws the tree triangles in a loop
- solves the order problem by first creating a array of random Ypos  
sorting them and use them to create the Tree array forest  
( together with random Xpos )

> **code v03**
>
> ```auto
> // https://discourse.processing.org/t/how-to-go-about-scaling-a-set-of-objects-all-together/6231/3
> // v02 new tree code trunk rect plus for loop 4 triangles reverse order
> // v03 work on sort problem small Ypos should draw first 
> // hack by extra sorted single Y array of randoms
> 
> final int many = 20;
> Tree[] forest = new Tree[many];
> final float vvpff = 50.0; // speak: Virtual View Point Fummel Factor, unit? [m]? above ground
> final float yminus = 140; // like z axis, " move tree up (back )" unit [pix]
> // ___________________________________________________
> void setup() {
> size(400, 400);
> make_forest();
> }
> 
> // ___________________________________________________
> void draw() {
> background(100, 100, 20);
> for (Tree tree : forest ) tree.draw(); // speak: "for each tree ( of type: class Tree ) IN forest execute its draw function"
> }
> 
> // ___________________________________________________
> class Tree {
> final int tw=10, th=30, tstep=15; // basic triangle spec.
> float x, y;
> Tree(float x, float y) {
> this.x=x;
> this.y=y;
> }
> public void draw() {
> pushMatrix();
> translate(x, y);
> scale(y/vvpff); // size of each tree by its y position, up .. down == small .. big
> fill(113, 71, 3);
> stroke(113, 81, 3);
> rect(-5, th, 10, 60); // trunk
> fill(50, 150, 0);
> stroke(50, 140, 0);
> for (int i = 3; i>=0; i--) triangle(-tw/2*(2+i), th+tstep*i, tw/2*(2+i), th+tstep*i, 0, tstep*i);
> popMatrix();
> }
> }
> 
> // ___________________________________________________
> void make_forest() {
> int[] theYs = new int[many]; // hack to solve the sort problem
> for (int i=0; i<many; i++) theYs[i] = int(random(20, yminus));
> theYs = sort(theYs); // fast normal int array sort
> for (int i=0; i<many; i++) {
> int posx = int(random(20, width-20));
> int posy = theYs[i]; // use the sorted array version
> println("i "+i+" x "+nf(posx, 3)+" y "+nf(posy, 3)+" scale "+nf(posy/vvpff, 3, 1));
> forest[i] = new Tree(posx, posy);
> }
> }
> 
> ```

![snap-024](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/43f530102182403eac8b08b24ae20348ca3aa08f.png)

that could be the start of a my next assignment:  
even if that “single int array sort” might be the easiest and fastest way,  
i want learn how to sort the forest array on its Y pos,  
like i see here:  
[https://forum.processing.org/two/discussion/comment/20332/#Comment\_20332](https://forum.processing.org/two/discussion/comment/20332/#Comment_20332)