Month: October 2019

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.