Month: October 2017

agusman-Project06-AbstractClock

sketch

//Anna Gusman
//agusman@andrew.cmu.edu
//Section E
//
//Project 06 Abstract Clock

var prevSec;
var millisRolloverTime;
var circleorigin = 0;

var milsecangle = 0;
var secondsangle = 0;
var minutesangle = 0;
var hoursangle = 0;

var degreespmsec;
var degreespsec;
var degreespmin;
var degreesphour;


//--------------------------
function setup() {
    createCanvas(300, 300);
    background(255);
    millisRolloverTime = 0;
    angleMode(DEGREES);
}

//--------------------------
function draw() {
    background(255, 10);

    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();

    // Reckon the current millisecond,
    // particularly if the second has rolled over.
    // Note that this is more correct than using millis()%1000;
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    var hourBarWidth   = map(H, 0, 23, 0, width);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    var secondBarWidth = map(S, 0, 59, 0, width);

    // Make a bar which *smoothly* interpolates across 1 minute.
    // We calculate a version that goes from 0...60,
    // but with a fractional remainder:
    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, width);
    var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, width);

    noFill();
    // ellipse(150, 150, 135, 135);
    // stroke(0, 10);
    // ellipse(150, 150, hourBarWidth, hourBarWidth);
    // stroke(0);
    // ellipse(150, 150, secondBarWidthChunky, secondBarWidthChunky);
    // stroke(0);
    // ellipse(150, 150, secondBarWidthSmooth, secondBarWidthSmooth);
    // stroke(0);
    // ellipse(150, 150, minuteBarWidth, minuteBarWidth);

    degreespmsec = map(S + (mils / 1000.0), 0, 59, 0, 360);
    push();
    translate(150, 150);
    rotate(milsecangle);
    stroke(255, 0, 0);
    ellipse(30, 30, 50, 50);
    pop();
    milsecangle = degreespmsec;

    degreespsec = map(S, 0, 59, 0, 360);
    push();
    translate(150, 150);
    rotate(secondsangle);
    stroke(255, 0, 0);
    ellipse(30, 30, 50, 50);
    ellipse(38, 38, 75, 75);
    pop();
    secondsangle = degreespsec;

    degreespmin = map(M, 0, 59, 0, 360);
    push();
    translate(150, 150);
    rotate(minutesangle);
    stroke(0, 0, 255);
    ellipse(95, 95, 30, 30);
    pop();
    minutesangle = degreespmin;

    degreesphour = map(H, 0, 11, 0, 360);
    push();
    translate(150, 150);
    rotate(hoursangle);
    stroke(0, 255, 0);
    ellipse(20, 20, 250, 250);
    pop();
    hoursangle = degreesphour;

    // 30 * 12 = 360, different center for every hour, hoursangle
    // then write mincircle function relative to that
    //variable  = 20, 0, + 30 degrees 
}

//get center of outside circle
//

I think I am on the cusp of honing in on a very interesting interaction, but the final execution in the period of time we were allotted isn’t very satisfactory to me. I was inspired to create a clock based on an optical illusion of circular infinity- after coming across this captivating image, I entertained myself with trying to map out the logic behind it:

In my logic, I detail how the circles would be drawn from the outside in, and then rotating the circle matrix by the corresponding time (e.g. mapping 12 (hours) or 60 (seconds) to 360 (degrees)). I would then translate the matrix by the difference between the radius of the parent circle and the child circle. For some reason I’m unsure of, the content uploads folder won’t accept my jpegs or pngs of my sketch work, so I’ll try to amend that as soon as possible.

jknip-Project-06-abstract-clock

sketch

/*Jessica Nip
Section A
jknip@andrew.cmu.edu
Project-06
*/

var sealevel = 250;
var boatlevel = 230;
var rodX = 230;
var rodY = boatlevel+35;
var manX = 170;
var manY = 200;

 //-------------------------
function setup() {
    createCanvas(360, 360);
}
 
 //-------------------------
