For class tomorrow. How do you loop fill colors then stop on the first color?

june13

For class, I need to make a square that cycles through colors when clicked inside the square (black when inactive, then red, then yellow, white and then black again) and then stops on the last color. I've gotten it to change to only red when clicked, and I'm not sure what coding I need to add to get it to cycle through the others and then stop on the first.

Here is my coding so far:

    boolean pressInsideButton = false;

    boolean isButtonArmed = false;

    int x1 = 300;

    int y1 = 200;

    int x2 = 200;

    int y2 = 200;

    void setup() {
    size( 600, 400 );
    }

    void draw() {
    background( 128 );

    if (isButtonArmed == true) {

        fill(255, 255, 0);
        fill(255, 0, 0);

    } else {

    fill( 0 );

    }
      rectMode( CENTER );
      rect( x1, y1, x2, y2 );

    }

    void mousePressed() {

    pressInsideButton = false;

    if (mouseX <= x1 && mouseX >= x2 && mouseY >= y1 && mouseY >= y2) {
    pressInsideButton = true;

      }

    }

    void mouseReleased() {

    loop();

    if (pressInsideButton && mouseX <= x1 && mouseX >= x2 && mouseY >= y1 && mouseY >= y2) {
    isButtonArmed = !isButtonArmed;
      }
    }
    `

GoToLoop

http://forum.processing.org/two/discussion/8045/how-to-format-code-and-text

june13

fixed the coding

GoToLoop

• You can start by making a color[] array in order to store the sequence.
• You gotta establish how many frameCount gotta transpire before changing to next color.
• Store current frameCount when clicked. The divide it by the chosen interval.

asimes

We do not offer complete solutions for homework on this forum, but I did rework your sketch to simplify it. I also put in some basic logic for clicking and put comments

At the moment it is incomplete (intentionally) but clicking makes an int have a value of 1. After that click has happened the value of that int will increase. You'll have to associate yellow with 2, white with 3, and black with all values greater than or equal to 4. If you click again then that int will go back to being 1 again (red) and the cycle will repeat

Be sure to look at the output, it will show you the current value of the int:

// Using an int rather than a boolean will help your color logic later
// I am using 0 to represent "inactive"
int colorState = 0;

// rect()'s arguments are x, y, width, height
// I changed the variable names to make this clear
int x = 200;
int y = 100;
int w = 200;
int h = 200;

void setup() {
  size(600, 400);

  // I slowed down the frameRate to 3 frames per second
  // This is not the best way to control speed in a sketch
  // However, it is a simple way to do it and will prevent colors from changing too fast
  frameRate(3);
}

void draw() {
  background(128);

  // If colorState is not 0 then that means a click happened
  if (colorState != 0) {

    // The first color state (red)
    if (colorState == 1) fill(255, 0, 0);

    // Missing logic for when colorState needs to cause yellow, white, and black
    // Since this is a homework assignment, you should figure out what to do here

    // Make colorState one larger
    // Also printing it so that you can see what happens after a click
    colorState++;
    println(colorState);

  } else {
    fill(0);
  }

  rect(x, y, w, h);
}

void mousePressed() {
  // Logic for clicking inside the rectangle was incorrect
  // Not using rectMode(CENTER) probably helps make this logic more clear
  // The idea is to check if mouseX is inside the rectangle horizontally:
  // - mouseX >= x means the mouse is to the right of the left edge
  // - mouseX < x+w means the mouse is to the left of the right edge
  // Then check if mouseY is inside the rectangle vertically:
  // - mouseY >= y means the mouse is below the top edge
  // - mouseY < y+h means the mouse is above the bottom edge
  if (mouseX >= x && mouseX < x+w && mouseY >= y && mouseY < y+h) {

    // Change the color state, 1 will correspond to the first color
    colorState = 1;
  }
}