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

rgriswol_Project-06

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 06
*
*/

// Creates an abstract clock based on a simplified version of our solar system.
var m;
var s_init;
function setup(){
	createCanvas(800, 800);
}

function draw(){
	var mil = new Date().getMilliseconds(); // makes movement semi-continuous
	var s = second() + mil / 1000;
	var m = minute() + s / 60;
	var h = hour() + m / 60;

	var r = 33 + 159/h;
	var g = 10 + 242/h;
	var b = 65 + 187/h;

	background(r, g, b); // sky changes color depending on the hour

	var angleH = h * PI / 6 - PI / 2; // sets up the hour to move in terms of sin/cos
	var angleM = m * PI / 30 - PI / 2; // sets up the min to move in terms of sin/cos
	var angleS = s * PI / 30 - PI / 2; // sets up the sec to move in terms of sin/cos

	noStroke();
	fill(253, 236, 111);
	ellipse(width/2, height/2, 300, 300); // sun
	fill(100, 230, 100);
	ellipse(width/2 + cos(angleM) * 300, height/2 + sin(angleM) * 300, 80, 80); // earth
	fill(255);
	ellipse(width/2 + cos(angleM) * 300 + cos(angleS) * 80, height/2 + sin(angleM) * 300 + sin(angleS) * 80, 20, 20); // moon

	textSize(20);
	textAlign(CENTER);
	text(nf(hour() % 12,2,null)+":"+nf(minute(),2,null)+":"+nf(second(),2,null), width/2, height/2 + 10); // prints time on the sun

}

For this project (like my previous one) I was once again inspired by space. I decided to make a model based off of the rotation of the Earth around the sun and moon around the earth. Obviously the ratio of the velocity of the orbits aren’t similar to the real-life ratios, as this model is specifically meant to represent a typical hour/minute/second clock. The Earth represents the minutes, the moon represents the seconds, and the color changes of the sky represent the hours. I also printed the time (in numbers) on the sun to make it easier to understand how the movement of the ellipses and the changing color values correspond to the time.
I started with the sketch below. Initially I wanted to have stars pass in front of the sun like the zodiacs (there’s 12 zodiacs corresponding to each month, which works very nicely considering we use 12-hour clocks) but I realized they’d also either have to pass in front of or behind the Earth and moon (which felt weird) and it also meant I couldn’t include the time on the sun. So instead I decided to go with color changes to represent the hour, though I’d like to eventually figure out a way to make my original idea work.

Jinhee Lee; Looking Outwards 06

This is a very small example that very few people have commented on, but small details like this are what immerse me into games. In the Devil May Cry series, the game encourages the player to fight expressively and stylishly by grading their performance at the end of every mission.

maxresdefault

An example of this can be seen here, in which the player receives an “S” rank and the screen is sliced many, many times and eventually breaks at the seams.

The number of slices/gunshots (depending on the played character) that appear on the screen before the displayed rank is random, specifically “pseudo-random”, in that it can actually be determined and reproducible depending on the player’s rank. The higher the rank, the more slices/gunshots.

I believe that the cutting angles are all predetermined, and that the game picks a fairly consistent amount to display depending on the rank, but randomizes the order in which each cut is executed. Additionally, when the screen breaks apart like glass, randomness seems to be utilized to a greater extent as the shards drop. Particularly, applying the physics engine to each shard and treating it as an object in free-fall. This is all speculation though, seeing as how neither player nor developer has really elaborated on such a minor feature.

What this produces is a nice visual that reflects the free-flowing rather than choreographed nature of the combat and feels empowering to players that take the time to refine their skill.

Abstract Clock

index

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

sketch

//Arula Ratnakar
//Section C
//aratnaka@andrew.cmu.edu
//Abstract Clock




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

//--------------------------
function draw() {
	background ('lightpink')
	
	var H = hour ()
	var M = minute()
	var S = second ()

	fill (96, 139, 209)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (90, 168, 89)
	triangle (width/2, S*5, height/2, H, 10, M) 
	push()
	translate (50,50)
	fill (90, 168, 89)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (96, 139, 209)
	triangle (width/2, S*5, height/2, H, 10, M) 
	push ()
	translate (50, 50)
	fill (96, 139, 209)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (90, 168, 89)
	triangle (width/2, S*5, height/2, H, 10, M) 
	push ()
	translate (50, 50)
	fill (90, 168, 89)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (96, 139, 209)
	triangle (width/2, S*5, height/2, H, 10, M)
	push ()
	translate (50, 50)
	fill (96, 139, 209)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (90, 168, 89)
	triangle (width/2, S*5, height/2, H, 10, M)
	push ()
	translate (50, 50)
	fill (90, 168, 89)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (96, 139, 209)
	triangle (width/2, S*5, height/2, H, 10, M)
	pop ()

}

