Month: October 2019

CJ Walsh – Project 06 – Abstract Clock

sketch

// CJ Walsh 
// Section D
// cjwalsh@andrew.cmu.edu
// Project-06

var cx, cy;
var sunDim, hourDim, minDim, secDim;
var hx, hy;
var mx, my;
var sx, sy;
var tx = [];
var ty = [];
var starNum;
var colors = ['white', '#D8B495', '#DBD8A2'];

function setup() {
	createCanvas(480, 480);
	cx = width/2;
	cy = height/2;
	sunDim = 0.2*480; // establishing variables for the sun and orbit paths
	hourDim = 0.55*480;
	minDim = 0.85*480;
	secDim = 70;
	starNum = 150;
	
	// loop created for generation of stars
	for (i = 0; i < starNum; i++) {
		tx[i] = random(0, width);
		ty[i] = random(0, height);
	}
}

function draw() {
	background('black');

	// drawing background of stars
	for (i = 0; i < starNum; i++) {
		fill(colors[i%3]);
		ellipse(tx[i], ty[i], 5, 5);
	}

	var s = second(); // establishing variables for sec, min, hr
	var h = hour() % 12; // hours set to 12 hr day rather than 24hr
	var m = minute();

	var sAngle = s/60*2*PI - PI/2; // establishing variables for angle of hands 
	var mAngle = m/60*2*PI - PI/2 + s/60/60*2*PI;
	var hAngle = h/12*2*PI - PI/2 + m/60/12*2*PI;


	// drawing paths of orbit
	noFill();
	stroke('#919191');
	strokeWeight(2);
	ellipse(cx, cy, hourDim, hourDim);
	ellipse(cx, cy, minDim, minDim);

	// drawing sun and radiating lines
	noStroke();
	fill('#DB5858');
	ellipse(cx, cy, sunDim, sunDim);
	noFill();
	stroke('#FFC269');
	for (s = sunDim; s <= sunDim+4*12; s+=12) {
		ellipse(cx, cy, s, s);
	}

	// Hour Planet 
	hx = cx + hourDim/2*cos(hAngle);
	hy = cy + hourDim/2*sin(hAngle);
	drawHour();

	// Minute Planet 
	mx = cx + minDim/2*cos(mAngle);
	my = cy + minDim/2*sin(mAngle);
	drawMin();

	// Second Moon
	sx = mx + secDim/2*cos(sAngle);
	sy = my + secDim/2*sin(sAngle);
	drawSec();
	

}

function drawHour() {
	noStroke();
	fill('#DD6C9F');
	ellipse(hx, hy, 50, 50);
	fill('#844364');
	ellipse(hx+14, hy+3, 15, 15);
	ellipse(hx-6, hy-5, 5, 5);
	ellipse(hx-10, hy+10, 10, 10);

}

function drawMin() {
	noStroke();
	fill('#4A74A5');
	ellipse(mx, my, 35, 35);
	fill('#303C6D');
	ellipse(mx-3, my-6, 17, 13);
	ellipse(mx+4, my+6, 6, 6);
}

function drawSec() {
	noStroke();
	fill('#73B3FF');
	ellipse(sx, sy, 12, 12);
}

For this project I wanted to create a clock that looked like planets orbiting a sun. Although the design is still centered around circular themes, I think its still breaking outside the idea of a clock, and definitely couldnt be identified as a clock by first glance. My process began with sketching my ideas on paper, and then translating that into a drawing using Adobe Illustrator. After that I was able to translate my sketches into code, creating both fixed and animated objects on my canvas. I used the knowledge I gained from Assignment C to help me create my new clock. I added in the ability of the planets to move slightly in the transition from minute to minute or hour to hour. As a final touch, I drew some randomly generated stars to fill the background. This was definitely a fun project to make, though one that challenged my knowledge.

Shannon Ha- Project 06 – Abstract Clock


sketch

For this project, I wanted to explore how to use a variety of shapes to express time so I used a combination of lines, circles and squares in a rotating motion simulate the effect of a clock.

//Shannon Ha
//sha2@andrew.cmu.edu
//Section D
//Project 06

function setup() {
    createCanvas(400, 400);
    angleMode (DEGREES); //converts radians to degrees
}

