Category: SectionC

I am using 1 grace day on this project.

tcliu-openended-09

// Timothy Liu
// 15-104, Section C
// tcliu@andrew.cmu.edu
// OpenEnded-09

var Eileen; // variable name of the person in my project!

function preload() {
    Eileen = loadImage("https://i.imgur.com/V7NYz2M.jpg"); // preloading the image
}

function setup() {
    createCanvas(300, 450);
    background(255);
    Eileen.loadPixels();
    frameRate(250);
    Eileen.resize(300, 450);
}

function draw() {

    // variables to determine the location of each hamburger
    var burgerX = random(width);
    var burgerY = random(height);

    // variables that ensure the hamburger drawn remains on the canvas
    var burgerOnCanvasX = constrain(floor(burgerX), 0, width - 1);
    var burgerOnCanvasY = constrain(floor(burgerY), 0, height - 1);

    // variables to determine the proportions and shape of each burger
    var burgerW = random(8, 14);
    var burgerH = random(6, 10);
    var meatWStart = burgerW / 2 - burgerW * 0.125;
    var meatW = burgerW * 0.75;
    var meatH = random(2, 4);

    // variable that identifies the pixel color of the underlying images
    var pixelColor = Eileen.get(burgerOnCanvasX, burgerOnCanvasY);

    // applies the pixel color to each hamburger in the foreground
    noStroke();
    fill(pixelColor); 

    // drawing each individual hamburger
    arc(burgerX, burgerY, burgerW, burgerH, PI, TWO_PI);
    rect(burgerX - meatWStart, burgerY, meatW, meatH);
    arc(burgerX, burgerY + meatH, burgerW, burgerH, 0, PI);

}

For this project, I used a photo I took of my girlfriend Eileen at In-n-out burger in California. I really liked the photo because it has a lot of vibrant colors (red, green, yellow, etc) which I thought would be fun to portray through abstract shapes and pixels. I decided to make each building block of the portrait shaped like a hamburger as a reference to the burgers in the foreground of the picture and the restaurant the photo was taken at. Each burger is proportionally built based on a random bun height and width, which means that each burger is a different, randomly generated size. Together, each of the burgers collects to form a portrait!

sketch

For this project, I did a portrait of my dad and our two dogs by using text emojis to generate the pixels. It took a lot of time to cover using the texts, so I applied mouseMoved() to generate the photo faster.

Continue reading “SooA Kim – 09 – Portrait”

/* SooA Kim
sookim@andrew.cmu.edu
Section C
Project-09-Portrait
*/

var baseImage;
var dogs = ["♡°▽°♡", "(◕‿◕)♡"];
var brush = ["°˖✧◝(⁰▿⁰)◜✧˖°"];

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

function setup() {
  createCanvas(baseImage.width, baseImage.height);
  imageMode(CENTER);
  noStroke();
  background(255);
  baseImage.loadPixels();
  frameRate(5000000);
}

function draw() {
var bx = random(width); // randomize pixels to initialize
var by = random(height);

var cx = constrain(floor(bx), 0, width - 1);
var cy = constrain(floor(by), 0, height-1);

var paintPix = baseImage.get(cx, cy);


noStroke();

fill(paintPix);
textSize(random(12));
text(dogs[0], random(0, width/2), by); //filling the half of the canvas

textSize(random(12));
fill(paintPix);
text(dogs[1], random(width/2, width), by); // filling other half of the canvas

}

//using mouse to generate faster 
function mouseMoved(){
  var paintPixMouse = baseImage.get(mouseX, mouseY);
  fill(paintPixMouse);
  textSize(15);
  text(brush, mouseX, mouseY);
}

hmeng-project 09

//Sean Meng
//hmeng@andrew.cmu.edu
//Section C
//Project-09-Custom Pixel

var underlyingImage;

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

function setup() {
    createCanvas(500, 500);
    background(0);
    underlyingImage.loadPixels();
    frameRate(70);
}

