Help, how to change the size

Ellie98 · October 11, 2020, 2:10pm

Hello,
how do I make that the size of the green square gets bigger if I go up with the mouse and the red one gets smaller at the same time and if I go down with the mouse that the green one gets smaller and the red one bigger?
Thanks in advance!

void setup() {
  surface.setTitle("MalKlein_MalGross");
  size(500, 500);
  surface.setLocation(250, 250); //Skizze zentriert am Bildschirm anzeigen
}
void draw() {
  background(255, 255, 255);
  stroke(0);

  //Seitenlinien mit 15 Abstand, parallel zu den Rändern
  strokeWeight(3);
  line(0, 15, 500, 15);
  strokeWeight(3);
  line(15, 0, 15, 500);
  strokeWeight(3);
  line(0, 485, 500, 485);
  strokeWeight(3);
  line(485, 0, 485, 500);

  //Beschriftungen werden angegeben & Schriftgrößen
  fill(0, 255, 0);
  textSize(12);
  text("Links", 20, 10);

  fill(0, 255, 0);
  textSize(12);
  text("Groß", 20, 30);

  fill(0, 255, 0);
  textSize(12);
  text("Rechts", 445, 10);

  fill(255, 0, 0);
  textSize(12);
  text("Groß", 455, 30);

  fill(0, 255, 0);
  textSize(12);
  text("Klein", 20, 480);

  fill(255, 0, 0);
  textSize(12);
  text("Links", 20, 497);

  fill(255, 0, 0);
  textSize(12);
  text("Klein", 455, 480);

  fill(255, 0, 0);
  textSize(12);
  text("Rechts", 445, 497);

  //Alle 4 Slider kommen dazu HERE ARE THE SLIDERS
  fill(0, 255, 0);
  noStroke();
  square(12, mouseY, 6);

  //Hier entgegengesetzt 
  fill(255, 0, 0);
  noStroke();
  square(483, height-mouseY, 6);

  fill(255, 0, 0);
  noStroke();
  ellipse(mouseX, 485, 5, 10);

  //Hier auch entgegengesetzt 
  fill(0, 255, 0);
  noStroke();
  ellipse(width-mouseX, 16, 5, 10);

  //Grünes Quadrat
  fill(0, 255, 0);
  noStroke();
  square(width-mouseX, mouseY, 6);


  //Rotes Quadrat
  fill(255, 0, 0);
  noStroke();
  square(mouseX, height-mouseY, 6);
}

Chrisir · October 11, 2020, 2:22pm

maybe you can do this with the map() command like

float calcBigness=map(mouseY,0,height, 40,400); // the red one gets smaller if I go up with the mouse

Other idea

Besides mouseX and mouseY there is also pmouseX and pmouseY

(previousMouse x and y position)

So you can compare mouseY with pmouseY , when mouseY < pmouseY the mouse goes UP.
then you can say greenSquareSize++; (declare that before setup as int greenSquareSize=30;)

look at reference for pmouseX and pmouseY

Chrisir

Ellie98 · October 12, 2020, 7:31pm

Thank you!! I tried your first idea and it worked. I wanted to try the second one too but it’s not working. Could you help me out?

int greenSquareSize=30;

void setup() {
  surface.setTitle("MalKlein_MalGross");
  size(500, 500);
  surface.setLocation(250, 250); //Skizze zentriert am Bildschirm anzeigen
}
void draw() {
  background(255, 255, 255);
  stroke(0);

  //Seitenlinien mit 15 Abstand, parallel zu den Rändern
  strokeWeight(3);
  line(0, 15, 500, 15);
  strokeWeight(3);
  line(15, 0, 15, 500);
  strokeWeight(3);
  line(0, 485, 500, 485);
  strokeWeight(3);
  line(485, 0, 485, 500);

  //Beschriftungen werden angegeben & Schriftgrößen
  fill(0, 255, 0);
  textSize(12);
  text("Links", 20, 10);

  fill(0, 255, 0);
  textSize(12);
  text("Groß", 20, 30);

  fill(0, 255, 0);
  textSize(12);
  text("Rechts", 445, 10);

  fill(255, 0, 0);
  textSize(12);
  text("Groß", 455, 30);

  fill(0, 255, 0);
  textSize(12);
  text("Klein", 20, 480);

  fill(255, 0, 0);
  textSize(12);
  text("Links", 20, 497);

  fill(255, 0, 0);
  textSize(12);
  text("Klein", 455, 480);

  fill(255, 0, 0);
  textSize(12);
  text("Rechts", 445, 497);

  //Alle 4 Slider kommen dazu HERE ARE THE SLIDERS
  fill(0, 255, 0);
  noStroke();
  square(12, mouseY, 6);

  //Hier entgegengesetzt 
  fill(255, 0, 0);
  noStroke();
  square(483, height-mouseY, 6);

  fill(255, 0, 0);
  noStroke();
  ellipse(mouseX, 485, 5, 10);

  //Hier auch entgegengesetzt 
  fill(0, 255, 0);
  noStroke();
  ellipse(width-mouseX, 16, 5, 10);
  

  //Grünes Quadrat
  fill(0, 255, 0);
  noStroke();
  square(width-mouseX, mouseY, 6);
if (mouseY > pmouseY) {                      //**I tried it here**
     greenSquareSize++;

}
  //Rotes Quadrat
  fill(255, 0, 0);
  noStroke();
  square(mouseX, height-mouseY, 6);
  
}

