Month: October 2018

Robert Oh- Project07- Abstract Clock

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-06-Abstract_Clock

//assigning variables
var i = 0;
var rainArrayX = [];
var rainArrayY = [];
var currSec = 0;

//making the rain cloud
function cloud(x, y) {
    noStroke();
    fill(255);
    ellipse(x - 40, y, 60, 50);
    ellipse(x - 20, y, 50, 55);
    ellipse(x, y, 50, 55);
    ellipse(x + 25, y, 60, 50);
}

//x and y are the bottom left part of the cup, y2 is the water level
function cup(x, y, y2) {
    //the actual cup
    fill(198, 201, 255);
    quad(x, y, x - 5, y - 40, x + 25, y - 40, x + 20, y);

    //the water level
    fill(155, 255, 238);
    quad(x, y, x - ((y - y2) / 40 * 5), y2, x + 20 + ((y - y2) / 40 * 5), y2, x + 20, y);
}

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

function draw() {
    background(116, 121, 232);
    var H = hour() % 12;
    var M = minute();
    var S = second();

    //this nested for loop draws all the cups and correct water levels
    for (i = 0; i < 2; i++){
        for (j = 0; j < 6; j ++){
            if (i * 6 + j < H){
                cup(j * 65 + 20, 300 + i * 80, 300 + i * 80 - 40);
            }
            else if (i * 6 + j == H){
                cup(j * 65 + 20, 300 + i * 80, 300 + i * 80 - (40 * M / 60));
            }
            else {
                cup(j * 65 + 20, 300 + i * 80, 300 + i * 80);
            }
        }
    }

    //drawing the cloud
    cloud(H % 6 * 65 + 40, 50);

    //checking which cup row to go to
    if (H % 12 < 6){
        var k = 0;
    }
    else {
        var k = 1;
    }

    //adding a rain drop every second by using an array
    if (currSec != S){
        rainArrayX.push(H % 6 * 65 + 30);
        rainArrayY.push(80);
        currSec = S;
    }
    
    for (m = 0; m < rainArrayX.length; m ++){
        if (rainArrayY[m] >= (300 + k * 80 - 8)){
            rainArrayX.shift();
            rainArrayY.shift();
            m --;
        }
        else {
            fill(155, 255, 238)
            rect(rainArrayX[m], rainArrayY[m], 2, 8);
            rainArrayY[m] += 1;
        }
    }
}

I remember when I started brainstorming for this project, I looked outside my window and noticed that it was raining. And so, I thought to myself, “how can I add rain to this project?” After a lot more thinking, I was able to come up this project. I really enjoyed incorporating time into this project. Each cup represents the hour (in a 12-hour cycle), each minute increases the water level, and each second adds another rain drop.

Sean Meng – Project 06

meng-sketch

//Sean Meng
//Section B
//hmeng@andrew.cmu.edu
//Project 06

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


function draw (){
    background(0);
    var h = hour();
    var m = minute();
    var s = second(); 

    stroke(27, 101, 211)
    for (var i = 0; i < 100; i += 3)
        line(width/5 + i*10, 0, 0, height + i*(-10))

    stroke(145, 200, 224)
    for (var i = 0; i < 100; i += 2)
        line(width/20 + i*10, 0, 0, height + i*(-10))
    
    stroke(27, 101, 211)
    for (var i = 0; i < 100; i += 3)
        line(width/20 + i*10, height, width, height + i*(-10))
   
    stroke(145, 200, 224)
    for (var i = 0; i < 100; i +=2)
        line(width/5 + i*10, height, width, height + i*(-10))

    
    push();
    noStroke();
    fill(20, 27, 226);
    translate(width/2,height/2);
    rotate(s*(360/60));
    rotate(-90);
    rect(120, 0, 90, 10);
    pop();
    
    push();
    noStroke();
    fill(125, 114, 224)
    translate(width/2,height/2);
    rotate(m*(360/60));
    rotate(-90);
    rect(30, 0, 50, 5);
    pop();
    
    push();
    noStroke();
    fill(171, 45, 206);
    translate(width/2,height/2);
    rotate(h*(360/12));
    rotate(-90);
    rect(50, 0, 20, 2);
    pop();

    noStroke()
    fill(211, 107, 196)
    ellipse(width/2, height/2, 30, 30)
}

In this project, I wanna combine the previous work with my abstract clock design, the three rectangles represents three hands of the clocks and their colors varies.

Han Yu Looking Outwards 06