function draw() {
    background(209,236,245);
    noStroke();

//fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    var mappedS = map(S, 0, 59, 0, rodX);

//create text elements for hours and minute on top
    fill(0);
    textStyle(BOLD);
    text("x " + H, 60,40);
    text("x " + M, 310,40);

//create fish icon
    fill(253,189,3);
    noStroke();
    arc(290, 35, 22, 15, 0, TWO_PI-QUARTER_PI, PIE);
    triangle(275, 45, 270, 35, 290, 35);

//create fish bucket icon
    fill(120);
    rect(20, 20, 30, 30, 5);
    noFill();
    stroke(120);
    arc(35, 25, 30, 20, PI, TWO_PI);

//create sea
    fill(26,91,147);
    rect(0, sealevel, width, height);

//create fishing rod
    noFill();
    stroke(120);
    arc(rodX, rodY, 80, 210, PI+QUARTER_PI, TWO_PI);

//create fisherman
    fill(29,70,149);
    noStroke();
    ellipse(manX, manY, 15, 15);
    arc(manX+10, manY+18, 40, 40, 0, PI+QUARTER_PI, PIE); //add additional spacing between head and body

//create fish bucket
    fill(120);
    rect(manX-80, manY+15, 30, 30, 5);
    noFill();
    stroke(120);
    arc(manX-65, manY+20, 30, 20, PI, TWO_PI);

//create boat
    noStroke();
    fill(235,121,85);
    arc(width/2.5, boatlevel, width/2, height/5, 0, PI);

//create fish
    fill(253,189,3);
    noStroke();
    //map fish movement to seconds of clock
    arc(mappedS+35, rodY, 22, 15, 0, TWO_PI-QUARTER_PI, PIE);
    triangle(mappedS+15, rodY, mappedS+35, rodY, mappedS+20, rodY+10); 

}

When thinking about how to best represent the passing of time, I considered different active and passive activities from eating, exercising, etc. I decided to represent the passage of time in fishing — letting the fish bucket represent hours, the number of fishes caught as minutes, and the movement of fish as seconds.

dnoh-sectionD-lookingoutwards-06

Randomness

Title: Symmetrical
Artist: David Kim

This video was created by a friend who is currently majoring in motion graphics at OTIS College of Art and Design in California. Although the artist himself did not program or randomize the project, through specific parameters and plugins, he created fairly complex “random” sequences that made shapes and lines fly around.

Although I do not know if this video was created through random variables or algorithms, I do understand that it was created with definite random factors such as the directions of the motions of the shapes.

I find it interesting how such complex and random motions could be created through parameters, rather than actual handmade shapes. Controlled randomness, albeit very different from actual randomness, can be applied so easily to artworks such as this to form creations based on the artists’ creativity.

selinal-Project-06

sketch

//Selina Lee
//Section C
//selinal@andrew.cmu.edu
//Project-06

var prevSec;
var millisRolloverTime;
var centX = 300; //center coordinates
var centY = 300;
var numcirc = 12; // number of circles to draw 
var distanceS = 250; //distance away from center with second pi clock 
var distanceM = 225; //distance away from center with minute pi clock 
var distanceH = 175; //distance away from center with hour pi clock 
var angle = 0;  //start angle for circle rotation

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

    millisRolloverTime = 0;
}

