Category: Project-09-Portrait

sketch

// Alvin Luk
// akluk@andrew.cmu.edu
// Section A
// Project 9

// variable to store the image
var img;
var cur_x;
var cur_y;
var rand_x;
var rand_y;
var rand_t;
var type_shape;
var pix;
var siz;

function preload(){
  img = loadImage("https://i.imgur.com/z1yTE1v.jpg");
  img.loadPixels();
}

function setup(){
  createCanvas (477,478);
  background(255);
  noStroke();
  //set ellispe mode to center
  ellipseMode(CENTER);
  frameRate(10000);
}

function draw(){
  //Select random point on canvas to draw
  rand_x = random(img.width);
  rand_y = random(img.height);
  cur_x = floor(rand_x);
  cur_y = floor(rand_y);
  //get the value at the position of the image
  pix = img.get(cur_x, cur_y);
  //generate a random size of the shape
  siz = random(3,6);
  //randomize which shape to draw 
  type_shape = random([0,1,2]);
  fill(pix);

  //depending on the random value of type shape: choose triangle circle or square
  if (type_shape == 0){
  	triangle(cur_x, cur_y-(2/3)*siz, cur_x-(1/2)*siz, cur_y+(1/3)*siz, cur_x+(1/2)*siz, cur_y+(1/3)*siz); 	
  }
  else if (type_shape == 1){
  	ellipse(cur_x, cur_y,siz,siz);
  }
  else {
  	rect(cur_x-siz/2,cur_y-siz/2,siz,siz);
  }

}

For this portrait, I asked if my sister if I could use one of her older photos. For the project, I just played around with what variables I could randomize to make it more interesting. I decided to incorporate the three elementary shapes, a square, a triangle, and a circle to reconstruct my image. I also varied the size of the shapes that were used to reconstruct the image. Below are just some screen shots of the program, at it’s initial, intermediate, and “final” reconstruction of the image.

sketch

/*Jessica Nip
Section A
jknip@andrew.cmu.edu
Project-09
*/


var img;

//--------------------------
function preload() {
    //preload grandma's image
    img = loadImage("https://i.imgur.com/G6dnwgf.jpg");

}
 //-------------------------
function setup() {
    createCanvas(342,480);
    img.loadPixels();
    frameRate(200); //set fast frame rate
}
 
 //-------------------------
function draw() {
    //define X and Y pixels of image, randomize appearance position
    var Xpixel = constrain(floor(random(width)), 0, width-1);
    var Ypixel = constrain(floor(random(height)), 0, height-1);
    //image color = grab pixels from image
    var imgcolor = img.get(Xpixel, Ypixel);
    var randomSize = random(5,15);

    //set ellipse color to image pixel color
    fill(imgcolor);
    noStroke(); //remove border
    //set ellipse X and Y to randomized pixel positions
    ellipse(Xpixel, Ypixel, randomSize, randomSize); 
}

For this project, I wanted to create a fun randomized ellipse-based filter generated based on a photo of my grandmother. Below you will find some screenshots at different points of the rendering process. As the colors in the original image were fairly limited and grouped in simple forms, I wanted to use randomized ellipses to suggest those specific colors across the canvas from the beginning — the overall image also becomes more apparent early on due to the high visibility of these core forms.

sketch

//Heidi Chung
//Section A
//hschung@andrew.cmu.edu
//Project-09

var baseImage;

function preload() {
    var myImageURL = "https://i.imgur.com/FLTyc1P.jpg?1"; // a picture of myself
    baseImage = loadImage(myImageURL); //loading the image
}

function setup() {
    createCanvas(480, 480);
    background(255);
    baseImage.loadPixels(); //loading the image's pixels
    frameRate(20);
    noStroke();
}

function draw() {
    image(baseImage, 0, height, baseImage.width/2, baseImage/height/2);
    var px = random(width); //random assembly of circles being drawn in regards to x
    var py = random(height);//random assembly of circles being drawn in regards to y
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = baseImage.get(ix, iy); //extracting the colors of the image

    noStroke();
    fill(theColorAtLocationXY); //colors of circles match the image's colors at the appropriate positions
    var circleWidth = random(5, 30); //variable set so the circles have the same random width and height
    ellipse(px, py, circleWidth, circleWidth); //instead of making ellipses

    var theColorAtTheMouse = baseImage.get(mouseX, mouseY);
    fill(theColorAtTheMouse); //drawing with the mouse using the image's colors at the pixels

    var whatsUpTextX = pmouseX-25; //the position of the text relative to the mouse
    var whatsUpTextY = pmouseY-20;
    textSize(15);　//the text says "what's up" in japanese
    text("どうしたの？", whatsUpTextX, whatsUpTextY); //what's up is dragged along by the mouse
}

function mousePressed() {
  var theColorAtTheMouse = baseImage.get(mouseX, mouseY); //extracting the colors of the image again
  strokeWeight(3); //white stroke around the text to see it better
  stroke(255); //the text says "are you okay?" in korean
  textSize(30); //when you click, a big "are you okay?" is drawn
  text("괜찮아?", pmouseX - 45, pmouseY);
}

I really enjoy post-impressionism, especially Van Gogh’s art. I love that he painted scenery and people with purposeful strokes and artistic, imprecise interpretation, especially in a time where people did not appreciate his art because it wasn’t “accurate” or exact to real life images. I love the smudges and smears he made in his works. So I thought it’d be fun to make a self-portrait that feels impressionistic. When you drag the mouse across the canvas, it “paints” words that say “what’s wrong” or “what’s up” in Japanese. When you click the mouse, it “paints” a word that says “are you okay” in Korean. I can read/speak both Japanese and Korean, and I thought it’d be interesting to have both languages in my project- to say that even if you can’t understand something, you can still visually appreciate it, like you can with Van Gogh’s works.