Category: Project-09-Portrait

I chose a portrait of my friend Katrina. I spent a long time deciding how to create the portrait and I eventually decided on drawing squares in a continuous and slightly randomized line.

Portrait

/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-09
*/
//important variables
var hiddenImage; 
var xCoord = 200;
var yCoord = 200;
//Speed variables
var xOff = 5;
var yOff = 5;

function preload() {
    //preload image
    var myImage = "https://i.imgur.com/mBLofJe.png"
    hiddenImage = loadImage(myImage);
}

function setup() {
    createCanvas(319, 360); //set canvas to image size
    pixelDensity(1);
    background(0); //black background
    hiddenImage.loadPixels(); //load image
    frameRate(50);
}

function draw() {
    //get image coloring
    var ix = constrain(floor(xCoord), 0, width);
    var iy = constrain(floor(yCoord), 0, height);
    var imageColor = hiddenImage.get(ix, iy);

    //Bounce off right side
    if (xCoord>=width || xCoord<=0){
        xOff = -xOff;
        yOff = random(-5, 5);
    }

    //Bounce off top and bottom
    if (yCoord>=height || yCoord<=0){
        yOff = -yOff;
        xOff = random(-5, 5);
    }

    //Rectangle move
    xCoord = xCoord + xOff;
    yCoord = yCoord + yOff;

    //Rectangle color
    noStroke(); //no outline of rectangles
    fill(imageColor); //fill based on hiddenImage coloring
    rect(xCoord, yCoord, 5, 5); //draw rectangles
}

customPixels

/* 
Emma Nicklas-Morris
Section B
enicklas
Project-09
Custom Pixels
*/

var portraitImg;

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

function setup() {
    // canvas proportional to image size
    createCanvas(portraitImg.width / 6, portraitImg.height / 6);
    background(255);
    portraitImg.loadPixels();
    frameRate(150);

}

function draw() {
    // get pixel color at that random location in image
    var ix = floor(random(portraitImg.width));
    var iy = floor(random(portraitImg.height));
    var colorLoc = portraitImg.get(ix, iy);

    noStroke();
    fill(colorLoc);

    // scale it to canvas size
    x = map(ix, 0, portraitImg.width, 0, width);
    y = map(iy, 0, portraitImg.height, 0, height);
    
    // creates a spiral like look
    var d = dist(width / 2, height / 2, x, y);
    d = d % 10;

    // draws the hexagons
    polygon(x, y, d, 6);


}

// https://p5js.org/examples/form-regular-polygon.html 
function polygon(x, y, radius, npoints) {
  let angle = TWO_PI / npoints;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius;
    let sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

I really enjoyed this project. It was fun to see it come about. I wanted to make my generative pixel image to be a bit more interesting by adding a circular/spiral like look and use hexagons instead of circles or rectangles. 

sketch

//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//Project-09-Computational Portrait

var photo;

//load my portrait from imgur
function preload() {
    var myImageURL = "https://i.imgur.com/4dPRyTE.png";
    photo = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    photo.loadPixels();
    frameRate(999999); //speed of generating image
}

function draw() {
    var px = random(width); //random x location for new rect
    var py = random(height); //random y location for new rect
    var ix = constrain(floor(px), 0, width-1); //contrain rect within canvas width
    var iy = constrain(floor(py), 0, height-1);//contrain rect within canvas height
    var theColorAtLocationXY = photo.get(ix, iy);//match rect colors with original photo

    noStroke();
    fill(theColorAtLocationXY);//retrieve color
    rect(px, py, random(10, 20), random(10, 20));//fill canvas with random-sized rect

}

It was fun creating animated portrait using my own photo. The matching process between colors and sizes of random rectangles, and the original image was a fascinating process.