function draw() {
	background(170, 170, 255);

	// Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // Reckon the current millisecond, 
    // particularly if the second has rolled over.
    // Note that this is more correct than using millis()%1000;
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);
    
    var hourArcAngle   = map(H, 0, 23, 0, 360); //angles away from 0 or 12 o'clock
    var minuteArcAngle = map(M, 0, 59, 0, 360);
    
    // Make a bar which *smoothly* interpolates across 1 minute.
    // We calculate a version that goes from 0...60, 
    // but with a fractional remainder:
    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    //var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, width);
    var secondArcAngleSmooth  = map(secondsWithFraction,   0, 60, 0, width);
    
    var strike = radians(270); //so that arcs start at 12:00 placement

    var alphaincS = map(S, 0, 59, 0, 155); //increase transparency from full circle
    var alphaincM = map(M, 0, 59, 0, 105); 
    var alphaincH = map(H, 0, 23, 0, 105);

    noStroke();
    fill(255, 230, 130, 100 + alphaincS);
    arc(centX, centY, 500, 500, strike, radians(secondArcAngleSmooth) + strike); //yelllow outside circle for seconds

    fill(255, 180, 130, 150 + alphaincM);
    arc(centX, centY, 450, 450, strike, radians(minuteArcAngle) + strike); //orange circle for minutes

    fill(255, 150, 130, 150 + alphaincH);
    arc(centX, centY, 350, 350, strike, radians(hourArcAngle) + strike); //red circle for hours by 24

    var angleObjectS = 360/numcirc; //divides circles evenly on outside
	for (var i = 0; i < numcirc; i++) //for loops for making circles revolve around center point
	{
		var posX = centX + distanceS *cos( radians(angleObjectS*i + angle) );
	var posY = centY + distanceS *sin( radians(angleObjectS*i + angle) );
	fill(255, 0, 0, 50);
	ellipse(posX, posY, 30, 30);
	}

	var angleObjectM = 360/numcirc;
	for (var i = 0; i < numcirc; i++)
	{
	var posX = centX + distanceM *cos( radians(angleObjectM*i + angle) );
	var posY = centY + distanceM *sin( radians(angleObjectM*i + angle) );
	fill(255, 150, 0, 50);
	ellipse(posX, posY, 30, 30);
}
	var angleObjectH = 360/numcirc;
	for (var i = 0; i < numcirc; i++)
	{
	var posX = centX + distanceH *cos( radians(angleObjectH*i + angle) );
	var posY = centY + distanceH *sin( radians(angleObjectH*i + angle) );
	fill(255, 255, 0, 50);
	ellipse(posX, posY, 30, 30);
}
}

Project 06 – Yugyeong Lee

sketch

//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Project 06

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

function draw() {
    //gradient background
    var from = color(127, 188, 215);
	var to = color(255);
    setGradient(0, height, from, to);
    //variables for time
	var h = hour();
	var m = minute(); 
	var s = second();
	//mapping ground color based on hour
    noStroke();
    r = map(h, 0, 24, 190, 0);
    g = map(h, 0, 24, 255, 80);
    b = map(h, 0, 24, 180, 30);
    fill(r, g, b);
    rect(0, height-30, width, 30);
	//mapping positionY based on minute
    var positionY = map(m, 0, 60, 416, 156);
	upHouse(positionY);
	//balloons increase and move based on second
	for (var i = 0; i < s; i++) {
		frameRate(1); //frame changes once per second
		strokeWeight(.25);
		balloonX = random(85, 135);
		balloonY = random(65, 120);
		line(105, positionY-37, balloonX, positionY-balloonY);
		fill(random(249, 255), random(140, 255), random(150, 200));
		ellipse(balloonX, positionY-balloonY, 11, 14);
		}
    }

function setGradient (y, h, from, to) {
	// top to bottom gradient
    for (var i = y; i <= y+h; i++) {
      var inter = map(i, y, y+h, 0, 1);
      var c = lerpColor(from, to, inter);
      stroke(c);
      strokeWeight(2);
      line(y, i, y+h, i);
	}
}

function upHouse (y) {
	//function to create the house
	noStroke();
	//base
	fill(245, 202, 170);
	rect(73, y, 62, 38);
	fill(126, 176, 200);
	rect(73, y, 62, 10);
	//roof
	fill(51);
	quad(74, y-28, 136, y-28, 144, y, 66, y);
	//chimney
	fill(88, 67, 50);
	rect(102, y-36, 6, 10);
	//door
	fill(78, 60, 45);
	rect(95, y+5, 9, 25);
	//porch&stair
	fill(99, 71, 59);
	rect(72, y+27, 18, 11);
	for (var i = 0; i < 4; i++) {
		fill(255);
		stroke(150);
		strokeWeight(0.25);
		rect(90, y+27+2.75*i, 18.5, 2.75);
	}
	noStroke();
	fill(255);
	rect(74, y, 2, 27);
	rect(88, y, 2, 27);
	rect(76, y+13, 12, 2);
	rect(79, y+15, 2, 12);
	rect(83, y+15, 2, 12);
	//other components of house
	fill(187, 202, 94);
	rect(108, y, 28, 38);
	fill(245, 248, 162);
	triangle(104, y+5, 140, y+5, 122, y-38);
	rect(84, y-20, 12, 10);
	triangle(82, y-18, 98, y-18, 90, y-30);
	//outline
	stroke(141, 202, 233);
	strokeWeight(3.5);
	line(140, y, 122, y-38);
	line(122, y-38, 104, y);
	line(98, y-18, 90, y-30);
	line(90, y-30, 82, y-18);
	//windows
	fill(240, 208, 100);
	stroke(265);
	strokeWeight(1);
	rect(86, y-20, 6, 7);
	rect(116, y-14, 10, 10);
	rect(115, y+14, 12, 14);
}

