Category: Section E

“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

computational portrait (custom pixel)

//GyuEun Park
//gyueunp@andrew.cmu.edu
////15-104 E
//Project-09

var image;

//load image using an imgur url
function preload() {
    var myImageURL = "https://i.imgur.com/epczjju.jpg";
    image = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 274);
    background(0);
    image.loadPixels();
    frameRate(2000);
}

function draw() {
//set colors and positions for ellipses to create the image 
    var px = random(width);
    var py = random(height);
    var ps = random(0.5,10);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = image.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px, py, ps, ps);
}

This project resembles pointillist artworks in that the dots of color gather to form an image. In this case, I chose to use a photo of myself. I love how oddly unsettling the dots are as they grow into my body. The auditory element also adds on to the disturbing nature of the work.

 

sketch

//Anna Gusman
//agusman@andrew.cmu.edu
//Section E
//
//Assignment 06 B
var underlyingImage;
var vals = [0.001, 0.001, 0.001, 0.001, 0.001, 0.001, 0.001]; //declare array of pie slice percentages
var nVals = vals.length; //length of array values

var start = 0; //first set the starting point of the first arc = to 0
var end = start + vals[0] * 360;
//Set the ending point of arc relative to its starting point
//the arc + the percentage value (decimal * 360)

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

function setup() {
    createCanvas(400, 400);
    background(0);
    angleMode(DEGREES);
    underlyingImage.loadPixels();
    frameRate(5000);
}

function draw() {
    for (var i = 0; i < nVals; i++) {
      start = end;
      end = start + vals[i] * 360; //draw a new arc from the "end" of the preceding
      //arc for every i
      noStroke();
      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);
      fill(theColorAtLocationXY);
      arc(px, py, 30, 100, start, end);
    }
}

I had a ton of fun with this project, even though the outcome was not as expected. I was inspired by a few pieces I’d seen by Sergio Albiac with sample pixel colors across the circumference of randomly distributed circles.

I decided to play with the rotational theme myself. Here are some examples of my process.

Photograph of my twin sister, taken by me:

Experimenting with texture parameters: Dreary Downpour

Slightly more defined

Furry Golan

More furry Golan

Most furry Golan

sketch

//Robert Managad
//Section-E
//rmanagad@andrew.cmu.edu
//

var underlyingImage;

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

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

function draw() {
	var randomSize = random(5, 10);
	var randomDetailSize = random(1, 3);
	var pxDetailX = constrain(200, 280);
	var pxDetailY = constrain(40, 100)
    var px = random(width);
    var py = random(height);
    var dx = 5;
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var ixM = constrain(floor(mouseX), 0, width-1);
    var iyM =  constrain(floor(mouseY), 0, width-1);
    // creating variations in opacity
    var theColorAtLocationXY =  [red(underlyingImage.get(ix, iy)) + 5,
                                green(underlyingImage.get(ix, iy)) + 10,
                                blue(underlyingImage.get(ix, iy)),
                                + 90]
    var theColorAtLocationXYM =  [red(underlyingImage.get(ixM, iyM)) + 20,
                                green(underlyingImage.get(ixM, iyM)) + 10,
                                blue(underlyingImage.get(ixM, iyM)),
                                + 50]
    rectMode(CENTER);

    //creates stroke, no-fill rectangles for interactivity
    if (mouseIsPressed) {
   	strokeWeight(random(2, 6));
    stroke(theColorAtLocationXYM);
    rect(mouseX, mouseY, randomSize * 2, randomSize * 3);
	}
	noStroke();
	fill(theColorAtLocationXY);
	//larger pixels outside the face area
	if (px < 200 || px > 280 || py < 40 || py > 140) {
	ellipse(px, py, randomSize*3, randomSize*3.5);
	rect(px, py, randomSize*1.5, randomSize*1.5);
	}
	//smaller pixels within the face area
	else if (px > 200 || px < 280 || py > 40 || py < 140) {
	rect(px, py, randomSize*1.5, randomSize*1.5);
	}



}

    

I developed my pixel portrait program with a foggy window idea in mind, hence the changes in opacities and layering of randomly-generated pixels. To somewhat speed up the process of visualizing the background image, I incorporated an if statement involving mousePressed, where as long as the mouse is pressed strokes of rectangles will be drawn.

Below is a full canvas illustrating the background image, a self portrait.

sketch

//JooHee Kim
//Section E
//jooheek@andrew.cmu.edu
//Project09-ComputationalPortrait

//global variable for image
var susieImg;
var susieImgURL;

function preload() {
	//loading image
	susieImgURL = "https://i.imgur.com/ezOtPFw.jpg?1";
	susieImg = loadImage(susieImgURL);
}

function setup() {
    createCanvas(360, 480);
    background(255, 200, 200);
    //load image pixels
    susieImg.loadPixels();
    //at a frame rate of 30
    frameRate(30);
}

function draw() {

	//variables for drawing circles
	var pixelX = random(width);//for position of circles
	var pixelY = random(height);
	var imageX = constrain(floor(pixelX), 0, width-1);//position of image pixel that we need to get color from
	var imageY = constrain(floor(pixelY), 0, height-1);
	var pixelDiam = random(1, 20);//for size of circles
	var colorOfImgPixel = susieImg.get(imageX, imageY);//getting color of pixel at imageX & imageY

	//drawing circles positioned at random with random sizes
	//filled with color of pixel at that position
	noStroke();
	fill(colorOfImgPixel);
	rect(pixelX, pixelY, pixelDiam, pixelDiam);

	//drawing outlined circles at mouse position
	//with stroke outline color of pixel at mouse position

	var strokeEllipseSize = random(15, 25);
	var ellipseStroke = random(1, 5);
	var colorOfImgPixelAtMouse = susieImg.get(mouseX, mouseY);
	stroke(colorOfImgPixelAtMouse);
	strokeWeight(ellipseStroke);
	noFill();
	rect(mouseX, mouseY, strokeEllipseSize, strokeEllipseSize);
}

The portrait I used for this project is of my dear friend, Susie. I decided to make the image out of rectangles to kind of make it look very pixelated. I also made stroke rectangles following my mouse position so that there is a contrast of solid and outlined rectangles.