AbstractClock-Project-06-mdambruc

sketch

//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//Section C
//Project-06
var buffer = 10;
var ybuffer = 20;
function setup() {
    createCanvas(610, 350);
}

function draw() {
    var s = second();
    var m = minute();
    var h = hour();
    var d = day();
    var m = month();
    background(84, 162, 178);
    secondboxes();
    minuteboxes();
    hourboxes();
    dayboxes();
    monthbox();
    }

function secondboxes(){
  var sx = 10;
  var diam = 10;
  var sy = 50;
  var spacing = 10;
  var count = 62;//seconds in a minute
  var s = second();
  text(s, buffer, sy + ybuffer);
  text("seconds", buffer + ybuffer, sy + ybuffer);
  fill(255);
  for (var i = 2; i < count; i++) {
  ellipse(sx, sy, diam, diam);
  sx = sx + spacing;
  if (i == s){
    fill(0);//current second
  } else{
    fill(255);
  }
}
}
function minuteboxes(){
  var mx = 10;
  var diam = 10;
  var my = 100;
  var spacing = 10;
  var count = 62;//minutes in an hour
  var m = minute();
  text(m, buffer, my + ybuffer);
  text("minutes", buffer + ybuffer, my + ybuffer);
  fill(255);
  for (var i = 2; i < count; i++) {
  ellipse(mx, my, diam, diam);
  mx = mx + spacing;
  if (i == m){
    fill(0);//current minute
  } else{
    fill(255);//
  }
}
}

function hourboxes(){
  var hx = 10;
  var diam = 10;
  var hy = 150;
  var spacing = 10;
  var count = 26;//24 hours in a day
  var h = hour();
  text(h, buffer, hy + ybuffer);
  text("hours", hx + ybuffer, hy + ybuffer);
  fill(255);
  for (var i = 2; i < count; i++) {
  ellipse(hx, hy, diam, diam);
  hx = hx + spacing;
  if (i == h){
    fill(0);//current hour
  } else{
    fill(255);//
  }
}
}

function dayboxes(){
  var dx = 10;
  var diam = 10;
  var dy = 200;
  var spacing = 10;
  var count = 33;//31 days in october
  var d = day();
  text(d, buffer, dy + ybuffer);
  text("days", dx + ybuffer, dy + ybuffer);
  fill(255);
  for (var i = 2; i < count; i++) {
  ellipse(dx, dy, diam, diam);
  dx = dx + spacing;
  if (i == d){
    fill(0);//current day
  } else{
    fill(255);//
  }
}
}

function monthbox(){
  var mx = 10;
  var diam = 10;
  var my = 250;
  var spacing = 10;
  var count = 14;//12 months in a year
  var m = month();
  text(m, buffer, my + ybuffer);
  text("months", mx + ybuffer, my + ybuffer);
  fill(255);
  for (var i = 2; i < count; i++) {
  ellipse(mx, my, diam, diam);
  mx = mx + spacing;
  if (i == m){
    fill(0);//current month
  } else{
    fill(255);//
  }
}
}

For this Abstract Clock project, I wanted to create a full year calendar. Taking inspiration from the previous calendar assignment I created a calendar that tracks the seconds, minutes, hours, days and months in a year. I enjoy this clock because I believe it is a clock designed for a visual person; showing dates with symbols rather than numbers. My process involved a lot of trial and error with various ideas and finding myself struggling with more complex ideas. I found this project interesting since it made me question the original concept of clocks in general. I enjoyed the idea of making a full year calendar since all of the information is in front of you in a visually pleasing way. Although a bit stressful watching the seconds go by, I improved with using loops and learned a lot from this project.

Project 06 Abstract Clock

I went with the idea of a ballerina. Her point shoe on the stationary leg gives the seconds and the theatre curtain behind her also moves in seconds. The shoe moves back and forth every second; the curtain moves down every second. The floorboards on the stage tell the hour by adding an extra floorboard every hour. The “clock” gives the minute time by moving with the leg from different positions. Every hour it resets back to the first position. The rest of the body and the head was made by lines, triangles, and ellipses. The skirt was made by creating a shape using vertices.

The whole thing was incredibly difficult, and I felt like crying. In the end it worked out, though. I would’ve liked to have just faces of the audience appear to count the minutes instead of having the legs move but I couldn’t figure out a way for that to work (I went through five different approaches but they didn’t work out).sketch