*sketch updated to modified code based on question on Piazza

I was inspired by the movie “UP” to create this abstract clock design. The number of balloons increases every second while moving around to random points to illustrate the balloons floating in the air. The number of balloons goes back to 0 when it hits the next minute. The color of the balloons are also randomized within a range to have variety of shades. Each minute is indicated by the house’s Y position as the house moves up. The ground color slowly changes every hour to indicate the current time. A separate function had to be created to generate the house, which uses variable y that is mapped to minute().

cduong-project-06-abstract clock

sketch

//Name: Colleen Duong
//Class: Section D
//Email: cduong@andrew.cmu.edu
//Project-06-Abstract Clock


//all of the numbers for the x-coordinates of the falling snow
var snowfallx = [400, 300, 200, 100,
                  450, 350, 250, 150, 50,
                  400, 300, 200, 100,
                  450, 350, 250, 150, 50,
                  400, 300, 200, 100,
                  450, 350, 250, 150, 50,
                  400, 300, 200, 100,
                  450, 350, 250, 150, 50,
                  400, 300, 200, 100,
                  450, 350, 250, 150, 50,
                  400, 300, 200, 100,
                  450, 350, 250, 150, 50,
                  400, 300, 200, 100,
                  450, 350];

//All of the numbers for the y-coordinates of the falling snow
var snowfally = [15, 30, 20, 40, 35,
                15, 25, 30, 25,
                30, 20, 30, 20, 30,
                70, 50, 60, 90,
                130, 100, 120, 150, 160,
                150, 160, 130, 170,
                190, 170, 190, 180, 180,
                200, 210, 230, 240,
                210, 240, 260, 210, 220,
                290, 300, 310, 270,
                330, 340, 350, 320, 320,
                350, 360, 340, 340,
                360, 400, 430, 420, 400]

var snowd = 5; //snow diameter

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

