Category: Project-09-Portrait

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.