October 2016 – Page 23 – [OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE

Looking Outwards 6 Lydia Jin

I chose Jasper Johns’ work False Start (created in 1959) for this week’s looking outwards. False Start at first seemed like a completely random painting as if the artist just smashed the colors onto the canvas. But then when I took a closer look there were actually words of colors on each patch of color even though the words did not identify the color it was written in nor did it identify the patch of color. I feel like this aspect of the artwork further randomizes it. I really like how randomization is expressed in every possible aspect of this piece. The artwork looks like an explosion of colors and produces an erratic theme. From this work of art, we can guess that Jasper was feeling inspirational by uncertainty and nervousness when he created this piece. The title of the piece False Start may also suggest something about the artist. I did some research on Jasper’s other artworks and they were usually organized at first but gradually became more random. This piece may symbolize a transition of Jasper’s artistic style to randomness.

false-start
False Start, 1959 by Jasper Johns

Link of artwork: False Start,Jasper Johns

jihoonp_project_06

sketch

//Jihoon Park
//Section A
//jihoonp@andrew.cmu.edu
//project-06

function setup() {
	createCanvas(600, 400);
}

function draw() {
	var H = hour();
	var M = minute();
	var S = second();
	var Mil = millis();
	
	var glac = (sin(radians(Mil/3600/1000*180)));	//size change of glacier by minute
	var shadR =(cos(radians(Mil/12/3600/1000*180)));//size change of penguin by second
	var penR = abs(sin(radians(Mil/1000/60*180)));	//rotation of shadow by hour

	var snow = [0,2,4];
	
	var centX = width/2;
	var centY = height/2;
	background(117, 230, 232);					//creates the sky


    textSize(15);							//text specifications
    fill("darkblue");
    textFont("Courier New");
    										//writes out time above
    text(nf(H, [], 0), 110, 30);
    text(":", 130, 30);
    text(nf(M, [], 0), 140, 30);
    text(":", 160, 30);
    text(nf(S, [], 0), 170, 30);
	
	fill(42, 135, 232);							//creates the water
	noStroke();
	rect(0,100, 600, 300);

	fill(230,232,232);							//creates background glacier
	strokeWeight(2);
	beginShape();
	vertex(0, 70);
	vertex(100, 80);
	vertex(120, 110);
	vertex(110, 115);
	vertex(80, 115);
	vertex(80, 110);
	vertex(0, 110);
	endShape(CLOSE);

	beginShape();
	vertex(200, 100);
	vertex(230, 85);
	vertex(240, 100);
	endShape(CLOSE);

	beginShape();
	vertex(380, 105);
	vertex(370, 80);
	vertex(520, 83);
	vertex(520, 75);
	vertex(600, 75);
	vertex(600, 110);
	endShape(CLOSE);
	
	//creates the glacier that increase and decrease according to minute
	fill(225, 255, 236);						
	strokeWeight(1);							
	stroke(0);				
	//noStroke();
	ellipse(300, 250, 200+200*glac, 100+100*glac);
	

	//creates shadow that rotates by hour

	fill(140);
	noStroke();
	push();
	translate(centX, 260);
	rotate(shadR);
	ellipse(0,50, 50, 100);
	pop();

	
	//creates penguin that grows by second

	fill(255,238,95);							
	triangle(290, 240, 285, 260, 295, 260);				//penguin left foot
	triangle(310, 240, 305, 260, 315, 260);				//penquin right foot

	fill(14, 25, 41);
	noStroke();
	ellipse(300, 220-50*penR, 30+25*penR, 60+50*penR); 	//penguin body
	ellipse(300, 180-50*penR, 20+25*penR, 30+50*penR); 	//penguin head
	ellipse(300, 240-15*penR, 40+10*penR, 40+10*penR); 	//penguin butt
	push();
	translate(310+15*penR, 210-40*penR);
	rotate(radians(-30));								//penguin right fin
	ellipse(0,0, 10, 40);
	pop();
	push();
	translate(290-15*penR, 210-40*penR);					
	rotate(radians(30));
	ellipse(0,0, 10, 40);								//penguin left fin
	pop();

	fill(240);
	ellipse(300, 230-50*penR, 15+25*penR, 50+50*penR); 	//penguin belly

	fill(255, 238, 95);
	noStroke();											//penguin beak
	beginShape();
	vertex(300, 180-60*penR);
	vertex(305, 182-60*penR);
	vertex(300, 184-60*penR);
	vertex(295, 182-60*penR);
	endShape(CLOSE);

	fill(255);
	ellipse(295, 175-60*penR, 10, 5);					//penguin left eye
	ellipse(305, 175-60*penR, 10, 5);					//penguin right eye
	fill(0);	
	ellipse(295, 175-60*penR, 2,2);						//penquin left pupil
	ellipse(305, 175-60*penR, 2,2);						//penquin right pupil

	for(i=0; i<width; i+=100) {							//snow
		for(j=0; j<height; j+=100) {
			fill(255);
			noStroke();
			ellipse(i*random(0,2), j*random(0, 2), 5,5);
		}
	}
}

The clock incorporates three different elements to tell change in time. The penguin grows and shrinks by the second, the iceberg it stands on also grows and shrinks by the minute, while the shadow of the penguin rotates by the hour. There is no absolute measure of time in my clock, but it only shows the change. Though in the beginning, I imagined a penguin hatching out of an egg to grow as time goes by, but that turned out unfeasible with my coding skills…

Looking Outwards-06

I found an image that I particularly liked (seen below), and discovered that it was by AGIA’s 2010 graphic design medalist John Maeda. He has an extensive background in research, technology and art, and was a professor at MIT, but is currently the president at Rhode Island School of Design. (This information was taken from the website here).

I was not able to find much about this particular picture, but I liked it a lot because of its colorfulness and how it appears to be random, yet it still created a pattern that vaguely resembles a flower of sorts.

However, I did find a TED talk that Maeda gave, and attached the link here. In it he discusses his background and various projects that he has done or is currently working on. There are also other works that he has done displayed on the webpage below the video.

Project-06-Abstract Clock

sketch

//Rebecca Enright
//Section A
//renright@andrew.cmu.edu
//Abstract Clock

function setup() {
    createCanvas(640,480);
    background(0);
} 

function draw() {
    background(0);
    //create variables for time functions
    var h = hour();
    var m = minute();
    var s = second();
    var mi = millis();

    //create sun 
    fill(255,255,0);
    ellipse(width/2,height/2,100,100);
    
    //create light blue second ellipse
    push();
    translate(width/2,height/2);
    //rotates ellipse every second (1 orbit = 1 minute)
    rotate(radians(360/60 * s));
    fill(0,255,191);
    ellipse(150,150,25,25);
    pop();
    
    //create green minute ellipse
    push();
    translate(width/2,height/2);
    //rotates ellipse every minute
    rotate(radians(360/60 * m));
    fill(181,255,0);
    ellipse(50,50,10,10);
    pop();
    
    //create maroon hour ellipse
    push();
    translate(width/2,height/2);
    //rotates ellipse every hour
    rotate(radians(360/24 * h));
    fill(189,0,75);
    ellipse(100,100,35,35);
    pop();

    //creates purple millisecond ellipse
    push();
    translate(width/2, height/2);
    //rotates ellipse every millisecond (1 orbit = 1 minute)
    rotate(radians(360/60000 * mi));
    fill(176,0,255);
    ellipse(75,75,15,15);
    pop();

}

It was fun thinking of ideas for this project, and when I was working with the simple clock assignment, I decided that I wanted to use rotation and reflect the general look of a clock, but in a different way.This then led me to the idea of a solar-system design. I also planned out the different “planets” and their locations in my sketch below.

Project06_Jiyoung Ahn_Abstract clock

sketch

//Jiyoung Ahn
//Section A
//jiyounga@andrew.cmu.edu
//Assignment -06-project


var cX = 0; //center x
var cY = 0; // center y
var dif = 100; //width difference


function setup() {
    createCanvas(500, 300);
}

function draw() {
  background(250);

  var Hr = hour ();
  var Min = minute ();
  var Sec = second ();  
  noStroke ();  
  translate (250, 300);
  

  //second-red
  fill ('#f92b09');
  arc (cX, cY, width, width, PI, PI + (Sec%60)/60*PI);
  
  //second-orange
  fill ('#f9823e');
  arc (cX, cY, width-dif, width-dif, PI, PI + (Sec%60)/60 *PI);

  //minute - yellow
  fill ('#ede995');
  arc (cX, cY, width-2*dif, width-2*dif, PI, PI+(Min%60)/60 *PI);

  //minute - green
  fill ('#70cb95');
  arc (cX, cY, width-3*dif, width-3*dif, PI, PI+(Min%60)/60 *PI);

  //hour - blue
  fill ('#70afd7');
  arc(cX, cY, width-4*dif, width-4*dif, PI, PI + (Min%60)/60 *PI);

  //hour - navy
  fill ('#3d64d2');
  arc(cX, cY, width-5*dif, width-5*dif, PI, PI + (Hr%12)/12 *PI);
  
  //hour - purple
  fill ('#7f7ed0');
  arc(cX, cY, width-6*dif, width-6*dif, PI, PI + (Hr%12)/12 *PI); 

}

I tried to create a clock with a shape of a rainbow. I divided 7 colors of rainbow by sec, min, hr. Though I took a simple concept of clock, it was quite a challenge for me to present different sizes of half ellipse.

Looking Outwards 6 – Simin Li

Prime Hex by Marius Watz Photographed by James Bedell

Prime Hex B was a project by Marius Watz in 2013 that used computation to create “random” permutations of light behavior. The piece is composed of 64 clusters of light tubes that each contain 11 individual light tubes that turn on and off according to different time intervals. It is likely that he used closed system self-generative software because he stated the benefits of using it in generative art. The numbers of seconds in each interval are all carefully computed prime numbers to get the longest nonrepeating cycle. It also helps avoid “the inevitable bias of pre-programmed content”. This is not the first project Marius Watz has done using this kind of controlled randomness. His other projects that are also named “Prime” including one installation in the Wergeland tunnel use the same mechanism.

It is almost guaranteed that each time you see the piece it will be different. This is interesting because the artist cannot possibly go through all of the permutations but he can count on computation and his software to make the piece creative and diverse. In a way, his artwork is no longer his own. This reminds me of working with watercolor: after your brush leaves the paper what happens to the pigment is all up to chance. I come back to the painting when it is dry and realize that it has turn into something completely different. Watz is painting with software and leaving the rest to chance.

Links:

Marius Watz :: Prime Hex B

Overcoming Manual Inadequacy: An Interview With Marius Watz

Projects by Marius Watz

Janet Lee – Looking Outwards – 06

Martin Krzywinski is a scientist who focuses his study in bioformatics by using computer science to understand biological data. He started to create random art by using pi in 2013 on Pi day. He used different colors for each circle and then folded them all together as a spiral so that it would represent the whole digits of pi. Krzywinski mentioned that the whole purpose of art is for people to awaken their emotions about math and to start conversations about numbers and randomness. His algorithm was to use pi in his art work which made it more interesting to look at.

https://www.washingtonpost.com/news/wonk/wp/2015/03/14/10-stunning-images-show-the-beauty-hidden-in-pi/

imrs

Jess Medenbach – Abstract Clock

abstractclock Experimenting with the colors and ellipses with the time functions.

function setup() {
  createCanvas(300, 300);
  background(240);
  
 
}
var sAngle = 6; 
var mAngle = 6;
var hAngle = 30;


function draw() {
    var s =  second();
    var m = minute();
    var h = hour();
    var centerx = width / 2;
    var centery = height / 2;
    var radius = 125;
    background(255);

    //circle
    fill(0,0,200);
    strokeWeight(10);
    ellipse(width/2,height/2,250,250);
    

    // minute hand
    fill(255,200,0);
    var y = cos(radians(mAngle*m*-1)) * radius;
    var x = sin(radians(mAngle*m)) * radius;
    stroke(5);
    ellipse(centerx, centery, centerx + x, centery - y);

    //second hand 
    fill(255);
    var y = cos(radians(sAngle*s*-1)) * radius;
    var x = sin(radians(sAngle*s)) * radius;
    strokeWeight(1);
    ellipse(centerx, centery, centerx + x, centery - y);

    // hour hand
    fill(200,0,0);
    var y = cos(radians(hAngle*h*-1)) * radius;
    var x = sin(radians(hAngle*h)) * radius;
    strokeWeight(5);
    ellipse(centerx, centery, centerx + x, centery - y);



   }

Kyle Lee Project 06 Abstract Clock

I wanted to make my abstract clock a simple clean representation of time. I liked the idea of revolving the time around a center of normal analog clocks, but instead make it something that built up rather than ticking by.

kdlee-project-06

function setup() {
    createCanvas(300, 300);
}

function draw() {
    background(255);

//digital time vars
    var s = second();
    var m = minute();
    var h = hour();
    var hx = 125;//digital hour x location
    var mx = 144;//digital minute x location
    var sx = 164;//digital second x location
    var ty = 154;//digital time y location
//types digital time
    textStyle(BOLD);
    text(nf(h%12, 2, 0) + ":", hx, ty);//digital hour
    text(nf(m, 2, 0) + ":", mx, ty);//digital minute
    text(nf(s, 2, 0), sx, ty);//digital second

//radius vars
    var sRadius = 120;//second hand length
    var mRadius = 90;//minute hand length
    var hRadius = 60;//hour hand length
//circle arc angle vars
    var sAngle = map(second(), 0, 60, radians(0), radians(360));//converting 60 sec to 360 degrees
    var mAngle = map(minute(), 0, 60, radians(0), radians(360));//converting 60 min to 360 degrees
    var hAngle = map(hour()%12, 0, 12, radians(0), radians(360));//converting 12 hr to 360 degrees
//x & y revolving locations
    var sx = cos(sAngle) * sRadius;//rotating s hand X
    var sy = sin(sAngle) * sRadius;//rotating s hand Y
    var mx = cos(mAngle) * mRadius;//rotating m hand X
    var my = sin(mAngle) * mRadius;//rotating m hand Y
    var hx = cos(hAngle) * hRadius;//rotation h hand X
    var hy = sin(hAngle) * hRadius;//rotation h hand Y

    push();//begin drawing board
    translate(width/2, height/2)
    rotate(radians(270));//rotates from 0 or 2pi so starting point is upper vertical

    stroke("#F18F32");//orange seconds
    noFill();
    strokeWeight(20);
    arc(0, 0, sRadius * 2, sRadius * 2, 0, sAngle);
    dot(sx, sy);

    stroke("#E186CF")//purple minutes
    noFill();
    strokeWeight(20);
    arc(0, 0, mRadius * 2, mRadius * 2, 0, mAngle);
    dot(mx, my);

    stroke("#2CD9DE")//blue hours
    noFill();
    strokeWeight(20);
    arc(0, 0, hRadius * 2, hRadius * 2, 0, hAngle);
    dot(hx, hy);

    pop();
}

function dot(x, y){
    fill(255);
    stroke(0);
    strokeWeight(2);
    ellipse(x, y, 20, 20);
}

Michal Luria – Looking Outwards – 06

Flux / Gabriel Comym

“Flux”, a typography project generated with 1000 random particles, by Gabriel Comym.

The project I will present is a project called “Flux” by Gabriel Comym. The project creates typography generated by a thousand particles each, which are random in their location, length, speed, transparency and direction.

What I like about this project is that it makes the typography very expressive and with high aesthetics using mostly random values, therefore the artist himself does not know what the result of the art will look like, and what will the final typography portray.

The random values of the project are actual random numbers that determine the starting point, direction, speed and opacity of each particle. However, it is limited in speed, allowing it to create a sense of “growth” for each letter, as well as the limited location to the border of the letter for the starting point of each particle. In my opinion, these limitations serve the project well, allowing interesting development of typography without losing the visual aspect of being able to recognize the letter.