# 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:** 20
**Page:** 1
### Author:  [@Bots](https://discourse.processing.org/u/Bots)
#### Post date: [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/1 "2023-06-04T16:48:24Z")
In the following code , I am trying to increase and decrease the size of the ellipses as my mouse moves from left to right on the canvas, I would appreciate any help
```auto
int logoSize = 250;
void setup(){
size(500,500);
}
void draw(){
background(255);
strokeWeight(20);
ellipse(mouseX,mouseY,logoSize+50+mouseX,logoSize-50+mouseX);
ellipse(mouseX,mouseY-60,logoSize-50+mouseX,logoSize-175+mouseX);
noFill();
ellipse(mouseX,mouseY,logoSize-175+mouseX,logoSize-50+mouseX);
if(mousePressed){
noLoop();
}
}
```
---
### Author:  [@Bots](https://discourse.processing.org/u/Bots)
#### Post date: [June 4, 2023, 6:18pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/2 "2023-06-04T18:18:54Z")
@Chrisir could you help with this
---
### Author:  [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [June 4, 2023, 8:10pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/3 "2023-06-04T20:10:35Z")
Hi
Welcome 🤗
```auto
float z= 60;
void setup() {
size(600, 600);
}
void draw() {
background(255, 0, 255);
fill(0, 255, 255);
ellipse(width/2, height/2, z, z);
ellipse(width/4, height/4, z, z);
}
void mousePressed() {
z= dist(mouseX, mouseY, width/2, height/2);
}
void mouseDragged() {
z= dist(mouseX, mouseY, width/2, height/2);
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 4, 2023, 8:27pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/4 "2023-06-04T20:27:36Z")
you can also look at the map command, for example
```auto
// increase
radius1 = map (mouseX,
0,width,
30,129);
// decrease
radius2 = map (mouseX,
0,width,
129,30);
```
---
### Author:  [@Bots](https://discourse.processing.org/u/Bots)
#### Post date: [June 4, 2023, 8:30pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/5 "2023-06-04T20:30:00Z")
Thank you but i would also need the logo to follow the mouse as it gets bigger or smaller
---
### Author:  [@Bots](https://discourse.processing.org/u/Bots)
#### Post date: [June 4, 2023, 8:30pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/6 "2023-06-04T20:30:35Z")
Where would this be used exactly
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 4, 2023, 8:39pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/7 "2023-06-04T20:39:32Z")
the lines belong before the 2 lines with the ellipse command
the ellipse command need to use radius1 or radius2
before setup() you need `float radius1, radius2;`
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 4, 2023, 8:40pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/8 "2023-06-04T20:40:50Z")
> [@Bots](#):
>
> i would also need the logo to follow the mouse
you can use loadimage and then image(logo, mouseX, mouseY);
you can also use resize on image to change the size (or scale() command)
---
### Author:  [@Bots](https://discourse.processing.org/u/Bots)
#### Post date: [June 4, 2023, 8:43pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/9 "2023-06-04T20:43:21Z")
Ok and what would the code look like after all of this
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 4, 2023, 8:49pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/10 "2023-06-04T20:49:56Z")
read the reference and then show your approach please.
see [resize() / Reference / Processing.org](https://processing.org/reference/PImage_resize_.html) for example
---
### Author:  [@Bots](https://discourse.processing.org/u/Bots)
#### Post date: [June 4, 2023, 8:53pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/11 "2023-06-04T20:53:20Z")
I genuinely don’t know the process behind it
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 4, 2023, 9:00pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/12 "2023-06-04T21:00:01Z")
Use loadImage to load your logo
Use the lines with map to calc the radius
Use radius with resize
Use image() to display the logo
There are examples to all commands in the reference
---
### Author:  [@Bots](https://discourse.processing.org/u/Bots)
#### Post date: [June 4, 2023, 9:20pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/13 "2023-06-04T21:20:06Z")
so thing is the logo isn’t a picture, its three ellipses together so i don’t know how loadimage works with it
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 4, 2023, 9:50pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/14 "2023-06-04T21:50:55Z")
Loadimage does only apply when you want to load an image lile jpg
I misunderstood you
For the 3 circles just use the radius for each of then
And use translate (mouseX, mouseY); for example
Sorry that this is so hard.
---
### Author:  [@Bots](https://discourse.processing.org/u/Bots)
#### Post date: [June 4, 2023, 10:14pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/16 "2023-06-04T22:14:36Z")
yes I only want to change the size
---
### Author:  [@Bots](https://discourse.processing.org/u/Bots)
#### Post date: [June 4, 2023, 10:26pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/17 "2023-06-04T22:26:29Z")
still don’t really know how to do this
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 5, 2023, 5:41am UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/18 "2023-06-05T05:41:05Z")
> [@Chrisir](#):
>
> the lines with map(mouseX… belong before the 2 lines with the ellipse command
>
> the ellipse command need to use radius1 or radius2
>
> before setup() you need `float radius1, radius2;`
That’s the idea
Can you please show your attempt
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 5, 2023, 8:02am UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/19 "2023-06-05T08:02:31Z")
example with scale
The difficult thing is to have the logo stay in the same place during using scale().
[code removed]
---
### Author:  [@Bots](https://discourse.processing.org/u/Bots)
#### Post date: [June 5, 2023, 6:16pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/20 "2023-06-05T18:16:43Z")
This is my attempt so far
int logoSize = 250;
float radius1, radius2;
void setup(){
size(500,500);
}
void draw(){
background(255);
strokeWeight(20);
// increase
radius1 = map (mouseX,
0,width,
30,129);
// decrease
radius2 = map (mouseX,
0,width,
129,30);
ellipse(mouseX,mouseY,logoSize+50+mouseX,logoSize-50+mouseX);
ellipse(mouseX,mouseY-60,logoSize-50+mouseX,logoSize-175+mouseX);
noFill();
ellipse(mouseX,mouseY,logoSize-175+mouseX,logoSize-50+mouseX);
if(mousePressed){
noLoop();
}
}
---
### Author:  [@Bots](https://discourse.processing.org/u/Bots)
#### Post date: [June 5, 2023, 6:17pm UTC](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139/21 "2023-06-05T18:17:10Z")
what am I missing if anything
[Next page](https://discourse.processing.org/t/changing-the-ellipses-size-with-the-movement-of-the-mouse-scale-a-shape/42139.md?page=2)