Self_portrait_img.pde

/*
 * Visual arts with Processing
 * Chapter 0, The Beginning
 * Otso Sorvettula, Mehackit (CC BY-SA 4.0)
 *
 * This program takes an image and transforms it into a binary image. You can draw on the by image using the mouse.
 *
 * Set the image by setting the url for linkToImage variable
 *
 * Change the threshold by pressing '+' and '-'.
 * Toggle webcam feed on and off with 't'.
 * Save image with 's'
 *
 */

// Create global variables for the whole program to use

// linkToImage can be a link on internet or link to an image in the same folder
String linkToImage = "https://processing.org/img/processing3-logo.png"; //link on internet
// String linkToImage = "image.jpg" //link to an image in the same folder
PImage originalImage;
PImage newImage; 
int threshold = 100;

/*
 * The setup-function is executed once when the program starts
 *
 * Load image and check that the image exists
 */
void setup() {  
  size(640, 480);
  originalImage = loadImage(linkToImage);
  newImage = loadImage(linkToImage);
  if (originalImage == null || newImage == null) { 
    println("No image found, exiting"); 
    exit();
  } else {
    originalImage.loadPixels(); 
    newImage.loadPixels();
    drawLinkedImage();
  }
}

/*
 * The draw-function is looped again and again as long as the program runs.
 *
 * Draw mouse actions. The image isn't drawn here. The image is only drawn again when the threshold is changed.
 */
void draw() {
  // drawLinkedImage is not called in the draw loop. The image is drawn only when '+' or '-' keys are pressed

  // Draw something on top of the image if the mouse is pressed. You can try to change, comment or uncomment some of these lines.
  if (mousePressed) {
    stroke(0, 20); // set stroke to almost transparent black
    // noStroke(); // turn stroke (outlines) off
    // fill(random(100, 255), random(100, 255), random(200, 255), 5); // generate and set almost random fill color
    // float r = random(0, 50); // Generate a random value and save it to a variable
    // ellipse(mouseX, mouseY, r, r); // Draw a circle to the mouse location with the random diameter
    line(mouseX, mouseY, mouseX + random(-50, 50), mouseY + random(-50, 50)); // Draw a line from the mouse location to a point in 50 pixel radius
  }
}

/*
 * Manipulate and draw the linked image
 *
 * The pixels of the original image are loaded into an array. The array is iterated over with for loops.
 * The brightness on each pixel is checked against a threshold.
 * If the brightness is lower than the threshold the pixel on newImage is set black, otherwise white.
 * In the end newImage is drawn at the center of the canvas.
 */
void drawLinkedImage() {
  for (int x = 0; x < originalImage.width; x++) { 
    for (int y = 0; y < originalImage.height; y++) {
      int coordinate = x + y * originalImage.width; 
      float pixelBrightness = brightness(originalImage.pixels[coordinate]); // Calculate the brightness of the given pixel in the original image.
      if (pixelBrightness < threshold) { // If the pixel is darker than the threshold...
        newImage.pixels[coordinate] = color(0); // ...set the color of the corresponding pixel in newImage to this.
      } else { // If the pixel is lighter than the threshold...
        newImage.pixels[coordinate] = color(255); // ...set the color of the corresponding pixel in newImage to this.
      }
    }
  }
  newImage.updatePixels();
  image(newImage, width/2 - newImage.width/2, height/2 - newImage.height/2);
}

/* 
 * Listen to key presses and match keys to actions.
 */
void keyPressed() {
  if (key == '+') { 
    threshold++;
    threshold = min(threshold, 255); 
    println("Threshold set to " + threshold); // Print information to the console.
    drawLinkedImage();
  } else if (key == '-') { 
    threshold--; 
    threshold = max(threshold, 0);
    println("Threshold set to " + threshold);
    drawLinkedImage(); // If useWebcam is false, draw the linked image.
  } else if (key == 's' || key == 'S') { // If the key matches 's' or 'S'
    saveFrame("Processing-portrait-###.png"); // Save the screen as a png image to the same folder where this sketch is saved.
    println("Image saved"); // Guess what this does :)
  }
}