Pixel by Pixel Week 3

Create a painting app, something that applies colors or paint or texture as the user moves the mouse or some other interaction.

This week, I wasn’t really sure what to do with pixels. I started out by trying to alter the existing examples from this week. I experimented with color changes based on trigonometric functions, but found that to be too similar to the example provided. I added a painting element, but because the background is controlled by time, it is rewriting every second and leaving there to be no “painting” element. Also the frame rate is very slow because too many things are happening at once, I think, so it is very laggy.

I really like using noise for movement and color, so I decided to look into that function. I played around with the numbers to control the color, I created a conventional painting/texture app, but I also found that due to the refresh rate of the pixels, when you stay on one point for a little while, a “painting” kind of forms. So I decided to go along with the “set” painting idea where if the user is patient enough, then a painting will form.

First sketch that I made.

First sketch that I made.

Second sketch I made using noise.

Second sketch I made using noise.

Sketch with less randomness.

Sketch with less randomness.

Sketch of painting version (I drew a snake).

Sketch of painting version (I drew a snake).

Sketch with a variation of numbers.

Painting without actually painting sketch (code below).

void setup() {
  size(displayWidth, displayHeight);
  background(0);
}

void draw() {
  loadPixels();                                    
  for (int x = 0; x<width; x++) {
    for (int y = 0; y<height; y++) {
      float nx = noise((mouseX+x)*.03, (mouseY+y)*.005)*mouseX;
      float ny = noise((mouseX + y )* .02, (mouseY+x)*.009)*mouseY;
      float nfakez = noise(mouseY*.008, mouseX*.006)*200;
      int pixelss = x+y*width;
      float rannn = random(15);
      if (rannn<5) {
        pixels[pixelss] = color(nx, ny, nfakez);
      } 
    }
  }
  updatePixels();                                     
}

void mouseClicked() {
  background(0);
}