jessa – Page 2 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Looking Outwards 06: Randomness

Self-Dividing Line, J. Tarbell, 2003
http://www.complexification.net/gallery/machines/selfdividingline/

This project constructs unique works by recursively dividing initially defined lines. With each subdivision, the algorithm randomizes where the line will fold in and divide. As the line divides, the system tracks this by adding a level of depth and value with each fold, as though you were observing a piece of paper being folded or a fractal pattern being drawn.

These are some of iterations of the Self-Dividing Line project (2003).

These features of the subdividing line, too, serve to prevent the structure from becoming too complex for the system to process. I think the artist does a great job of employing randomness to produce generative work which reflects both arbitrariness and the inevitability of an end, as the initial lines can only divide so many times before they become too complex. While very simple, the aesthetic of these pieces serves to juxtapose the unlimited possibility for subdivision offered by the algorithm.

Project 06 – Mike Pence and Fly Clock

I chose to represent time with the fly from the Vice Presidential debate that landed on Mike Pence’s head. The fly moves each second and crosses the canvas once per minute. Its vertical position represents what minute of the hour it is, and the number of time it says “vote” on the top of the canvas is the hour. If the background is darker than the text, it is PM, and vice versa.

mike pence fly

var FlyY = 5

function setup() {
    createCanvas(480, 480);
    background(220);
}
//draw the fly 
function Fly(){
		var x = 0
		push();
		fill(154, 137, 120);
		rotate(radians(-60));
		ellipse(x - 2, FlyY - 12, 7, 18);	//draw top wing
		rotate(radians(120));
		ellipse(x + 5, FlyY + 8, 7, 18);	//draw bottom wing
		pop();
		stroke(154, 137, 120);
		fill(0);
		circle(x, FlyY, 12);	//draw fly body
	}

//draw mike pence
function Mike(){
	noStroke()
	//shirt
	beginShape();
	fill(241, 237, 234);
	curveVertex(218,346);
	curveVertex(187,374);
	curveVertex(171,395);
	curveVertex(179,479);
	curveVertex(278,479);
	curveVertex(295,391);
	curveVertex(261,351);
	endShape(CLOSE);

	//left shoulder
	fill(0);
	beginShape();
	vertex(172,268);
	vertex(127,282);
	vertex(87,298);
	vertex(44,323);
	vertex(0,331);
	vertex(0,479);
	vertex(193,479);
	vertex(172,380);
	vertex(160,300);
	endShape(CLOSE);

	//right shoulder
	beginShape();
	vertex(325,286);
	vertex(334,294);
	vertex(351,312);
	vertex(396,330);
	vertex(448,354);
	vertex(479,368);
	vertex(479,479);
	vertex(258,479);
	vertex(289,402);
	vertex(316,304);
	endShape(CLOSE);

	//left ear
	fill(236, 166, 133);
	beginShape();
	curveVertex(185,145);
	curveVertex(175,127);
	curveVertex(167,133);
	curveVertex(165,149);
	curveVertex(165,177);
	curveVertex(165,201);
	curveVertex(168,214);
	curveVertex(175,217);
	endShape(CLOSE);

	//right ear
	beginShape();
	curveVertex(363,203);
	curveVertex(378,194);
	curveVertex(388,198);
	curveVertex(387,214);
	curveVertex(371,231);
	curveVertex(359,252);
	curveVertex(349,267);
	curveVertex(339,272);
	curveVertex(331,263);
	endShape(CLOSE);

	//neck
	beginShape();
	curveVertex(181,251);
	curveVertex(172,288);
	curveVertex(183,309);
	curveVertex(195,323);
	curveVertex(223,353);
	curveVertex(242,358);
	curveVertex(279,342);
	curveVertex(309,317);
	curveVertex(317,290);
	endShape(CLOSE);

	//right collar
	fill(255)
	beginShape();
	curveVertex(329,279);
	curveVertex(282,335);
	curveVertex(260,347);
	curveVertex(243,355);
	curveVertex(261,376);
	curveVertex(273,407);
	curveVertex(281,427);
	curveVertex(313,362);
	curveVertex(323,315);
	endShape(CLOSE);

	//face
	fill(244, 180, 150)
	beginShape();
	curveVertex(232,81);
	curveVertex(213,114);
	curveVertex(198,145);
	curveVertex(185,166);
	curveVertex(177,199);
	curveVertex(175,237);
	curveVertex(181,279);
	curveVertex(193,307);
	curveVertex(211,328);
	curveVertex(238,340);
	curveVertex(273,335);
	curveVertex(299,321);
	curveVertex(322,291);
	curveVertex(341,257);
	curveVertex(360,214);
	curveVertex(361,187);
	curveVertex(362,143);
	curveVertex(357,101);
	curveVertex(335,116);
	curveVertex(289,103);
	curveVertex(255,87);
	endShape(CLOSE);

	//right hair
	fill(241, 237, 234);
	beginShape();
	curveVertex(363,74);
	curveVertex(380,95);
	curveVertex(387,130);
	curveVertex(375,171);
	curveVertex(357,217);
	curveVertex(356,122);
	curveVertex(356,104);
	endShape(CLOSE);

	//left hair
	fill(255);
	beginShape();
	curveVertex(254,36);
	curveVertex(219,54);
	curveVertex(199,84);
	curveVertex(190,112);
	curveVertex(184,136);
	curveVertex(180,183);
	curveVertex(209,132);
	curveVertex(233,87);
	curveVertex(277,100);
	curveVertex(323,114);
	curveVertex(341,116);
	curveVertex(358,100);
	curveVertex(363,79);
	curveVertex(352,60);
	curveVertex(327,40);
	curveVertex(295,30);
	endShape(CLOSE);

	//collar
	beginShape();
	curveVertex(177,255);
	curveVertex(165,273);
	curveVertex(162,307);
	curveVertex(170,357);
	curveVertex(178,406);
	curveVertex(181,418);
	curveVertex(209,376);
	curveVertex(231,354);
	curveVertex(195,320);
	curveVertex(177,289);
	endShape(CLOSE);	

	//tie bottom
	fill(184, 14, 18);
	beginShape();
	curveVertex(223,394);
	curveVertex(209,430);
	curveVertex(196,478);
	curveVertex(261,479);
	curveVertex(257,433);
	curveVertex(239,392);
	endShape(CLOSE);

	//tie knot
	fill(229, 25, 30);
	beginShape();
	curveVertex(225,354);
	curveVertex(201,379);
	curveVertex(221,398);
	curveVertex(246,402);
	curveVertex(264,380);
	curveVertex(256,360);
	endShape(CLOSE);

}

