Category: Project-09-Portrait

sketch

var underlyingImage;

function preload() {
    var friendImageURL = "http://i.imgur.com/2b0zZtx.png";
    friendImage = loadImage(friendImageURL);
}

function setup() {
    createCanvas(738, 800);
    background(0);
    friendImage.loadPixels();
    rectMode(CENTER);
}

function draw() {
    var xCoord = random(width);
    var yCoord = random(height);
    var imageX = constrain(floor(xCoord), 0, width);
    var imageY = constrain(floor(yCoord), 0, height);
    var xyColor = friendImage.get(imageX, imageY);
    console.log(xyColor);
    var rectHeight = random(0,20);
    var rectWidth = random(0,10);
    noStroke();
    fill(xyColor[0]);
    rect(xCoord, yCoord, rectWidth, rectHeight)
}

Initially I wasn’t sure how I should format the picture, but after trying out some different things I took only the greyscale value out of the pixel get function, and used rectangles of varying widths and heights to create the image. I thought that it would be cool to create an effect as if the image was crafted onto a tree bark.

james-custompixel

//James Katungyi
//Section A 0900
//jkatungy@andrew.cmu.edu
//Assignment-Project-09

var me;
//declare first point of hatchline 
var xLoc;
var yLoc;
//declare brushtip size
var brushtip;
//preload image
function preload(){
    me = loadImage("http://i.imgur.com/o3DFass.jpg");
}

function setup(){
    createCanvas(400, 400);
    background(135, 206, 250);//sky blue background
    //scale the image to fit canvas width; maintain aspect ratio
    me.loadPixels(); //load image pixels
}
function draw(){
    //image(me, 0, 0);
    var brushLength = random(10, 30);//hatch length
    //second point of hatch line
    var x2Loc = xLoc + brushLength;
    var y2Loc = yLoc + brushLength;
    //locate middle of hatch
    var midXLoc = (xLoc + x2Loc) / 2;
    var midYLoc = (yLoc + y2Loc) / 2;
    //pick image pixel at middle of hatch
    var pickCol = me.get(midXLoc, midYLoc);
    
    //use picked pixel color for hatch
    stroke(pickCol);
    strokeWeight(brushtip);
    //draw hatch
    
    line(xLoc, yLoc, x2Loc, y2Loc);
    line(x2Loc, yLoc, xLoc, y2Loc);
    //touch up the painting with the mouse
    //when mouse is in the canvas, detail image aspects
    if ((mouseX > 0) & (mouseX < width) && 
        (mouseY > 0) && (mouseY < height)){
        xLoc = mouseX; 
        yLoc = mouseY;
        brushtip = 2; //smaller brushtip for fine finishing
    } else {//when mouse is outside canvas draw faster with larger strokes
        xLoc = random(width);
        yLoc = random(height);
        brushtip = 5; //larger brushtip to fill up canvas
    }
    
}

The canvas quickly fills up with color and form except when the artist focuses the drawing pencil on one aspect or other.

This is the original photo.

I relate the mouse movement to the area that is showing the photos

sketch

//Zhuoying Lin
//zhuoyinl@andrew.cmu.edu
//section a 
//project 09

var underlyingImage;

function preload() {
	var image = "https://scontent-dft4-2.xx.fbcdn.net/v/t1.0-9/14572982_354839081529321_6987009359279715749_n.jpg?oh=14016ac2f97e3340a7fb671665b39d1a&oe=589F4AC3";
	underlyingImage = loadImage(image);

}

function setup() {
	createCanvas(650,650);
	background(0);
	underlyingImage.loadPixels();
	frameRate(1000);
	
}

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 mousecol = underlyingImage.get(mouseX, mouseY);
	//get color fo the tranangle
	fill(mousecol);
	noStroke();
	triangle(mouseX,mouseY,pmouseX,pmouseY,mouseX-random(-1,1),pmouseY+random(-1,1));
	//make trangle size related to velocity of mouse movement
	

}

I used my portrait shot during my trip in Chicago last month. I created random-shaped quads to form the photo.

sketch

var underlyingImage;

function preload() {
    var myImageURL = "http://i.imgur.com/95tb7iG.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(800, 533);
    background(0);
    underlyingImage.loadPixels();
    frameRate(50);
}

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);
    quad(px-random(10), py, px, py-random(10), px+random(10), py, px, py+random(10));

    
}