Chrisir · October 12, 2020, 8:12pm

Are you using this variable?

Chrisir · October 12, 2020, 9:09pm


int greenSquareSize=30;

void setup() {
  surface.setTitle("MalKlein_MalGross");
  size(500, 500);
  surface.setLocation(250, 250); //Skizze zentriert am Bildschirm anzeigen
}
void draw() {
  background(255, 255, 255);
  stroke(0);

  //Seitenlinien mit 15 Abstand, parallel zu den Rändern
  strokeWeight(3);
  line(0, 15, 500, 15);
  strokeWeight(3);
  line(15, 0, 15, 500);
  strokeWeight(3);
  line(0, 485, 500, 485);
  strokeWeight(3);
  line(485, 0, 485, 500);

  //Beschriftungen werden angegeben & Schriftgrößen
  fill(0, 255, 0);
  textSize(12);
  text("Links", 20, 10);

  fill(0, 255, 0);
  textSize(12);
  text("Groß", 20, 30);

  fill(0, 255, 0);
  textSize(12);
  text("Rechts", 445, 10);

  fill(255, 0, 0);
  textSize(12);
  text("Groß", 455, 30);

  fill(0, 255, 0);
  textSize(12);
  text("Klein", 20, 480);

  fill(255, 0, 0);
  textSize(12);
  text("Links", 20, 497);

  fill(255, 0, 0);
  textSize(12);
  text("Klein", 455, 480);

  fill(255, 0, 0);
  textSize(12);
  text("Rechts", 445, 497);

  //Alle 4 Slider kommen dazu HERE ARE THE SLIDERS
  fill(0, 255, 0);
  noStroke();
  rect(12, mouseY, 6, 6);

  //Hier entgegengesetzt 
  fill(255, 0, 0);
  noStroke();
  rect(483, height-mouseY, 6, 6);

  fill(255, 0, 0);
  noStroke();
  ellipse(mouseX, 485, 5, 10);

  //Hier auch entgegengesetzt 
  fill(0, 255, 0);
  noStroke();
  ellipse(width-mouseX, 16, 5, 10);


  //Grünes Quadrat
  fill(0, 255, 0);
  noStroke();
  rect(width-mouseX, mouseY, greenSquareSize, greenSquareSize);
  if (mouseY > pmouseY) {                      //**I tried it here**
    greenSquareSize++;
  } else if (mouseY < pmouseY) {                      //**I tried it here**
    greenSquareSize--;
  }

  //Rotes Quadrat
  fill(255, 0, 0);
  noStroke();
  rect(mouseX, height-mouseY, 6, 6);
}

Chrisir · October 13, 2020, 11:49am

In my program the greenSquareSize can get <0 the rect is then displayed anyway

you could have an additional if to check whether greenSquareSize <0 and if so set greenSquareSize = 0

Ellie98 · October 13, 2020, 3:41pm

Okay, I think it’s working fine now. Is there any noticeable mistake?

int greenSquareSize=30;
int redSquareSize=30;