function draw(){
	if(hour()>11){
		background(117, 129, 151);	//in PM, set background color to darker blue
	}
	else {
		background(158, 168, 186)	//in AM, set background color to lighter blue
	}
	
	push()
	for(var h = 0; h<(hour()%12); h++){	//this will write'vote' the number of the hour up on a 12 hour scale
		push()
		translate(40*h,0) //space out the'vote' evenly so 12 can fit on the top row
		if(hour()>11){
			fill(158, 168, 186)	//in PM, set text color to lighter blue
		}
		else{
			fill(117, 129, 151)	//in AM, set text color to darker blue
		}
		textFont('Georgia')
		textSize(20)
		text('vote', 2, 25)	//vote text
		pop()
    }
	pop()
	Mike();	//draw mike pence
	push();
	translate(map(second(), 0, 60, -15, width + 10), FlyY);	//translate so the fly moves each second and crosses the canvas once a minute
	translate(0, map(minute(), 0, 60, 0, height));	//translate so the y position of the fly corresponds with the minute of the hour, so the top will be the top of the hour and vice versa
	Fly();	//draw the fly
	pop();
	
}

Looking Outwards 05: 3D Computer Graphics

The 3D computer graphics project I am interested in is Andy Lomas’ “Aggregation” series. Lomas takes inspiration from famous scientists and mathematicians who studied nature’s processes of building and rebuilding. He uses the Diffusion Limited Aggregation to simulate a growing object; this object is built by random particles moving through the space and interacting in novel ways to form unique and complex objects.

A video depicting some of the variations of the Aggregation series by Andy Lomas (2005).

The algorithm can also be modified in order to represent different features or changes within the imagined environment, creating very different digital simulations. These works are quite interesting as they visualize the natural principles seen in coral reef growth or sediment erosion while also being generative and aesthetically pleasing. I think this series is a very satisfying synthesis of natural phenomena and technology, by using computer graphics as the vessel for and visual representation of them.

Project 5: Wallpaper

For this project, I took inspiration from a bag I got visiting Guatemala. I wear it often, and the pattern reminds me of the friends I made while I was there. I first designed the shapes using an HTML image map generator and then used for loops to repeat and inlay the patterns. I had to use a lot of trial and error and transformation to get the rows to interact the way I wanted them to, but overall I am really happy with how the design turned out.

My purse from Guatemala which inspired my wallpaper design

Jessa’s Wallpaper

function setup() {
    createCanvas(600, 600);
    background(76, 171, 223);	//set background color to light blue
    
}

