sketch

var dx = 2;
var dy = 2;
var dx1 = 2;
var dy1 = 2;
var dx2 = 2;
var dy2 = 2;
var dx3 = 2;
var dy3 = 2;
var dx4 = 2;
var dy4 = 2;
var px1;
var py1;
var py2;
var px2;
var py3;
var px3;
var py4;
var px4;
var py5;
var px5;
var py6;
var px6;
var py7;
var px7;
var py8;
var px8;

function preload(){
    var portraitURL = "https://i.imgur.com/voTtRT8.jpg";
    underlyingImage = loadImage(portraitURL);//load image
}
function setup() {
    createCanvas(480, 480);
    background(220);
    underlyingImage.loadPixels();
    frameRate(20);
}

function draw() {

    //draw balls in eight directions
    makeBall1();
    makeBall2();
    makeBall3();
    makeBall4();
    makeBall5();
    makeBall6();
    makeBall7();
    makeBall8();
}

function mousePressed() {
    //update the loaction to draw balls
    px1 = mouseX;
    py1 = mouseY;
    px2 = mouseX;
    py2 = mouseY;
    px3 = mouseX;
    py3 = mouseY;
    px4 = mouseX;
    py4 = mouseY;
    px5 = mouseX;
    py5 = mouseY;
    px6 = mouseX;
    py6 = mouseY;
    px7 = mouseX;
    py7 = mouseY;
    px8 = mouseX;
    py8 = mouseY;

}

function makeBall1(){

    var ix = constrain(px1, 0, width-1);
    var iy = constrain(py1, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);//get the color at that pixel
    //keeping drawing balls along its motion
    px1 += dx1;
    py1 += dy1;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px1, py1, 6, 6);
    if (px1 >= width || px1 <= 0) {//bounces off right and left
        dx1 = -dx1;
    }  
    if (py1 >= height || py1 <= 0) {//bounces off top and bottom
        dy1 = -dy1;        
    } 
}

function makeBall2(){
    var ix = constrain(px2, 0, width-1);
    var iy = constrain(py2, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    px2 -= dx2;
    py2 -= dy2;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px2, py2, 6, 6);
    if (px2 >= width || px2 <= 0) {//bounces off right and left
        dx2 = -dx2;
    }  
    if (py2 >= height || py2 <= 0) {//bounces off top and bottom
        dy2 = -dy2;        
    } 
}

function makeBall3(){
    var ix = constrain(px3, 0, width-1);
    var iy = constrain(py3, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    px3 += dx3;
    py3 -= dy3;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px3, py3, 6, 6);
    if (px3 >= width || px3 <= 0) {//bounces off right and left
        dx3 = -dx3;
    }  
    if (py3 >= height || py3 <= 0) {//bounces off top and bottom
        dy3 = -dy3;        
    } 
}

function makeBall4(){
    var ix = constrain(px4, 0, width-1);
    var iy = constrain(py4, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    px4 -= dx4;
    py4 += dy4;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px4, py4, 6, 6);
    if (px4 >= width || px4 <= 0) {//bounces off right and left
        dx4 = -dx4;
    }  
    if (py4 >= height || py4 <= 0) {//bounces off top and bottom
        dy4 = -dy4;        
    } 
}

function makeBall5(){
    var ix = constrain(px5, 0, width-1);
    var iy = constrain(py5, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    px5 += dx;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px5, py5, 6, 6);
}

function makeBall6(){
    var ix = constrain(px6, 0, width-1);
    var iy = constrain(py6, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    px6 -= dx;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px6, py6, 6, 6);
}

function makeBall7(){
    var ix = constrain(px7, 0, width-1);
    var iy = constrain(py7, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    py7 -= dy;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px7, py7, 6, 6);
}

function makeBall8(){
    var ix = constrain(px8, 0, width-1);
    var iy = constrain(py8, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    py8 += dy;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px8, py8, 6, 6);
}

For this project, I wanted to control the motion of the paint brush(where the points go). I thought of the motion of fireworks and decided to go with that. A firework would be made each time the user clicks on the screen. To make the drawing process easier, I made the balls bounce off the four edges of the canvas.

sketch

var jisoo;

function preload() { //load the images for underlay
    var geum = "https://i.imgur.com/tG77kDu.jpg";
    jisoo = loadImage(geum);
}