//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Project-06

var dressX;    //Skirt X Coordinates
var dressX1a;
var dressX1b;
var dressX2a;
var dressX2b;

var dressY;   //Skirt Y Coordinates
var dressYa;
var dressYb;
var dressYc;
var dressYd;



 var x = 280;
 var y = 580;
 var h;
 var m;
 var s;
 var footHeight = 40;
 var footWidth = 90;
 var footX = 420;
 var spacing = 5;
 var floorSpacing = 50;
 var floorX = 10;
 var floorY = 780;
 var audienceSpacing = 80;
 var audienceSpacing2 = 50;
 var hbx = 0;
 var vbx = 156;
 var hby = 156;
 var legX = 350;
 var legY = 700;
 

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

function draw() {
    background(0);

    dressX = (0);
    dressX1a= dressX - 70; 
    dressX1b= dressX1a - 10; 
    dressX2a= dressX+50; 
    dressX2b= dressX2a+10;

    dressY = (0)+ 120;
    dressYa =  dressY+ 80;
    dressYb = dressYa + 20;
    dressYc = dressY +50;
    dressYd = dressYc + 20;

    angleMode(DEGREES);
    h = hour();
    m = minute() ;
    s = second();

   
   curtains();
   Floor();
   floorBoards();
 
   push();
   translate(width/2,height/7);
   scale(2.0);
   skirt();
   pop();
   
   standingLeg();
   movingLeg();
   body();
   foot(); 

   if (s%2==0){
      footHeight = 90;
      footWidth = 40;     //seconds
      footX = 400;
   }
   else{
    footHeight = 40;     //seconds
    footWidth = 90;
    footX = 420;
   }


}



function skirt (){
    strokeWeight(0);
   fill(250,152,189);
    beginShape();
    vertex(dressX,dressY);
    vertex(dressX1a,dressYc);
    vertex(dressX1b,dressYd);
    vertex(dressX2b,dressYb);
    vertex(dressX2a,dressYa);
    vertex(dressX,dressY);
    endShape();     //skirt
}

function standingLeg(){
   stroke(250,152,189);
   strokeWeight(45);         //standing leg
   line(400,420,400,700);      
}

function movingLeg(){
   stroke(250,152,189);
   strokeWeight(45);         //moving leg 
    push();
    translate(350,460);
    if (m<60){
      rotate(3*m);
       
    }

    else if (m>=60){
      rotate(180);
       
    }
    
    line(0,0,0,280);
    strokeWeight(0);
    fill(250,152,189);
    ellipse(0, 280,40,90);
    //minute hand
    pop();

}


function body(){
    strokeWeight(0);
    fill(250,152,189)         //actual body
    triangle(400,460,470,300,320,300);

   stroke(250,152,189);
   strokeWeight(25);         //right arm
   line(320,300,270,200); 
   line(270,200,350,100);

   stroke(250,152,189);
   strokeWeight(25);         //left arm
   line(470,300,520,200);
   line(520,200,450,100); 

   ellipse(440,230,20,20);  //hair bun

   strokeWeight(0);           //head
   fill(250,152,189);
   ellipse(400,235,80,100);

   strokeWeight(45);  //neck
   line(400,300,400,320);
}

function foot(){
    strokeWeight(0);
    ellipse(footX,730,footWidth,footHeight);
}

function curtains(){
  for (i=0;i<s;i++){           //curtains
    fill(198,42,42);
    ellipse(width/2,1+(i*spacing),width+40,10);
   }
}
 
 function Floor(){
    fill(66,47,45);   //floor
   ellipse(400,800,1300,450);
 }

 function floorBoards(){
  for (i=0;i<h;i++){           //floorbaords
    stroke(0);
    strokeWeight(5);
    line(0-200+(i*floorSpacing),545,width/2,1000);
   }
 }



/* 
   for (i=0;i<10;i++){
    for (var j = 0; j < 6; j ++) {
            fill(255, 140);
            strokeWeight(0);
            noStroke();
            fill(252,185,139);       //audience
           ellipse(35+(i*audienceSpacing),270+(j*audienceSpacing2),40,40);
        }    
   } 


     
     fill(255,155,220,50);                     //horrizontal black box
     rect(hbx,100+hby,width,310); 


     fill(255,0,255,50); 
     rect(0,vbx,width,310); //vertical black box
     
     if((s<10)&(s%10!=0)){
      hbx = secs*95;
    }else if(s%10!=0){
      hbx = 0;
      secs= s-10;
    }

    push();
    frameRate(1);
    if(s%10==0){
     vbx = vbx-65;
    }
    pop();

    */

