// This produces "Pop Art" in the style of Andy Warhol
// Try out your own images!
// Left and right click to modify the fading/colors.
// Press 1-9 keys to change a single square at a time.

PImage img;

float[] bgs;
float[] fills;

int w = 100;
int h = w;

int n;

float fade = 1; // goes from 0 to 1 and back
boolean fadeOut = false;
boolean hold = false;

String[] urls = new String[]{
  // 0 - PLANE
  "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Airplane_silhouette.svg/1024px-Airplane_silhouette.svg.png",
  // 1 - PIKACHU
  "https://s-media-cache-ak0.pinimg.com/originals/95/d5/cd/95d5cded00f3a3e8a98fb1eed568aa9f.png",
  // 2 - DRAGON:
  "http://orig00.deviantart.net/e271/f/2012/305/7/6/dragon_silhouette_by_xkeren-d5jofma.png",
  // 3 - SKATER:
  "https://s-media-cache-ak0.pinimg.com/originals/5f/83/ac/5f83acde678ef321c9c858ed2a71bc11.png",
  // 4 - SKATER:
  "https://openclipart.org/image/800px/svg_to_png/221642/Ice-Skating-Woman-Silhouette.png",
  // CUSTOM:
  ""
};

void setup() {
  size(600, 600);
  colorMode(HSB, 360, 100, 100, 100);
  // 4th # is for opacity maximum (opposite of transparency)
  noStroke();

  // make sure width & height are perfectly divisible
  n = (width / w) * (height / h);
  bgs = new float[n];
  fills = new float[n];

  // You can change the index to use different images, or add your own!
  img = loadImage(urls[4]);

  // If your image is all black, it will not be tinted
  //   with color; all white is fully tinted.
  // Use this "filter" to invert (flip) colors if you want, or
  //   comment it out otherwise.
  img.filter(INVERT);

  randomColors();
}

void draw() {
  drawPopArt();

  if (!hold) {
    // fade to white if not holding mouse
    fill(0, 0, 100, fade * 100); // white, transparency goes down as fade goes up
    rect(0, 0, width, height);

    if (fadeOut) {
      fade += 0.03;

    // when it's faded out completely, reset colors
    if (fade >= 1) {
        fadeOut = false;
        randomColors();
      }
    }
    else {
      fade -= 0.03;
      if (fade <= 0) {
        fadeOut = true;
      }
    }
  }
}

void drawPopArt() {
  // top left square
  int x = 0;
  int y = 0;

  for (int i = 0; i < n; i++) {
    // draw square
    fill(bgs[i], 100, 100);
    rect(x, y, w, h);

    tint(fills[i], 100, 100);
    image(img, x, y, w, h);

    // move to right
    x += w;

    // or move to beginning of next row
    if (x >= width) {
      x = 0;
      y += h;
    }
  }
}

void randomColors() {
  for (int i = 0; i < n; i++) {
    bgs[i] = random(0, 360);
    fills[i] = random(0, 360);
  }
}

// sets colors evenly distributed along rainbow
void rainbowColors() {
  float huePerSquare = 360 / n;
  float h = random(0, 360);  // random starting point
  for (int i = 0; i < n; i++) {
    // % 360 ensures colors stay within 0-360
    bgs[i] = h % 360;
    // fill color is 180 degrees (opposite) bg color
    fills[i] = (h + 180) % 360;

    h += huePerSquare;
  }
}

void mousePressed() {
  if (mouseButton == RIGHT) {
    randomColors();
  }
  else {
    hold = true;
  }
}

void mouseReleased() {
  hold = false;
  fade = 0;  // reset fade after holding
}

void keyPressed() {
  if ('1' <= key && key <= '9') {
    int num = key - '0'; // translate char data to int data
    int i = num - 1;

    bgs[i] = random(0, 360);
    fills[i] = random(0, 360);
  }
  else if (key == ' ') {
    randomColors();
  }
  else if (key == 'r') {
    rainbowColors();
  }
}