Need some help with this program idea | i'm a beginner!

Hello, i’m a new user and a processing beginner, i’m writing a program and i need some help!
My program idea is this:
I draw a square (for now, more than one can be difficult -for me-), when i click on it i select the square and i change the stroke. If i re-click, i just delete the “selection” and the stroke.
When i click over my square and it’s selected, my square have to do some actions with keypressed:
1: with the key ‘r’ - the square have to rotate;
2: with the keys ’ + ’ have to change the scale of 10%, otherwise with key ‘-’ have to change scale of “-10%”
3: with the spacebar i change the fill color randomly

Now i’ve described the program and i can tell you my problems.

  1. i don’t know how i can select and unselect my square, and, i don’t know how to make actions only when is selected. I was thinking something like this, but if i try to write keypressed functions this program doesn’t work.
    As you can see in this code, i can select and unselect with click, but if i try to put some actions with keyPressed or the rotation this doesn’t work!

square[] square = new square[1];


void setup()
{
  size(700, 500);
  strokeWeight(3);
  for(int i=0; i < square.length; i++)
  {
    square[i] = new square();
  }
}

void draw()
{
  background(0);
  for(int i=0; i < square.length; i++)
  {
    square[i].displayUpdate();
  }
}

void mouseReleased()
{
  for(int i=0; i < square.length; i++)
  {
    square[i].select();
  }
}

//class square
class square {

  float xpos;
  float ypos;
  float sz = 140;
  boolean selected = false;


square()
  {
    xpos = 300;
    ypos = 150;
  }


  void displayUpdate()
  {


    if (isOver() || selected)
    {
      if(selected)
      stroke(255,0,0);
      else 
      noStroke ();
    }
    else
    {
      noStroke();
    }
    fill(57, 192, 178);
    rect(xpos, ypos, sz, sz);
  }



  boolean isOver()
  {
    return (mouseX > xpos && mouseX < xpos + sz && mouseY > ypos && mouseY < ypos + sz);
  }
  
  void select()
  {
    if (isOver())
    selected = !selected;    
  }
  
}

Can i work on this program to add these actions or not? Should be great!

I have wrote another program with the functions (+ & - ) and (spacebar change color);
in this program if i try to put the code for make it rotate, the program doesn’t work.

I copy the second program

square Q1;

int x = 300;
int y = 300;
int s = 50;
float r = 0;
void setup() {
    size(800, 400);
    background (0);
   Q1  = new square (140, 300, 150, 255); 
    
  
}

void draw() {
  Q1.square ();
 
}

void keyPressed(){
 if (keyCode == 521 ) 
Q1.morescale ();
if(keyCode == 45)
Q1.lesscale ();
if (keyCode == 32)
Q1.colorsquare ();
if (key 'r') 
Q1.rrotate ();
 
 }
 


//class square

class square {
 int size= 140;
 int xPos;
 int yPos; 
 color colorsquare;
 int r ;
 float rr ;

 
 square (int d, int x, int y, color c) {

 xPos = x;
 yPos = y; 
 colorsquare = color (c);
 
 }
 void square () { 
  rect (xPos, yPos, size, size); 
  
 }
 

 void rrotate() {
    pushMatrix();
    translate(x,y);
    rotate(radians(rr+=0.5));
    stroke(255);
    popMatrix();
  }
  
  void morescale () { 
size ++;  
    
  }
  
   void lesscale () { 
  size --;  
    
  }
  
   void colorsquare () { 
  fill( random(255), random(255), random(255), random(255));
  
    
  }
  
}



This is the second code “idea”, i need to change the scale of 10% and -10% but i don’t know how to make it, so i’ve just wrote a easy code size++; and size–;

So, my primary question is: i can put the second code, with rotation and scale functions in the first program? If yes, how can i do? I’ve tried tons of times, if someone can help me i’m here :slight_smile: Thank you!

Hello @coding_beginner

Welcome to the forum. :slight_smile:

I only have a moment, so will address a couple of things that I see in your code that are issues.

1/ In your 2nd code, you use size as a variable in your class. You cannot use the word size as it is a reserved keyword that the processing language already uses to determine the sketch size in setup. A simple fix is to change size (in your class) to sz.

2/ You should read the reference on how to use the keywords key and keyCode
keyCode does not recognize numbers…
https://processing.org/reference/key.html
https://processing.org/reference/keyCode.html

3/ Make sure words that should be capitalized are capitalized. ie

… should be:

class Square{

Once you get the 2nd piece of code to run properly, then you can start to work on integrating with the 1st piece of code.
And a quick glance at your 1st code, it looks like it runs as you want. Though, again, the only change is to capitalize the name of your object class…

:nerd_face:

3 Likes

Is this solved now…?

1 Like

Thank you for this first step

1 Like

I’m working on the rotation function

Just let us know when you need more help

Post your entire code then

here is a new version of your second Sketch

  • especially the rotation works better now