function draw() {
    var x = random(width);
    var y = random(height);
    var ix = constrain(floor(x), 0, width-1);
    var iy = constrain(floor(y), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

//set randomized dimensions for the geometry
    var a1 = random(2, 10);
    var a2 = random(8, 15);
    var a3 = random(2, 15);
    var b1 = random(10, 20);
    var b2 = random(20, 50);

    noStroke();
    fill(theColorAtLocationXY);

//draw quadrians according to the image
    quad(x, y, x + a1, y - b1, x + a2, y, x + a3, y + b2);

//draw ellipses in random sizes along the mouse
    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    ellipse(pmouseX, pmouseY, random(5, 20));


}

//refresh the canvas when the mouse is pressed
function mousePressed(){
    clear();
}

In this project I chose a portrait of myself that was taken by someone else. To represent the portrait in a more interesting way, I explored different geometries and layered them together.

sketch

/*
Aaron Lee
Section C
sangwon2@andrew.cmu.edu
Project-09-Computational Portrait
*/
         
var theImage

function preload() {
   var imageLocation = "https://i.imgur.com/OVTGqnb.jpg"; //preload the theImage from link
   theImage = loadImage(imageLocation);
}

function setup() {
   createCanvas(240, 260);
   background(0);
   theImage.loadPixels();
   frameRate(1000);
   colorMode(RGB);
}

function draw() {
   var pixelX = random(0, width); //random x coordinate of a pixel
   var pixelY = random(0, height); //random y coordinate of a pixel
   var iX = constrain(floor(pixelX), 0, width - 1);
   var iY = constrain(floor(pixelY), 0, height - 1);
   var pixelColor = theImage.get(iX, iY);//getting color info for rectangle fill
   var rectLength = map(brightness(pixelColor), 0, 50, 0, 10);
   var imageatthemouse = theImage.get(mouseX, mouseY); //pixel at the mouse position

   fill(pixelColor);
   rectMode(CENTER);
   rect(pixelX, pixelY, 4, rectLength);
   noFill();
   stroke(imageatthemouse);
   rect(pmouseX, pmouseY, 10, 10);
}

I chose a portrait of myself with high frame rate in order to see quick change. The rectangles with random size and appropriate stroke give a balanced finished look at the end. The portrait is also user interactive with mouse that creates hollow rectangles.

sketch

// Nawon Choi
// nawonc@andrew.cmu.edu
// Section C
// Computational Portrait


// starting with sample code
var underlyingImage;

// some code taken from my Exam 2 Problem B solution
var xArr = [];
var yArr = [];

function preload() {
    var myImageURL = "https://i.imgur.com/wDXWg1x.jpg?1";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(400, 400);
    background(0);
    underlyingImage.loadPixels();
    frameRate(1000);
}

function draw() {

    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);

    noStroke();
    fill(theColorAtLocationXY);

    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);

    for (var i = 1; i < (xArr.length); i++) {
        // add a random value to each point
        var rx = randomize();
        var ry = randomize();
        var x1 = xArr[i - 1];
        var y1 = yArr[i - 1];
        var x2 = xArr[i] + rx;
        var y2 = yArr[i] + ry;
        stroke(theColorAtTheMouse);
        line(x1, y1, x2, y2);
        xArr[i] = x2;
        yArr[i] = y2;
    }

    // create colored rectangles to reveal the image 
    strokeWeight(3);
    stroke(theColorAtLocationXY);
    rect(px, py, 10, 10);
}

function mouseMoved() {
    // remove last point on array if length is greater than 3
    if (xArr.length > 3) {
        xArr.shift();
        yArr.shift();
    } 
    // add mouse points to an array
    xArr.push(mouseX);
    yArr.push(mouseY);   
}

function randomize() {
    // find a random value from -4 to 4
    var x = random(-4, 4);
    return x;
}

For this project, I wanted to create something interactive and playful. The user is actually disrupting the image from being revealed in an orderly way. The random lines generated by the mouse movement were taken from a previous assignment. I tried to apply it to this project because I thought the random lines would create a fun and playful brush stroke effect. Depending on how the user moves the mouse, it can either disrupt the image, or add interesting movement to the portrait. See the imgur link in the code to see original image.

• 

•