Category: Section E

Christine Chen-Project-09-Portrait

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-09
*/
var hiddenImage;

function preload() {
    var imageURL = "https://i.imgur.com/uGrwjUm.jpg";
    hiddenImage = loadImage(imageURL);
}

function setup(){
    createCanvas(480, 480);
    background(100);
    noStroke();
    imageMode(CENTER);
    hiddenImage.loadPixels();
    frameRate(150);
}

function draw() {
    //randomizes pixel location
    var pixelX = random(0, width);
    var pixelY = random(0, height);

    //constrains pixel x values
    var imageX = constrain(floor(pixelX), 0, width); 

    //constrains pixel y values
    var imageY = constrain(floor(pixelY), 0, height);

    //get hiddenImage data
    var locationXYcolor = hiddenImage.get(imageX, imageY);

    //rect size increases with increasing mouseX
    var size = map(mouseX, 0, width, 5, 20)

    stroke(135, 183, 237); //blue
    strokeWeight(0.1); //thin line
    fill(locationXYcolor);
    rect(pixelX, pixelY, size, size);

    //faster on right, slower on left
    //smaller pixels on right need to run faster to show imge
    if (mouseX > width/2){
        frameRate(10);
    } else {
        frameRate(250);
    }
}

//redraws background(start over)
function mousePressed(){
    background(100);
}

For this project, I used my brother’s photo, which I took for his high school senior d. I was playing around with pixel sizes and frame rates. The smaller mouse x is, the smaller the pixels are. Because smaller pixels take more time to draw out a bigger part of the image, I made the frame rate faster for them.I gave the pixels light blue outlines to give the image more of a “mosaic” feeling.

sketch

/* Jaclyn Saik 
Section E
project 09 
*/
var ryder;

function preload(){
    var buddy = "https://i.imgur.com/PGxudTG.png"; //my brother eating corn!
    ryder = loadImage(buddy); //variable to contain the pixels in image  
}
function setup() {
    createCanvas(480, 470);
    background("goldenrod");
    ryder.loadPixels(); //loads actual pizels into program 
    frameRate(1000);
}

function draw() {
    var px = random(width); //randomized variable for x position 
    var py = random(height);//randomized variable for y position 
    var ix = constrain(floor(px), 0, width-1); //var for grabbing pixel data
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = ryder.get(ix, iy);
    var rando = random(-30, 30); //variable to randomize stroke weight later
    var stro = random(1, 5); //variable to randomize stroke weight later
    var stroTwo = random(1, 10);

    noStroke();
    fill(theColorAtLocationXY); //fills with the color at that particular pizel
    stroke(theColorAtLocationXY);
    strokeWeight(stro); //randomized stroke weight so stars are unique
    drawStar(px, py); //draws star at random x and y position each time draw is called
    line(px, py, px+rando, py+rando); //pritns "tails" connected to stars

    var theColorAtTheMouse = ryder.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    strokeWeight(stroTwo); //makes a line that changes stroke weight 
    line(pmouseX, pmouseY, mouseX, mouseY); //draws line with the mouse, 
    //so you can paint on the canvas a little bit

}

function drawStar(x, y) {
    textSize(random(20, 70)); //randomizes size of star
    text("*", x, y); //creates object that can be manipulated by position later

}

function mousePressed() { //draws "yum" when mouse is pressed
    noStroke();
    textSize(random(10, 40)); //alternates size of text
    fill("yellow");
    text("yum", mouseX, mouseY);

}

For this project, I instantly though of my little brother: he is always posing for funny photos and I especially miss him right now. I chose to use an asterisk to color in his image, since I think it adds a whimsical touch to the image. I added some randomized tails to each asterisk is order to try to create this oil-painting technique where the image looks like it has some motion to it. I also edited the mouse function so that the stroke is randomized each millisecond, so that it appears like your mouse is a brush that is applying varying amounts of paint. Since my brother Ryder is eating corn in this image, when you click your mouse, the word “yum” pops around. It makes him somewhat of a meme, which is how I see him a lot so it makes sense to me.

sketch

/*Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-09*/

var underlyingPic;

function preload(){
    var imageURL = "https://i.imgur.com/EhGYYMu.jpg";
    underlyingPic = loadImage(imageURL);
}

function setup() {
    createCanvas(320, 480);
    background(200, 100, 107);
    underlyingPic.loadPixels();
}

function draw() {
    var px = random(width);	//random y within width
    var py = random(height);	//random x within height
    var iX = constrain(floor(px), 0, width-1);
    var iY = constrain(floor(py), 0, height-1);
    //extracting color from base image
    var colorAtXY = underlyingPic.get(iX, iY);
    noStroke();
    fill(colorAtXY);
    // ellipses with random widths and heights fill canvas
    ellipse(px, py, random(1, 10), random(1, 10));

   	// when the mouse moves across canvas, rectangles of random
    // sizes will follow the mouse
    var colorAtMouse = underlyingPic.get(mouseX, mouseY);
   	fill(colorAtMouse);
    noStroke();
   	rect(mouseX, mouseY, random(3, 6), random(3, 6));
   }

function mousePressed(){
    // when mouse clicks, the name "sophia" appears on mouse location
    // with base image colors
    var colorAtXY = underlyingPic.get(mouseX, mouseY);
    textSize(20);
    text("sophia", mouseX, mouseY);


   }

My project reveals an image of my friend Sophia through ellipses of random widths and heights. Also, someone can use the mouse to speed up the image reveal because there is a trail of rectangles that follow the mouse’s location. Another fun element I added was showing Sophia’s name when the mouse is clicked on the canvas. Overall, this project was fun to complete because of its personal significance to me. Going forward, I am excited to see how I can represent more images computationally.

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.