void setup() {
  surface.setTitle("MalKlein_MalGross");
  size(500, 500);
  surface.setLocation(250, 250); //Skizze zentriert am Bildschirm anzeigen
}
void draw() {
  background(255, 255, 255);
  stroke(0);

  //Seitenlinien mit 15 Abstand, parallel zu den Rändern
  strokeWeight(3);
  line(0, 15, 500, 15);
  strokeWeight(3);
  line(15, 0, 15, 500);
  strokeWeight(3);
  line(0, 485, 500, 485);
  strokeWeight(3);
  line(485, 0, 485, 500);

  //Beschriftungen werden angegeben & Schriftgrößen
  fill(0, 255, 0);
  textSize(12);
  text("Links", 20, 10);

  fill(0, 255, 0);
  textSize(12);
  text("Groß", 20, 30);

  fill(0, 255, 0);
  textSize(12);
  text("Rechts", 445, 10);

  fill(255, 0, 0);
  textSize(12);
  text("Groß", 455, 30);

  fill(0, 255, 0);
  textSize(12);
  text("Klein", 20, 480);

  fill(255, 0, 0);
  textSize(12);
  text("Links", 20, 497);

  fill(255, 0, 0);
  textSize(12);
  text("Klein", 455, 480);

  fill(255, 0, 0);
  textSize(12);
  text("Rechts", 445, 497);

  //Alle 4 Slider kommen dazu HERE ARE THE SLIDERS
  fill(0, 255, 0);
  noStroke();
  rect(12, mouseY, 6, 6);

  //Hier entgegengesetzt 
  fill(255, 0, 0);
  noStroke();
  rect(483, height-mouseY, 6, 6);

  fill(255, 0, 0);
  noStroke();
  ellipse(mouseX, 485, 5, 10);

  //Hier auch entgegengesetzt 
  fill(0, 255, 0);
  noStroke();
  ellipse(width-mouseX, 16, 5, 10);


  //Grünes Quadrat
  fill(0, 255, 0);
  noStroke();
  rect(width-mouseX, mouseY, greenSquareSize, greenSquareSize);
  if (mouseY > pmouseY) {               
    greenSquareSize++;} //the greenSquareSize can get <0 the rect is then displayed anyway
    //additional if to check whether greenSquareSize <0 and if so set greenSquareSize = 0
    if (greenSquareSize > 0){
    greenSquareSize = 0;}
   else if (mouseY < pmouseY) {                    
    greenSquareSize--;
  }

  //Rotes Quadrat
  fill(255, 0, 0);
  noStroke();
  rect(mouseX, height-mouseY, redSquareSize, redSquareSize);
  if (mouseY > pmouseY) {               
    redSquareSize++;} 
    if (redSquareSize < 0){
    redSquareSize = 0;}
   else if (mouseY < pmouseY) {                    
    redSquareSize--;
}}

Chrisir · October 13, 2020, 3:49pm

You should check for<0 (NOT >0) and do it AFTER the -- command (because it is there to check if the greenSquareSize got < 0 because of -- )

The function setup

size should be the first command in setup()

also, the title can be multiple words, looks better.

void setup() {
  size(500, 500);
  surface.setTitle("Mal Klein, Mal Gross");
  surface.setLocation(250, 250); //Skizze zentriert am Bildschirm anzeigen
}

Remarks

I wouldn’t write Links and Rechts - everybody knows where this is

Groß and Klein is enough

Remember to hit ctrl-t for auto-format in Processing (not in the forum)

So, this is my version:


int greenSquareSize=30;
int redSquareSize=30;

void setup() {
  size(500, 500);
  surface.setTitle("Mal Klein, Mal Gross");
  surface.setLocation(250, 250); //Skizze zentriert am Bildschirm anzeigen
}

void draw() {
  background(255, 255, 255);
  stroke(0);

  //Seitenlinien mit 15 Abstand, parallel zu den Rändern
  strokeWeight(3);
  line(0, 15, 500, 15);
  strokeWeight(3);
  line(15, 0, 15, 500);
  strokeWeight(3);
  line(0, 485, 500, 485);
  strokeWeight(3);
  line(485, 0, 485, 500);

  //Beschriftungen werden angegeben & Schriftgrößen
  //fill(0, 255, 0);
  //textSize(12);
  //text("Links", 20, 10);

  fill(0, 255, 0);
  textSize(12);
  text("Groß", 20, 30);

  //fill(0, 255, 0);
  //textSize(12);
  //text("Rechts", 445, 10);

  fill(255, 0, 0);
  textSize(12);
  text("Groß", 455, 30);

  fill(0, 255, 0);
  textSize(12);
  text("Klein", 20, 480);

  //fill(255, 0, 0);
  //textSize(12);
  //text("Links", 20, 497);

  fill(255, 0, 0);
  textSize(12);
  text("Klein", 455, 480);

  //fill(255, 0, 0);
  //textSize(12);
  //text("Rechts", 445, 497);

  //Alle 4 Slider kommen dazu - HERE ARE THE SLIDERS
  fill(0, 255, 0);
  noStroke();
  rect(12, mouseY, 6, 6);

  //Hier entgegengesetzt 
  fill(255, 0, 0);
  noStroke();
  rect(483, height-mouseY, 6, 6);

  fill(255, 0, 0);
  noStroke();
  ellipse(mouseX, 485, 5, 10);

  //Hier auch entgegengesetzt 
  fill(0, 255, 0);
  noStroke();
  ellipse(width-mouseX, 16, 5, 10);

  //Grünes Quadrat
  fill(0, 255, 0);
  noStroke();
  rect(width-mouseX, mouseY, greenSquareSize, greenSquareSize);

  // mouse
  if (mouseY > pmouseY) {               
    greenSquareSize++;
  } else if (mouseY < pmouseY) {
    greenSquareSize--;
    //additional if to check whether greenSquareSize <0 and if so set greenSquareSize = 0
    if (greenSquareSize < 0) {
      greenSquareSize = 0;
    }
  }

  //Rotes Quadrat
  fill(255, 0, 0);
  noStroke();
  rect(mouseX, height-mouseY, redSquareSize, redSquareSize);

  // mouse
  if (mouseY > pmouseY) {               
    redSquareSize++;
  } else if (mouseY < pmouseY) {                    
    redSquareSize--;
    if (redSquareSize < 0) {
      redSquareSize = 0;
    }
  }//else if
}//func 
//