function draw() {
  background(240, 235, 231);

  var H = hour();
  var M = minute();
  var S = second();

//Design Code --> The Mountains
  noStroke();
    //Mountain 5 (Lightest Blue)
      fill(160, 201, 218);
      triangle(50, 500, 400, 500, 230, 180);
      triangle(-50, 500, 300, 500, 110, 100);
      triangle(-50, 500, 150, 500, 50, 130);
      triangle(0, 500, 300, 500, 150, 100);

    //Mountain 4
      fill(71, 153, 190);
      triangle(180, 500, 300, 500, 250, 280);
      triangle(200, 500, 450, 500, 340, 300);
      triangle(350, 500, 450, 500, 400, 320);
      triangle(350, 500, 460, 500, 420, 320);
      triangle(400, 500, 520, 500, 470, 350);

    //Mountain 4
      fill(51, 129, 175);
      triangle(180, 500, 400, 500, 300, 250);
      triangle(300, 500, 450, 500, 380, 280);

    //Mountain 4
      fill(38, 94, 151);
      triangle(300, 500, 450, 500, 360, 370);
      triangle(350, 500, 500, 500, 450, 300);

    //Mountain 3
      fill(31, 66, 120);
      triangle(-30, 500, 100, 500, 50, 200);
      triangle(-30, 500, 100, 500, 10, 250);
      triangle(20, 500, 200, 500, 110, 200);
      triangle(60, 500, 300, 500, 200, 200);

    //Mountain 2
      fill(18, 49, 87);
      triangle(-30, 500, 100, 500, 50, 300);
      triangle(-30, 500, 100, 500, 10, 350);
      triangle(20, 500, 200, 500, 110, 370);
      triangle(60, 500, 300, 500, 200, 440);
      triangle(70, 500, 300, 500, 200, 350);
      triangle(90, 500, 330, 500, 300, 440);
      triangle(160, 500, 400, 500, 300, 300);
      triangle(300, 500, 450, 500, 400, 350);
      triangle(400, 500, 500, 500, 450, 400);

    //Mountain 1 (Darkest Blue)
      fill(0, 7, 18);
      triangle(-30, 500, 100, 500, 50, 400);
      triangle(20, 500, 200, 500, 130, 420);
      triangle(60, 500, 300, 500, 200, 440);

//Design Code --> The mountains

//When it becomes 59 minutes a flag is drawn on the top of the mountain to indicate that the onion has reached the peak (victory!!!)
if(M == 59){
  fill(255);
  rect(130, 100, 15, 10);
  fill(240, 235, 231);
  triangle(130, 110, 130, 100, 135, 105)
  push()
  stroke(0);
  line(145, 100, 145, 120);
  pop()
}

//Sprout climbs up mountain (Minutes)
  var sprout = M * 2
  fill(255);
  ellipse(140, 240-sprout, 10, 10);
  rect(138, 240-sprout, 4, 10, 10);
  fill(129, 188, 179-M);
  ellipse(136, 235-sprout, 8, 5);
  ellipse(144, 235-sprout, 8, 5);



//Changing Moon Shape (Hours)
  for(var moon = 1; moon < H + 1; moon++){
    fill(196, 219, 230);      //blue moon
    ellipse(400, 100, 100, 100);
    fill(240, 235, 231);      //cut moon
    ellipse(450, 100, (moon*3)+70, (moon*3)+70); //changes only the part of the  moon that cuts the moon
    fill(214, 233, 242); //Clouds
    ellipse(300, 120, 25, 10);
    ellipse(330, 140, 70, 20);
    ellipse(360, 130, 70, 20);
    ellipse(400, 150, 60, 15);
  }

//Making snow fall (Seconds) -- Amount of Snow = Number of Seconds
for(var snowfall = 0; snowfall < S; snowfall++){
  fill(255);
  ellipse(snowfallx[snowfall], snowfally[snowfall], snowd, snowd);
}

}

I wanted to create some sort of landscape image and I really wanted to create an image that incorporated receding mountains so I tried to sketch something up on illustrator. I noticed that I also had a big chunk of space on the top right so I wanted to add the moon there to use as the hour indicator since it seemed to fit with the overall mountain theme.

The next part of my thought process was that since my mountains were blue colored they seemed as though they were cold, so I wanted to create a snowy looking scenario, which is why I created something that looked like falling snow with a for loop and an array.

My last thing is that I wanted to incorporate something that I’ve been using in all of my projects so far, which is a white onion (the white circle) with a green sprout coming out of its head.

The sprout slowly moves up the mountain as minutes pass and when it finally reaches the peak (59 minutes) it puts a flag on top of it (victory!!).

mstropka-Project-06-E

sketch

//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Project-06

function setup() {
    createCanvas(480,480);
    angleMode(DEGREES);
}

function draw(){
  background(225);
  //variables for hours, minutes, and seconds
  h = hour();
  m = minute();
  s = second();

  //display text under clock
  text(h%12 + ':' + m + ':' + s, 220, 400);
  //rotate entire canvas -90 degrees so 0 degrees is pointing up
  push()
  translate(width/2, height/2);
  rotate(-90);
  //draw arc
  strokeWeight(2);
  //end of arc is defined by the value of seconds
  var sAngle = map(s, 0, 60, 0, 360);
  fill(255, 51, 51, 40);
  arc(0, 0, 250, 250, 0, sAngle);

  //draw a smaller arc where the end is defined by the value of minutes
  var mAngle = map(m, 0, 60, 0, 360);
  fill(51, 153, 255, 50);
  arc(0, 0, 200, 200, 0, mAngle)

  //instead of mapping the value of hours, map the value of h%12,
  //so 12 hours fits into 360 degrees instead of 24
  //draw arc where the end point is defined by h % 12
  var hAngle = map(h % 12, 0, 12, 0, 360);
  fill(128, 128, 128, 70);
  arc(0, 0, 150, 150, 0, hAngle)

  pop();

}