function draw() {
    var H = hour();
    var M = minute();
    var S = second();

      background(H * 5,M,S); // background color changes according to time

      //small circle for hours
      for (var h = 0; h < H; h++){
        var r=150;
        var g=200;
        var b=50;

          push();
          translate (width/2, height/3 - 30);
          rotate((15*h)-0.25*360) //24 squares to count hours
          noStroke();
          fill(r-H, g-M, b-S); //color alternates as time changes
          rect(35,0,20,20);
          pop();
      }

      //bigger circle for minutes
        for(var m = 0; m < M; m++){
          var r=250;
          var g=130;
          var b=10;
            push();
            translate (width/2, height/2 + 50);
            rotate((6*m)+ 0.25 *360); //60 circles to count min
            noStroke();
            fill(r+H, g+M, b+S); //color alternates as time changes
            ellipse(72, 0, 15, 15);
            pop();
          }


      //line seconds
        for(var s = 0; s < S; s++) {
        var r=160;
        var g=105;
        var b=60; //sets b value
        push();
        translate (width/2, height/2 + 50);
        rotate((6*s)- 0.50 * 360); //60 rotating lines
        stroke(H, M, S*2); //color alternates as time changes
        strokeWeight(2);
        line(100,100,10,10);
        pop();
    }


}

Julia Nishizaki – Looking Outwards – 06

While not directly involving coding, the project that I chose to look at for this week is Tim Knowles’ Windwalks. Tim Knowles is a British artist based in London, and his project, Windwalks, visualizes a series of walks directed only by the wind using different mechanisms. Each walk is filmed, and then plotted by GPS, with the end product a line drawing of the path the individual took.

One of Tim Knowles’ Windwalks drawings
A close up of the above drawing, revealing glimpses of the city’s structure

I found this project particularly interesting, because it incorporates randomness in the form of the wind. While the wind is biased in the sense that there are trends and currents that the wind follows, this factor combined with the individual’s environment ends up generating a unique and personal piece of art. Not only does this project visualize an activity that we often overlook in our day to day lives, walking, it also reveals the outlines of buildings, cars, and objects in the environment, as individuals, prompted by the direction of the wind, collide with the structures of the city, making them visible in a new light. Thus, Knowles is able to create new, different, and deeper relationships between individuals, their cities, and the wind itself.

This headset, pushed by the wind, guides the individual along a “random” path
A photo taken during 50 simultaneous windwalks

Nadia Susanto – Project 06 – Abstract Clock

sketch

/* Nadia Susanto
   nsusanto@andrew.cmu.edu
   Section B
   Project-06-Abstract Clock */

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


   function draw() {
     background(255,255, 255);
     translate(200, 200);


     var hr = hour();
     var min = minute();
     var sec = second();

     push();
     textSize(30);
     text(nf(hr%12,2)+":"+nf(min,2)+":"+nf(sec,2) , -50, -20, 50, 100)
     pop();

     strokeWeight(4);
     var b = map(sec, 0, 60, 0, 255);
     stroke(color(100, b, 255));
     noFill();
     var secondAngle = map(sec, 0, 60, 0, 360);
     arc(0, 0, 300, 300, 0, 360-secondAngle);

     strokeWeight(5);
     var c = map(min, 0, 60, 0, 255);
     stroke(color(0, 255, c));
     noFill();

     var minuteAngle = map(min, 0, 60, 0, 360);
     arc(0, 0, 280, 280, 0, 360-minuteAngle);


     strokeWeight(3);
     var d = map(hr, 0, 60, 0, 255);
     stroke(color(d, c, b));
     noFill();
     var hourAngle = map(hr % 12, 0, 12, 0, 360);
     arc(0, 0, 260, 260, 0, 360-hourAngle);

   }

It was hard thinking of a very abstract concept, so I kept it simple. I wanted to stay simple but add the abstract element. The arc if hours, minutes, or seconds “disappears” to show the time passing by. Even though it looks simple, I think it looks pretty nice and I’m happy with the outcome.

Danny Cho – LookingOutwards 6

Patrick Gunderson – Ablaze 2011

I really enjoy the simplicity of the contrast in the color and how the overlaying of gradience creates a sense of 3D space. Also, the art is at the subliminal boundary of solid and gas. The tool that was used is Action Script, which is something I never have heard of before. I am willing to look into it see how I might be able to manipulate it. 