(The image is cut off for some reason. However, it works on my computer and is 800×800.)

Yugyeong Lee Project – 06

sketch

//Yugyeong Lee
//Section A (9:00AM)
//yugyeonl@andrew.cmu.edu
//Project 06

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

function draw() {
    background(110, 181, 192);
    angleMode(DEGREES);

	var s = second();
	var m = minute();
	var h = hour();

	var secondBarWidth = map(s, 0, 60, 0, 388);
	var diamM = 80;
	var diamH = 34;
	var angleM = map(m, 0, 60, 0, 360);
	var angleH = map(h, 0, 24, 0, 360);
	var mx = cos(angleM) * (diamM / 2);
	var my = sin(angleM) * (diamM / 2);
	var hx = cos(angleH) * (diamH / 2);
	var hy = sin(angleH) * (diamH / 2);
	var centerMx = 500;
	var centerMy = 127.5;
	var centerHx = 85;
	var centerHy = 75;

	textSize(10);
	noStroke();
	fill(10, 108, 132);
	textFont("Comic Sans");
	text(nf(h, 2, 0), 120, 70);
	text(":", 135, 70);
	text(nf(m, 2, 0), 140, 70);
	text(":", 155, 70);
	text(nf(s, 2, 0), 160, 70);

	//design
	noStroke();
	fill(10, 108, 132);
	ellipse(40, 30, 25, 25);
	ellipse(centerHx, centerHy, 20, 20);
	ellipse(centerMx, centerMy, 50, 50);
	fill(110, 181, 192);
	strokeWeight(3);
	stroke(10, 108, 132)
	ellipse(60, 40, 30, 30);
	noFill();
	strokeWeight(5);
	ellipse(centerHx, centerHy, 54, 54);
	ellipse(centerMx, centerMy, 100, 100);

	//representation of second, minute, hour
	arc(centerMx, centerMy, diamM, diamM, 0, angleM)
	arc(centerHx, centerHy, diamH, diamH, 0, angleH)
	fill(10, 108, 132);
	noStroke();
	rect(112, 75, secondBarWidth, 5);
}

I was inspired to create an abstract clock only using basic geometric shape such as rectangle and ellipse. The small ellipse represents hour while the big one represents minutes. The rectangle represents seconds.

Looking Outwards-06-mdambruc

Mike Love “Permanent Holiday” 2013

Mike Love’s acoustic session video

screen-shot-2016-10-07-at-10-55-22-pm

Visual aid of layered syllables

http://www.mikelovemusic.com/bio/

Mike Love is a musician based in Oahu, Hawaii who uses randomness in his music. Over 12 loops he builds a song through sporadic syllables that culminate into full lyrics. I admire the amount of precision it requires for Love to be able to succeed in communicating his lyrics over the numerous loops he creates. I also admire his unique approach to making music, and how it requires a process. Love randomly chooses the syllables he wants to say over a single loop and by the end of 12 loops he has created full lyrics. Love believes that the process and message is most important in his work, focusing on messages that affect change when it is necessary, specifically focusing on being accountable for your actions.

Isabella Hong – Project – 06

For my abstract clock, I chose to visually declare the current hour, minute and second using different fruits. The large oranges signify the current hour based on a 12 hour rotation and the little apples and blueberries represent the minutes and seconds respectively.

ijhong-06

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-06

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

function draw() {
	//current hour, minute, and second of the day 
	var h = hour()%12; 
	var m = minute(); 
	var s = second(); 
	//light orange background 
	background(255, 250, 195);
	//loop orange function (hour) 
	var x = 32; 
	for (var i = 0; i < h; i++) {
		orange(x, 90); 
		x += 58;  
	}
	//loop apple function (min)
	var a = 0;
	for (var y = 175; y <= 275; y += 50) {
		for (var x = 17; x < width; x += 35) {
			if (a < m) {
				apple(x, y); 
			}
			else {
				break;
			}
			a += 1; 		
		}
		if (a == m) {
			break; 
		} 
	}
	//loop blueberries function (sec)
	var b = 0; 
	for (var y = 340; y <= 440; y += 50) {
		for (var x = 17; x < width; x += 35) {
			if (b < s) {
				blueberries(x, y);
			}
			else {
				break;
			}
			b += 1; 
		}
		if (b == s) {
			break;
		}
	}

}

