AndrewWang-Project-09

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.

Original Image
Friend Black and White

James Katungyi – Project 09 – Custom Pixel

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.

me-unfinished

zhuoyinl-project 09

13001311_257203241292906_3846527802288812822_n
This is the original photo.

%e5%be%ae%e4%bf%a1%e6%88%aa%e5%9b%be_20161028102108
I relate the mouse movement to the area that is showing the photos

%e5%be%ae%e4%bf%a1%e6%88%aa%e5%9b%be_20161027131510

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
	

}

Liu Xiangqi-Project-09-Portrait

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));

    
}

Owen Fox project 9

customportrait

//Owen Fox
//olf@andrew.cmu.edu
//Section C
//Project week 9

var face0;
var x = 0;
var y = 0;
var r1 = 128;
var r2 = 255;
var g1 = 0;
var g2 = 230;
var b1 = 0;
var b2 = 230;

function preload() {
    //loads image of roommate's face
    var img0url = "http://i.imgur.com/xoW2D1C.png";
    face0 = loadImage(img0url);

}


function setup() {
    createCanvas(410, 804);
    background(0);
    face0.loadPixels();

}

function draw() {

    customPixel(x,y,face0,r1,g1,b1,r2,g2,b2);

    x = x + 10;
    //resets x to 0 after each line
    if (x > width) {
    x = 0;
    y = y + 10;
    }
    //when the progression reaches the bottom of the page, restarts and chooses a new random color pallete
    if (y > height) {
    clear();
    background(0);
    x = 0;
    y = 0;
    r1 = random(0,100);
    g1 = random(0,100);
    b1 = random(0,100);
    r2 = random(101,255);
    g2 = random(101,255);
    b2 = random(101,255);
    }



}

function customPixel(px,py,img,redstart,redstop,greenstart,greenstop,bluestart,bluestop) {

    //based on example code
    this.px = px;
    this.py = py;

    //gets the color of a given pixel of the image, then creates variables for each rgb value
    var theColorAtLocationXY = img.get(px, py);
    var r = theColorAtLocationXY[0];
    var g = theColorAtLocationXY[1];
    var b = theColorAtLocationXY[2];

    //maps natural colors to a monochromatic color pallete, or any colors assigned to the function
    red = map(r,0,255,redstart,redstop);
    green = map(g,0,255,greenstart,greenstop);
    blue = map(b,0,255,bluestart,bluestop);

    //draws each circle
    noStroke();
    fill(red,green,blue);
    ellipse(px, py, 10, 10);

}

draws a series of colored circles based on a picture taken of my roommate. When the circle progression gets to the bottom the program restarts, this time with a new set of colors.

 

ex1

Denise Jiang- Project 09

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);
}


screenshot-13

screenshot-12

jihoonp_project_09

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.
1

img

ShanWang-Project-09

sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Project-09

var distribution = 360;
var disArray = [];

//load image
function preload(){
    var imgURL = "https://scontent.fphl2-2.fna.fbcdn.net/v/t1.0-9/10616240_357271987758524_8469922251060207807_n.jpg?oh=0a6b950bcacdcf0e10d694c50ead4472&oe=588F8977";
    underlyingImage = loadImage(imgURL);
}

function setup() {
    createCanvas(600, 700);
    background(0);
    //resize the image to fit canvas
    underlyingImage.resize(600,700);
    underlyingImage.loadPixels();
    frameRate(1000);
}

function drawSplash(x,y,color){
    push();
    translate(x,y);
    //create the splash at the given position
    for (var i = 0; i < disArray.length; i++) {
        rotate(TWO_PI/disArray.length);
        stroke(color);
        var dist = abs(disArray[i]);
        line(0, 0, dist, 0);
    }
    pop();

}

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);
    //reset the array to empty for every frame;
    disArray = [];
    //store in total 360 lines radiating from one center for splash;
    for (var i =0; i<distribution; i++){
        var size = random(2,4);
        disArray.push(floor(randomGaussian(0,size)));
    }
    drawSplash(ix, iy, theColorAtLocationXY);



}


function mouseDragged(){
    disArray = [];
    //store in total 360 lines radiating from one center for splash;
    for (var i =0; i<distribution; i++){
        var size = random(2,4);
        disArray.push(floor(randomGaussian(0,size)));
    }
    //get the color at the mouse position
    var theColorAtTheMouse = underlyingImage.get(floor(mouseX), floor(mouseY));
    //draw the splash
    drawSplash(mouseX,mouseY,theColorAtTheMouse);

}

I was exploring the how I can achieve a splashing effect for each point that the image renders. I use the randomGaussian command and tested out the relatively reasonable range. The overall aesthetic sensibility of this computational portrait kind of resembles the view that one will see through the car window when it’s rainy, and I found the result pretty interesting.

I also added the mouseDragged function just so user can see the image faster if they don’t want to wait for the automatic render.

screen-shot-2016-10-28-at-8-02-02-pm

render example

 

Shannon Case- Project 09

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


}

screen-shot-2016-10-28-at-7-47-18-pm

screen-shot-2016-10-28-at-7-47-25-pm

screen-shot-2016-10-28-at-7-47-09-pm

Simin Li – Project 9

screen-shot-2016-10-27-at-9-35-34-pmsiminl-project9inobjects

// Simin Li
// Section C
// siminl@andrew.cmu.edu
// Project 9 in objects
var d = 9;
//side length of each rhombus
var portrait;
//the image to be preloaded
var cubes = [];
//create array named cubes
var m = 0;
//index of the array cubes
var pointt = [];
//create an array to store coordinates not yet used 
var getIndex = 0;
//the index of the number of array[2]
for(var k = -45; k < 62; k++){
    for(var n = -45; n < 62; n++){  
        pointt.push([k,n]); 
    }
}
//create a 2D array called pointt and store arrays of length of 2 using a for loop in it
function preload(){
    portrait = loadImage("http://i.imgur.com/QPplgCrg.jpg");
    //load image
}
function setup() {
    createCanvas(600, 600);
    background(0);
    portrait.resize(610,610);
    //resize the original image to fit on a 800 by 800 canvas
    //when resized to 600 by 600 rgb values of border points are undefined
    //so it is resized to 610 by 610
    portrait.loadPixels();
    //load pixels
    frameRate(100);
    
}

function draw() {
 
    colorMode(RGB);
var gapY = d * sqrt(3) / 2;
//differnce of x values between two adjacent hexagon left corners
var gapX = d *  3 / 2;
//differnce of y values between two adjacent hexagon left corners     

IndexofCoordinate = floor(random(0,pointt.length));
//randomly select an array inside the array pointt 
var j = pointt[IndexofCoordinate][0];
//j is the first element of the selected array
//assign a random value to j so it draws in a random hexagon slot
var i = pointt[IndexofCoordinate][1];  
//i is the second element of the selected array
//assign a random value to i so it draws in a random hexagon slot  
var X = 18 + gapX * j;
var Y = gapY * j;

    cubeX = X + gapX * i;
    //x coordinates of hexagon
    cubeY = Y - gapY * i;
    //y coordinates of hexagon
    color1 = portrait.get(cubeX + d , cubeY + 3);
    //color of bottom left rhombus is determined by a pixel in that rhombus
    color2 = portrait.get(cubeX + d , cubeY - 3);
    //color of top left rhombus is determined by a pixel in that rhombus
    color3 = portrait.get(cubeX + d + 3, cubeY);
    //color of right rhombus is determined by a pixel in that rhombus
    cubes[m] = new Cube(cubeX,cubeY,color1,color2,color3);
    cubes[m].draw();
    m ++;
    pointt.splice(IndexofCoordinate, 1);
    //remove the coodinate that has already been used so it doesn't redraw in the same slot
    println(IndexofCoordinate);
}

function rhombus(x,y,angle){
//create function that draws rhombus at x,y
//rotate by angle
    var h = d * sqrt(3)/2;
    //height of rhombus
    push();
        translate(x, y);
        rotate(radians(angle));
        shearX(radians(30));
        //shifts a rectangle into a parallelogram by 30 degrees
        rect(0, 0, d, h);
    pop();
}
function Cube(x,y,color1,color2,color3){
//creates object that combines three rhombuses into a cube at x,y
//each filled by color1,color2,color3
    this.x = x;
    this.y = y;
    this.color1 = color1;
    this.color2 = color2;
    this.color3 = color3;

this.draw = function(){
	noStroke();
	fill(color1);
    rhombus(x,y,0);//draws bottom left rhombus
    
    fill(color2);
    rhombus(x,y,300);//draws top left rhombus
    push();
        translate(1.50 * d, d * sqrt(3)/2);
        fill(color3);
        rhombus(x,y,240);//draws right rhombus
    pop();
    }
}

  I wanted controlled randomness in my portrait because I don’t like overlapping geometric shapes so I decided to use my wallpaper project as a template and treated the tiles as “slots” I could fill in randomly. I wanted to practice my objects so in the end I organized my code using an object. After I finished, I realized that a lot of spots were being reused so it is takes a long time to fill in the last few slots. So with help, I decided to create a 2d array that stored all of the coordinates that have not been used yet. After I drew that cube I removed it from the array.

file_000