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

**URL:** <https://discourse.processing.org/t/need-some-help-with-this-program-idea-im-a-beginner/22793>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [July 23, 2020, 11:49am UTC](https://discourse.processing.org/t/need-some-help-with-this-program-idea-im-a-beginner/22793 "2020-07-23T11:49:01Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![coding\_beginner](https://avatars.discourse-cdn.com/v4/letter/c/c4cdca/32.png) [@coding\_beginner](https://discourse.processing.org/u/coding_beginner)\
**Post date:** [July 23, 2020, 11:49am UTC](https://discourse.processing.org/t/need-some-help-with-this-program-idea-im-a-beginner/22793/1 "2020-07-23T11:49:01Z")

</div>

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!

```auto

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

```auto
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 🙂 Thank you!

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [July 23, 2020, 3:23pm UTC](https://discourse.processing.org/t/need-some-help-with-this-program-idea-im-a-beginner/22793/2 "2020-07-23T15:23:32Z")

</div>

Hello @coding_beginner

Welcome to the forum. 🙂

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…

> **[key / Reference](https://processing.org/reference/key.html)**
>
> The system variable key always contains the value of the most recent key on the keyboard that was used (either pressed or released). For non-ASCII keys, use the keyCode varia…

> **[keyCode / Reference](https://processing.org/reference/keyCode.html)**
>
> The variable keyCode is used to detect special keys such as the UP, DOWN, LEFT, RIGHT arrow keys and ALT, CONTROL, SHIFT. When checking for these keys, it can be useful to first chec…

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

> [@coding\_beginner](#):
>
> ```auto
> class square {
> 
> ```

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

🤓

---

<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:** [July 27, 2020, 6:12am UTC](https://discourse.processing.org/t/need-some-help-with-this-program-idea-im-a-beginner/22793/3 "2020-07-27T06:12:01Z")

</div>

Is this solved now…?

---

<div class="post-metadata">

**Author:** ![coding\_beginner](https://avatars.discourse-cdn.com/v4/letter/c/c4cdca/32.png) [@coding\_beginner](https://discourse.processing.org/u/coding_beginner)\
**Post date:** [July 27, 2020, 11:53am UTC](https://discourse.processing.org/t/need-some-help-with-this-program-idea-im-a-beginner/22793/4 "2020-07-27T11:53:33Z")

</div>

Thank you for this first step

---

<div class="post-metadata">

**Author:** ![coding\_beginner](https://avatars.discourse-cdn.com/v4/letter/c/c4cdca/32.png) [@coding\_beginner](https://discourse.processing.org/u/coding_beginner)\
**Post date:** [July 27, 2020, 11:54am UTC](https://discourse.processing.org/t/need-some-help-with-this-program-idea-im-a-beginner/22793/5 "2020-07-27T11:54:34Z")

</div>

I’m working on the rotation function

---

<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:** [July 27, 2020, 12:47pm UTC](https://discourse.processing.org/t/need-some-help-with-this-program-idea-im-a-beginner/22793/6 "2020-07-27T12:47:06Z")

</div>

Just let us know when you need more help

Post your entire code then

---

<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:** [July 30, 2020, 2:12pm UTC](https://discourse.processing.org/t/need-some-help-with-this-program-idea-im-a-beginner/22793/7 "2020-07-30T14:12:22Z")

</div>

here is a new version of your second Sketch

- especially the rotation works better now

- coloring is handled differently using `colorsquare`

Chrisir

```auto
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 
//

```

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [July 30, 2020, 4:15pm UTC](https://discourse.processing.org/t/need-some-help-with-this-program-idea-im-a-beginner/22793/8 "2020-07-30T16:15:51Z")

</div>

@coding_beginner @Chrisir

> [@debxyz](#):
>
> 2/ You should read the reference on how to use the keywords **key** and **keyCode** —  
> keyCode does not recognize numbers…

**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!!  
😬  
\*\*\*I realized my error when reading @Chrisir follow-up 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:** [July 30, 2020, 4:27pm UTC](https://discourse.processing.org/t/need-some-help-with-this-program-idea-im-a-beginner/22793/9 "2020-07-30T16:27:50Z")

</div>

> [@coding\_beginner](#):
>
> I’m working on the rotation function

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.

---

<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:** [August 13, 2020, 10:18am UTC](https://discourse.processing.org/t/need-some-help-with-this-program-idea-im-a-beginner/22793/10 "2020-08-13T10:18:40Z")

</div>

Any progress here? Did you join the two sketches?

---

<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:** [August 13, 2020, 11:59am UTC](https://discourse.processing.org/t/need-some-help-with-this-program-idea-im-a-beginner/22793/11 "2020-08-13T11:59:17Z")

</div>

```auto

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;
  }
}
//

```