Month: October 2019

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.