alchan-Project 09-portrait

portrait

var portraitImg;
var rotateAngle;

function preload() {
    var portraitLink = "https://i.imgur.com/pn2LErg.jpg";
    portraitImg = loadImage(portraitLink);
}

function setup() {
    createCanvas(480,480);
    portraitImg.loadPixels();
}

function draw() {
    background(0);
    for(var y = 0; y <= height; y+=15) {
      for(var x = 0; x <= width; x+=15) {
        var pixelColor = 10 + brightness(portraitImg.get(x, y));
        var mouseDist = dist(mouseX, mouseY, x, y);
        strokeWeight(map(mouseDist, 0, 679, 0.5, 8));
        stroke(pixelColor);
        push();
        translate(x, y);
        rotate(map(mouseDist, 0, 679, 0, 360));
        line(0-3, 0, 0+3, 0);
        pop();
        line(x, y-3, x, y+3);
      }
    }
}

For my portrait, I knew I wanted to have the entire picture rendered at first, and user interaction to change the portrait somehow. I decided to go with a somewhat abstract grid of crosses to represent the picture at first, using the source image’s brightness values instead of colors to create a more cohesive image. (The source image is an extremely cropped view of a face from the eyes up, in case you couldn’t make it out.) The crosses change thickness (and the horizontal bar rotates) depending on how far away the mouse is, obscuring areas of the image the mouse is closest to. Unfortunately the program runs a little slow for me, so it’s not quite the experience I had planned, but it’s as close as I could get.