Hiroshi Kawano, Design 3-1: Color Markov Chain Pattern, 1964

Hiroshi Kawano is a Japanese artist pioneered in the field of generative art. He was one of the first generative artists who believed the possibly of using a computer to program artistic works. Color Markov Chain Pattern was one of Hiroshi’s most famous work. It was created in 1964 after Hiroshi was inspired by the writings of the German philosopher Max Bense who wrote about the using scientific metrics to program beauty. This piece of work was also referred as the digital mondrians. Hiroshi wrote computer programs with complex mathematical algorithms involve random processes because although he set the rules for picture, he wasn’t able to pin down the actual result without printing. Hiroshi masterfully mixed subjective randomness with computational randomness together in his works. In the early sixties when computers were still giant machines that takes up a whole room, Hiroshi was the first to think it as a medium to create art. His works truly pioneered in the field of computational art and influenced many later works.

yinjiet-project-06

sketch

//Yinjie Tian
//Section B
//yinjiet@andrew.cmu.edu
//Assignment 06

var x = []; 
var y = [];
var dx = []; 
var dy = []; 
var col = []; 

function setup() { 
    createCanvas(480, 480);
    angleMode(DEGREES);
    for (i = 0; i < 100; i++) { 
        x[i] = random(width);
        y[i] = random(height);
        dx[i] = random(-5, 5);
        dy[i] = random(-5, 5);
        col[i] = color(random(255), random(255), random(255));
    }
    frameRate(5);
}


function draw() {
 
    background(80, 200, 100);
 
 //bubbles at the background   
    noStroke();
    for (i = 0; i < 100; i++) {  // for each rectangle ...
        fill(col[i]);
        ellipse(x[i], y[i], 10, 10);
        x[i] += dx[i];
        y[i] += dy[i];
        
        if (x[i] > width) x[i] = 0;        //horizontally
        else if (x[i] < 0) x[i] = width;
        if (y[i] > height) y[i] = 0;       //vertically
        else if (y[i] < 0) y[i] = height;
    }

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

//clock bubbles
    push();
    noStroke();
    fill(200, 200, s * 5);
    translate(width/2,height/2);
    rotate(s * (360/60));
    
    ellipse(200, 0, 60, 60);
    line()

    pop();
    
    push();
    noStroke();
    fill(200, m * 5, 200);
    translate(width/2,height/2);
    rotate(m*(360/60));
    
    ellipse(60, 0, 40, 40);
    pop();
    
    push();
    noStroke();
    fill(h * 25, 200, 200);
    translate(width/2,height/2);
    rotate(h*(360/12));
    
    ellipse(100, 0, 20, 20);
    pop();

//center point
    strokeWeight(4);
    stroke(0)
    line(width / 2 - 25, height / 2, width / 2 + 25, height / 2);
    line(width / 2, height / 2 - 25, width / 2, height / 2 + 25);
    fill(255, 0, 0);
    ellipse(width/2, height/2, 10, 10); 

}

The background is a bunch of randomly moving rectangle with random colors. A cross with a red dot representing the center for the clock. Three bubbles with constantly changing colors based on time orbiting around the cross indicates the time. Second is the largest and furthers bubble and hour is the smallest and closest bubble.

 

Han Yu Project 06 Abstract Clock

sketch

// Han Yu
// hyu1@andrew.cmu.edu
// Section D
// Project 06

var bubbley = 480;
var noiseParam = 0;
var otherbubbley = 510;


function setup() {
    createCanvas(480, 480);
    noStroke();
    frameRate(10);
}



function draw() {
	
	background(41,221,245);
	// fectch time
	var H=hour();
	var M=minute();
	var S=second();
	// compute location of fish
	var hourfish=map(H, 0, 23, 35, width-51);
	var minutefish=map(M, 0, 59, 50, width-71);
	var secondfish=map(S, 0, 59, 40, width-41);

	//bubbles
	//sets sidemove to noise value
	var sideMove = noise(noiseParam);
	//map time sidemove between -20 and 20
	sideMove = map(sideMove, 0, 1, -20, 20);
	//color of bubble
	fill(51,231,255);
	//draws bubbles in diff sizes y and x
	ellipse(width/2+sideMove,bubbley,50,50);
	ellipse(width/2+sideMove+50,bubbley-30,30,30);
	ellipse(width/3+sideMove/2, otherbubbley, 40,40);
	//make it go up
	bubbley -= 10;
	otherbubbley -= 5;
	//resets to bottome when at top
	if (bubbley < -25) {
		bubbley = 480			
	}
	if (otherbubbley < -20) {
		otherbubbley = 510
	}
	//increase parameter by 0.3
	noiseParam += 0.3
	
	

	// hour fish
	fill(252,237,60);
	ellipse(hourfish, 100, 70, 35);
	triangle(hourfish+30, 100, hourfish+50, 
			 80, hourfish+50, 120);
	// minute fish
	fill(246,214,48);
	ellipse(minutefish, 200, 100, 50);
	triangle(minutefish+45, 200, minutefish+65, 
			 180, minutefish+65, 220);
	// second fish
	fill(245,184,44);
	ellipse(secondfish, 340, 80, 50);
	triangle(secondfish-35, 340, secondfish-55, 
			 320, secondfish-55, 360);

	// sand
	fill(255,249,207);
	rect(0, 410, width, height);


}