For this project, I started with the code I used for assignment C, which drew arcs that formed completed circles as the values for hours, minutes, and seconds increased. In the assignment I hid the arcs and drew lines that pointed to the endpoints to create the hands of a clock. For this, I got rid of the hands and filled in the arcs with transparent colors.

rmanagad-project06-abstractclock

sketch

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

//color directory
	// background and papercrease(2, 53, 61);
	// paperlightred(187, 42, 47)
	// paperdarkred(160, 42, 56)
	// earthocean(65, 200, 225)
	// earthland(6, 181, 153);
	// earthcloudlight (204, 204, 204)
	// earthclouddark (178, 178, 178);
	// LightCometStreak(195, 215, 216);
	// medCometStreak (129, 166, 176)
	// darkCometStreak (37, 60, 84);

//earth parameters
var earthWH = 128; 
var earthX = 240;
var earthY = 240;
var landXY1 = 0;
var landXY2 = 0;
var landXY3 = 0;
var landXY4 = 0;

//movement parameters
var dirX = 1; 
var dirY = 1;
var dirXComet = 1;
var dirYComet = 1;
var speed = 0.1;
var speedComet = 0.1


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

function draw() {
	rectMode(CENTER);
	angleMode(DEGREES);
	var mil = millis();
	var sec = second();
	var min = minute();
	var h = hour();
	var revert = h % 12 // to make hour go back to 0 position at 12:00

	background(2, 53, 61);
	noStroke();
		fill(65, 200, 225);
		ellipse(earthX, earthY, earthWH, earthWH);
				earthX += dirX * speed/2; // motions the x cooridnate
				earthY += dirY * speed/2; // motions the y coordinate
		//constraining wiggle movement
		if (earthX > width/2 + 0.5 || earthX < width/2 - 0.5) {
			dirX = -dirX; 
		} 
		else if (earthY > height/2 + 0.5 || earthY < height/2 - 0.5) {
			dirY = random(-1, 1);
		}

	//land masses start
			push();
			translate(width/2, height/2)
			rotate(revert);
				push()
				rotate(12.45);
				fill(6, 181, 153);
				ellipse(landXY1-50, landXY1, 16.8, 39.5);
					landXY1 += dirX * (speed/2); // speed cut to modify motions
					landXY1 += dirY * (speed/2); 
				pop();
				push()
				rotate(1);
				fill(6, 181, 153);
				ellipse(landXY2-10, landXY2-25, 12.725, 21.3);
					landXY2 += -dirX * (speed/4); // directions reversed to modify motions
					landXY2 += -dirY * (speed/4); 
				pop();
				push()
				rotate(20);
				fill(6, 181, 153);
				ellipse(landXY2-13, landXY2-14, 21.21, 26.1);
				pop();
				push()
				rotate(-10);
				fill(6, 181, 153);
				ellipse(landXY2-1, landXY2-15, 15.9, 20.4);
				pop();
				push()
				rotate(0);
				fill(6, 181, 153);
				ellipse(landXY2-3.4, landXY2-7.6, 15.9, 20.4);
				pop();
				push()
				rotate(20);
				fill(6, 181, 153);
				ellipse(landXY3+36, landXY3+18.7, 30, 46.12);
					landXY3 += dirX * (speed/3); 
					landXY3 += -dirY * (speed/3); //direction reversed to modify motion 
				pop();
				push()
				rotate(-20);
				fill(6, 181, 153);
				ellipse(landXY4+30, landXY4-40, 18, 18.5);
					landXY4 += -dirX * (speed/6); // direction reversed to modify motion
					landXY4 += dirY * (speed/6); 
				pop();
			pop();

	// paper airplane start
		push();
		translate(width/2, height/2); // translates starting point to center of canvas
		for (var i = 0; i < sec/3; i++) {
		rotate(mil/30); //motion produced via rapid milliseconds
		stroke(160, 42, 56)
		strokeWeight(1)
		line(230-width/2, 140.3-height/2, 220-width/2, 140.3-height/2);
		}
		pop();
		push();
		translate(width/2, height/2); // translates starting point to center of canvas
		for (var i = 0; i < 10; i++) {
		rotate(mil/30); //motion produced via rapid milliseconds
		stroke(160, 42, 56)
		strokeWeight(2)
		line(230-width/2, 140.3-height/2, 220-width/2, 140.3-height/2);
		}
		pop();
		push();
		translate(width/2, height/2); // translates starting point to center of canvas
		rotate(sec*6); //Dividing function to rotate in a full revolution in 60 ticks
		fill(160, 42, 56)
		triangle(240-width/2, 135.8-height/2, 234-width/2, 140.4-height/2, 240-width/2, 144.8-height/2);
		fill(187, 42, 47)
		triangle(240-width/2, 130.7-height/2, 264-width/2, 140.5-height/2, 240-width/2, 150.43-height/2);
		stroke(2, 53, 61)
		strokeWeight(1)
		line(240-width/2, 140.3-height/2, 251-width/2, 140.3-height/2)
		pop();

	//comet start
		push();
		translate(width/2, height/2); // translates starting point to center of canvas
		rotate(min); //Dividing function to rotate in a full revolution in 60 ticks
		noStroke();

		//darkStreaks
		fill(129, 166, 176);
		rect(247.2-width/2, 67.3-height/2, 34.06, 2, 30);
		fill(129, 166, 176);
		rect(242.7-width/2, 73.635-height/2, 34.06, 2, 30);
		fill(129, 166, 176);
		rect(249.16-width/2, 81.05-height/2, 34.06, 2, 30);

		//lightStreaks
		fill(195, 215, 216);
		rect(252.66-width/2, 62.941-height/2, 35.35, 3.05, 30);
		fill(195, 215, 216);
		rect(230.14-width/2, 69.33-height/2, 38.04, 2, 30);
		fill(195, 215, 216);
		rect(243.5-width/2, 78.22-height/2, 38.04, 2, 30);
		fill(195, 215, 216);
		rect(233.8-width/2, 82.06-height/2, 38.04, 2, 30);
		fill(195, 215, 216);
		rect(252.66-width/2, 86.25-height/2, 35.35, 3.05, 30);

		//cometBackLayer
		fill(195, 215, 216);
		ellipse(269.83-width/2, 74.6-height/2, 27.66, 26.07);

		//cometMidLayer
		fill(129, 166, 176);
		ellipse(270.8-width/2, 74.6-height/2, 22.76, 23.33);

		//cometBase
		fill(37, 60, 84)
		ellipse(272.4-width/2, 74.6-height/2, 20.64, 20.64);
			push();
			//comet craters
			translate(272.4-width/2, 74.6-height/2);
			rotate(mil/1.5); // rotates craters within the comet
			fill(195, 215, 216);
				push();
				rotate(20);
				ellipse(1.2, -7, 6, 1.6)
				pop();
				push();
				rotate(-20);
				ellipse(0.75, 8, 6, 2.5)
				pop();
				push();
				rotate(50);
				ellipse(-1, 8, 6, 2)
				pop();
			pop();
		pop();

	fill(163, 77, 47);
	textSize(15);
	text(nf(revert, [2], [0]) + " : " + nf(min, [2], [0]) + " : " + nf(sec, [2], [0]), width/2 - 35, 470); // added nf to second function to get two digits. 
}

