Category: Project-09-Portrait

sketch

/*Vicky Zhou
Section E 
vzhou@andrew.cmu.edu
Project-09-Computational Portrait*/


var maandpa;

function preload() {
    var myImage = "https://i.imgur.com/2z2nvGR.jpg";
    maandpa = loadImage(myImage); //image of my mom and dad 
}


function setup() {
    createCanvas(350, 370);
    background(140, 200, 200, 100);
    imageMode(CENTER);
    maandpa.loadPixels();
    frameRate(900);
}


function draw() {
    var x = 1;
    var y = 1;
    var xvel = random(1, 400); //random x to add to x position 
    var yvel = random(1, 400); //random y to add to y position 
    x += int(x * xvel);
    y += int(y * yvel);


    var pcol = maandpa.get(x, y); //getting pixel color 
    noStroke();
    tint(255, 100); //makes a white tint; half opacity 
    fill(pcol);
    var size = random(0, 10); //generating random ellipse sizes 
    ellipse(x, y, size, size);

    //creating chinese word for mom on mom's side 
    if (x >= 200 & x <= 350){
        tint(255, 150);
        textSize(random(0, 20));
        text("妈", x, y);
    }
    //creating chinese word for dad on dad's side 
    if (x >= 0 & x <= 200){
        tint(255, 150);
        var space = random(0, 30);
        text("爸", x + space, y);
    }
}

For this computational portrait project, I used a cool hip photo of my momma and papa from their ol’ days. I loved seeing other people manipulate different types of text and utilizing it as their generative pixels, and so I wanted to do the same but by using the Chinese word for “mom” and “dad” on their respective side of the image. I also included ellipses to add more to the background, because I did not like it as much with the gaps. Both text and ellipses are generated to have a certain tint, to create a better layering effect, and also are generate to be of varying random sizes.

Original Image:

Generative Image:

jeeyoonk09

/* Jenna Kim (Jeeyoon Kim)
Section E
jeeyoonk@andrew.cmu.edu
Project 9: Portrait
*/

//GLOBAL variable for the IMAGE
var jen;

// preloading image ON THE CANVAS
function preload() {
    jen = loadImage("https://i.imgur.com/gvGuJiN.jpg?1"); 
}

function setup(){
	//canvas setting
	createCanvas(600, 400);
	background(255);
	jen.loadPixels(); //draw image
	noStroke();
	imageMode(CENTER);
	frameRate(150);
} 
function draw(){
	// starting from the first half of the page and then the left
	var jx = random(width);
	var jy = random(height);
	//constraining to canvas
	var jjx = constrain(floor(jx), 0, width - 15);
	var jjy = constrain(floor(jy), 0, height - 15);
	//picking color from the image
	var C = jen.get(jjx, jjy);

	//drawing rectangular pixels
	noStroke();
	fill(C);
	rectMode(CENTER);
	rect(jx, jy, random(5, 10), random(5, 10));

	//when mouse is pressed, pink circles are created
	if (mouseIsPressed){
		noStroke();
		fill("pink");
		ellipse(jx, jy, 5, 5);

	}
}

For this project, I used a portrait of my friend Jenny. I randomized simple rectangular forms to complete Jenny’s portrait. Looking at others’ portraits and trying different codes for my project, I was amazed by how many variations you can use to create a
pixelated portrait. When you click on the screen, pink circles come up because I personally like the pink sky in the back and I wanted the pink color to show up on other parts of the portrait too. It’s fun to look at the pink circles disappear as more rectangular shapes show up.

try clicking me!

/* Mimi Jiao
wjiao@andrew.cmu.edu
Section E
Project-09
*/

var underlyingImage;
var clickCount;    
var string = "0";

function preload() {
    //preloading image into code 
    var myImageURL = "https://i.imgur.com/kkJQot1.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    //setting size of canvas to image size 
    createCanvas(underlyingImage.width, underlyingImage.height);
    background(0);
    underlyingImage.loadPixels();
    frameRate(300);
}

