October 26

sketch

var underlyingImage;
var mode = 1;

function preload() {
  var myImageURL = "http://i.imgur.com/sHwEYeb.jpg";
  underlyingImage = loadImage(myImageURL);
}

function setup() {
  createCanvas(500, 500);
  background(0);
  underlyingImage.loadPixels();
}



function draw() {

  switch (mode) {

    case 1:
    default:
      // random dots.
      // Question: why the "floor"?
      var px = floor(random(width));
      var py = floor(random(height));
      var theColorAtLocationXY = underlyingImage.get(px, py);
      noStroke();
      fill(theColorAtLocationXY);
      ellipse(px, py, 8, 8);
      break;

    case 2:
      // mouse reveal, spray can.
      // Question: How to get a circular spray? 
      // Play with source, destination locations
      var randomness = 30;
      for (var i = 0; i < 15; i++) {
        var mx = floor(mouseX + randomness * random(-1, 1));
        var my = floor(mouseY + randomness * random(-1, 1));
        var theColorAtMxMy = underlyingImage.get(mx, my);
        fill(theColorAtMxMy);
        noStroke();
        ellipse(mx, my, 3, 3);
      }
      break;

    case 3:
      // drawn lines
      var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
      stroke(theColorAtTheMouse);
      strokeWeight(4);
      line(pmouseX, pmouseY, mouseX, mouseY);
      break;

    case 4:
      // fat grayscale pixels
      var biggest = 0;
      noStroke();
      var boxSize = 20;
      var nRows = underlyingImage.width / boxSize;
      var nCols = underlyingImage.width / boxSize;
      for (var by = 0; by < nRows; by++) {
        for (var bx = 0; bx < nCols; bx++) {
          var px = bx * boxSize;
          var py = by * boxSize;
          var theColorAtLocationXY = underlyingImage.get(px, py);
          colorMode(HSB, 255);
          var brightnessAtXY = brightness(theColorAtLocationXY);
          colorMode(RGB, 255);
          fill(brightnessAtXY);
          rect(px, py, boxSize, boxSize);
        }
      }
      break;

    case 5:
      // reconstruction of pixels
      noStroke();
      var boxSize = 20;
      var nRows = underlyingImage.width / boxSize;
      var nCols = underlyingImage.width / boxSize;
      for (var by = 0; by < nRows; by++) {
        for (var bx = 0; bx < nCols; bx++) {
          var px = floor(bx * boxSize);
          var py = floor(by * boxSize);

          var theColorAtLocationXY = underlyingImage.get(px, py);
          var colr = red(theColorAtLocationXY);
          var colg = green(theColorAtLocationXY);
          var colb = blue(theColorAtLocationXY);

          fill(colr, 0, 0);
          rect(px, py, 6, boxSize);
          fill(0, colg, 0);
          rect(px + 6, py, 6, boxSize);
          fill(0, 0, colb);
          rect(px + 12, py, 8, boxSize);
        }
      }
      break;

    case 6:
      // Color revealed by bouncing ball. 
      // Question: Why the -1? 
      var ballSize = 50;
      background(0, 64);
      noStroke();

      ballpx += ballvx;
      ballpy += ballvy;
      if (ballpx >= width) {
        ballvx = -ballvx;
      }
      if (ballpy >= height) {
        ballvy = -ballvy;
      }
      if (ballpx <= 0) {
        ballvx = -ballvx;
      }
      if (ballpy <= 0) {
        ballvy = -ballvy;
      }

      var px = floor(constrain(ballpx, 0, width - 1));
      var py = floor(constrain(ballpy, 0, height - 1));
      var theColorAtLocationXY = underlyingImage.get(px, py);

      var colr = red(theColorAtLocationXY);
      var colg = green(theColorAtLocationXY);
      var colb = blue(theColorAtLocationXY);

      ballr = 0.8 * ballr + 0.2 * colr;
      ballg = 0.8 * ballg + 0.2 * colg;
      ballb = 0.8 * ballb + 0.2 * colb;

      fill(ballr, ballg, ballb);
      ellipse(px, py, ballSize, ballSize);
      break;

    case 7:
      // Image subsection revealed by bouncing ball. 
      // Question: what if background() has alpha?
      // Question: why the constrain()? 
      var ballSize = 50;
      background(0);
      ballpx += ballvx;
      ballpy += ballvy;
      if (ballpx >= (width - ballSize)) {
        ballvx = -ballvx;
      }
      if (ballpy >= (height - ballSize)) {
        ballvy = -ballvy;
      }
      if (ballpx <= 0) {
        ballvx = -ballvx;
      }
      if (ballpy <= 0) {
        ballvy = -ballvy;
      }

      var px = floor(constrain(ballpx, 0, width));
      var py = floor(constrain(ballpy, 0, height));
      var imageSubsection = underlyingImage.get(px, py, ballSize, ballSize);
      image(imageSubsection, px, py);
      break;

  }
}




function keyPressed() {
  background(0);
  mode = int(key);
  resetBall();
}


var ballpx = 0;
var ballpy = 0;
var ballvx = 0;
var ballvy = 0;
var ballr;
var ballg;
var ballb;

function resetBall() {
  ballpx = random(width);
  ballpy = random(height);
  ballvx = random(-10, 10);
  ballvy = random(-10, 10);
  ballr = ballg = ballb = 0;
}