  • coloring is handled differently using colorsquare

Chrisir

Square Q1;

// ----------------------------------------------------------------------------

void setup() {
  size(800, 400);
  background (0);
  Q1  = new Square (140, 300, 150, 255);
}

void draw() {
  background(0);
  Q1.squareShow();
}

// ----------------------------------------------------------------------------
// Inputs 

void keyPressed() {
  if (keyCode == 521 ) //+
    Q1.morescale();
  if (keyCode == 45)   // -
    Q1.lesscale();
  if (keyCode == 32)   // Space Bar
    Q1.colorsquare();
  if (key == 'r')      // r 
    Q1.rrotate ();
}

// ============================================================================
//class square

class Square {

  int sizeSquare;
  int xPos;
  int yPos; 
  color colorsquare;
  // int r ;
  float rr = 0;


  Square (int d, 
    int x, int y, 
    color c) {
    //constr
    sizeSquare=d;

    xPos = x;
    yPos = y;

    colorsquare = color (c);
  }

  void squareShow () { 
    pushMatrix();
    translate(xPos, yPos);
    rotate(radians(rr));
    fill(colorsquare);
    stroke(255);
    rect (0, 0, sizeSquare, sizeSquare);
    popMatrix();
  }

  void rrotate() {
    rr+=0.5;
  }

  void morescale () { 
    sizeSquare++;
  }

  void lesscale () { 
    sizeSquare--;
  }

  void colorsquare () { 
    colorsquare = 
      color( random(255), random(255), random(255), random(255));
  }
  //
} // class Square 
//

@coding_beginner @Chrisir

OMG, my bad!!! My apologies to @coding_beginner if this caused any confusion.

Apparently it is I who did not understand keyCode usage…
Very embarrassed I did not realize the numbers are referencing ASCII values!!
:grimacing:
***I realized my error when reading @Chrisir follow-up post…

:nerd_face:

1 Like

The basic idea is that you

  • store sizeSquare, rr and colorsquare as variables.
  • When you get a key, you change the values (sizeSquare, rr and colorsquare).
  • When you display the square you use the values.

It’s no use to try to change the color with fill upon a key press or to change the rotation upon a key press. (it might work, but as soon as you display something else inbetween, you destroy the settings)

Better change the stored values and use them later when you display the square.

Any progress here? Did you join the two sketches?




square[] square = new square[5];


void setup() {
  size(700, 500);
  strokeWeight(3);

  for (int i=0; i < square.length; i++) {
    square[i] = new square( 50 + i*75, 150 );
  }
}

void draw() {
  background(0);

  fill(255);
  text("Use mouse to select a square; r to rotate selected square", 12, 12);

  for (int i=0; i < square.length; i++) {
    square[i].displayUpdate();
  }
}

// ----------------------------------------------------------------------------
// Inputs 

void keyPressed() {
  if (key == 'r') {
    // r 
    for (int i=0; i < square.length; i++) {
      if (square[i].selected) {
        square[i].rrotate ();
      }
    }
  }
}

//-----------------------------------------------------------------------------------------------

void mouseReleased() {
  // Only ONE button is supposed to be ON at at time. 

  // Here we have 3 situations: 
  // first time click, we switch a button on (by toggle)
  // an ON button gets clicked, we switch it off (by toggle)
  // an OFF button gets clicked, we switch all off first and switch one ON (by toggle) 
  // The code doesn't reflect the 3 situations but handles them correctly.

  boolean aSelectedButtonHasBeenClicked = false; 

  // Let's check whether a Selected Button Has Been Clicked
  for (int i=0; i < square.length; i++) {
    if (square[i].selectedCheck()) {
      aSelectedButtonHasBeenClicked = true;
    }
  }

  // if a non-Selected Button Has Been Clicked, we switch all buttons off first
  // (otherwise we would just switch an additional button on without setting the other (old one) off) 
  if (! aSelectedButtonHasBeenClicked) { 
    for (int i=0; i < square.length; i++) {
      square[i].selected = false;
    }
  }

  // Now we can toggle the clicked button 
  for (int i=0; i < square.length; i++) {
    square[i].select();
  }
}

// ===============================================================================================
//class square
class square {

  float xpos;
  float ypos;
  float sz = 70;
  boolean selected = false;
  float rr = 0;

  square( float x1_, float y1_) {
    xpos = x1_;
    ypos = y1_;
  }

  //---------

  void displayUpdate() {
    if (isOver() || selected) {
      if (selected)
        stroke(255, 0, 0);
      else 
      noStroke ();
    } else
    {
      noStroke();
    }
    fill(57, 192, 178);


    pushMatrix();
    translate(xpos, ypos);
    rotate(radians(rr));
    //fill(colorsquare);
    // stroke(255);
    rect (0, 0, sz, sz);
    popMatrix();
  }

  void rrotate() {
    rr+=0.5;
  }

  boolean isOver() {
    return (mouseX > xpos && 
      mouseX < xpos + sz && 
      mouseY > ypos &&
      mouseY < ypos + sz);
  }

  void select() {
    if (isOver())
      selected = 
        ! selected;
  }

  boolean selectedCheck() {
    return 
      isOver() && selected;
  }
}
//