function draw() {
    strokeWeight(1);
    //finding color and location of the image
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    noFill();
    stroke(1);
    //setting up font size and type
    textSize(10);
    textFont('Courier New')
    stroke(theColorAtLocationXY);
    text("m i mi", px, py);
}

function mousePressed() {
    //if mouse is pressed, add these elements to the canvas
    textSize(20);
    //randomizes click count so that if it lands on a 
    //certain value, then something different will display
    clickCount = int(random(20));
    if (clickCount % 5 === 0) {
        strokeWeight(2);
        stroke(0, 255, 0);
        fill(255, 0, 0)
        string = "1";
    }else if (clickCount === 17) {
        strokeWeight(3);
        stroke(0, 0, 255);
        string = "error";
    }else {
        string = "0";
    }
    fill(255, 0, 0);
    text(string, mouseX, mouseY);

}

For this project, I was inspired by binary numbers and the primitive visuals of computer errors and coding. I used a picture I took of myself during the summer in a bathroom, adjusted the colors and made parts of it neon green to fit the aesthetic a bit more, and used my name, “mimi” to generate the image.
Here is the original image:

Here is the generated image:

after one image is formed, click for another!

/*
Alice Fang
Section E
acfang@andrew.cmu.edu
Project-09
*/

var friend = []; // picture of friend!
var state = 0; // indicates which picture

function preload() {
	var imgURL = [];
	imgURL[0] = "https://i.imgur.com/62FXNHg.jpg"; // full body
  	imgURL[1] = "https://i.imgur.com/ieqrCP3.jpg"; // torso
  	imgURL[2] = "https://i.imgur.com/e4nON6h.jpg"; // portrait

  	for (var i = 0; i < imgURL.length; i++) {
  		friend[i] = loadImage(imgURL[i]);
  	}
}

function setup() {
  createCanvas(270, 400);
  background('lightyellow');
  imageMode(CENTER);
  noStroke();
  friend[state].loadPixels();
}

function draw() {
	// select pixels from center of canvas outwards
	var pX = randomGaussian(width / 2, 75);
	var pY = randomGaussian(height / 2, 75);
	
	// constrain to canvas
	var cX = constrain(floor(pX), 0, width - 1);
	var cY = constrain(floor(pY), 0, height - 1);

	// get color from pixel
	var col = friend[state].get(cX, cY);

	fill(col); 
	textSize(16 - (state * 4));
	text("美", cX, cY);
}

function mousePressed() { // change image
	background('lightyellow'); // 'refresh' canvas
	state = state + 1;
	if (state > 2) state = 0;
}

This is a picture of my friend Meijie that I took for a photo class last semester! Originally, the shape I used for the color was an ellipse, and I spent a lot of time playing around with image ‘resolution’ compared to the underlying image. When I changed it to the character 美, which is ‘beauty’ in Chinese, and also part of her name, I didn’t like how large the character was and the lack of detail it created in the image. Because of that, I explored with changing the image from a full body shot, to a torso shot, to a closer crop of her face; I couldn’t decide which one I liked better so I decided to use all three! As the image zooms in, the resolution becomes sharper!

sketch

/* Rachel Lee
Section E
rwlee@gmail.com
Project 09: Custom Pixel*/

var pic;

// preloads image
function preload() {
    pic = loadImage("https://i.imgur.com/iuFu4yy.jpg"); 
}

function setup() {
    createCanvas(358, 480);
    pic.loadPixels();
    background(255);
    imageMode(CENTER);
    frameRate(100);
}

function draw() {
	// randomizes position of pixel appearance 
    var x = constrain(floor(random(width)), 0, width - 1);
    var y = constrain(floor(random(height)), 0, height - 1);
    // randomizes arc width and height
    var w = random(5, 30);
    var h = random(5, 30);

    noStroke();
    // picks colors from pixel position 
    var picCol = pic.get(x, y);
    fill(picCol);
    // draws arcs as 'custom pixel'
    arc(x, y, w, h, HALF_PI, PI);
}

I decided to create a custom pixel portrait of my dad for his birthday this weekend. Due to its personal significance, I found this project to be super fun and rewarding, and hope he enjoys the project! I will be doing more of these in the future to try out different options.