Category: Project-09-Portrait

sketch-129.js

var myImage;
// Variables needed for lerp
var orig = color(theColorAtLocationXY);
var next = color(135, 206, 250);

function preload() {
    var goldenGateBridge = "https://i.imgur.com/jeVkTI5.png";
    myImage = loadImage(goldenGateBridge);
}

function setup() {
    createCanvas(414, 750);
    background(0);
    myImage.loadPixels();
    frameRate(1500);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 10, width-1);
    var iy = constrain(floor(py), 10, height-1);
    var theColorAtLocationXY = myImage.get(ix, iy);

    // Creates a diagonal "line" that pulls colors
    // used in the rest of my portrait
    if(py > px) {
    noStroke();
    fill(theColorAtLocationXY);
    rect(px, py, 10, 5); 
    }
    else {
    theColorAtLocationXY = lerp(orig, next, 0.5);
    fill(theColorAtLocationXY);
    rect(px, py, 5, 10);
    }
}

For this week’s process, I was heavily reliant on the template for creating my final product. Unless most weeks, I did not really have a drawing that I made prior to starting my final project. I decided to use a picture from a couple of summers ago when I went biking across the Golden Gate Bridge. I decided to create a diagonal “background” of sorts that depends on other colors that were used in my image.

On a final note, I am not sure why the computational portrait is not showing up on this page, even though the code is embedded. I tried re-uploading my file numerous times and embedding it, but nothing seems to work…When I open the html file associated with my code, it works though..!

sketch

//Lydia Jin
//Section D
//jialuj@andrew.cmu.edu
//Project 9

var brother;

function preload() {
	//load picture of my brother
    var myImageURL = "http://i.imgur.com/NrbfIdb.jpg";
    brother = loadImage(myImageURL);
}

function setup() {
	//set up canvas
    createCanvas(500, 500);
    background(0);
    brother.loadPixels();
    //load 100 times in 60 seconds
    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 = brother.get(ix, iy);

    //draw quads
    noStroke();
    fill(theColorAtLocationXY);
	quad(px-random(10), py-random(10), px-random(10), py-random(10), px+random(10), py, px, py+random(10));

}

I decided to use a photo of my brother taken in hockey uniform. I used quads to present the image to make it more cool since quads are more random than ellipses. A finished portrait looks like the one below:

sketch

//Yugyeong Lee
//Section A
//yugyeonl@andrew.cmu.edu
//Project 09

var imgYugy;

function preload() {
	var imgURL = "http://i.imgur.com/XYdrw0f.jpg";
	imgYugy = loadImage(imgURL);

}
function setup() {
    createCanvas(540, 700);
    background(0);

    imgYugy.loadPixels();
    frameRate(500);
}

function draw() {
	drawYugyC();
	drawYugyL();
}

//circular pixels controlled by mouseX and mouseY
function drawYugyC () {
	var pX = mouseX;
	var pY = mouseY;
	var iX = constrain(floor(pX), 0, width - 1);
	var iY = constrain(floor(pY), 0, height - 1);
	var color = imgYugy.get(iX, iY);
	var diam = random(5, 15);

	fill(color);
	noStroke();
	ellipse(pX, pY, diam, diam);
}

//diagonal lines at random
function drawYugyL () {
	var pX = random(0, width);
	var pY = random(0, height);
	var iX = constrain(floor(pX), 0, width - 1);
	var iY = constrain(floor(pY), 0, height - 1);
	var color = imgYugy.get(iX, iY);
	var offset = random(5, 20);
	var strokeweight = random(1, 5)

	stroke(color);
	strokeWeight(strokeweight);
	line(pX, pY, pX + offset, pY + offset);
}

I was exploring on combination of diagonal lines and circles to create a pixelated portrait of myself. The diagonal lines appear at random while circular pixels can be controlled by the location of the mouse.

sketch

//Mercedes Reys

//Section C 

//mreyes@andrew.cmu.edu

//Project-09

//global variables 
var underlyingImage;
var px = [];
var py = [];

//pre-load images 
function preload() {
    var myImageURL = "http://i.imgur.com/FODHYaP.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(0);
    underlyingImage.loadPixels();
    frameRate(1);
}

