# Changing the ellipses size with the movement of the mouse (scale a shape)

**URL:** <https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [June 4, 2023, 4:48pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139 "2023-06-04T16:48:24Z")\
**Posts on this page:** 4\
**Page:** 2

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 5, 2023, 7:25pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/22 "2023-06-05T19:25:55Z")

</div>

you need to use radius1 or radius2

try

```auto
// increase
radius1 = map (mouseX,
0,width,
0, 4);

translate(width/2, height/2); 
scale(radius1);

// in the ellipse commands replace mouseX,mouseY where it is used as position by `0,0`

```

---

<div class="post-metadata">

**Author:** ![Bots](https://avatars.discourse-cdn.com/v4/letter/b/41988e/32.png) [@Bots](https://discourse.processing.org/u/Bots)\
**Post date:** [June 5, 2023, 8:00pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/23 "2023-06-05T20:00:15Z")

</div>

That just made everything way to big

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [June 5, 2023, 8:02pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/24 "2023-06-05T20:02:16Z")

</div>

Hi

You can draw your ellipse like this as @Chrisir made

```auto

int logoSize = 25;
float radius1;
void setup() {
  size(500, 500);
  ellipseMode(CENTER);
}

void draw() {
  background(255);
  strokeWeight(20);

  radius1 =map (mouseX, 0, width, 0, 4);
  //translate (width/2, height/2);

  noFill();

  ellipse(0, 0, logoSize+50+378, logoSize-50+378);
  ellipse(0, -60, logoSize-50+378, logoSize-175+378);
  ellipse(0, 0, logoSize-175+378, logoSize-50+378);
}

```

Unmarked this line to make the ellipse become in the center  
//translate (width/2, height/2);  
 ![Screenshot_2023-06-05-22-52-47-467](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/2/02bb1bb725a51f675ee9ae1a0967c5e1e28927f3.jpeg)

Scale enable you to zoom in/out your logo

Then scale radius1

> **[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 …

> **[translate() / Reference](https://processing.org/reference/translate_.html)**
>
> Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation, and the z param…

Note that this is all @Chrisir idea thanks Alot for him

Read @Chrisir’s last post

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 5, 2023, 8:54pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/25 "2023-06-05T20:54:51Z")

</div>

> [@Bots](#):
>
> That just made everything way to big

I know

Reduce 4 to 2 for example in the map() command

[Previous page](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139.md?page=1)