Category: Project-09-Portrait

sketch

//Veronica Wang
//Section B
//yiruiw@andrew.cmu.edu
//Project-09

var underlyingImage;

function preload() {
    //loading image from URL
    var myImageURL = "https://i.imgur.com/25qNlPj.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    //loading pixels from image
    underlyingImage.loadPixels();
    //drawing speed
    frameRate(220);
}

function draw() {
    //random pixel from image
    var px = random(width);
    var py = random(height);
    //constraining pixel to canvas
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    push();
    //rotate pixel
    translate(px, py);
    rotate(random(0, PI));
    //scale pixel
    scale(random(0.5, 3));
    //draw pixel as rectangles
    rect(0, 0, 10, 6);
    pop();
}

This is an abstract portrait of my friend Yang. I decided to use randomly sized and rotated rectangles to represent the pixels to create a confetti looking effect. The result ended up looking quite abstract.

sketch

//Sarah Yae
//smyae@andrew.cmu.edu
//Section B
//Project 9

var basepic;
var sqsize = 5;
var click = 0; 

//Load Image
function preload() {
    var myportrait = "https://i.imgur.com/ZUZbO4M.png";
    basepic = loadImage(myportrait);
}

//Translates original image 
function setup() {

    createCanvas(275, 300);
    background(0);
    basepic.loadPixels();

//Makes certain pixels into rectangles after retrieving that pixel's color 
    for (var x = 2; x < width; x += (sqsize + 2)) {
        for (var y = 2; y < height; y += (sqsize + 2)) {
            var color = basepic.get(x,y);
            fill(color);
            noStroke();
            rect (x, y, sqsize, sqsize);
        }
    }

}

//Turns image into black and white once mouse pressed 
function mousePressed() {

    createCanvas(275, 300);
    background(0);
    basepic.loadPixels();

    for (var x = 2; x < width; x += (sqsize + 2)) {
        for (var y = 2; y < height; y += (sqsize + 2)) {
            var r = basepic.get(x,y)[1]; //Retrieves a pixel's 1st value in its array 
            fill(r, r, r);
            noStroke();
            rect (x, y, sqsize, sqsize);
        }
    }

}

Once you click on the image, the translated image turns black and white. I had a hard time figuring out how  to change the image black and white, but I used pixel array to make it work.

sketch

var img;
var x = 0;
var y = 0;
var circle = 20;
var dirX = 1;
var dirY = 1;

function preload() {
    img = loadImage("https://i.imgur.com/YA5ZxuZ.jpg");
}

function setup() {
  createCanvas(391, 480);
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
}

function draw() {

  var pix = img.get(x, y); //gets color of pixel at location x,y
  fill(pix);    //fills circle with that color
  ellipse(x, y, circle, circle); //draws circle

  x+=random(10) * dirX; //sets horizontal wobbly direction for traveling "snake"
  y+=random(10) * dirY; //sets vertical wobbly direction for traveling "snake"

  //code below: if snake goes out of bounds in canvas
  //then restart in a random location
  //with new snake size and reversed direction

  if (x > width || x < 0) {
    x=floor(random(width));
    circle=random(10,25);
    dirX = -dirX;
  }

  if (y > height || y < 0) {
    y=floor(random(height));
    circle=random(10,25);
    dirY = -dirY;
  }

}

I enjoyed this project quite a bit. I chose to go the narcissistic route and make a self-portrait, mostly because I recently painted my apartment and took this selfie against the new wall, and I really like the color palette of this photo.

I started with the pointillism example for reference, but I knew I wanted to make a portrait that gradually filled in with moving lines, rather than random dots/points. What ended up emerging was this kind of “snake” made up of circles moving across the canvas.

Here’s the original photo:

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project 09

var myPic; 
var x;
var y;
var dx;
var dy;
var colAtPoint;
var count = 0;

function preload() {
    var myPiclink = "https://i.imgur.com/uktbZVu.jpg";
    myPic = loadImage(myPiclink);
}


function setup() {
    createCanvas(480, 480);
    background(255);
    myPic.loadPixels();
    x = random(width);
    y = random(height);
    dx = random(-1,1);
    dy = random(-1,1);
    frameRate(20);
}



function draw() {   
    
// get the pixel color for the geometry
    var ix = constrain(floor(x), 0, width-1);
    var iy = constrain(floor(y), 0, height-1);
    colAtPoint = myPic.get(ix, iy); 
    noStroke();
    fill(colAtPoint);
//If the number of pressing the mouse is even, then draw ellipse
    if (count % 2 == 0){
        ellipse(x, y, 10);
    }
//If the number of pressing the mouse is odd, then draw sqaure
    else{
        rect(x,y,10,10);
    }

//Update the coordinates of the geometry
    x += dx * 5 ;
    y += dy * 10  ;

//Make the geometry bounces back when it hits the boundry
    if (x > width || x < 0) {
        dx = -dx
    }  
    if (y > height || y < 0) {
        dy = -dy        
    } 

    
}

//When the mouse clicked there is a new serie of geometry being drawn with oppsite direction
function mousePressed() {
    count += 1;
    x = mouseX;
    y = mouseY;
    dx = -dx;
    dy = -dy;

}

For this project I used one of my best friends photo. I used two different geometries – square and circle to gradually reveal the photo by displaying pixels of the photo. The displaying geometry will change between these two by the user clicking the mouse. The square and circle would bounce back when they hit the boundary of the canvas. Therefore, the image will gradually show up at the paths that are drawn by these geometries.

Twenty Second Later

Two Minutes Later

Final