It looks like motion blur of an object’s movement. However, I am curious, if this was drawn over time, which part is the starting point and the ending point. The artist only shows the shot of the final image, so it’s hard for me to imagine the process.

Rachel Shin – Project 06- Abstract Clock (boba version)


Boba Clock

/*Rachel Shin
reshin@andrew.cmu.edu
15-104 Section B
Project 06-- Abstract Clock
*/

function setup() {
    createCanvas(500, 500);
    var topLayer = color(130, 152, 168);
    var bottomLayer = color(109, 83, 117);
    setGradient(topLayer, bottomLayer);

    textSize(30);
    textAlign(CENTER);
    textStyle(ITALIC);
    text("boba all day every day", 0, 80, width);

}    

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

    var X = 180;
    b = 0;

   
    //boba cup: will not change
    rectMode(CORNER);
    noStroke();
    fill(255);
    rect(175, 200, 150, 250);

    ellipseMode(CENTER);
    noStroke();
    fill(255);
    ellipse(250, 200, 150, 30);

    ellipseMode(CENTER);
    noStroke();
    fill(255);
    ellipse(250, 450, 150, 30);

    //straw: seconds
    noStroke();
    fill(0);
    rectMode(CORNER);
    rect(235, 140, 30, S);
    

    //tea: minutes 
    //tea is draining per minute
    //to make draining effect, I created the complete picture and then used background color to "delete" the drawn

    ellipseMode(CENTER); //bottom part: doesn't change
    noStroke();
    fill(209, 207, 171);
    ellipse(250, 450, 140, 20);

    rectMode(CORNER);
    noStroke();
    fill(209, 207, 171);
    rect(180, 220, 140, 230);

    ellipseMode(CENTER);
    noStroke();
    fill(209, 207, 171);
    ellipse(250, 220, 140, 20);

    rectMode(CORNER);
    noStroke();
    fill(255);
    rect(180, 200, 140, M);

    //boba: hour (12 hours)
    b = H % 12;
    for (i = 1; i <= b; i+=1){
        noStroke();
        fill(0);
        ellipse(X + 10 * i, 440, 10, 10);
    }}


function setGradient(color1, color2) {
    for (var a = 0; a <= height; a++) {
        var amount = map(a, 0, height, 0, 1);
        var back = lerpColor(color1, color2, amount);
        stroke(back);
        line(0, a, width, a);
    }}

When creating this project, I simply looked at the objects on my desk for inspiration and decided to use my cup of Fuku Tea as inspiration. I identified 3 components of the boba cup that I could alter to fit hours, minutes, and seconds. I found it interesting to build my own clock graphically through one of my favorite food items.

William Su – Looking Outwards – 06 – Section E

A sample from Random Art Generator. The program accepts the name of a picture and uses it as a seed from which a picture is generated randomly. The same name always yields the same picture.
http://www.random-art.org/about/

The Random Art Generator is a free to download python program which is why I was initially interested in this project as i’ve frequently used python for a lot of my work in the past. According to the site, the picture name is the seed and is used for a “random number generator” (nothing is truly random) which constructs a mathematical formula. The formula determines the color of each pixel in the picture. The same name always determines the same sequence of random choices, and consequently the same formula and the same picture.

I appreciate the thought of using a random number generator to create completely new and cool pieces of art. Although random number generators aren’t actually “random”, it just shows the endlessness of possibilities you can make with just a bunch of pixels and changing their colors.

Fanjie Jin-LookingOutwards-06

Cy Towbly, Bacchus, 2006-2008, Cy Twombly Foundation, currently exhibited in Gagosian New York

This painting is created by Cy Towbly, an American painter who has been acknowledge by his large-scale, freely-scribbled, calligraphic works on solid fields of plain colors such as off-white, grey and tan. His workflows are influenced greatly by Pollock, who has been mentioned in the description.

As this painting is completely based on his intuitive feeling about composition, shape and colors, it is an example of how the randomness of emotions and thoughts can be represented with color and gestures to articulate emotional expression. As the painting itself only consists of the simplest element- stoke, it allows viewers to examine the energy that’s associated with the expression and also has left room allowing viewers to interpret it.  

This work is really inspirational to me as it has manifested how the randomly generated compositions can be really expressive and full of impact while being dynamic and unpredictable.

