[NEWBz] Function within a conditional?

ryansander

Hello!

I'm trying to make a board of squares on square grid with random colors and dimensions ranging from int 10-30. I've made this happen, but I want to try to do it with functions instead of the conditionals themselves, but I can't figure out how to do that. Also I want the row and column of the square I press to change colors randomly when I click on it. Any help is much appreciated guys!

Thanks,

Chris Bosh

Here's what I have so far:

int n = int(random(10,30));
int z = int(random(10,30));

void setup() {
  size(n*z,n*z);
  background(255);

  for(int x = 0; x < width; x = x + z) {
    for(int y = 0; y < height; y = y + z) {
       noStroke();
       fill(random(255),random(255),random(255));
       rect(x,y,z,n);
  }
}

GoToLoop

Lotsa grid online examples:

http://studio.processingtogether.com/sp/pad/export/ro.98-pSvW97Q-RE/latest
http://studio.processingtogether.com/sp/pad/export/ro.9ABG0RKl9D2Bx/latest
http://studio.processingtogether.com/sp/pad/export/ro.93MhRWK35nIP8/latest
http://studio.processingtogether.com/sp/pad/export/ro.9L5jAtga7SpyF/latest
http://studio.processingtogether.com/sp/pad/export/ro.9A9O52aqsIjdx/latest

PhiLho

"I've made this happen"
Not with the code you show, at least... :-) You change the fill color, but doesn't draw anything. And I don't see any conditional in this code either.

"when I click on it"
Not sure where you are stuck. Do you know the mousePressed() function, for example?

ryansander

Lol sorry I missed the rect line when I pasted it in, my bad! Yes I'm familiar with the mouse pressed function, but doesn't have to work in conjunction with a draw() section? And wouldn't that mean the setup() I have would be gone after the first frame?

blyk

Here is similar post

/*
Date: Feb 3rd, 2014
Post: How can I assign colors to certain rectangles in an array?
http://forum.processing.org/two/discussion/comment/9084#Comment_9084
Original Post & code: carlouws 
Modified by: Blyk
*/


// 2D Array of objects
Cell[][] grid;

// Number of columns and rows in the grid
int cols = 8;
int rows = 8;

void setup() {
  size(720, 720);
  grid = new Cell[cols][rows];
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      grid[i][j] = new Cell(i*90, j*90, 90, 90, i+j);
    }
  }
}

void draw() {
  background(0);
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      grid[i][j].display();
      if (grid[i][j].x<mouseX && mouseX < grid[i][j].x + grid[i][j].w && grid[i][j].y<mouseY && mouseY < grid[i][j].y + grid[i][j].h && mousePressed) {
        color col = color(0);
        grid[i][j].update(col);
      }
    }
  }
}

// A Cell object
class Cell {
  // A cell object knows about its location in the grid as well as its size with the variables x,y,w,h.
  float x, y;   // x,y location
  float w, h;   // width and height
  float angle; // angle for oscillating brightness
  color c;
  // Cell Constructor
  Cell(float tempX, float tempY, float tempW, float tempH, float tempAngle) {
    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;
    angle = tempAngle;
     c = color(-1);
  } 

  void display() {
    stroke(0);
    fill(c);
    rect(x, y, w, h);
  }

  void update(color c) {
    this.c = c;
  }
}

Chrisir

blyk's sketch is very elegant

to dig more into classes and oop, see

http://processing.org/tutorials/objects/

please

other approach

Another approach would be to calculate the cell's positions on the fly in mousepressed... but then you need a 2D grid to store the colors...