Sliders

A slider is rectangle on a bar, like in the processing editor on the right side to scroll up and down.

Your sliders don’t do that really.

For a slider you click the green circle on the left (for example) and drag it with the mouse.

Only then the green box changes its size.

Here is an example with the vertical slider (you click the green circle on the left and drag it with the mouse). That’s also very nice!

Using 3 new variables before setup() and mousePressed() and mouseReleased() and a few new lines in draw().

The slider position is stored and mapped to the rectangle size.
You can change the slider position with the mouse but after dragging you can move the mouse independent from the slider again (because the slider position is stored).

int greenSquareSize=30;
int redSquareSize=30;

// Green slider 
float slider1x=12; 
float slider1y=300; 
boolean slider1Hold=false;

void setup() {
  size(500, 500);
  surface.setTitle("Mal Klein, Mal Gross");
  surface.setLocation(250, 250); //Skizze zentriert am Bildschirm anzeigen
}

void draw() {
  background(255, 255, 255);
  stroke(0);

  //Seitenlinien mit 15 Abstand, parallel zu den Rändern
  strokeWeight(3);
  line(0, 15, 500, 15);
  strokeWeight(3);
  line(15, 0, 15, 500);
  strokeWeight(3);
  line(0, 485, 500, 485);
  strokeWeight(3);
  line(485, 0, 485, 500);

  //Beschriftungen werden angegeben & Schriftgrößen
  //fill(0, 255, 0);
  //textSize(12);
  //text("Links", 20, 10);

  fill(0, 255, 0);
  textSize(12);
  text("Groß", 20, 30);

  fill(255, 0, 0);
  textSize(12);
  text("Groß", 455, 30);

  fill(0, 255, 0);
  textSize(12);
  text("Klein", 20, 480);

  fill(255, 0, 0);
  textSize(12);
  text("Klein", 455, 480);

  //Alle 4 Slider kommen dazu - HERE ARE THE SLIDERS
  fill(0, 255, 0);
  noStroke();
  rect(slider1x, slider1y, 6, 6);

  //Hier entgegengesetzt 
  fill(255, 0, 0);
  noStroke();
  rect(483, height-mouseY, 6, 6);

  fill(255, 0, 0);
  noStroke();
  ellipse(mouseX, 485, 5, 10);

  //Hier auch entgegengesetzt 
  fill(0, 255, 0);
  noStroke();
  ellipse(width-mouseX, 16, 5, 10);

  //Grünes Quadrat
  fill(0, 255, 0);
  noStroke();
  rect(width/2, 200, greenSquareSize, greenSquareSize);

  //Rotes Quadrat
  fill(255, 0, 0);
  noStroke();
  rect(map(mouseX, 0, width, 15, width-15), height-mouseY, redSquareSize, redSquareSize);

  // mouse
  if (mouseY > pmouseY) {               
    redSquareSize++;
  } else if (mouseY < pmouseY) {                    
    redSquareSize--;
    if (redSquareSize < 0) {
      redSquareSize = 0;
    }
  }//else if

  if (slider1Hold) {
    slider1y=map(mouseY, 0, height, 15, height-15-8);
    slider1y=constrain(slider1y, 15, height-15-8);
    greenSquareSize = int(map(slider1y, 15, height-15, 10, 155));
  }
  greenSquareSize = int(map(slider1y, 15, height-15, 
    155, 15));
}//func 

void mousePressed() {
  if (dist(mouseX, mouseY, slider1x, slider1y) < 12) {
    // hold=true; 
    slider1Hold=true;
  }
}//func

void mouseReleased() {
  slider1Hold=false;
}
//

Warm regards,

Chrisir

Topic		Replies	Views
Changing the ellipses size with the movement of the mouse (scale a shape) Coding Questions homework	23	287	June 5, 2023
How do I change the size of an object with mouse Coding Questions	1	500	June 7, 2021
Change in color scheme Coding Questions	11	371	June 7, 2019
I am completely lost - changing size according to Mouse position Coding Questions homework	1	319	June 3, 2018
Colour changing! (get the values to go back) Coding Questions	2	386	February 18, 2020

Help, how to change the size

Related Topics