Claire Yoon – Project 06 – Abstract clock

 sketch

/* Claire
   Section E
   claireyo@andrew.cmu.edu
   Project-06-Abstract-Clock*/

function setup() {
    createCanvas(400, 400);
    noStroke();
}
function draw() {
    background(166, 243, 247);
    noStroke();

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

// mapping time variables
    var shadowcolor = map(H, 0, 8, 0, 37, 0, 44)
    var creamfall = map(M, 0, 6, 0, 7);

//shadow gets darker with hours
    var shadow = color(166 - shadowcolor, 243 - shadowcolor, 247 - shadowcolor);
    fill(shadow);
    noStroke();
    quad(145, 272, 229, 77, 501, 328, 339, 473);

//Popsicle part that does not move
    noStroke();
    //popsicle stick
    fill(239, 198, 142);
    rect(190, 247, 22, 108, 30);
    //popsicle
    fill(252, 234, 68);
    rect(144, 115, 111, 171, 20);
    //dent on popsicle
    fill(239, 220, 43);
    rect(168, 120, 22, 134, 10);
    rect(212, 120, 22, 134, 10);
    //cream
    fill(250, 120,119);
    ellipse(199.5, 125, 112, 112);

//cream that is falling with minutes
    rect(144, 121, 28, 90 + creamfall, 14);
    rect(156, 121, 50, 68 + creamfall, 23);
    rect(197, 121, 43, 94 + creamfall, 21.5);
    rect(236, 121, 20, 106 + creamfall, 10);

//drooling drops that falls down every second
    push();
    translate(249, 213);
    fill(250, 120,119);
    s = (millis()) % 800;
    s = map(s, 0, 800, 0, 213);
    ellipse(0, s, 10, 12);
    pop();

//sun
    fill(255, 224, 0);
    ellipse(29, 6, 191, 191);

// Time
    fill(255);
    text(H + ":" + M + ":" + S, 40, 50);

   }

I enjoyed this project and the concept of creating an graphic art piece that evolves around time. I based my clock on how a popsicle drips and melts as time goes by.

Nawon Choi— Project 06 Abstract Clock

sketch

// Nawon Choi
// nawonc@andrew.cmu.edu
// Section C
// Project 06 Abstract Clock

var prevSec;
var millisRolloverTime;

var ons = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']; 
var tns = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen']; 
var tnspls = ['twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety']; 

var milli;
var sec;
var mins;
var hr;

function setup() {
    createCanvas(400, 400);
    millisRolloverTime = 0;
}

function draw() {
    background("black");
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);
    
    textFont("Helvetica");
    textAlign(CENTER, CENTER);
    
    // increase in size based on time
    fill(50);
    textSize(mils);
    textStyle(NORMAL);
    var mm = int(mils / 10);
    milli = toWords(mm);
    text(milli, width / 2, height / 2);

    fill(75);
    textSize(S * 5);
    textStyle(NORMAL);
    sec = toWords(S);
    text(sec, width / 2, height / 2);

    fill(150);
    textSize(M * 2);
    textStyle(NORMAL);
    mins = toWords(M);
    text(mins, width / 2, height / 2);

    fill(230);
    textSize(H);
    textStyle(NORMAL);
    hr = toWords(H);
    text(hr, width / 2, height / 2);
}

function toWords(x) {
    if (x < 10) {
        return ons[x];
    } else if (x >= 10 & x < 20) {
        var i = x - 10;
        return tns[i];
    } else {
        if (x % 10 == 0) {
            var i = (x / 10) - 2;
            return tnspls[i];
        } else {
            var i = x % 10;
            var o = ons[i];
            var ii = int(x / 10) - 2;
            var t = tnspls[ii];
            var arr = [t, o];
            return join(arr, "");
        }
    }
}

When thinking of ideas for this assignment, I initially brainstormed a variety of different pictorial representations of the passage of time. I eventually decided to go with a text-based clock after seeing this image online. I thought it was interesting to see time represented textually rather than in an analog or digital form. 

The most challenging part of this assignment was converting the number of the time into text. I could only convert numbers up to 99, so for milliseconds, the number converted is divided by 10. I figured it didn’t matter as much because the milliseconds are illegible. I also had the size of the text increase based on the time.

Image result for text time clock