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

Processing Coding Questions
1

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

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

@Chrisir could you help with this

3

Hi
Welcome :hugs:

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

you can also look at the map command, for example


// increase
radius1 = map (mouseX, 
   0,width,
   30,129); 

// decrease
radius2 = map (mouseX, 
   0,width,
   129,30);
1 Like
5

Thank you but i would also need the logo to follow the mouse as it gets bigger or smaller

1 Like
6

Where would this be used exactly

7

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;

8

you can use loadimage and then image(logo, mouseX, mouseY);

you can also use resize on image to change the size (or scale() command)

9

Ok and what would the code look like after all of this

1 Like
10

read the reference and then show your approach please.

see resize() / Reference / Processing.org for example

11

I genuinely don’t know the process behind it

12

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

13

so thing is the logo isn’t a picture, its three ellipses together so i don’t know how loadimage works with it

14

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.

16

yes I only want to change the size

17

still don’t really know how to do this

18

That’s the idea

Can you please show your attempt

19

example with scale

The difficult thing is to have the logo stay in the same place during using scale().

[code removed]

1 Like
20

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

21

what am I missing if anything