I started out this project hoping to represent time more interactively, something more than just a clock. I have always been fond of the underwater so I chose it as the theme of my abstract clock. My initial design is attached below. I changed around a bit because I later found out the constant shit of colors is not a good representation of time. Overall I enjoyed doing this project, it helped it lot with learning time application and randomness.

My initial design.

Carley Johnson Abstract Clock

sketch

/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Project-06
*/

function setup() {
  createCanvas(450, 450);
  background(34, 48, 86);
}

function draw() {
  strokeWeight(2);
  translate(width/2, height/2);
  background(34, 48, 86);
  
  var radius = int(min(width, height) / 2);
  var numPoints = 60;
  var angle = TWO_PI/numPoints;
  
  var secondsRadius = radius * 0.72;
  var minutesRadius = radius * 0.60;
  var hoursRadius = radius * 0.50;
  var clockDiameter = radius * 1.8;
  
  var s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  var m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
  var h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
  
  strokeWeight(2);
  stroke(255);
  beginShape(POINTS);
  var i = 0;
  while (i < numPoints ) {
      x = cos(angle*i) * secondsRadius; 
      y = sin(angle*i) * secondsRadius;
      vertex(x, y);
      i++;
  }
  endShape();  
  
  strokeWeight(2);
  noFill();
  ellipse(0, 0, (cos(m) * minutesRadius) * 2, (sin(m) * minutesRadius) * 2);
  
  stroke(255, 50, 90)
  strokeWeight(5);
  noFill(); 
  ellipse(0, 0, (cos(h) * hoursRadius) * 2, (sin(h) * hoursRadius) * 2);
  
  strokeWeight(1);
  noFill();
  ellipse(0, 0, (cos(s) * secondsRadius) * 2, (sin(s) * secondsRadius) * 2);
}

This was a tough project as the map function and looping (as well as the unused array function) are still a bit new and nebulous to me. Working through it helped, though. Math was never my strong suit, so these projects are getting a lot tougher. This idea came from a nautical theme, from the colors and the circles sort of like a compass (also with the notches on the outer rim). I would’ve liked to make the shapes more complex, but I focused my energy on mapping the time instead.

Xindi Lyu-Project 06- Abstract Clock-Section A

sketch

/*
Xindi Lyu
Section A
xindil@andrew.cmu.edu
Project-06-Abstract Clock
*/
var angleS=0;

function setup() {
 createCanvas(550,500);
 background(230);



}
   
    
function draw() {
        var S=second();
        var M=minute()
        var H=hour();
        noStroke();
      fill(70,100,70)
     ellipse(270,250,500,500);
        strokeWeight(2);
                 for(c=0;c<360;c=c+15){
            push();
        stroke(0);
        translate(270,250);//creating 24 strokes representing each hour of a day
        rotate(radians(c));
         line(0,0,250,0);//creating the base image for the hour section
        pop();
    }
    push();
            translate(270,250);
            rotate(radians(15*H));
            stroke(255);//highlighting the hour represented
            line(0,0,250,0)
            
            pop();
            push();
            translate(270,250);
            rotate(radians(15*H-15));
            stroke(0);
            line(0,0,250,0)//reseting the hours passed
            
            pop();
             
                noStroke();
    fill(70,100,70);
    ellipse(220,250,300,300)


        for(b=0;b<360;b=b+6){
            push();
        stroke(0);//creating 60 strokes representing each minute within an hour
        translate(220,250);
        rotate(radians(b));
         line(0,0,150,0);//creating the base image for the minute section
        
        pop();
    }
    
    push();
            translate(220,250);
            rotate(radians(6*M));
            stroke(255);
            line(0,0,150,0)
            
            pop();
             
             push();
            translate(220,250);
            rotate(radians(6*M-6));
            stroke(0);
            line(0,0,150,0)
            
            pop();

    noStroke();
    fill(70,100,70);
    ellipse(250,250,200,200)

 

        for(a=0;a<360;a=a+6){
            push();
        stroke(0);
        translate(250,250);
        rotate(radians(a));//creating 60 strokes representing each second within a minute
         line(0,0,100,0);
        pop();

        }
             push();
            translate(250,250);
            rotate(radians(6*S));
            stroke(255);
            line(0,0,100,0)
            
            pop();
              
        push();
        stroke(0);
        translate(250,250);
        rotate(radians(6*S-6));
         line(0,0,100,0);
        pop();
    noStroke();
    fill(70,100,70);
    ellipse(230,250,130,130)
}

