# 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.

Second sketch I made with a bit more color variation.

```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);
}
}
}
}```