Category: Project-09-Portrait

sketch

//Yoshi Torralva
//yrt@andrew.cmu.edu
//Section E
//Project—09—Portrait
var underlyingImage;

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

function setup() {
    createCanvas(480, 480);
    background(0);
    underlyingImage.loadPixels();
}

function draw() {
    //variables to randomize location
    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);
    frameRate(360);

    //large border that indicates which pixel is drawn
    // rectangles redrawn at different angles that creates circular border
    push();
    rectMode(CENTER);
    translate(240, 240);
    noFill();
    stroke(theColorAtLocationXY);
    strokeWeight(1);
    rotate(random(0, 10));
    rect(10, 10, 460, 460);
    pop();

    //light beams formed by random length
    noStroke();
    fill(theColorAtLocationXY);
    //shorter beams for greater quality 
    rect(px, py, random(1), random(4, 50));
    //longer beams for greater expression 
    rect(px, py, random(1), random(50, 100));

    //placed on top layer to create a more visible image
    //end points of the beams
    push();
    rectMode(CENTER);
    rect(px, py, 3, 3);
    pop();
}

With this project, I wanted to use an image that was simple which would allow me to have an increased focus on the formulation of forms. I decided to use this self-portrait photo from the mattress factory as it only relies on black and blue. I was inspired by light beams and achieved this through randomly sized length rectangles with squares placed on the top of each randomized length rectangle. To add an additional element, I placed a rotating square that formed a circular border informed by called pixel colors.

sketch

//Caroline Song
//chsong@andrew.cmu.edu
//Section E
//Project 09

var imageUnderneath;
var imageColor;
var constrainX;
var constrainY;

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

function setup(){
    createCanvas(450, 450);
    background(0);
    imageUnderneath.loadPixels();
    frameRate(1000);
}

function draw(){
    var rectX = random(width); //rectangles are placed randomly along width of canvas
    var rectY = random(height); //rectangles are placed randomly along height of canvas
    var rectSize = 10; //size of rectangle
    var ellipseSize = 10; //size of ellipse

    //constrain rectangles to canvas size
    constrainX = constrain(floor(rectX), 0, width);
    constrainY = constrain(floor(rectY), 0, height);
    
    //get and fill colors according to picture underneath
    imageColor = imageUnderneath.get(constrainX, constrainY);
    noStroke();
    fill(imageColor);

    //ellipses are drawn instead of rectangles when key 'e' is pressed
    if(key == 'e' || key == 'E'){
        ellipse(constrainX, constrainY, ellipseSize);
    } else{
        rect(constrainX, constrainY, rectSize, rectSize);
    }
}

This project was very interesting, however, I didn’t know how to approach it at first. I wanted to have some sort of interactive element to my self-portrait project. In my final piece, I chose to switch the shapes that the code draws in, from rectangles to ellipses.

sketch

//Mihika Bansal 
//mbansal@andrew.cmu.edu 
//Section E 
//Project 9

var portrait; 

function preload(){
    var url = "https://i.imgur.com/rh2ehQc.jpg"; 
    portrait = loadImage(url); 
}

function setup() {
    createCanvas(480, 480);
    background(0);
    portrait.loadPixels(); 
    frameRate(2000); 
}
   
function draw() {
    //random pixel 
    var px = floor(random(width)); 
    var py = floor(random(height)); 

    //color variables for that pixel 
    var cx = constrain(px, 0, width - 1); 
    var cy = constrain(py, 0, height - 1); 

    var colorLoc = portrait.get(cx, cy); 

    noStroke(); 
    fill(colorLoc); 

    //person (rectangles)
    if(px > 120 & px < 430 && py > 30 && py < height){
        rect(px, py, 5, 5); 
    }
    //background (ellipses)
    else{
        ellipse(px, py, 10, 10); 
    }
    
}
  

This project was very interesting to complete. I enjoyed the process of playing with different shapes to complete the different colored sections that worked together to form the portrait. I wanted to use larger ellipses in the background to create a more hazy background.

sketch

In this project, I had fun creating an interactive portrait of myself. I mimicked splashes of paint dropping down when the mouse is dragged on the canvas. I got to utilize what I learned from the previous assignments and incorporate them in my project.

//Charmaine Qiu
//charmaiq@andrew.cmu.edu
//Section E
//Project 09

var underlyingImage;
//create an empty array
var xarray = []
var yarray = []
//load the image from imgur.com
function preload() {
    var myImageURL = "https://i.imgur.com/cplu0CL.jpg";
    image = loadImage(myImageURL);
}

function setup() {
    createCanvas(400, 300);
    background(0);
    image.loadPixels();
    frameRate(100000000); //generate the image in a faster speed
}

function draw() {
    var px = random(width); //the location for x coordinate
    var py = random(height); //the location for y coordinate
    var ix = constrain(floor(px), 0, width-1); //constraining within the canvas
    var iy = constrain(floor(py), 0, height-1); //constraining within the canvas
    var theColorAtLocationXY = image.get(ix, iy);//fill in the color according to color of image
    noStroke();
    fill(theColorAtLocationXY);
    //draw the ellipses
    ellipse(px, py, 6, 6);
    //get the color of image at the mouse
    var theColorAtTheMouse = image.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    //loop over the length of the array
    for (var i = 0; i < xarray.length; i ++){
        //fill with the color at the mouse
        fill(theColorAtTheMouse);
        ellipse(xarray[i], yarray[i], 5, 5);
        //make the ellipses go down mimicking paint drooling down
        yarray[i] += 0.5;
        }
  }
  //when mouse is dragged, add the mouse position to the array
function mouseDragged(){
    xarray.push(mouseX);
    yarray.push(mouseY);
  }

 //when mouse is pressed, a new array is created
function mousePressed(){
    xarray = [];
    yarray = [];
  }