Project 09 – Computational Portrait – sehenry

For this project I wanted to use a photo that looked really clear and artistic. So as I was scrolling through photos on my phone, I found a photo that my girlfriend took of herself and edited. I thought that the green background of the building would look really good split apart by many pixels. As I looked at the example on the deliverable page, I wanted to include a different shape and background to present itself as the picture comes together. So I decided to use small triangles while allowing the user to use their mouse to drag even smaller circles to reveal more detail in the face or clothing.

I enjoyed this project.

sketch

//Seth Henry

//Tuesdays at 10:30

//sehenry@andrew.cmu.edu

//Project 09 Computational Portrait 

//Global Variable 

var rachelImg;

function preload() {
    var rachelUrl = "http://i.imgur.com/z5nysOD.jpg" //Upload Picture
    rachelImg = loadImage(rachelUrl);
}

function setup() {
    createCanvas(600, 500);
    background(255); //white background
    rachelImg.loadPixels(); //Grab pixels
    frameRate(1500);//Pixels Appear Fast
}

function draw() {
  
    var rW = random(width); //Random x Loc
    var rH = random(height); //Random y Loc
    var posX = constrain(floor(rW), 0, width-25); //Will not appear past boundaries
    var posY = constrain(floor(rH), 0, height-25);
    var rachelColor = rachelImg.get(posX,posY) //Retrieve color pixels of image
    noStroke();
    fill(rachelColor);
    rectMode(CENTER)
    triangle(rW,rH, rW+4,rH-4, rW+8,rH); //draw triangles


}
function mouseDragged(){
    var rachelColor = rachelImg.get(mouseX,mouseY) //Retrieve color of pixel where mouse is
    noStroke();
    fill(rachelColor);
    ellipse(mouseX,mouseY,1,1) //Drags smaller, more defined pixels in shape of circle
}