function setup() {
    createCanvas(800, 700);
    background(100); 
    jisoo.loadPixels(); //load up colors of the pixels from the photo
    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 coLoc = jisoo.get(ix, iy); 

    stroke(coLoc); 
    noFill();
    ellipse(px, py, random(6, 20), random(6, 15)); //each ellipses are somewhat random to create
    //different image with a similar style

}

Using the sample code, I altered how the canvas would fill up. By using ellipses with no fill, I was able to create a sketchy yet vague paint style. By adding a random element to the code, I am able to create different results with the same style.

sketchnat

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-09

var backgroundImage;

//preload the underlying image
function preload() {
    var Natalie = ["https://i.imgur.com/psHZ5r9.jpg?1"];
    backgroundImage = loadImage(Natalie);
}

function setup() {
    createCanvas(480, 480);
    background(246, 234, 188);
    //load the pixels of the image
    backgroundImage.loadPixels();
    frameRate(15);
}

function draw() {
//based off of example code
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width - 1);
    var iy = constrain(floor(py), 0, height - 1);
    //vary the transparecny based on mouseX position
    var transparency = map(mouseX, width/3, width - width/3, 40, 70);
    //egt the color of the pixels, and make them semi-transparent
    var imageColor = [red(backgroundImage.get(ix, iy)),
        green(backgroundImage.get(ix, iy)),
        blue(backgroundImage.get(ix, iy)), transparency];
//draw the suns
    noStroke();
    fill(imageColor);
    sun(px, py);
}

function sun(x, y) {
    ellipseMode(CENTER);
    ellipse(x, y, 15, 15);
    // bottom middle
    triangle(x - 3, y + 15/2 + 2, x, y + 15/2 + 5,
        x + 3, y + 15/2 + 2);
    //top middle
    triangle(x - 3, y - 15/2 - 2, x , y - 15/2 - 5,
        x + 3, y - 15/2 - 2);
    //left middle
    triangle(x - 15/2 - 2, y - 3, x - 15/2 - 5, y,
        x - 15/2 - 2, y + 3);
    //right middle
    triangle(x + 15/2 + 2, y - 3, x + 15/2 + 5, y,
        x + 15/2 + 2, y + 3);
}

Since the original photo had a lot of sunlight and light glares in it, I wanted to use a sun to help draw the image. In order to give it a little bit more dimension, I varied the transparency of the sun depending on the position of the mouse. I feel like the varying transparency also added a really nice softness ad warmth to the image, just like golden hour sunlight. I really like pointillism as an art style, so it was fun to try and re-create it for a self-portrait.

The Process:

Here’s the original:

Cross Hairs

var baseImage;

//pre load my underlying image
function preload() {
    var imgurLink = "https://i.imgur.com/jjMBr8v.jpg";
    baseImage = loadImage(imgurLink);
}

function setup() {
    createCanvas(480, 480);
    background(0);
//load the pixels of the image so they can be referenced later
    baseImage.loadPixels();
    frameRate(15);
}

function draw() {

//randomly select a pixel on the canvas
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
//loads the color from the base image so the cross hairs coordinate with the colors of the base image
    var theColorAtLocationXY = baseImage.get(ix, iy);
//randomly generate points for the lines to make cross hairs
    var rX = random(1,8);
    var rY = random(1,8);

    noStroke();
    fill(theColorAtLocationXY);
    stroke(theColorAtLocationXY);

//create cross hairs
    line(px, py, px + rX, py + rX);
    line(px + rY, py, px + rX - rY, py + rX);

}

For this Project I decided I did not want to make shapes like ellipses or rectangles, but I wanted to use line work. Instead of just randomly placed lines I decided to make randomly generated cross hairs to add another layer to the sketch.

sketch

//Thomas Wrabetz
//Section C
//twrabetz@andrew.cmu.edu
//Project-09

var underlyingImage;
var locations = [];
var squares = [];


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

function setup() {
    createCanvas(200, 250);
    noStroke();

    underlyingImage.loadPixels();
    frameRate(60);
    for( var i = 0; i < width / 5; i++ )
    {
        locations.push( [] );
        for( var j = 0; j < height / 5; j++ )
        {
            locations[i].push(0);
        }
    }
}

function draw()
{
    for( var i = 0; i < len(squares); i++ )
    {
        squares[i].draw();
    }
}

function squareStep()
{
    if( this.y == this.targetY ) return;
    this.y += 1;
}

function squareDraw()
{
    push();
    fill( this.color );
    rect( this.x, this.y, 5, 5 );
    pop();
}