I experimented with the offsetting circles and how lines cooperated with this geometry. I used simple colors and ways to indicated the time changes to maintain the visual clarity.

Xiaoying Meng – Project 6 Abstract Clock

sketch

//xiaoying meng
//B
//xiaoyinm@andrew.cmu.edu
//Project6
var prevSec;
var millisRolloverTime;

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

function draw() {
    background(0); 

    var H = hour();
    var M = minute();
    var S = second();
    
    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);
    angleMode(DEGREES);
    stroke(0);

//hour
    push();
    translate(240,20);
    rotate(hourBarWidth);
    rect(0,0,250,250);
    pop();

//minute
    push();
//vertical left
    stroke(255);
    strokeWeight(5);
    translate(0,minuteBarWidth);
    line(125,155,125,270);
    line(135,155,135,270);
    line(145,155,145,270);
    line(155,155,155,270);
    line(165,155,165,270);
    line(175,155,175,270);
    line(185,155,185,270);
//horizontal
    strokeWeight(2);
    line(190,255,350,255);
    line(190,260,350,260);
    line(190,265,350,265);
    line(190,270,350,270);
//vertical right
    strokeWeight(3);
    line(295,155,295,250);
    line(305,155,305,250);
    line(315,155,315,250);
    line(325,155,325,250);
    line(335,155,335,250);
    line(345,155,345,250);
    pop();    

    push();
    fill(205,49,27);
    translate(0,minuteBarWidth);
    rect(190,0,100,250);
    pop();

//second
    push();
//circle
    fill(0);
    translate(secondBarWidth,secondBarWidth);
    arc(0,0,150,150,120,300);
    fill(255);
    arc(0,0,150,150,300,120);
    pop(); 
//lines
    push();
    translate(secondBarWidth,secondBarWidth);
    rotate(-105);
    stroke(255);

    line(-480,-480,480,480);
    pop();

    push();
    translate(secondBarWidth,secondBarWidth);
    rotate(50);
    stroke(255);
    line(-480,-480,480,480);
    pop();
}

 

I decided to use abstract art as my idea for the abstract clock. As time passes, each shape representing second, minute and hour changes locations. Thus, creating, different compositions.

Xindi Lyu-Looking outwards 06

The Emotionally Charged Paintings Lee Krasner Created

This painting was made between 1959 to 1962 by female artist Lee Krasner, following the death of her husband Jackson Pollock in a fatal car crash. Krasner at the period of time was going through a rough stage of her life with the emotional impact of the death of her mother and the attention drawn to her because of the death of Pollock. These were reflected in the painting with the dense curves covered with knots and slashes painted in the restricted tones of brown and white, as a they were once described by the critic Amei Wallach as having the “impact of a hurricane.”

This painting really inspired me because the randomness of it has brilliantly and accurately expressed the emotion of its author. It showed the how randomly generated drawing being more expressive and full of impact while being dynamic and unpredictable. This art piece also was only consist of the simplest element such as strokes and slashes, which led to further possibilities of creating an art piece full of volume but only with simple techniques and elements.

looking outwards

Jackson Pollock’s art is a main example of art generated by randomness. He was pioneer in abstract art, breaking boundaries of what artists can represent in an image. Pollock lets physics be the main player in his process and he was one of the firsts to make art with the canvas horizontally on the floor, while splattering paint on top. Andy Warhol made fun of this with his Oxidation painting. He had his assistants pee on a canvas that was laying horizontal to the floor. In this he also lets physics be a main player in the making of the work and is a diss to Pollock as pissing on the canvas has this meaning, while he also uses the same creative process to achieve the work.