Category: SectionE

sketch

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Project 9 Computational Portrait
 */

var underlyingImage;

// loading the image
function preload() {
    var url = "https://i.imgur.com/GsniIVQ.jpg";
    underlyingImage = loadImage(url);
}

function setup() {
    createCanvas(300, 400);
    background(145, 1, 10);
    underlyingImage.loadPixels();
    frameRate(60); // how fast the pixels come up
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width);
    var iy = constrain(floor(py), 0, height);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    ellipseW = random(1, 8); // original ellipse width
    ellipseH = random(1, 8); // original ellipse height
    keyPressed(); // key pressed determines ellipse width and height

    // drawing the ellipse
    ellipse(px, py, ellipseW, ellipseH);

}

// what happens if the key is pressed
function keyPressed() {
    // ellipse will grow if g is pressed
    if (key == "g") {
        ellipseW = random (5, 15);
        ellipseH = random(5, 15);
    } else if (key == "s") {
    // ellipse will shrink if s is pressed
        ellipseW = random(0.5, 3);
        ellipseH = random(0.5, 3);
    } else if (key == "n") {
    // ellipses will return to original size
        ellipseW = random(1, 8);
        ellipseH = random(1, 8);
    }
    return ellipseW;
    return ellipseH;
}

For this portrait, I started out with ellipses being randomized for a width and height ranging from 1 to 5. However, I got impatient while waiting for the portrait to finish, so I decided to make the ellipse grow when you pressed the key “g.” But since I didn’t like how blurry the portrait got, I gave the user the option of returning the ellipses back to its original size or an even smaller size.

sketch

 // Joseph Zhang
 // Haozhez@andrew.cmu.edu
 // Section E
 // Project 09: Portrait

 var underlyingImage;
 var words = ['joseph', 'designer', 'student', 'cmu', 'loves 104']
 function preload() {
     var myImageURL = "https://i.imgur.com/LTgLTOy.jpg";
     underlyingImage = loadImage(myImageURL);
 }
 
 function setup() {
     createCanvas(500, 500);
     background(0);
     underlyingImage.loadPixels();
     frameRate(100);
 }
 
 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);
    //randomizes text size
    textSize(random(6));
    text(random(words), px, py);
    
    //draws text at mouseX and mouseY
    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    fill(theColorAtTheMouse);
    text(random(words), mouseX, mouseY);
 }

This is a self-portrait created using words that describe who I am as an individual. Labels hold so much power in our culture whether we like it or not, so why not define yourself?

sketch

let img;
//my name is an array of letters
let name = ['a', 'l', 'i', 'c', 'e'];

//load image
function preload() {
  image = loadImage('http://i.imgur.com/S0F2kRi.jpg');
}

function setup() {
  createCanvas(720, 400);
  imageMode(CENTER);
  noStroke();
  background(255);
  image.loadPixels();
}

function draw() {
  let px = floor(random(image.width));
  let py = floor(random(image.height));
  let pix = image.get(px, py);
  fill(pix, 128);
  textSize(20);
  textFont("Impact");
  //call random letter from name array
  text(random(name), py, px);
}

Here is my “pointillism” self-portrait. I wanted to change the points to the letters of my name, so I created an array and called random letters from that array. The letters are called at random coordinates.

sketch

/* Youie Cho
   Section E
   minyounc@andrew.cmu.edu
   Project-09-Computational-Portrait*/

var myImage;

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

function setup() {
    createCanvas(500, 500);
    background(0);
    myImage.loadPixels();
    frameRate(2000);
}

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);
    // Color at the current pixel
    var theColorAtLocationXY = myImage.get(ix, iy);
    // Random sizes of ellipses
    var w = random(2, 8);
    var h = random(.5, 3);
    // Draw ellipses
    fill(theColorAtLocationXY);
    ellipse(px, py, w, h);

    // Use color at the mouse
    var theColorAtTheMouse = myImage.get(mouseX, mouseY);
    // Draw the dog bone only every 30 frames
    if (frameCount % 30 == 0) {
    noStroke();
    fill(theColorAtTheMouse);
    dogBone();
    }
}

// Draw dog bone pattern according to mouse movement
function dogBone() {
    rectMode(CENTER);
    rect(mouseX, mouseY, 20, 8);
    ellipse(mouseX - 10, mouseY - 3, 8, 8);
    ellipse(mouseX - 10, mouseY + 3, 8, 8);
    ellipse(mouseX + 10, mouseY - 3, 8, 8);
    ellipse(mouseX + 10, mouseY + 3, 8, 8);
}

This project was fun to make and watch. Figuring out how to differentiate the drawing rate of the particles and my dog bone pattern was interesting, and it would be fun to make use of this in my future projects as well.

sketch

//Jina Lee
//jinal2@andrew.cmu.edu
//Section E
//Project-09-Portrait

var myImage;

// preloads photo of my dogs and I
function preload() {
    var myImgURL = "https://i.imgur.com/Ux0KKiz.jpg";
    myImage = loadImage(myImgURL);
}


function setup() {
    createCanvas(640, 480);
    background('black');
    // the image is too big so have to shrink it to fit canvas
    myImage.resize(640, 480);
    myImage.loadPixels();
}

function draw() {
    // chooses a random x value located near the cursor
    var randomX = floor(random(mouseX - 15, mouseX + 15));
    // chooses a random y value located near the cursor
    var randomY = floor(random(mouseY - 15, mouseY + 15));
    // selects the color from a pixel at a random point near the cursor
    fill(myImage.get(randomX, randomY));
    // draws a circle
    dot(randomX, randomY);
}

// creates dot shape
function dot(x, y) {
    push();
    noStroke();
    translate(x, y);
    ellipse(0, 2, 5, 5);
    pop();
}

For this weeks assignment, I had a lot of fun playing with the image. I used dots to create the photo of my dogs and I when I was younger. It was interesting when I was able to change the circle sizes. I stuck with size 5 because it made the design seem easy to comprehend while also not being extremely clear. I tried size 10 and it seemed too blurry.

sketch

//Zee Salman
//SECTION E
//project 09

var picture;

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

function setup() {
	background(255);
    createCanvas(360, 340);
    picture.loadPixels(); 
//rate of the pixels
    frameRate(8000); 
}

function mouseDragged(){
//size of the brush
    var Bmouse = random(11, 30);
//selecting the color
    var Dmouse = picture.get(mouseX, mouseY); 

//drawing with the mouse dragged    
    fill(Dmouse);
    ellipse(mouseX, mouseY, Bmouse, Bmouse);
}
    
function draw() {
//random  
    var x = random(width); 
    var y = random(height); 

//color for pixel 
    var cx = constrain(floor(x), 0, width - 1); 
    var cy = constrain(floor(y), 0, height - 1); 

    var selColor = picture.get(cx, cy); 

//color of the circles    
    noStroke(); 
    fill(selColor); 

//more focus on the person
    if (x > 60 & x < 200 && y > 0 && y < height){
        ellipse(x, y, 5, 5); 
    }

//closer to the person
    else if (x > 20 & x < 300 && y > 0 && y < height){
        ellipse(x, y, 7.5, 7.5); 
    }
    
//out of focus background
    else {
        ellipse(x, y, 9, 9); 
    }
 }

I really had fun with this project because I had the opportunity to test out and create different outcomes for different interactions. I also wanted it to still be a picture that has some sort of focus as well, so I created smaller dots/ellipses towards the figure and facial features. But, I still left room for abstraction with the interaction piece making it so that random sized dots create the pictures.