function makeSquare( sx, sy, stargetY, scolor )
{
    s = { x: sx, y: sy, targetY: stargetY, step: squareStep, draw: squareDraw, color: scolor };
    return s;
}

function draw() {
    background(0);
    var targetX = int(random((width-1)/5))*5;
    var test = false;
    for( var i = 0; i < locations.length; i++ )
    {
        if( locations[i][0] == 0 ) test = true;
    }
    for( var i = 0; i < squares.length; i++ )
    {
        squares[i].step();
        squares[i].draw();
    }
    if( !test ) return;
    while( locations[targetX/5][0] )
    {
      targetX = int(random((width-1)/5))*5;
    }
    for( var i = 0; i < height / 5; i++ )
    {
        if( locations[targetX/5][i] == 1 )
        {
            locations[targetX/5][i-1] = 1;
            squares.push( makeSquare( targetX, 0, (i-1)*5, underlyingImage.get( targetX, (i-1)*5 ) ) );
            break;
        }
        if( i == height/5 - 1 )
        {
            locations[targetX/5][i] = 1;
            squares.push( makeSquare( targetX, 0, i*5, underlyingImage.get( targetX, i*5 ) ) );
        }
    }

    
}

It’s a picture of me from highschool made out of falling blocks.

sketch

var underlyingImage;

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

