Category: SectionD

sketch

/* Cathy Dong
   Section D
   yinhuid@andrew.cmu.edu
   Project 09 - Portrait
*/

// load image as color base
var baseImg;

// preload base image
function preload() {
    var img = "https://i.imgur.com/zdFmG5k.jpg";
    baseImg = loadImage(img);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    baseImg.loadPixels(); //load image pixels
    frameRate(100000); //set draw circle speed with framerate
}

function draw() {
    // set random x and y to make points
    var px = random(width);
    var py = random(height);
    // constrain to keep x and y within canvas
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    // fill with base image color
    var colorXY = baseImg.get(ix, iy);
    // change circle size based on distance to center
    var distance = dist(px, py, width / 2, height / 2);
    var cirSize = map(distance, 0, sqrt(2) * width / 2, 10, 25);

    // draw circles
    noStroke();
    fill(colorXY);
    circle(px, py, cirSize);

}

In this project, I used dots/ circles to draw the abstracted self-portrait. Since my face is centered in the image, I used smaller circles near center and larger ones on the canvas edges. The idea is to have finer resolution on the face, whereas the background is blurred. 

sketch

/*
Mari Kubota
Section D
mkubota@andrew.cmu.edu
Assignment-09
*/

var lines = []; // Empty array to store ellipses

// Load image
function preload() {
    underlyingImage = loadImage("https://i.imgur.com/23aauRel.jpg");
}

function setup() {
    createCanvas(550, 420);
    underlyingImage.loadPixels(); 
}

// Determines the properties
function makelines() {
    var ix = constrain(floor(this.x), 0, width-1);
    var iy = constrain(floor(this.y), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(this.x, this.y); //gets the color value of the image at (x,y)
    var linethickness= 5;//thickness of lines

    fill(theColorAtLocationXY) // Fills the ellipse with the color of the image at (x,y)
    noStroke();
    ellipse(this.x, this.y, linethickness); // Draws the ellipse at (x,y) with the width and the height dimension of 'ballsize' which is a random number between 2 and 8
}

// Makes the lines move
function linespeed() {
    this.x += this.dx; // MouseY will be later assigned as 'y'
}

// function to create properties of ellipse to be called on later
function drawPortrait(originalx, originaly, originaldx) {
    p = {x: originalx, 
         y: originaly,
         dx: originaldx,
         speed: linespeed,
         lines: makelines,
        }
    return p;
}

//draws the lines
function draw() {
    newLines = []; // Creates an empty array for new lines
    for (var i = 0; i < lines.length; i++) { 
        var p = lines[i];
        p.speed(); //returns the function speed from drawPortrait
        p.lines(); //returns the function balls from drawPortrait
        newLines.push(p); 
    }
    lines = newLines;
}


// When the mouse is moved it replaces the originalx, originaly, and originaldx values with mouseX, mouseY and random(-20,20) and make the drawPortrait function actually happen and to be stored in the newball array
function mouseMoved() {
        var newLines = drawPortrait(mouseX, mouseY, random(-20, 20));
        lines.push(newLines);
        this.x += random(this.x-3, this.x+3);
}

For this project I used a picture of me from over the summer when I was learning how to drive. The image appears when you mouse over the picture and the picture appears with horizontal strips which were made using ellipse().

sketch

//RAYMOND PAI
//Section D
//rpai@andrew.cmu.edu
//Project 09 Comp Portrait

//pre load image
var underlyingImage;

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

function setup() {
    createCanvas(500, 500);
    background (0);
    //pre load image's pixels
    underlyingImage.loadPixels();
    // slightly fast frame rate
    frameRate(300);
}

function draw() {
    //random pixel
    //x of pixel
    var px = random(width);
    //y of pixel
    var py = random(height);
    var fx = constrain(floor(px), 0, width-1);
    var fy = constrain(floor(py), 0, height-1);
    //load pixel color to 'give' to the color of the circles
    var theColorAtLocationXY = underlyingImage.get(fx, fy);

    //draws circles
    fill(theColorAtLocationXY);
    noStroke();
    ellipse(px, py, 20, 20);

    //draws circles at mouse
    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    //color for circles
    fill(theColorAtTheMouse);
    //draw circles at mouse
    ellipse(mouseX, mouseY, 20, 20);
}

I used chunky circles to make my portrait. To emphasize the playful style, the original picture is already edited to be really colorful:

The picture loads pretty quickly because I don’t want to wait to see the original. You can also speed up the process even more by rapidly moving the mouse around the portrait. The whole image should appear in about a minute.

I don’t have any paper sketches, but I have some screenshots of the earlier versions. I wanted to make it “print” from left to right and go down to a new row once it reaches the end (width). When it reaches the end of the canvas (width, height), it moves back to 0,0 and starts printing the image again.

I wanted to add some interactivity using mousePressed. Every time the mouse is clicked:

1. A number between 1 and 20 is added to the step and size arrays.
2. i increases by 1, so that it accesses the newly generated elements in the arrays.

computational portrait (please click!)

/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-09
*/

var underlyingImage;
var rectX = 0;
var rectY = 0;
var i = 0;
rectstep = [5];
rectsize = [5];

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

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

function draw() {
    var theColorAtLocationXY = underlyingImage.get(rectX, rectY);

    noStroke();
    fill(theColorAtLocationXY);
    rect(rectX, rectY, rectsize[i], rectsize[i]);
  
    rectX += rectstep[i];
  
//rectX return to 0 when hit edge of canvas
    if (rectX >= width)
    { 
      rectX = 0;
      rectY += rectstep[i];
    }
//restarts when hits end of canvas
    if (rectY >= height)
    { 
      rectX = 0;
      rectY = 0;
      background(0);
    }
}

function mousePressed() {
    var r = random(1,20);
    
    rectstep.push(r);
    rectsize.push(r);
    i += 1;
}

sketch

//Kristine Kim
//Section D
//younsook@andrew.cmu.edu
//Project 09: computational portrait

var newimage;

function preload(){
//loads image from imugr.com
    var OGimage = "https://i.imgur.com/nYi2hyU.jpg[/img]"
    newimage = loadImage(OGimage);
}

function setup(){
    createCanvas(480,320);
    background(181, 209, 255);
    newimage.loadPixels();
    frameRate(20);
}

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);
//retrieve colors at a certain location from the image
    var pixelcolorT = newimage.get(ix,iy);
//retrieve colors at mouseX and mouseY location from the image
    var pixelcolorE = newimage.get(mouseX, mouseY)

//draws ellipses controlled by mouseX and mouseY
//draws random diameters
    noStroke();
    fill(pixelcolorE);
    ellipse(pmouseX, mouseY, random(5,15), random(5,15));

//draws text "Miss" and "you" with colors retrieved from OGimage
//and random placements

    fill(pixelcolorT);
    text("Miss", px,py);

    fill(pixelcolorT);
    text("you", py, px);

}

For my project, I used an image of a picture I took of one of my students that I served in Mexico this summer. I played around with different background colors. To add diversity into my project, I added 3 different elements into my piece, two texts and ellipses that drew with random diameters between 5 to 15. A problem I ran into was that my OGimage was bigger than my canvas size so my code was drawing only white ellipses. I went into photoshop and rescaled my image to 480 x 320 pixels and that solved the problem.