# How to do a stationary scale animation?

**URL:** https://discourse.processing.org/t/how-to-do-a-stationary-scale-animation/10627
**Category:** Coding Questions
**Created:** [April 25, 2019, 1:55pm UTC](https://discourse.processing.org/t/how-to-do-a-stationary-scale-animation/10627 "2019-04-25T13:55:39Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![karatecake](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@karatecake](https://discourse.processing.org/u/karatecake)
#### Post date: [April 25, 2019, 1:55pm UTC](https://discourse.processing.org/t/how-to-do-a-stationary-scale-animation/10627/1 "2019-04-25T13:55:39Z")

</div>

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.

```auto
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:

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

```

Any help would be appreciated.

---

<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: [April 25, 2019, 2:11pm UTC](https://discourse.processing.org/t/how-to-do-a-stationary-scale-animation/10627/2 "2019-04-25T14:11:24Z")

</div>

-a- you did not answer to my question  
[Trying to do an animation, how can I make the mushroom go from closed to open?](https://discourse.processing.org/t/trying-to-do-an-animation-how-can-i-make-the-mushroom-go-from-closed-to-open/10614/2) 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

```auto
draw_mushroom( posx, posy, w, h, open );

```

---

<div class="post-metadata">

### Author: ![karatecake](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@karatecake](https://discourse.processing.org/u/karatecake)
#### Post date: [April 25, 2019, 2:27pm UTC](https://discourse.processing.org/t/how-to-do-a-stationary-scale-animation/10627/3 "2019-04-25T14:27:02Z")

</div>

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.

---

<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: [April 25, 2019, 2:46pm UTC](https://discourse.processing.org/t/how-to-do-a-stationary-scale-animation/10627/4 "2019-04-25T14:46:29Z")

</div>

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

```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]; // 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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c567eadf8c7205a4e3300569fe0e66a49bfd1792.jpeg)

---

<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: [April 29, 2019, 10:48pm UTC](https://discourse.processing.org/t/how-to-do-a-stationary-scale-animation/10627/5 "2019-04-29T22:48:01Z")

</div>

> [@karatecake](#):
>
> but it ends up moving my mushrooms away from where I placed them.

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:

```auto
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.

```auto
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.

```auto
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 …

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

```auto
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).

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

```