function setup() {
    createCanvas(400, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(10);
}

function draw() {
	var lineStartX = random(width);
    var lineStartY = random(height);
    var lineStartX2 = random(width);
    var lineStartY2 = random(height);
    var ix = constrain(floor(lineStartX), 0, width-1);
    var iy = constrain(floor(lineStartY), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    stroke(theColorAtLocationXY);
    line(lineStartX, lineStartY, lineStartX + 20, lineStartY + 20);
    line(lineStartX2, lineStartY2, lineStartX2 + 20, lineStartY2 - 20);

}

I wanted to do something with lines, so I started by just making the line from one random point to another. The problem was it was only using the color from the starting point, so it just made this big blob with no actual portrait. So I shortened the distance of the lines so that the colors wouldn’t stray from their rightful spots too much.

“Our Time” is a piece commissioned by the MONA (Museum of Old and New Art) which was intended to take you on an ethereal sensory journey, warping the way you view and think of time.”

I agree that “the amount of effort put into immersion in this is remarkable, and the piece utilizes our most basic senses to warp our perceptions of human constructs”. Although the code is simply an analog input of a person heartbeat being actuated by the motors of pendulums and the lights, the immersion effect created by the multitude of lights ad movement overwhelms our sense of time and space, thereby transporting us to a whole different state of existence. As somebody who is personally interested in physical computing, I deeply admire this project because it takes computing away from the digital screen and into the physical realm, thereby blurring the line between physical and digital environments. Although the algorithms itself is not sophisticated or complex, the whole of the artwork is greater than the sum of its mechanical and digital parts. If possible, I would love to experiment more with writing code on a physical level.

SaveSave

sketch.js

//Hanna Jang 
//hannajan@andrew.cmu.edu
//Section B 
//Project -09

var underlyingHanna;
var randommax=13;

function preload() {
    var myImageURL = "https://i.imgur.com/v5rsvnH.jpg?1";
    underlyingHanna = loadImage(myImageURL);
}

function setup() {
    createCanvas(500, 500);
    background(255);
    underlyingHanna.loadPixels();
    frameRate(40);
}

function draw() {
    var px = random(width);	//random y from canvas width
    var py = random(height);	//random x from canvas height
    var thex = constrain(floor(px), 0, width-1);
    var they = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingHanna.get(thex, they); //var color from image background 

    noStroke();
    fill(theColorAtLocationXY);
    
    //make smiley face 
    
    //happy mouth is made 
  arc(px, py, 10, 10, 0, PI); 
  
  //happy eyes are made 
  ellipse(px-3, py-5, 5, 5); 
  ellipse(px+3, py-5, 5, 5); 

	//when mouse moves, a trail of squares follow 
    var theColorAtTheMouse = underlyingHanna.get(mouseX, mouseY);
	stroke(theColorAtTheMouse);
	rect(mouseX, mouseY, 3, 3);
}

function mousePressed(){
	//random sizes for sad face generation from mouse press 
	var sizex=random(7,randommax); 
	var sizey=random(7, randommax); 
	 var Mousecolor = underlyingHanna.get(mouseX, mouseY);

	//sad mouth is made 
	 fill(Mousecolor);
    arc(mouseX, mouseY, sizex, sizey, PI, TWO_PI); 
    //sad eyes are made 
    ellipse(mouseX-3, mouseY-10, 5, 5); 
    ellipse(mouseX+3, mouseY-10, 5, 5); 
}

I decided to do a self-portrait image background of me smiling into the camera. I then thought of an idea to use faces for the custom pixels, to make up a bigger picture of a smiling face.

sketch

// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E

var face = "https://i.imgur.com/EyvV5mU.jpg"
var img;
var pixel_info = [];

// Createm Node
function new_pixel(x, y, k) {
	this.x = x;
	this.y = y;
	this.k = contrast_add(k, .25);
	this.m = map(k, 0, 255, 50, 1);
}


// Load links to image into an array
function preload() {
	img = loadImage(face)
}

w = 480;
h = w;

function setup() {
	createCanvas(w, h);
	background(255 * .75);
	image(img, 0, 0, w, h);

	// Extract Image info
	step = 1;
	for (Y = 0; Y < w; Y += step) {
		for (X = 0; X < h; X += step) {
			k = brightness(get(X, Y));
			// print(X, Y, k);
			pixel_info.push(new new_pixel(X, Y, k));
			step = random(7, 10)
		}
	}

	// Sort pixels by brightness
	pixel_info.sort(function(a, b) {
		return a.k - b.k
	});

	// Print info and clear screen
	print(pixel_info);
	background(255 * .2);

	// Draw
	noStroke();
	print(pixel_info.length)
	draw_face(.9);
	add_lines();
	draw_face(.2);
}

// Draw Face
function draw_face(opacity) {
	for (i in pixel_info) {
		x = pixel_info[i].x;
		y = pixel_info[i].y;
		k = pixel_info[i].k;

		r = map(k, 0, 255, 15, 1);

		noStroke();
		fill(k, k, k, 255 * opacity);
		ellipse(x, y, r, r);
	}
}

// Increase contrast
// x is input
// k is percent e.g. 0.1
function contrast_add(x, p) {
	if (x < 255 / 2) {
		x = x * (1 + p);
	} else {
		x = x * (1 - p);
	}
	return x
}

// Add lines for sophistication
function add_lines() {
	for (i in pixel_info) {
		x = pixel_info[i].x;
		y = pixel_info[i].y;
		k = pixel_info[i].k;
		for (i in pixel_info) {
			x1 = pixel_info[i].x;
			y1 = pixel_info[i].y;
			k1 = pixel_info[i].k;
			if (round(k) == round(k1)) {
				strokeWeight(1);
				stroke(k, k, k, 255 * .05);
				line(x, y, x1, y1);
			}
		}
	}
}

Portrait

I was experiencing some dark times in my life, therefore I decided to make a dark portrait. I was inspired by the algorithmic portrait.

I tried to replicate the portrait above, but sadly I couldn’t do in time. Since my portrait is a bit computationally heavy, here is a still image of it:

SaveSave

SaveSave

nayeonk1

var portrait;

//image loading from imgur
function preload() {
    var imageURL = "https://i.imgur.com/WgHeMvC.jpg";
    portrait = loadImage(imageURL);
}

//setup loadPixel function here & setup frame Rate(speed)
function setup() {
    createCanvas(480, 480);
    background(0);
    portrait.loadPixels();
    frameRate(20);
}

//draw stitches and ellipses changing there size and length depend on mouse position
function draw() {
    var px = random(width);
    var py = random(height);
    var px1 = random(width);
    var py1 = random(height);
    var ix = constrain(floor(px), 0, width);
    var iy = constrain(floor(py), 0, height);
    var col = portrait.get(ix, iy);
    var dia = round(constrain(mouseX / 5, 0, 15))
    var len = round(constrain(mouseY / 5, 0, 10))
//ellipse
    noStroke();
    fill(col);
    ellipse(px, py, dia, dia)
//stitches
    stroke(col);
    strokeWeight(random(0.5, 2))
    line(px1, py1, px1 + len, py1 + len);
    line(px1 + len, py1, px1, py1 + len);
    pop();

}

I choose one of the photos from a last year trip to japan. It was fun and interesting trip. So I wanted to make this pixel loading image to be shine as the memory.
Here are some images of portrait.