function draw() {
	noStroke();
	fill(255, 200, 102);		//set fill color to yellow
	rect(0,460,width,50);	//draw yellow rectangle, to go under row of yellow blobs 
	
	fill(255, 53, 73);		//set fill color to red
	rect(0,272,width,50);	//draw red rectangle, to go under row of red blobs

	fill(231, 102, 67);		//set fill color to orange
	rect(0,90,width,50);	//draw orange rectangle, to go under row of orange blobs
	
	translate(-275,0);		//move origin to the left, this ensures all blobs will start on the left of the canvas since they were initially drawn in the center from the reference coordinates
	push();	//1
	push();	//2
	push();	//3
	push();	//4
	push();	//5
	push();	//6
	push();	//7

	//draw row of orange blobs
	//'Right' moves the original blob to the right to be redrawn within the loop
	translate(-210, -186);	//move canvas origin to the left and up, because this row will go partially off canvas
	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);
		noFill();
		strokeWeight(25);
		stroke(231, 102, 67);	//color orange
		arc(165,245,78, 78, TWO_PI, HALF_PI);
		arc(318,245,78, 78, QUARTER_PI, PI-radians(15));
		noStroke();
		fill(231, 102, 67);
		circle(161,183,85);
		circle(190,118,58);
		beginShape();
		vertex(122,165);
		vertex(164,105);
		vertex(219,115);
		vertex(201,199);
		endShape();
		beginShape();
		vertex(198,193);
		vertex(188,272);
		vertex(305,272);
		vertex(215,104);
		endShape();

	}
	//draw the row of white swirls over top of the orange blob row
	//'Right' moves the original swirl to the right to be redrawn within the loop
	pop();	//1
	translate(-520, -175);	//translate canvas origin such that the row of swirls will be on top of the orange blob row, left and up

	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);
		stroke(255);	//color white
		strokeWeight(2);
		fill(255);
		circle(359,141,43);
		noStroke();
		beginShape();
		vertex(370,133);
		vertex(512,396);
		vertex(491,407);
		vertex(351,142);
		endShape();
		beginShape();
		vertex(398,204);
		vertex(361,267);
		vertex(435,266);
		endShape();
		beginShape();
		vertex(309,170);
		vertex(383,170);
		vertex(340,129);
		endShape();
		noLoop();
		beginShape();
		vertex(431,287);
		vertex(513,288);
		vertex(468,355);
		endShape();
		noLoop();
		beginShape();
		vertex(397,187);
		vertex(307,326);
		vertex(329,362);
		vertex(415,223)
		endShape();
		beginShape();
		vertex(379,131);
		vertex(463,288);
		vertex(441,290);
		vertex(357,142)
		endShape();
		noFill();
		strokeWeight(31);
		stroke(255);
		arc(355,187,70, 52, PI, TWO_PI-radians(60));		
		arc(527, 375, 55,80, radians(20), radians(130));
		strokeWeight(21);
		arc(508,345,50, 110, radians(100), radians(242));
		arc(362,204,52, 75, radians(-90), radians(45));
		arc(402, 293, 75, 68, radians(-162), radians(-25));
		strokeWeight(20);
		line(465,310,519,397);
		arc(545,307, 95, 217, radians(95), radians(187));
		strokeWeight(22);
		arc(475, 260, 75, 68, radians(15), radians(160));
	}

	//'Right' moves the original blob to the right to be redrawn within the loop
	//draw the row of red blobs
	pop();	//2
	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);
		noFill();
		strokeWeight(25);
		stroke(255, 53, 73);
		arc(165,245,78, 78, TWO_PI, HALF_PI);
		arc(318,245,78, 78, QUARTER_PI, PI-radians(15));
		noStroke();
		fill(255, 53, 73);	//color red
		circle(161,183,85);
		circle(190,118,58);
		beginShape();
		vertex(122,165);
		vertex(164,105);
		vertex(219,115);
		vertex(201,199);
		endShape();
		beginShape();
		vertex(198,193);
		vertex(188,272);
		vertex(305,272);
		vertex(215,104);
		endShape();	
	}
	//'Right' moves the original swirl to the right to be redrawn within the loop
	//draw the row of black swirls on top of the red blob row
	pop();	//3
	translate(-315, 10);
	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);
		stroke(12,6,30);
		strokeWeight(2);
		fill(12,6,30);
		circle(359,141,43);
		noStroke();
		beginShape();
		vertex(370,133);
		vertex(512,396);
		vertex(491,407);
		vertex(351,142);
		endShape();
		beginShape();
		vertex(398,204);
		vertex(361,267);
		vertex(435,266);
		endShape();
		beginShape();
		vertex(309,170);
		vertex(383,170);
		vertex(340,129);
		endShape();
		noLoop();
		beginShape();
		vertex(431,287);
		vertex(513,288);
		vertex(468,355);
		endShape();
		noLoop();
		beginShape();
		vertex(397,187);
		vertex(307,326);
		vertex(329,362);
		vertex(415,223)
		endShape();
		beginShape();
		vertex(379,131);
		vertex(463,288);
		vertex(441,290);
		vertex(357,142);
		endShape();
		noFill();
		strokeWeight(31);
		stroke(12,6,30);
		arc(355,187,70, 52, PI, TWO_PI-radians(60));		
		arc(527, 375, 55,80, radians(20), radians(130));
		strokeWeight(21);
		arc(508,345,50, 110, radians(100), radians(242));
		arc(362,204,52, 75, radians(-90), radians(45));
		arc(402, 293, 75, 68, radians(-162), radians(-25));
		strokeWeight(20);
		line(465,310,519,397);
		arc(545,307, 95, 217, radians(95), radians(187));
		strokeWeight(22);
		arc(475, 260, 75, 68, radians(15), radians(160));
	}
	//'Right' moves the original blob to the right to be redrawn within the loop
	//draw the row of yellow blobs
	pop();	//4
	translate(-100, 187);	//move the canvas origin to the left and down to this row will be below the red/black row
	
	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);		
		noFill();
		strokeWeight(25);
		stroke(255, 200, 102);
		arc(165,245,78, 78, TWO_PI, HALF_PI);
		arc(318,245,78, 78, QUARTER_PI, PI-radians(15))
		noStroke();
		fill(255, 200, 102);		
		circle(161,183,85);
		circle(190,118,58);
		beginShape();
		vertex(122,165);
		vertex(164,105);
		vertex(219,115);
		vertex(201,199);
		endShape();
		beginShape();
		vertex(198,193);
		vertex(188,272);
		vertex(305,272);
		vertex(215,104);
		endShape();

	}
	//'Right' moves the original swirl to the right to be redrawn within the loop
	//draw row of pink swirls
	pop();	//5
	translate(-412, 195);	//move the canvas origin left and down to lay the pink swirl row over top the yellow blob row

	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);
		stroke(233, 166, 197);
		strokeWeight(2);
		fill(233, 166, 197);
		circle(359,141,43);
		noStroke();
		beginShape();
		vertex(370,133);
		vertex(512,396);
		vertex(491,407);
		vertex(351,142);
		endShape();
		beginShape();
		vertex(398,204);
		vertex(361,267);
		vertex(435,266);
		endShape();
		beginShape();
		vertex(309,170);
		vertex(383,170);
		vertex(340,129);
		endShape();
		noLoop();
		beginShape();
		vertex(431,287);
		vertex(513,288);
		vertex(468,355);
		endShape();
		noLoop();
		beginShape();
		vertex(397,187);
		vertex(307,326);
		vertex(329,362);
		vertex(415,223);
		endShape();
		beginShape();
		vertex(379,131);
		vertex(463,288);
		vertex(441,290);
		vertex(357,142);
		endShape();
		noFill();
		strokeWeight(31);
		stroke(233, 166, 197);
		arc(355,187,70, 52, PI, TWO_PI-radians(60));		
		arc(527, 375, 55,80, radians(20), radians(130));
		strokeWeight(21);
		arc(508,345,50, 110, radians(100), radians(242));
		arc(362,204,52, 75, radians(-90), radians(45));
		arc(402, 293, 75, 68, radians(-162), radians(-25));
		strokeWeight(20);
		line(465,310,519,397);
		arc(545,307, 95, 217, radians(95), radians(187));
		strokeWeight(22);
		arc(475, 260, 75, 68, radians(15), radians(160));
	}
	//'Right' moves the original blob to the right to be redrawn within the loop
	//draw row of green blobs
	pop();	//6
	translate(-50, 370);
	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);
		noFill();
		strokeWeight(25);
		stroke(79, 132, 108);
		arc(165,245,78, 78, TWO_PI, HALF_PI);
		arc(318,245,78, 78, QUARTER_PI, PI-radians(15));
		noStroke();
		fill(79, 132, 108);
		
		circle(161,183,85);
		circle(190,118,58);
		beginShape();
		vertex(122,165);
		vertex(164,105);
		vertex(219,115);
		vertex(201,199);
		endShape();
		beginShape();
		vertex(198,193);
		vertex(188,272);
		vertex(305,272);
		vertex(215,104);
		endShape();	
	}
	//'Right' moves the original swirl to the right to be redrawn within the loop
	//draw row of blue swirls over top of the green blob row
	pop();	//7	
	translate(-365, 370);	//move canvas origin left and down so the swirls are drawn on top of the previous blob row
	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);
		stroke(37, 61, 173);
		strokeWeight(2);
		fill(37, 61, 173);
		circle(359,141,43);
		noStroke();
		beginShape();
		vertex(370,133);
		vertex(512,396);
		vertex(491,407);
		vertex(351,142);
		endShape();
		beginShape();
		vertex(398,204);
		vertex(361,267);
		vertex(435,266);
		endShape();
		beginShape();
		vertex(309,170);
		vertex(383,170);
		vertex(340,129);
		endShape();
		noLoop();
		beginShape();
		vertex(431,287);
		vertex(513,288);
		vertex(468,355);
		endShape();
		noLoop();
		beginShape();
		vertex(397,187);
		vertex(307,326);
		vertex(329,362);
		vertex(415,223)
		endShape();
		beginShape();
		vertex(379,131);
		vertex(463,288);
		vertex(441,290);
		vertex(357,142)
		endShape();
		noFill();
		strokeWeight(31);
		stroke(37, 61, 173);
		arc(355,187,70, 52, PI, TWO_PI-radians(60));
		arc(527, 375, 55,80, radians(20), radians(130));
		strokeWeight(21);
		arc(508,345,50, 110, radians(100), radians(242));
		arc(362,204,52, 75, radians(-90), radians(45));
		arc(402, 293, 75, 68, radians(-162), radians(-25));
		strokeWeight(20);
		line(465,310,519,397);
		arc(545,307, 95, 217, radians(95), radians(187));
		strokeWeight(22);
		arc(475, 260, 75, 68, radians(15), radians(160));
	}

