How to do a stationary scale animation?

Processing Coding Questions
1

I have 4 mushroom shapes I’d like to grow and shrink while staying in their current positions. I’ve tried a few kinds of code, but it ends up moving my mushrooms away from where I placed them. Here are each of my mushrooms.

void tinyshroom1(){
  noStroke();
  fill(bColor);
  bezier(50,370,45,310,85,310,80,370);
}
void tinyshroom2(){
  noStroke();
  fill(bColor);
  bezier(130,370,125,310,165,310,160,370);
}
void tinyshroom3(){
  noStroke();
  fill(bColor);
  bezier(340,370,335,310,375,310,370,370);
}
void tinyshroom4(){
  noStroke();
  fill(bColor);
  bezier(420,370,415,310,455,310,450,370);

And then tied them together:

void mushroomgang(){
  tinyshroom1();
  tinyshroom2();
  tinyshroom3();
  tinyshroom4();
}

Any help would be appreciated.

1 Like
2

-a- you did not answer to my question
Trying to do an animation, how can I make the mushroom go from closed to open? here

-b- you did not work on variable position / form of the bezier curve

-c- now you just post 4 of that “static” curves.

generally there are two ideas:

-1- use blocks of
push / translate / scale / drawbezier / pop
for each
-2-
pls go back and work on the first problem
as that solves also the variable position
once your whole mushroom ( or the “head” only like here )
has a posx, posy form/size factors
you can make a module / function and call

draw_mushroom( posx, posy, w, h, open );
1 Like
3

I was able to rectify my mistake with the mushroom top animation, I had a background in void setup, not void draw and that was messing with the output I was looking for. My code up until that point was right, but I assumed it was wrong because i’m an amateur.
I tried using push/translate/scale/pop/etc and it moves my mushrooms where I don’t want them.
I’ll try out the second option and see what happens.

4

sorry, no mushrooms, but i have the forest for them:

// 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];   // to solve the sort problem
  int posx,posy;
  
  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++) {
    posx = int(random(20, width-20));
    posy = theYs[i];            // use the sorted array version
    println("i "+nf(i,2)+" x "+nf(posx, 3)+" y "+nf(posy, 3)+" scale "+nf(posy/vvpff, 3, 2));
    forest[i] = new Tree(posx, posy);
  }
}

SNAG-0086

1 Like
5

The key to placing and moving a shape is deciding where on the shape the origin is. If your bezierCurve is a piece of paper, then 0,0 is its origin. The shape should grow, shrink, or stretch around that origin. Where should it be for your mushroom – is it in the upper-left corner, the center, the center-bottom? Right now, your points begin at 50,370 – that means everything is on the lower left of the origin, and when it grows it will move farther down and to the left.

Your tinymushroom function can then take arguments on where it should be drawn. This, for example, is drawn centered:

void tinyshroom(float x, float y){
  translate(x, y);
  rect(-5, -5, 10, 10);
  translate(-x, -y);
}

You could use modes for that, like rectMode, but they only work for primitives.

void tinyshroom(float x, float y){
  rectMode(CENTER);
  rect(x, y, 10, 10);
}

If you wish, you can also use a push/pop to set translate, then unset it when you are done.

void tinyshroom(float x, float y){
  pushMatrix();
  translate(x, y);
  rect(-5, -5, 10, 10);
  popMatrix();
}

Scaling could also be controlled either by manually multiplying your coordinates …

void tinyshroom(float x, float y, float scaling){
  pushMatrix();
  translate(x, y);
  rect(scaling*-5, scaling*-5, scaling*10, scaling*10);
  popMatrix();
}

…or by using scale(). It will be reset by popMatrix().

void tinyshroom(float x, float y, float scaling){
  pushMatrix();
  translate(x, y);
  scale(scaling);
  rect(-5, -5, 10, 10);
  popMatrix();
}

So, putting it all together, here is a shape that you can draw anywhere, at any size (.5 for half size, 2 for double).

void draw(){
  background(192);
  tinyshroom(50, 50, 3);
  tinyshroom(80, 80, 0.75);
  tinyshroom(mouseX, mouseY, millis()%3000/1000.0);
}
void tinyshroom(float x, float y, float scaling){
  pushMatrix();
  translate(x, y);
  scale(scaling);
  rect(-5, -5, 10, 10);
  popMatrix();
}
2 Likes