My idea stemmed around a nuanced, playful version of the act of orbiting — I wanted to show the journey of a paper airplane flying around the world, placing it at a scale similar to a handful of satellites. The plane’s movement represents seconds, the comet’s orbit’s minutes, and the rotation of the land masses on the earth represents hours, while the smaller dashed line are a creative play on figuring out how to use milliseconds to display agile, not-jittery movement.

After sketching my initial ideas down, I used Adobe Illustrator to plan out the look of the elements as well as the program’s composition.

mstropka-Looking Outwards-06-E

Artist Jason Salavon made these digital works of art that appear to depict blurred out women. The women depicted are actually an amalgamation of all of the Playboy centerfolds from each decade. He creates these images by inputting all of the data from the centerfolds into an algorithm that averages all of the images. You could look at the data from the centerfolds as random information. His algorithm organizes this “random” data to create the image. It is particularly interesting to see these works next to each other because, despite the blurriness of the image, you can see a pattern of how the centerfold girls have become whiter and thinner over the years. This creative method of data visualization makes a statement about how people’s concept of attractiveness and beauty have changed over the last couple decades.

thlai-Project-06-Abstract-Clock

I was inspired by both Wassily Kandinsky’s abstract art and the MOMA’s perpetual calendar. I put the two of these together to create a more minimal version of an abstract clock.

