Month: October 2016

sketch

var portraitPhoto; // variable to store the photo link
var colorAtPixel; // variable to store the color
var ellipseSize = 20; // variable to store the ellipse size

function preload(){
  portraitPhoto = loadImage("http://i.imgur.com/sn5iIEZ.jpg"); //load in the portrait photo
}

function setup() {
  createCanvas(800,800); // create a canvas at the photo's dimensions
  portraitPhoto.loadPixels(); // load in the pixels for the photo
}

function draw() {
  background(255);// draw in a background
  noStroke(); // no strokes around shapes
  
  
  for(var r = 0;r<=width+1;r+=ellipseSize){ // go through all the rows of pixels
    for(var c = 0;c<=height+1;c+=ellipseSize){ // go through all the columns of pixels
      colorAtPixel = portraitPhoto.get(r,c); // check what the color is in the photo
      fill (colorAtPixel); // fill it with that color
      ellipse(r,c,ellipseSize,ellipseSize); // draw a circle
    }
  }
noLoop();//just run draw once
}

I was very intrigued by the work of Danny Rozin, and how just that simple repetition of shapes could still manage to convey human features – but I wanted to work with color, not with shadows. So I tried to develop something that is in keeping with the simplicity of Rozin’s style, but incorporates colors to make the portrait more recognizably human.

portrait

/*
*Sadie Johnson
*15-104 Section C
*sajohnso@andrew.cmu.edu
*Project-09-portrait
* This program paints a portrait of a girl's face
*/

var underlyingImage;
    var lastY = height/2;
    var lastX = width/2;

function preload() {
    var myImageURL = "https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/10/sajohnso-girl-209x300.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(500, 500);
    background(0);
    underlyingImage.loadPixels();
    setFrameRate(40);
}

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);
    var distance = dist(width/2+(width/5),height/2,mouseX,mouseY); //distance from her eyes
    var lineThickness = constrain (distance, 40, distance-20); //limits brush size

//automatic brushstrokes
    var rando1 = random(2,4);
    var rando2 = random(-3,3);
    strokeWeight(4);
    stroke(theColorAtLocationXY);
    line(px-rando2, py-rando1, px+rando2,py+rando1);

//user's brushstrokes
    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    strokeWeight(lineThickness/10);
    stroke(theColorAtTheMouse);
    line(pmouseX, pmouseY, mouseX, mouseY);


}

For this project, I was inspired by the example of Golan’s self-portrait, and how the result was a combination of “painting” both by the program and the user. I wanted to make a portrait look even more like a collaborative painted portrait by setting the ellipses as brushstrokes of random shape and size, and by changing the size of the brush so the “painting” would be more detailed around her eyes, and rougher around the edges. I also wanted the user to have a greater input as to what the painting would look like in the end.

I thought it would look interesting if the picture had three “clones” of my roommate.

sketch

//Arula Ratnakar
//Section C
//aratnaka@andrew.cmu.edu
//Portrait




var picture;


function preload() {
	//loads picture of roommate 
    var img = "http://i.imgur.com/DVFUfQO.jpg";
    picture = loadImage(img);
}

function setup() {
    createCanvas(500, 500);
    picture.loadPixels();

    
}

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 = picture.get(ix, iy);


  
    noStroke();
    fill(theColorAtLocationXY);
    drawMultipleFaces()


    function drawMultipleFaces (){ 
    	ellipse (px, py, 6,6)
    	
    	push ()
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)
    	
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)
    
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)
    	
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)
    	
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)
    	
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)

    	pop()
    }

   
    
}

index

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>