noLoop()
}

Project-04: String Art

stringartjessa

var dx1;
var dy1;
var dx2;
var dy2;
var count = 50;

function setup() {
    createCanvas(400, 400);
    background(0);
    dx1 = (400-200)/count;
    dy1 = (0-200)/count;
    dx2 = (400-400)/count;
    dy2 = (400-400)/count;
    rectMode(CENTER);
}

function draw() {
	
	//divide the canvas into quadrants
	fill(255, 255, 255, 25);	//set fill to transparent white
	rect(300,0,width/2, height);	//draw square in top right
	rect(0,300,width, height/2);	//draw square in bottom left

	push();
	push();
	push();
	
	translate(-200,0)	//move the origin to the left
	//shape 1
	stroke('cyan')
	var x1 = 200;
    var y1 = 200;
    var x2 = 400;
    var y2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }

    pop()	//return origin position
    //shape 2
    stroke('white')
    da1 = (200-0)/count;
    db1 = (200-0)/count;
    da2 = (400-0)/count;
    db2 = (200-400)/count;

    var a1 = 0;
    var b1 = 0;
    var a2 = 400;
    var b2 = 400;

    for (var i = 0; i <= count; i += 1) {
       line(a1, b1, a2, b2);
        a1 += da1;
        b1 += db1;
        a2 += da2;
        b2 += db2;
    noLoop();
    }
    
    push();	//save current canvas properties
    rotate(radians(45));	//rotate canvas 45 degrees
    
    //shape 3
    stroke('magenta')
    dc1 = (0-400)/count;
    dd1 = (0-0)/count;
    dc2 = (0-200)/count;
    dd2 = (400-200)/count;

    var c1 = 400;
    var d1 = 0;
    var c2 = 200;
    var d2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(c1, d1, c2, d2);
        c1 += dc1;
        d1 += dd1;
        c2 += dc2;
        d2 += dd2;
    noLoop();
}

	pop();	//restore canvas properties before drawing shape 3
	rotate(radians(-20))	//rotate canvas 20 degrees counterclockwise
	translate(-78,58)	//move canvas to the left and down so top point of shape 4 meets center of canvas

	//shape 4
	stroke('cyan')

	de1 = (200-400)/count;
    df1 = (200-400)/count;
    de2 = (0-200)/count;
    df2 = (400-200)/count;

    var e1 = 400;
    var f1 = 400;
    var e2 = 200;
    var f2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(e1, f1, e2, f2);
        e1 += de1;
        f1 += df1;
        e2 += de2;
        f2 += df2;
    noLoop();
}
	pop();	//reset canvas properties to before shape 3 was drawn
	
	//shape 5
	stroke('magenta');
	dg1 = (200-400)/count;
    dh1 = (0-0)/count;
    dg2 = (200-400)/count;
    dh2 = (400-100)/count;

    var g1 = 400;
    var h1 = 0;
    var g2 = 400;
    var h2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(g1, h1, g2, h2);
        g1 += dg1;
        h1 += dh1;
        g2 += dg2;
        h2 += dh2;
    noLoop();
}
	translate(-15,135)	//move canvas to the left and down
	rotate(radians(-44))	//rotate canvas 44 degrees counterclockwise

	//shape 6
	stroke('white')
	dj1 = (400-200)/count;
    dk1 = (200-0)/count;
    dj2 = (200-400)/count;
    dk2 = (400-200)/count;

    var j1 = 200;
    var k1 = 0;
    var j2 = 400;
    var k2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(j1, k1, j2, k2);
        j1 += dj1;
        k1 += dk1;
        j2 += dj2;
        k2 += dk2;
	}
	noLoop();
}