The triangle spins using milliseconds, the red arc grows using seconds, the black circle moves using minutes, and the gray circle moves along the black bar using hours.

sketch

// Tiffany Lai
// 15-104, Section A
// thlai@andrew.cmu.edu
// Project 06 - Clock

function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
}

function draw() {
    background(258, 252, 234);

    fill(250, 244, 219);
    noStroke();
    ellipse(50, 50, 750, 750); // background left circle

    // TIME
    /* Every millisecond, the background triangle will spin. 
    Every second, the red circle will be filled in more.
    Every minute, the black dot in the red circle will move.
    Every hour, the gray circle on the black bar will move. */

    milliseconds(); // background triangle
    seconds(); // red circle
    hours(); // black bar
    minutes(); // black circle inside red circle

    strokeWeight(2);
    stroke(190, 50, 50);
    line(350, 285, height, 285); // line indicating 0 seconds

    noFill();
    stroke(60);
    line(235, 64, 301, 50); // decoration line 1
    line(242, 84, 304, 62); // decoration line 2
    ellipse(width-30, 0, 400, 400); // decoration circle 1
    ellipse(width+10, 10, 400, 400); // decoration circle 2 

    push();
        noStroke();
        fill(0, 53, 176, 80);
        ellipse(370, 190, 100, 100); // blue circle
    pop();
}

// HOURS
function hours() {
    push();
    noStroke();
    fill(100);
    rect(25, 340, 265, 13); // draw bar

    var h = hour() % 12; // 12 hr time instead of 24 hr time
    if (h == 0){
        h = 12;
    }

    var hx = map(h, 0, 11, 32, 282); // map hours to length of bar
    fill(200);
    ellipse(hx, 332, 16, 16); // draw circle
    pop();
    print(hour());
}

// MINUTES
function minutes(){
    var m = minute();
    var mx = map(m, 0, 59, 0, 360);

    push();
        fill(0);
        noStroke();
        translate(270, 285);
        rotate(mx);
        ellipse(100, 0, 16, 16);
    pop();
}

// SECONDS
function seconds(){
    var s = second();
    var sx = map(s, 0, 60, 0, 360); // map minutes to circle

    if (s==60){
        s = 0;
    }

    // red circle
    push();
        noFill();
        strokeWeight(13);
        stroke(223, 97, 97);
        ellipse(270, 285, 230, 230); // draw circle
        
        translate(270, 285);
        strokeWeight(13);
        stroke(190, 50, 50);
        strokeCap(SQUARE);
        arc(0, 0, 230, 230, 0, sx); // arc grows by the second
    pop();
}

// MILLISECONDS
function milliseconds(){
    var prevSec = s;
    var millisRollover = 0;
    var s = second();

    if (s != s) {
        millisRollover = millis();
    }

    var mils = floor(millis() - millisRollover);
    var milsToSeconds = s + (mils/1000.0);
    var milsRotate = map(milsToSeconds, 0, 60, 0, 360);    

    // triangle
    push();
        noStroke();
        translate(width/2-20, height/2);
        rotate(milsRotate);
        fill(239, 234, 203);
        triangle(0, -195, -167, 97, 167, 98); 
    pop();
}