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

Processing Coding Questions
1

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?

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(); 
}
1 Like
2

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:

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/ is a good place to learn

2 Likes
3

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.

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();
}
2 Likes
4

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.

// 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 
// 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

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

2 Likes