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

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