//oranges represent the number of hours 
function orange(x, y) {
	//orange base 
	noStroke(); 
	fill(255, 165, 0); 
	ellipse(x, y, 50, 50);
	//orange leaf 
	noStroke(); 
	fill(0, 100, 0); 
	arc(x, y - 25, 50, 5, 270, 45, OPEN);
	//orange stem 
	stroke(101, 67, 33); 
	strokeWeight(5); 
	line(x, y - 25, x - 5, y - 35); 
}

//apples represent the number of minutes 
function apple(x, y) {
	//apple base 
	noStroke(); 
	fill(200, 0, 0);
	ellipse(x, y, 20, 20); 
	//apple leaf 
	noStroke(); 
	fill(0, 100, 0);
	arc(x, y - 13, 25, 3, 270, 45, OPEN); 
	//apple stem 
	stroke(101, 67, 33); 
	strokeWeight(2); 
	line(x, y - 10, x - 5, y - 15); 
}

//blueberries represent the number of seconds 
function blueberries(x, y) {
	//blueberry base 
	noStroke();  
	fill(0, 0, 103);	
	ellipse(x, y, 20, 20); 
	//highlight
	fill(255); 
	ellipse(x + 3, y - 3, 5, 5); 
	//leaves 
	noStroke(); 
	fill(0, 100, 0); 
	ellipse(x + 5, y - 10, 10, 5); 
	ellipse(x - 5, y - 10, 10, 5); 
}

My process work - I shuffled through a variety of objects that could potentially be used. — My process work – I shuffled through a variety of objects that could potentially be used.

Project 06 – Abstract Clock-sehenry

For this project, a ton of ideas came to my mind but one of them stuck. The idea that a shape could increase in increments as a representation of seconds intrigued me. I then just played around with how I wanted the hour and minute things to go. I started sketching what it could look like and realized that the other two sets of time would be relatively easy to make. I love the way the clock turned out. I used the normal settings of my normal clock for this one as well so it took less time than I originally thought.

sketch

//Seth Henry

//Tuesdays at 10:30

//sehenry@andrew.cmu.edu

//Abstract Clock Project 6


//Global Variables
var sCount = 0
var mCount = 0
var hCount = 0


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

function draw() {

var centerX = width/2 //center w
var centerY = height/2 //center h
var s = second(); //second
var h = hour()%12; //24hrs/2
var m = minute(); //minutes

    background(100,100,s*2); //changes color as time goes on. 
    
    push();
    for(sCount=0;sCount<=s;sCount+=1){ //counts seconds
        var secondPos = sCount*6
       }
    fill(20,secondPos,secondPos); //different colors as different seconds appear.
    ellipse(centerX,centerY,secondPos,secondPos); //circle that increases until it reaches 60 seconds
    translate(centerX,centerY); //translates the origin to (0,0)
    rotate(millis()/800); //Random rotation of rectangles 
    rectMode(CENTER);
    fill(100,100,secondPos);
    rect(0,0,secondPos,50); //inside rectangle

    push();
    fill(100,secondPos-60,100);
    rotate(millis()/900); //rotate slower than first rectangle
    rectMode(CENTER);
    rect(0,0,secondPos,50); //Second rectangle inside ellipse
    pop();
    pop();

    line(0,70,500,70); //upper boundary for circle and line for hour representation
    line(0,430,500,430);//lower boundary for circle and line for minute representation



    strokeWeight(2);
    for(mCount=0;mCount<m;mCount+=1){ //counts minutes
        var minutePos = mCount*6
        fill(minutePos,secondPos,secondPos);
        ellipse(minutePos+76.5,430,5,5);
    }
    push();
     for(hCount=0;hCount<h+1;hCount+=1){ //counts hours
        var hourPos = hCount*32.5+65
        strokeWeight(3); 
        rectMode(CENTER);
        rect(hourPos,70,28,28)
         }
    pop();

    textSize(30) //text for hours
    textAlign(CENTER);
    var htext=hour()%12;
    text(htext,hourPos,120);

    textSize(15) //text for minutes
    textAlign(CENTER);
    var mtext=minute();
    text(mtext,minutePos+76.5,425);
    
}

Looking Outwards-06 Alison Hoffman

screen-shot-2016-10-07-at-10-32-21-pm

While researching computational art that uses randomness I stumbled upon the blog of Fletcher Bach. I was immediately mesmerized by his generative terrain pieces (screenshot above). He has created this interesting pieces with Processing and random lines that get added in the background. What I admire most about this piece is that the gray scale and rather simple composition allow the randomness to speak for itself. While simple in form (its lines and color), it is complex and dimensional in scope. The randomness makes this piece dynamic and visually appealing. To see his pieces check out his blog. http://fletcherbach.com/filter/processing/COMPUTATIONAL-ART