Pixel by Pixel Week 2

Using color shapes, try to create rich gradations in all attributes of shapes such as size, color, brightness, position etc. Try to get those to change with and without interaction.

I just focused on making a really simple grid and some simple random changes. I started out with just a grid of squares of circles that appear based on a random number and the color changes with time. I then wanted to add more color variation within the grids, which would include a form of organic randomness.

I wanted to add an element of randomness where each pixel would be occupied with either a square or circle. I just switched the order of operations that I had already coded and I was able to fill each space with either a square or a circle. The size of the squares move based on perlin noise to add another layer in this pretty basic sketch. The colors and shapes change independent of interaction. I then added interaction by having the color change based on mouseX and mouseY. Below are some gifs of the sketches I made and a copy of the final code with interaction.

First sketch that I made with grids.

First sketch that I made with grids.

Second sketch I made with a bit more color variation.

Second sketch I made with a bit more color variation.

ezgif.com-optimize.gif
ezgif.com-video-to-gif-9.gif
int stepsize = 20;

void setup() {
  size(700, 700);
}
void draw() {
  background(0, 80);
  float nois = noise(.003 * frameCount) * stepsize/2;
  noFill();
  for (int x= 50; x<= width -50; x+= stepsize) {
    for (int y = 50; y <= height - 50; y += stepsize) {
      float rano = random(15);
      if (rano < 5) {
        stroke(mouseX, second()*4, random(255));
        rect(x, y, nois*2, nois*2);
      } else if (rano >5 && rano < 7.5) {
        stroke(second()*4, random(255), mouseX);
        circle(x, y, stepsize/2);
      } else if (rano >7.5 && rano < 10) {
        stroke(second()*4, random(255), mouseY);
        circle(x+stepsize/2, y, stepsize/2);
      } else  if (rano > 10 && rano < 12.5) {
        stroke(random(255), mouseY, second()*4);
        circle(x+stepsize/2, y+stepsize/2, stepsize/2);
      } else if (rano >12.5 && rano < 15) {
        stroke(random(255), mouseX, second()*4);
        circle(x, y+stepsize/2, stepsize/2);
      }
    }
  }
}