function draw() {  

    //for loop to fill arrays
    for (i = 0; i < frameCount; i++) { 
    
    px[i] = random(width);
    py[i] = random(height);

    //get color
    var ix = constrain(floor(px[i]), 0, width-1);
    var iy = constrain(floor(py[i]), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    //draw lines at random length and direction 
    stroke(theColorAtLocationXY)
    line(px[i]+random(20),py[i]+random(20),px[i]+random(80),py[i]+random(80));
    }

}

I was initially trying to go for something more complex where there would be lines and circles only drawn in the white area to create a constellation effect. That proved to be to difficult and I couldn’t get it to run, so instead I simplified it to just lines that appear in a semi chaotic matter to make a spooky face appear.

.

I had a lot of fun with this project once I got the preliminaries set up.  I started out thinking that I wanted to have an image recreated by pixilation when the mouse scrolled over the image.  But then I realized that that wouldn’t work because of the constant mouse movement.  So I decided to create a more fun portrait.  The subject’s last name is displayed mainly opaque and then the picture is displayed with a spotlight on top of it.  I spent a lot of time on this image but I still want to continue working on it.

 beginning after one movement with the mouseafter scrolling over the image multiple times

sketch

//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Assignment-09-B

var img;
var inloc = "http://i.imgur.com/XTKXPpa.png";
var distThreshold = 20;
var underlyingImage;


function preload() {
   img = loadImage(inloc);
   underlyingImage = loadImage(inloc);

   underlyingImage.loadPixels();
}

function setup() {
    createCanvas(400,300);     //sets up on the background image
    image(img,0,0); 
   filter(POSTERIZE,2);
}

function draw(){
    for (var y = 0; y < height; y +=40){
        for (var x = 0; x < width; x +=40) {
            if (nearMouse(x, y, distThreshold)) {
           var c = underlyingImage.get(mouseX,mouseY);
              stroke(c);           //the stroke color is determined on the pixel underneath
              strokeWeight(1);          //creates the last name of the subject, Khalouf
              textSize(45);   
              fill(255,255,255,20);
              text("Khalouf", x,y);
              push();
                 image(underlyingImage, 0, 0, underlyingImage.width / 8, underlyingImage.height / 8);

    var x = constrain(mouseX, 0, img.width - 1);     //redraws the image based on mouse X and Y
    var y = constrain(mouseY, 0, img.height - 1);
    // get a subrectangle from image. x and y (upper left corner)
    // should be within the image.
    var smaller = img.get(x, y, 100, 100);
    image(smaller,x, y, 120, 120);
    fill(255,255,255,40);
    ellipseMode(CORNERS);        //puts a "spotlight" on the center of the image
    noStroke();
    strokeWeight(0);
    ellipse(x,y,x+120,y+120);
    pop();
            }
        }
    }
}

function nearMouse(x, y, d) {
    return dist(x, y, mouseX, mouseY) < d;
}
 

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>

 

 

For my project, I have it that you can click or drag your mouse to fill in the portrait of my sister.

Sister Portrait

function preload() {
    var myImageURL = "http://i.imgur.com/HsqTrHo.jpg"; //original pic on imgur
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(720, 500);
    background(255); //white background
    underlyingImage.loadPixels(); //loads pic
    noStroke();
    text("press your mouse", 100, 100); //click instructions
    text("or drag your mouse", 300, 300); //drag instructions
}


function draw() {
    //not called
}

function mousePressed() {
    splat(mouseX, mouseY); //splat made where you click
}

function mouseDragged() {
    splat(mouseX, mouseY); //splat made where you drag
}

function splat(x, y) {
    var imageX = constrain(mouseX, 0, width); // x location of image at mouseX, as long as it's within the canvas
    var imageY = constrain(mouseY, 0, height); // y location of image at mousey, as long as it's within the canvas
    var pix = underlyingImage.get(imageX, imageY); //gets the color of the pic at your mouse location
    fill(pix, 128); //fills with the underlying image's colors
    var rad = 17; //radius of ellipses
    for (i=3; i<29; i+=.35) { //draws the ellipses in the splat
        var angle = random(0, TWO_PI);
        var splatX = x + cos(angle)*random(i*random(1.5));
        var splatY = y + sin(angle)*random(i*random(2));
        ellipse(splatX, splatY, rad-i, rad-i+1.8);
  }
}

Here’s what your first interaction would be — clicking around the canvas a bit:

And here’s what a filled in canvas would look like:

Based on this original image: