Month: October 2016

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:

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.