It took me a while to figure out how to manipulate the loops to make the shapes I wanted, so I made some general sketches to guide the composition and the guide lines. Ultimately, I had to transform the canvas and make slight modifications throughout the code to get the visual effect I wanted, but this would have been impossible to do without loops.

A sketch laying out the composition for the string art piece I made

Looking Outwards 04: Sound Art

I am captivated by Christian Marclay’s collaboration with Snapchat, a series of works entitled: Snap: Sound Stories. Marclay uses publicly available Snapchat videos as a source of found videos for different interactive sound art pieces. In one, he composes a musical piece by sampling from hundreds of millions of Snapchat videos analyzed by an algorithm which detects if the frequency of the video would be a sound recognizable to the human ear.

A video detailing Christian’s Marclay’s collaboration with Snapchat, Sound Stories

In another, Marclay creates a mobile from iPhones which respond via a pitch recognition algorithm which monitors and learns the viewer’s speaking voice. Another piece incorporates collections of videos which each represent a note on a piano; the viewer can sit at the piano and play music through Snapchat videos.

Christian Marclay, The Organ (detail), 2018

Link

Project-03: Dynamic Drawing

A little seesaw! The seesaw goes up and down with the horizontal position of your mouse. The little balls change shape with the speed of your mouse and change colors when they hit the seesaw.

dynamicdrawing

var balanceX = 0;			//set center seesaw position in the x direction
var balanceY = 0;			//set center seesaw position in the y direction
var balanceAngle = 0;		//set the angle of the seesaw based on the mouseX position
var ballSquish = 0;			//sets how tall the ball is based on the velocity of the mouse			
var ballStretch = 0;		//sets how wide the ball is based on the velocity of the mouse
var leftBallY = -63;		//sets the vertical position of the left ball
var rightBallY = -63;		//sets the vertical position of the left ball
var pink1 = 255;			//sets original r value for left ball
var	pink2 = 151;			//sets original g value for left ball
var pink3 = 202;			//sets original b value for left ball
var orange1 = 249;			//sets original r value for left ball
var orange2 = 176;			//sets original g value for left ball
var orange3 = 32;			//sets original b value for left ball

function setup() {
    createCanvas(600, 450);
    background(255)
    rectMode(CENTER);
    frameRate(20);
}

