kyungak-project-09-portrait

sketch

//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Project 09

var selfportrait; //self portrait image
var x = []; //x position array
var y = []; //y position array
var dx = []; //x velocity array
var dy = []; //y velocity array

function preload() {
    var imageURL = "https://i.imgur.com/pvmAYGW.jpg"
    selfportrait = loadImage(imageURL); // preloads the image
}

function setup() {
  createCanvas(480, 480);
  noStroke();

  //for loop for assigning random values for x,y,dx,dy
  for (var i=0; i<150; i++) {
        x.push(random(width));
        y.push(random(height));
        dx.push(random(-10,10));
        dy.push(random(-10,10));
  }
}

function draw() {
  //image(selfportrait,-250,-50);

  //for loop for 
  for (var j=0; j<x.length; j++) {
    //pixel colors from image is stored into x and y array
    var color = selfportrait.get((x[j]+250), y[j]+50);
        //canvas is filled with image color
        fill(color);
        //ellipse fills the canvas + random movements with dx,dy
        ellipse(x[j],y[j],10,10);
        x[j]+=dx[j];
        y[j]+=dy[j];
    }

    //xpos and ypos is determined by mousex and mousey
    var xpos = floor(mouseX);
    var ypos = floor(mouseY);
    //color is assigned to mousex and mousey
    var color = selfportrait.get((xpos+250), ypos+50);

    fill(color,25);
    noStroke();
    //according to mouse position canvas is colored
    rect(xpos,ypos,10,10);

}

1                               2                              3

1. A loop of 150 ellipses initially color the canvas
2. MouseX and MouseY function is used to fill in the blanks
3. Final portrait is done

For this project, I was able to reuse functions and skills that I previously learned from this class. I set up a series of position and velocity arrays to form a loop of circles that randomly moved across the canvas with the image colors. After most of the image was colored, you can also custom color the blanks with the mousex and mousey function. I thought this project was really interesting, and I am pretty satisfied with the result.