Drawing the pixels of a photo of myself, I set the circles into random sizes. I took out the pixels of the eyes and made them flashing. Basically, it erases the pixels on every other second, and then tries to redraw. The mouse also functions as an eraser by drawing random sizes black circles.
sketch

var original;

function preload() {
    var imageLink = "http://i.imgur.com/hfhcgZE.png";
    original = loadImage(imageLink);
}

function setup() {
    createCanvas(600, 600);
    background(0);
    original.loadPixels();
}

function draw() {
	drawPixel();
	eraseEyeL();
	eraseEyeR();
	drawMouse();
	//implied grid
	/*line(width/6, 0, width/6, height);
	line(width/3, 0, width/3, height);
	line(width/2, 0, width/2, height);
	line(width/3*2, 0, width/3*2, height);
	line(width/6*5, 0, width/6*5, height);
	line(0, height/6, width, height/6);
	line(0, height/3, width, height/3);
	line(0, height/2, width, height/2);
	line(0, height/3*2, width, height/3*2);
	line(0, height/6*5, width, height/6*5);*/
}

function drawPixel() {
	frameRate(120);
	var x = random(width);
	var y = random(height);
	var ix = constrain(floor(x), 0, width-1);
    var iy = constrain(floor(y), 0, height-1);
	var pixcolor = original.get(ix, iy);
	var size = random(10, 30);
	fill(pixcolor);
	noStroke();
	ellipse(x, y, size, size);
}

//erase left eye based on seconds
function eraseEyeL() {
		var ex = random(width/3, width/2);
		var ey = random(height/2, height/3*2);
		var erasecolor = original.get(ex, ey);
		if (second() % 2>0){
			frameRate(30);
			fill(erasecolor);
			noStroke();
			ellipse(ex, ey, 15, 15);
		} else {
			//frameRate(300);
			fill(10);
			noStroke();
			ellipse(width/3+50, height/2+50, 120, 120);
			print(erasecolor);
		}
	}

//erase rigt eye based on seconds
function eraseEyeR() {
		var ex = random(width/3*2, width/6*5);
		var ey = random(height/2, height/3*2);
		var erasecolor = original.get(ex, ey);
		if (second() % 2>0){
			frameRate(20);
			fill(erasecolor);
			noStroke();
			ellipse(ex, ey, 15, 15);
		} else {
			//frameRate(300);
			fill(10);
			noStroke();
			ellipse(width/3*2+50, height/2+50, 120, 120);
			print(erasecolor);
		}
}

//erase pixels according to mouse positions
function drawMouse() {
		var mx = mouseX;
		var my = mouseY;
		var msize = random(20,30);
		fill(0);
		noStroke();
		ellipse(mx, my, msize, msize);
}

sketch

/*
Jihoon Park
section A
jihoonp@andrew.cmu.edu
project 09
*/

var GrannyImg

function preload() {
    var GrannyLocation ="http://i.imgur.com/sCHGvUW.jpg";
    GrannyImg = loadImage(GrannyLocation);
}

function setup() {
    createCanvas(616, 408);
    background(0);
    GrannyImg.loadPixels();
    frameRate(10);
    colorMode(RGB);
}

var rectangle = [];

function drawRect() {
	var pixelX = random(0, width);
	var pixelY = random(0, height);
	var iX = constrain(floor(pixelX), 0, width-1);
	var iY = constrain(floor(pixelY), 0, height-1);
	var pixelColor = GrannyImg.get(iX, iY);
	var rectLength = map(brightness(pixelColor), 0, 100, 0, 50);

	//noStroke();
	fill(pixelColor);
	rectMode(CENTER);
	rect(pixelX, pixelY, 4, rectLength);
}

function draw() {
	drawRect();


}

I took a black and white photograph of my grandmother from last summer and turned it into a portrait consisted of strips.

For my project I chose to do a portrait of my roommate sticking her tongue out. I used triangles to represent her because this is her favorite shape and we both agreed that the aesthetic of this is better because its more varied than ellipses and rectangles or lines. As the project evolves it fills in to reveal the picture.  sketch

var underlyingImage;

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

function setup() {
    createCanvas(500, 500);
    background(0);
    underlyingImage.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 = underlyingImage.get(ix, iy);
    var point2 = random(40);
    var point3 = random(60); //sets variables for the triangle points

    noStroke();
    fill(theColorAtLocationXY);
    triangle(px, py, px + point2, py + point2, px + point2/2, py +point3);
    //draws the image in varrying sizes of triangles


}