function draw() {
	//set color of the sky
	background(160, 218, 223);

	//draw cloud 1
	fill(255);
	noStroke();
	beginShape();
	curveVertex(288,111);
	curveVertex(261,118);
	curveVertex(254,135);
	curveVertex(237,142);
	curveVertex(217,146);
	curveVertex(210,166);
	curveVertex(225,183);
	curveVertex(243,186);
	curveVertex(260,188);
	curveVertex(269,197);
	curveVertex(285,197);
	curveVertex(304,197);
	curveVertex(311,186);
	curveVertex(328,192);
	curveVertex(345,183);
	curveVertex(380,181);
	curveVertex(383,161);
	curveVertex(377,144);
	curveVertex(353,144);
	curveVertex(347,127);
	curveVertex(323,115);
	curveVertex(307,127);
	endShape();

	//draw cloud 2
	beginShape();
	curveVertex(495,20);
	curveVertex(451,29);
	curveVertex(449,46);
	curveVertex(431,60);
	curveVertex(409,61);
	curveVertex(408,101);
	curveVertex(480,123);
	curveVertex(501,111);
	curveVertex(515,106);
	curveVertex(547,122);
	curveVertex(559,100);
	curveVertex(567,73);
	curveVertex(586,62);
	curveVertex(566,43);
	curveVertex(525,53);
	endShape();

	//draw cloud 3
	beginShape();
	curveVertex(86,48);
	curveVertex(42,36);
	curveVertex(37,78);
	curveVertex(35,97);
	curveVertex(73,119);
	curveVertex(110,89);
	curveVertex(168,91);
	curveVertex(169,59);
	curveVertex(129,37);
	endShape();

	fill(255, 245, 103);	//set color of seesaw base
	noStroke();
	triangle(306, 324, 234, 432, 378, 432);		//draw seesaw base
	
	fill(187, 211, 48);		//set ground color to green
	rect(300, 441, 600, 18)		//draw grass
	
	translate(306, 324);	//move the origin to the center of the seesaw
	//the seesaw will rotate with the horizontal position of the mouse
	if (mouseX < width) {
		rotate(radians(45 * (mouseX - 300)/600));
	}
	fill(255, 245, 103);
	rect(balanceX, balanceY, 551, 18);							//draw seesaw
	
	fill(pink1, pink2, pink3);										//set left ball initial color to pink
	ellipse(-234, leftBallY, 108 - ballSquish, 108 + ballStretch);	//draw left ball
	
	fill(orange1, orange2, orange3);											//set right ball initial color to orange
	ellipse(216, rightBallY, 108 + ballSquish, 108 - ballStretch);		//draw right ball

	ballSquish = (mouseY - pmouseY)*2							//change the height of each ball to vary with mouse velocity
	ballStretch = (mouseX - pmouseX)*2							//change the width of each ball to vary with mouse velocity

	//when the left ball bounces, its color will change to dark orange
	if (leftBallY + 108 + ballSquish >= 48){
		pink1 = 242
		pink2 = 122
		pink3 = 5
	}
	else {
		pink1 = 255
		pink2 = 151
		pink3 = 202
	}
	//when the right ball bounces, its color will change to dark pink
	if (rightBallY + 108 + ballSquish >= 48){
		orange1 = 220
		orange2 = 51
		orange3 = 134
	}
	else {
		orange1 = 249
		orange2 = 176
		orange3 = 32

	}

}

Looking Outwards 03: Computational Fabrication

The Vespers project is a fascinating ongoing enterprise by the Mediated Matter research group in the Media Lab at MIT. This project, inspired by the concept of the “death mask” of old, serves to memorialize the dead; here, the makers integrate many disciplines to re-engineer complex forms and symbols through each series of masks, using computational modeling techniques to physically represent culturally and philosophically relevant questions.

Some of the masks generated for the Vespers project by MIT’s Mediated Matter research group (2016).

For instance, the second series of masks serves to negotiate the divide between life and death. They take cues from natural phenomena and forms and, using data and environmentally responsive materials, are able to digitally model and fabricate each mask. The makers use spatial mapping algorithms to encode the specific colors, geometry, and form of each mask. I find these works interesting as they are not only aesthetically impressive but serve as a model of how we might computationally “grow” and design organic tissues and prosthetics to meet specific individual needs.

This video documents a mask in the third series of the Vespers project which contains pigment-producing microorganisms.

Project-02: Variable Faces; Face Variables

For this project, I wanted to try and capture the idea that people can have different features, but functionally and physiologically, we aren’t so different. I coded the profile to change (nose shape, head shape, and etcetera) when you click, but the brain always stays the same.

variableface

var noseBridge = 33;
var noseBump = 340;
var noseShape = 17;
var nostrilAngle = 20;
var noseLip = 50;
var lipPurse = 407;
var upperLip = 45;
var lipOut = 40;
var centerLip = 50;
var chinIn = 60;
var chinPoint = 50;
var jawLine = 530;
var lipHeight = 420
var lipTop = 45
var headWidth = 440
var headHeight = 55
var headTop = 110
var r = 235
var g = 205
var b = 167


