for loop filling rectangles with colours from array

codeav3

Okay so i've got two things wrong with this program and a question.

1. I would like, when a square is clicked at the top for it to change colour, and only that colour, like a menu item.
2. my for loop to create squares across the screen isn't working. it stops after two.

Question

Is it possible to create a for loop that generates rectangles across the screen, the first one being white and the second black and then filling them with the pinkColours array and then the purpleColours array and so forth.

color[] pinkColours = {color(#ED99E6), color(#F7507F), color(#F7507F)};
color[] purpleColours = {color(#AE5ED8), color(#560E65), color(#DB89F2)};
color[] blueColours = {color(#8D81ED), color(#71A8ED), color(#ACAEF2)};
color[] greenColours = {color(#A3F2CC), color(#42A576), color(#70D883)};
color[] yellowColours = {color(#F2E799), color(#F4F36D), color(#FFFF82)};
color[] redColours = {color(#FF9929), color(#FF7545), color(#7F0700)};


int[] menuXs = new int[13];
int menuYs = 10;
int menuWidths = 32;
int menuHeights = 32;
int currentIcon;

void setup() {
  size(600, 600);
  background(255);
}

void draw() {    
  int startingIconX = 10;
  int startingIconY = 10;
  createColours();
  for(int i = 0; i < 13; i++) {
    if (currentIcon == i) { 
      fill(#6dcff6);
    } else {
      fill(126);
    }  
    noStroke();
    rect(startingIconX, startingIconY, 32, 32);
    menuXs = append(menuXs, startingIconX);
    startingIconX = startingIconX + 50;
  }

  for(int i = 0; i < menuXs.length; i++) {
      // check the mouse position to see if it's inside the rectangle

        if(overButton(menuXs[i], menuYs, menuWidths, menuHeights)) {
          cursor(HAND); 
          if(mousePressed) {                   
            currentIcon = i;           
          }
        } else { 
          cursor(ARROW);
         }  
  }  
}


boolean overButton(int x, int y, int width, int height) {
  if (mouseX >= x && mouseX <= x + width && 
      mouseY >= y && mouseY <= y + height) {
    return true;
  } else {
    return false;
  }
}

void createColours() {
  int colourSize = 20;
  int numberOfColours = width / colourSize;
  for(int i = 0; i < numberOfColours; i = i + colourSize) {
    stroke(0);
    strokeWeight(1.5);
    fill(255);
    rect(i, height - 1.5*colourSize, colourSize, colourSize);
  }  
}  

Chrisir

one word to cursor(HAND);

you see it's flickering. Bad.

better use a boolean cursorIsHand; to decide whether the mouse is shown as hand or arrow.

Once the hand symbol is on (cursorIsHand set to true), we don't go back to arrow during this for-loop (because when we are on a rect we want the hand; then the other rects in the row are tested and although we are NOT on them we want to keep the hand symbol. Thus we don't want an else-part which resets cursorIsHand to false in the if clause) :

color[] pinkColours = {color(#ED99E6), color(#F7507F), color(#F7507F)};
color[] purpleColours = {color(#AE5ED8), color(#560E65), color(#DB89F2)};
color[] blueColours = {color(#8D81ED), color(#71A8ED), color(#ACAEF2)};
color[] greenColours = {color(#A3F2CC), color(#42A576), color(#70D883)};
color[] yellowColours = {color(#F2E799), color(#F4F36D), color(#FFFF82)};
color[] redColours = {color(#FF9929), color(#FF7545), color(#7F0700)};


int[] menuXs = new int[13];
int menuYs = 10;
int menuWidths = 32;
int menuHeights = 32;
int currentIcon;

boolean cursorIsHand = false; 

void setup() {
  size(1600, 600);
  background(255);
}

void draw() {    
  int startingIconX = 110;
  int startingIconY = 10;
  createColours();
  for (int i = 0; i < 13; i++) {
    if (currentIcon == i) { 
      fill(#6dcff6);
    } else {
      fill(126);
    }  
    noStroke();
    rect(startingIconX, startingIconY, 32, 32);
    // menuXs = append(menuXs, startingIconX);
    startingIconX = startingIconX + 50;
  }

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

  cursorIsHand = false; // default 

  for (int i = 0; i < menuXs.length; i++) {
    // check the mouse position to see if it's inside the rectangle

    if (overButton(menuXs[i], menuYs, menuWidths, menuHeights)) {
      // cursor(HAND);
      cursorIsHand = true; // once we decide to use hand symbol, we never go back 
      if (mousePressed) {                   
        currentIcon = i;
      }
    } else { 
      // cursor(ARROW);
    }
  }

  if (cursorIsHand)
    cursor(HAND);
  else 
  cursor(ARROW);
}


boolean overButton(int x, int y, int width, int height) {
  if (mouseX >= x && mouseX <= x + width && 
    mouseY >= y && mouseY <= y + height) {
    return true;
  } else {
    return false;
  }
}

void createColours() {
  int colourSize = 20;
  int numberOfColours = width / colourSize;
  for (int i = 0; i < numberOfColours; i = i + colourSize) {
    stroke(0);
    strokeWeight(1.5);
    fill(255);
    rect(i+44, height - 1.5*colourSize, colourSize, colourSize);
  }
}  

I am not sure what you want to achieve.

You have rects on top which are the menu and you have four rects on the bottom which show which color has been chosen. Correct?

But why do you use append in line 34 ?

Next step: It is recommended to set positions of the menu in setup, so that we define them only once (in setup) and use them often (in draw)

So you don't need append in line 34 anymore, because you define all menuXs in the array in setup once and for all.

color[] pinkColours = {color(#ED99E6), color(#F7507F), color(#F7507F)};
color[] purpleColours = {color(#AE5ED8), color(#560E65), color(#DB89F2)};
color[] blueColours = {color(#8D81ED), color(#71A8ED), color(#ACAEF2)};
color[] greenColours = {color(#A3F2CC), color(#42A576), color(#70D883)};
color[] yellowColours = {color(#F2E799), color(#F4F36D), color(#FFFF82)};
color[] redColours = {color(#FF9929), color(#FF7545), color(#7F0700)};


int[] menuXs = new int[13];
color[]  menuColors = new color[13];


int menuYs = 10;
int menuWidths = 32;
int menuHeights = 32;

int currentIcon;

boolean cursorIsHand = false; 

void setup() {
  size(1600, 600);
  background(255);

  int startingIconX = 110;

  for (int i=0; i<menuColors.length; i++) {
    menuColors[i] = color(255);
    menuXs[i] =  startingIconX ;
    startingIconX = startingIconX + 50;
  }
}

void draw() {    

  createColours();

  for (int i = 0; i < 13; i++) {
    if (currentIcon == i) { 
      fill(#6dcff6);
    } else {
      fill(126);
    }  
    noStroke();
    rect(menuXs[i], menuYs, 32, 32);
  }

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

  cursorIsHand = false; // default 

  for (int i = 0; i < menuXs.length; i++) {
    // check the mouse position to see if it's inside the rectangle

    if (overButton(menuXs[i], menuYs, menuWidths, menuHeights)) {
      cursorIsHand = true; // once we decide to use hand symbol, we never go back 
      if (mousePressed) {                   
        currentIcon = i;
      }
    }
  }

  if (cursorIsHand) {
    cursor(HAND);
  } else { 
    cursor(ARROW);
  }
}


boolean overButton(int x, int y, int width, int height) {
  if (mouseX >= x && mouseX <= x + width && 
    mouseY >= y && mouseY <= y + height) {
    return true;
  } else {
    return false;
  }
}

void createColours() {
  int colourSize = 20;
  int numberOfColours = width / colourSize;
  for (int i = 0; i < numberOfColours; i = i + colourSize) {
    stroke(0);
    strokeWeight(1.5);
    fill(255);
    rect(i+44, height - 200, colourSize, colourSize);
  }
}  

Chrisir

and here colors:

color[] pinkColours = {color(#ED99E6), color(#F7507F), color(#F7507F)};
color[] purpleColours = {color(#AE5ED8), color(#560E65), color(#DB89F2)};
color[] blueColours = {color(#8D81ED), color(#71A8ED), color(#ACAEF2)};

color[] greenColours = {color(#A3F2CC), color(#42A576), color(#70D883)};
color[] yellowColours = {color(#F2E799), color(#F4F36D), color(#FFFF82)};
color[] redColours = {color(#FF9929), color(#FF7545), color(#7F0700)};

color[] allColors =  {color(255), 
  (0), 
  (#ED99E6), (#F7507F), (#F7507F), 
  (#AE5ED8), (#560E65), (#DB89F2), 
  (#8D81ED), (#71A8ED), (#ACAEF2), 
  (#A3F2CC), (#42A576), (#70D883), 
  (#F2E799), (#F4F36D), (#FFFF82), 
  (#FF9929), (#FF7545), (#7F0700)
}; 

int[] menuXs = new int[13];
color[]  menuColors = new color[13];


int menuYs = 10;
int menuWidths = 32;
int menuHeights = 32;

int currentIcon;

boolean cursorIsHand = false; 

void setup() {
  size(1600, 600);
  background(255);

  int startingIconX = 110;

  for (int i=0; i<menuColors.length; i++) {
    menuColors[i] = color(255);
    menuXs[i] =  startingIconX;
    startingIconX = startingIconX + 50;
  } //for
}

void draw() {    

  createColours();

  for (int i = 0; i < 13; i++) {
    if (currentIcon == i) { 
      fill(#6dcff6);
    } else {
      fill(126);
    }  
    noStroke();
    rect(menuXs[i], menuYs, 32, 32);
  }

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

  cursorIsHand = false; // default 

  for (int i = 0; i < menuXs.length; i++) {
    // check the mouse position to see if it's inside the rectangle

    if (overButton(menuXs[i], menuYs, menuWidths, menuHeights)) {
      cursorIsHand = true; // once we decide to use hand symbol, we never go back 
      if (mousePressed) {                   
        currentIcon = i;
      }
    }
  }

  if (cursorIsHand) {
    cursor(HAND);
  } else { 
    cursor(ARROW);
  }
}


boolean overButton(int x, int y, int width, int height) {
  if (mouseX >= x && mouseX <= x + width && 
    mouseY >= y && mouseY <= y + height) {
    return true;
  } else {
    return false;
  }
}

void createColours() {
  float sizeRect = width / allColors.length - 3;
  // println(numberOfColours);
  for (int i = 0; i < allColors.length; i++) {
    stroke(0);
    // strokeWeight(1.5);

    fill(allColors[i]);
    rect( 3 + i*(sizeRect), height - 200, sizeRect, sizeRect);
  }
}
//

codeav3

thank you!!!

Chrisir

I was not sure though why I had to use this without color :

color[] allColors =  {color(255), 
  (0), 
  (#ED99E6), (#F7507F), (#F7507F), 
  (#AE5ED8), (#560E65), (#DB89F2), 
  (#8D81ED), (#71A8ED), (#ACAEF2), 
  (#A3F2CC), (#42A576), (#70D883), 
  (#F2E799), (#F4F36D), (#FFFF82), 
  (#FF9929), (#FF7545), (#7F0700)
}; 

at first I wanted to write

color[] allColors =  {color(255), 
  color(0), 
  color(#ED99E6)................

but it didn't work, all got black...

Lord_of_the_Galaxy

@Chrisir Maybe color() is one of those functions you can't use before entering setup(). I guess since it requires a number of other variables, some of them may not have been initialised before then and that leads to the problem.