function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(255);
    
    //head
	fill(r, g, b);
	noStroke();
	beginShape();
	curveVertex(454,265);				//last point before back of head shape
	curveVertex(427,208);
	curveVertex(389,headTop+41);
	curveVertex(321,headTop+10);
	curveVertex(248,headTop);			//top of head
	curveVertex(156,128);
	curveVertex(116,164);
	curveVertex(93,210);
	curveVertex(headHeight+21,253);
	curveVertex(headHeight+20,280);
	curveVertex(headHeight,313);		//eyes
	curveVertex(noseBridge,noseBump);	//nose bridge
	curveVertex(noseShape,364);			//nose roundness
	curveVertex(nostrilAngle,377);		//bottom nostril angle
	curveVertex(noseLip,388);			//nostril end to upper lip
	curveVertex(upperLip,lipPurse);		//upper lip
	curveVertex(lipOut,lipHeight);		//upper lip sticking out
	curveVertex(centerLip,429);			//lip center
	curveVertex(lipOut+1,444);			//bottom lip sticking out
	curveVertex(56,lipHeight+lipTop);	//bottom lip
	curveVertex(chinIn,470);			//chin height
	curveVertex(chinPoint,492);			//chin roundness
	curveVertex(63,517);				//chin angles
	curveVertex(83,530);				//jawline
	curveVertex(121,jawLine);			//chin to neck angle
	curveVertex(155,541);
	curveVertex(173,607);
	curveVertex(155,567);			//bottom neck point
	endShape();

	//back of head
	beginShape();
	curveVertex(388,155);
	curveVertex(405,175);
	curveVertex(headWidth+3,219);
	curveVertex(noseShape+headWidth,259);
	curveVertex(noseShape+headWidth+3,298);
	curveVertex(441,358);
	curveVertex(headWidth-30,400);
	curveVertex(399,439);
	curveVertex(396,511);
	curveVertex(401,541);
	curveVertex(169,601);
	curveVertex(335,125);
	endShape();

    //cerebellum
    fill(253, 182, 185);
	strokeWeight(10);
	stroke(241, 113, 110);
    beginShape();
	curveVertex(288,326);
	curveVertex(306,328);
	curveVertex(330,325);
	curveVertex(339,314);
	curveVertex(360,318);
	curveVertex(386,320);
	curveVertex(414,326);
	curveVertex(401,349);
	curveVertex(376,368);
	curveVertex(359,377);
	curveVertex(335,376);
	curveVertex(322,369);
	curveVertex(300,350);
	endShape();

	strokeWeight(6);
	stroke(241, 113, 110);
    beginShape();
	curveVertex(290,329);
	curveVertex(311,344);
	curveVertex(321,330);
	curveVertex(339,330);
	curveVertex(371,332);
	curveVertex(382,342);
	curveVertex(403,342);
	curveVertex(398,349);
	curveVertex(373,349);
	curveVertex(364,339);
	curveVertex(335,345);
	curveVertex(329,329);
	curveVertex(355,351);
	curveVertex(386,358);
	curveVertex(381,364);
	curveVertex(356,361);
	curveVertex(331,351);
	curveVertex(325,356);
	curveVertex(346,366);
	curveVertex(360,371);
	curveVertex(369,371);
	curveVertex(347,375);
	curveVertex(317,362);
	curveVertex(305,352);
	curveVertex(305,334);
	curveVertex(310,330);
	endShape();

    //cortex
	fill(255, 200, 198);
	strokeWeight(12);
	stroke(241, 113, 110);
	beginShape();
	curveVertex(266,127);
	curveVertex(247,124);
	curveVertex(221,130);
	curveVertex(181,143);
	curveVertex(134,172);
	curveVertex(115,194);
	curveVertex(107,220);
	curveVertex(109,240);
	curveVertex(121,259);
	curveVertex(133,274);
	curveVertex(153,283);
	curveVertex(171,287);
	curveVertex(174,307);
	curveVertex(182,326);
	curveVertex(196,332);
	curveVertex(205,340);
	curveVertex(225,346);
	curveVertex(248,341);
	curveVertex(265,329);
	curveVertex(291,325);
	curveVertex(325,324);
	curveVertex(341,314);
	curveVertex(351,318);
	curveVertex(363,318);
	curveVertex(372,322);
	curveVertex(385,322);
	curveVertex(404,322);
	curveVertex(413,320);
	curveVertex(432,300);
	curveVertex(431,282);
	curveVertex(425,265);
	curveVertex(416,235);
	curveVertex(410,215);
	curveVertex(396,197);
	curveVertex(387,185);
	curveVertex(377,171);
	curveVertex(352,154);
	curveVertex(329,144);
	curveVertex(296,131);
	curveVertex(246,125);
	curveVertex(301,132);
	curveVertex(332,147);
	curveVertex(367,162);
	endShape();
	
	//lateral fissure
	noFill();
	strokeWeight(10);
	stroke(241, 113, 110);
	beginShape();
	curveVertex(169,286);
	curveVertex(171,285);
	curveVertex(208,256);
	curveVertex(243,258);
	curveVertex(267,252);
	curveVertex(331,247);
	curveVertex(353,226);
	curveVertex(367,206);
	endShape();

	

	//contours
	noFill();
	strokeWeight(7);
	stroke(241, 113, 110);
	beginShape();
	curveVertex(173,294);
	curveVertex(185,287);
	curveVertex(195,293);
	curveVertex(211,287);
	curveVertex(220,297);
	curveVertex(230,287);
	curveVertex(250,280);
	curveVertex(255,287);
	curveVertex(271,276);
	curveVertex(289,271);
	curveVertex(300,283);
	curveVertex(311,281);
	curveVertex(320,269);
	curveVertex(335,271);
	curveVertex(343,277);
	curveVertex(345,257);
	curveVertex(331,250);	
	endShape();

	beginShape();
	curveVertex(127,216);
	curveVertex(149,233);
	curveVertex(164,224);
	curveVertex(165,210);
	curveVertex(183,201);
	curveVertex(199,210);
	curveVertex(211,206);
	curveVertex(209,180);
	curveVertex(221,166);
	curveVertex(236,159);
	curveVertex(232,147);
	curveVertex(249,132);
	curveVertex(266,126);
	curveVertex(291,131);
	curveVertex(275,150);
	curveVertex(257,169);
	curveVertex(239,169);
	curveVertex(233,189);
	curveVertex(227,211);
	curveVertex(234,231);
	curveVertex(215,257);	
	endShape();

	beginShape();
	curveVertex(331,142);
	curveVertex(330,150);
	curveVertex(319,160);
	curveVertex(303,156);
	curveVertex(298,165);
	curveVertex(285,176);
	curveVertex(283,188);
	curveVertex(266,208);
	curveVertex(253,197);
	curveVertex(261,212);
	curveVertex(252,220);
	curveVertex(245,241);
	curveVertex(249,256);
	endShape();

	beginShape();
	curveVertex(300,235);
	curveVertex(292,211);
	curveVertex(304,184);
	curveVertex(323,177);
	curveVertex(343,161);
	curveVertex(355,167);
	curveVertex(360,178);
	curveVertex(341,189);
	curveVertex(332,210);
	curveVertex(317,225);
	curveVertex(307,227);
	curveVertex(317,235);
	endShape();

	beginShape();
	curveVertex(208,134);
	curveVertex(190,138);
	curveVertex(194,148);
	curveVertex(182,166);
	curveVertex(187,177);
	curveVertex(167,190);
	curveVertex(161,182);
	endShape();


	beginShape();
	curveVertex(118,200);
	curveVertex(126,201);
	curveVertex(135,170);
	curveVertex(142,168);
	curveVertex(119,226);
	curveVertex(136,249);
	curveVertex(144,258);
	curveVertex(161,265);
	curveVertex(178,259);
	curveVertex(193,264);
	curveVertex(193,247);
	curveVertex(188,400);
	endShape();

	beginShape();
	curveVertex(175,160);
	curveVertex(166,157);
	curveVertex(165,171);
	curveVertex(153,196);
	curveVertex(149,215);
	curveVertex(161,228);
	endShape();

	beginShape();
	curveVertex(209,219);
	curveVertex(207,236);
	curveVertex(211,257);
	endShape();

	beginShape();
	curveVertex(400,204);
	curveVertex(352,223);
	curveVertex(369,240);
	curveVertex(377,222);
	curveVertex(390,219);
	curveVertex(401,229);
	curveVertex(409,252);
	curveVertex(397,278);
	endShape();

	beginShape();
	curveVertex(371,256);
	curveVertex(359,256);
	curveVertex(366,265);
	curveVertex(356,283);
	curveVertex(329,294);
	curveVertex(305,301);
	curveVertex(289,295);
	curveVertex(287,288);
	curveVertex(282,299);
	curveVertex(257,309);
	curveVertex(264,331);
	endShape();

	beginShape();
	curveVertex(217,323);
	curveVertex(217,335);
	curveVertex(226,339);
	curveVertex(248,341);
	curveVertex(265,325);
	curveVertex(285,313);
	curveVertex(295,311);
	curveVertex(319,315);
	curveVertex(342,307);
	endShape();

	beginShape();
	curveVertex(191,308);
	curveVertex(197,320);
	curveVertex(211,326);
	curveVertex(220,332);
	curveVertex(227,315);
	curveVertex(242,298);
	curveVertex(261,305);
	endShape();

	beginShape();
	curveVertex(347,315);
	curveVertex(362,319);
	curveVertex(368,305);
	curveVertex(382,303);
	curveVertex(397,300);
	curveVertex(394,273);
	curveVertex(379,258);
	curveVertex(395,251);
	curveVertex(402,228);
	endShape();

	beginShape();
	curveVertex(213,221);
	curveVertex(213,233);
	curveVertex(221,247);
	curveVertex(234,256);
	curveVertex(249,256);
	curveVertex(263,252);
	curveVertex(282,233);
	curveVertex(289,224);
	curveVertex(294,235);
	curveVertex(296,249);
	endShape();
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. 

    noseBridge = random(24, 40);
	noseBump = random(330, 340);
	noseShape = random(5, 20);
	nostrilAngle = random(15, 40);
	noseLip = random(40, 50);
	lipPurse = random(402, 410);
	upperLip = random(40, 50);
	lipOut = random(37, 42);
	centerLip = random(45, 52);
	chinIn = random(50, 65);
	chinPoint = random(45, 57);
	jawLine = random(520, 542);
	lipTop = random(30, 42);
	headWidth = random(430, 440);
	headTop = random(100, 118);
	r = random(48, 249);
	g = random(30,223);
	b = random(16, 198);

}

I made some preliminary concept sketches, but mostly used an Image Map HTML Generator to generate some base coordinates and fiddled with those.

My preliminary sketches and coordinate notations

Looking Outwards 02: Generative Art

I am inspired by LIA’s 2018 collaborative project, Animal Imagination. This is a collection of fifty novel artworks which reflect the balance and beauty of nature through algorithm as digital paintings and videos.

The artist took inspiration from natural phenomena and incorporated the colors and forms into one overarching code base. Each work evolved as LIA tweaked this original code base to create new generative works. Each painting is unique, but they all bring an “alive” quality through the movement and vibrance; the decision to use generative media to explore the pulse of nature was executed perfectly in this context.

Video documentation of LIA’s generative project, Animal Imagination (2018)

I think these pieces are not only very beautiful, but quite sensitive to texture and harmony as though LIA had painted them by hand. This ability to manipulate code and render these types of living and performative pieces makes them even more engaging had they been static works.