Month: October 2017

hannahk2-Project-06

sketch

//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Assignment-06-A

function setup() {
    createCanvas(550, 550);
    background(0);
}

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

noStroke();
fill(200, 200, 250, 10);
//top hourglass
triangle(156, 98, 259, 257, 364, 98);
//bottom hourglass
triangle(156, 420, 259, 257, 364, 420);

//top sand
fill(255, 255, 250, 20)
triangle(216, 174, 258, 244, 304, 173);
//bottom sand
quad(198, 366, 170, 410, 350, 410, 319, 366);

//top sand circle
fill(0);
ellipse(260, 175, 86, 10);
//bottom sand circle
ellipse(259, 368, 120, 12);

//maps dot y coordinate and color based on second and day
var doty = map(S, 0, 59, 260, 368);
var dotcolor = map(H, 0, 23, 0, 255)

fill(0, 0, 255);
ellipse(259, doty, 2, 2);

}

I really enjoyed thinking of ways to show time in an abstract manner. I chose ultimately to create a representation of an abstract method of showing time, a stylized hour glass.

NatalieKS-Project-06

I really wanted to do something with birds, because I have always had the association of birds with time. I thought having the necks grow would be a funny/cute way to represent time, so that’s what I set out to do. Using the time functions was relatively easy, and I thought this was a very enjoyable project. Doing Assignment-06-C definitely helped me when it came to figuring out how to execute my ideas. The only thing I wasn’t sure how to do (without messing up the picture) was how to make the head start off screen. Right now, if it was at midnight, it would show the head starting at the bottom of the canvas instead of slowly coming in.

I originally wanted to do a rooster, but I liked the simpler image of a pigeon-like bird instead.

sketch

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-06


var x;
var H;
var M;
var S;
var H2;
var M2;
var S2;

function setup() {
    createCanvas(500, 400);
    angleMode(DEGREES);
    noStroke();
    textSize(16);
    stroke(1);
}

function draw() {
  background(18, 202, 255);
  H = hour() % 12;
  M = minute();
  S = second();
//map out the time so the bird necks
//move with the time
  H2 = map(H, 0, 23, 0, height - 25);
  M2 = map(M, 0, 59, 0, height - 25);
  S2 = map(S, 0, 59, 0, height - 25);
//"second" bird head
    fill(255);
//draw the neck
    rect(350, height - S2, 100, S2, 60);
    push();
    stroke(0);
    strokeWeight(1);
//draw the white part of eye
    fill(240);
    ellipse(390, height - (S2 - 25), 35, 35);
    fill(0);
//draw the black pupil
    ellipse(388, height - (S2 - 20), 20, 20);
    pop();
    fill(236, 223, 21);
//draw the beak right
    triangle(420, height - (S2 - 5), 441, height - (S2 + 15),
        431, height - (S2 - 10));
//draw the beak left
    triangle(407, height - (S2), 414, height - (S2 + 20),
        419, height - (S2 - 4));
//draw the body
    fill(252, 158, 255);
    rect(320, 300, 105, 100, 60);
//add the bird's "bawk"
    fill(0);
    var bawk = random(447, 449);
    text("Bawk!", bawk, height - (S2 - 25));
// "minute" bird head
    fill(255);
//draw the neck
    rect(200, height - M2, 100, M2, 60);
    push();
    stroke(0);
    strokeWeight(1);
    fill(240);
//white part of eye
    ellipse(240, height - (M2 - 25), 35, 35);
    fill(0);
//pupil
    ellipse(238, height - (M2 - 20), 20, 20);
    pop();
    fill(236, 223, 21);
//beak right
    triangle(270, height - (M2 - 5), 291, height - (M2 + 13),
        281, height - (M2 - 10));
//beak left
    triangle(257, height - (M2 - 2), 264, height - (M2 + 19),
        269, height - (M2 - 5));
//body
    fill(242, 208, 255);
    rect(165, 300, 115, 100, 60);
    fill(0);
    bawk = random(298, 300);
    text("Bawk!", bawk, height - (M2 - 30));
// "hour" bird head
    fill(255);
    stroke(1);
//neck
    rect(50, height - H2, 100, H2, 60);
    push();
    stroke(0);
    strokeWeight(1);
    fill(240);
//white part of eye
    ellipse(90, height - (H2 - 25), 35, 35);
    fill(0);
//pupil
    ellipse(87, height - (H2 - 20), 20, 20);
    pop();
    fill(236, 223, 21);
//beak right
    triangle(117, height - (H2 - 4), 138, height - (H2 + 16),
        128, height - (H2 - 9));
//beak left
    triangle(104, height - (H2), 111, height - (H2 + 21),
        116, height - (H2 - 3));
//body
    fill(188, 255, 218);
    rect(0, 300, 130, 100, 60);
    fill(0);
    bawk = random(152, 154);
    text("Bawk!", bawk,height - (H2 - 44));
}

rgroves – Abstract Clock – section B

sketch



var quote = ["All", "time", "is", "all", "time.", "It", "does", "not", "change.",
"It", "does", "not", "lend", "itself", "to", "warnings", "or", "explanations.", "It", "simply", "is.", "Take", "it", "moment", 
"by", "moment,", "and", "you", "will", "find", "that", "we", "are", "all,", "as", "I've", "said", "before",
"bugs", "in", "amber."];

var letters = 360;


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

function draw() {
    background(220, 170, 125);

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

    
    //floor
    fill(162, 137, 118);
    quad(0, 250, width, 300, width, height, 0, height);
    strokeWeight(40);
    stroke(250, 180, 135);
    beginShape();
    curveVertex(0, 250);
    curveVertex(0, 250);
    curveVertex(width/3, 200);
    curveVertex(2 * width/3, 230);
    curveVertex(width, 300);
    curveVertex(width, 300);
    endShape();
    noStroke();
    

    //window
    fill(240, 190, 135);
    rect(width/3 - 14, 45, 50, 50);
    var time = H + M/60 + S/3600; 

    if (time <= 12) { //window gets light from midnight to noon
        var skyR = map(time, 0, 12, 35, 200);
        var skyG = map(time, 0, 12, 40, 220);
        var skyB = map(time, 0, 12, 70, 235);
        fill(skyR, skyG, skyB);
    }
    if (time >= 12) { //window gets darker from noon to midnight
    	var skyR = map(time, 12, 24, 200, 35);
    	var skyG = map(time, 12, 24, 220, 40);
    	var skyB = map(time, 12, 24, 235, 70);
    	fill(skyR, skyG, skyB);
    }
    rect(width/3 - 15, 45, 30, 30);

    //darkness filter - entire room gets darker from 19:00 to midnight and lighter from midnight to 7:00
    if (time <= 7) {
    	var a = map(time, 0, 7, 200, 0);
        fill(35, 40, 70, a);
    } else 
    if (time >= 19) {
    	var a = map(time, 19, 24, 0, 200);
        fill(35, 40, 70, a);
    } else {
    	var a = 0;
        fill(35, 40, 70, a);
    }
    rect(0, 0, width, height);

    //medallion
    stroke(50, 20, 50);
    strokeWeight(3);
    line(width/3 + 21, height/3 + 1, width/3 + 21, height/3 + 100);
    noStroke();
    fill(175, 110, 20);
    ellipse(width/3 + 20, height/3, 25, 25);
    fill(200, 155, 37);
    ellipse(width/3 + 21, height/3 + 1, 20.5, 20.5);
    fill(150, 50, 100);
    ellipse(width/3 + 21, height/3 + 1, 5, 5);
    for (i = 0; i < 10; i++) {
    	push();
    	translate(width/3 + 21, height/3 + 1);
    	var angle = map(i, 0, 10, 0, 2 * PI);
    	rotate(angle);
    	fill(255, 254, 208);
    	ellipse(0, 7, 2, 2);
    	pop();
    }

    //light from the medallion
    if (time <= 7) { //beam moves across the floor as the sun/moon move across the sky
    	var lightbeam = map(time, 0, 7, 200, 400);
    } else
    if (time >= 19) {
    	var lightbeam = map(time, 19, 24, 0, 200); 
    } else {
    	var lightbeam = map(time, 7, 19, 0, 400);
    }
    if (lightbeam < 200) { //beam becomes more concentrated at noon, midnight
    	var lightbeamwidth = map(lightbeam, 0, 200, 80, 20);
    } else {
    	var lightbeamwidth = map(lightbeam, 200, 400, 20, 80);
    }
    fill(230, 180, 80, 100);
    ellipse(lightbeam, letters, lightbeamwidth, 20);
    var whitelight = color(230, 240, 200, 40);
    var redlight = color(150, 50, 10, 60);
    var redlightheight = map(M, 0, 60, height/3 + 1, letters);
    var lines = 5000
    for(i = 0; i < lines; i++) { //amount of red in the light bean represents minutes in the hour
    	strokeWeight(.1);
    	var leftx = map(i, 0, lines, width/3 + 21, lightbeam - lightbeamwidth/2);
    	var rightx = map(i, 0, lines, width/3 + 21, lightbeam + lightbeamwidth/2);
    	var y = map(i, 0, lines, height/3 + 1, letters);
    	var amt = map(y, redlightheight, letters, 0, 1);
    	var fade = lerpColor(redlight, whitelight, amt);
    	if (y < redlightheight) {
    		stroke(redlight);
    	} else {
    		stroke(fade);
    	}
    	line(leftx, y, rightx, y);
    }

    //light from window
    fill(whitelight);
 	quad(width/3 - 15, 45, width/3 + 35, 45, lightbeam + (5 * lightbeamwidth), height, lightbeam - (5 * lightbeamwidth), height);

 	//words go across the page - quote loops every minute
 	var textspeed = map(S, 0, 60, 0, quote.length); //quote is fewer than 60 words, so have to convert
 	var textspeedinteger = textspeed - (textspeed%1);
 	var textspacing = map(textspeedinteger, 0, quote.length, 0, width - 25);
 	if (dist(textspacing, letters, lightbeam, letters - 5) < 5 * lightbeamwidth) {
 		fill(whitelight);
 	} else {
 		fill(155, 125, 110);
 	}
 	text(quote[textspeedinteger], textspacing, letters - 5, width, 50);

 	
}

For this project I was inspired by the medallion in Indiana Jones that illuminates a point on a map at a certain time of day. The beam of light moves across the screen every 12 hours from 7am to 7pm and 7pm to 7am (as the sun and moon move across the sky) and fills with red every hour. The beam of light is also thinner in the middle of the picture (when the sunlight is most direct) and wider towards the edges. The quote at the bottom cycles every minute and the light through the window represents the time of day. The entire room also gets darker at night. It’s a random Kurt Vonnegut quote about time that I picked, I may think harder about what quote I really want and change it.

akluk – Section A – Looking outwards-06

For this week, the project that I have chosen to write about is Matt Deslauriers experimentation and project on generative art with node.js and canvas, from May 11th, 2016. What his program does basically, similar to some projects we do, is on a mouse press the canvas will use a new random set of values and parameters to create a new and random art work. What really intrigues me about this project is how even though the art is created through random algorithms, it still has structure and a sense of flow and ebb to it. It has patterns and colors unique to each one. The creator has a series of different palettes and the randomizer will choose one of them. It feels very organic and life like where the art just kinda grows out of the canvas. The random and unstructured splashes of colors also reminds me of Jackson Pollock’s painting. Below is a Link:
https://mattdesl.svbtle.com/generative-art-with-nodejs-and-canvas

haewanp – Project 06 – AbstractClock

abstract clock

var h;
var m;
var s;

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

function draw() {
    background(231, 79, 62);
    Hour();
    Minute();
    Second();
}

function Hour() {
    h = hour();
    
    //convert to 12 hours
    if (h > 12 || h == 0) {
        h = abs(h - 12);
    }
    
    fill(18, 6, 99);
    textSize(240);
    textFont('Georgia');
    textStyle(BOLD);
    textAlign(RIGHT);
    text(nf(h, [2], [0]), 258 + 20 * h, 205); //hour
    fill(232, 204, 199);
    rect(0, 200, 20 * h + 250, height - 200);
    fill(18, 6, 99);
    rect(0, 200, 20 * h + 250, 20);    
}

function Minute() {
    m = minute();
    
    textSize(200);
    textFont('Georgia');
    textStyle(BOLD);
    textAlign(CENTER);
    text(nf(m, [2], [0]), 4.2*m + 130, 350); //minute
    rect(4.2*m, 340, width - 4.2*m, 20);
    fill(1, 70, 117);
    rect(4.2*m, 360, width - 4.2*m, 220);
}

function Second() {
    s = second();
    
    fill(18, 6, 99);
    textSize(100);
    textFont('Georgia');
    textStyle(BOLD);
    textAlign(CENTER);
    text(nf(s, [2], [0]),5.5*s + 90, 445); //second
    rect(5.5*s + 20, 440, width - 4.2*s, 20);
    fill(228, 227, 214);
    rect(5.5*s + 20, 460, width - 4.2*s, 20);
}

When I initially designed this clock, I used illustrator rather than a paper (you can see my sketch below). It was pretty much successful to execute code as I intended in the sketch. The difference from my initial sketch is that I added each different color block below each number to have a more interesting visualization. Also, in the overall process, it is important to consider how each different time element visually coordinates together. I made a hierarchy among the hour, minute and second based on its scale. In colorwise, I made a custom color palette at ‘khroma.co’ which is an AI color generating tool based on my preference of color. It generated a bunch of color palette for me then I pick one of the nicest one then apply the color palette to this project.

Matthew Erlebacher Looking Outward-06

The piece of music that I chose for this looking outward was very soothing. It goes really well with the randomly generated backgrounds. The artist likely programmed the backgrounds and the music to complement each other. This is clearly demonstrated in the final product, which could be described as a soothing combination of relaxing music and striking imagery. The video was pre-recorded, so it unfortunately doesn’t show a large amount of randomness. One criticism that I have is that the piece goes on for a bit too long (for my taste). It isn’t something that I would listen to for the sake of listening to, but I might play it while reading or before I go to bed. In the end, while the piece may have its flaws it overall beautiful on an audio and visual level.

Project-06 Abstract Clock twrabetz

sketch

//Thomas Wrabetz
//Section C
//twrabetz@andrew.cmu.edu
//Project-05

var LAVA;
var accMillis;
var S;
var M;
var eruptionOn = false;
var eruptionCoords = [];
var eruptionV = 5;
var eruptionY;
var sec;

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

function draw()
{
    LAVA = color(195+minute(), 130, 21);
    background(220);
    drawVolcano();
    //seconds
    fill( LAVA );
    if( S != second() )
        accMillis = 0;
    S = second();
    accMillis += millis() - M;
    M = millis();
    sec = second() + accMillis / 1000;
    if( second() >= 45 )
    {
        eruption();
    }
    if( second() <= 45 )
        rect( width * 0.4, height - 75 - sec * ( height - 75 ) / 60, width * 0.2, height );
    else
        rect( width * 0.4, height - 75 - (45 * ( height - 75 ) / 60) + ( ( sec - 46 ) * ( height - 75 ) / 14 ), width * 0.2, height );
}

function eruption()
{
    if( second() == 45 )
    {
        eruptionV = 5;
        eruptionY = height / 5;
        eruptionCoords = [width * 0.45, width * 0.5, width * 0.55 ]
    }
    for( var i = 0; i < 3; i++ )
    {
        fill( LAVA );
        ellipse( eruptionCoords[i], eruptionY, 10, 10 );
        eruptionCoords[i] += (eruptionCoords[i] - width / 2) * 0.0025;
        eruptionCoords[i] += random(-0.001,0.001);
    }
    eruptionY -= eruptionV * 0.1;
    eruptionV -= 0.0125;
}

function drawVolcano()
{
    //Volcano
    fill( 50 );
    triangle( -width * 0.2, height, width * 0.4, height / 5, width * 0.4, height );
    triangle( width * 1.2, height, width * 0.6, height / 5, width * 0.6, height );
    fill( 150 );
    rect( width * 0.4, height / 5, width * 0.2, 4 * height / 5 );
    fill( LAVA );
    ellipse( width / 2, height, 200, 200 );
    //Side triangles
    for( var i = 0; i < 12; i++ )
    {
        if( i == hour() ) fill( 150 );
        angle = ( i + 1 ) * PI / 36;
        triangle( width / 2 + 100 * cos( PI - angle - 0.05 ), height - 100 * sin( PI - angle - 0.05 ),
                  width / 2 + 100 * cos( PI - angle + 0.05 ), height - 100 * sin( PI - angle + 0.05 ),
                  width / 2 + 200 * cos( PI - angle ), height - 200 * sin( PI - angle ) );   
    }
    for( var i = 12; i < 24; i++ )
    {
        if( i == hour() ) fill( 150 );
        angle = ( i - 11 ) * PI / 36;
        triangle( width / 2 + 100 * cos( angle - 0.05 ), height - 100 * sin( angle - 0.05 ),
                  width / 2 + 100 * cos( angle + 0.05 ), height - 100 * sin( angle + 0.05 ),
                  width / 2 + 200 * cos( angle ), height - 200 * sin( angle ) );   
    }
}

It’s a volcano. The lava color is based on the minutes. The height of the lava in the tube is based on the seconds ( it is completely empty at the start of a minute ). The lava streaks around the base represent the hours.

Project-06-Abstract-Clock-akluk

sketch

//akluk

var com = true;
//--------------------------
function setup() {
    createCanvas(360, 360);
    background(0);
}

//--------------------------
function draw() {
    noStroke();
    //Generates space background
    if (com){
    	background(0);
    	for (var j = 0; j < 300; j++){
    		var x = random(0,360);
    		var y = random(0,360);
    		fill(255);
    		ellipse(x,y,2,2);
    	}
    	com = false;
    }

    //Clear path
    fill(0);
   	rect(0,height-50,width,50);

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

    //initializes light spacing and length at equator
    var div = 216/24;
    var seg = div - 4;

    var cut_start = width/2-109;
    var cut_end = width/2+109;
    fill(120);
    //The actual Deathstar
    ellipse(width/2,height/2, 220,220);
    fill(80);

    //Disc
    ellipse(width/2-40,height/2-35,55,55);
    fill(60);

    //Cannon
    ellipse(width/2-43,height/2-38,15,15);
    fill(0);
    ellipse(width/2-43,height/2-38,4,4);
    noFill();
    strokeWeight(2);
    stroke(color(60,255,28));
    //Charge Ring 1
    arc(width/2-40,height/2-35,53,53,0,radians(mappedS));
    
    if (S == 59){
    	line(width/2-43,height/2-38, width/2-40,height/2-61.5);
    	line(width/2-43,height/2-38, width/2-13.5,height/2-35);
    	line(width/2-43,height/2-38, width/2-66.5,height/2-35);
    	line(width/2-43,height/2-38, width/2-40,height/2-8.5);
    	strokeWeight(5);
    	line(width/2-43,height/2-38,0,0);
    	com = true;
    }

    //Star Destroyer
    var length = 85;
    var moved = M*(width + 85)/60;
    stroke(180);
    strokeWeight(1);
    fill(180);
    triangle(width-moved,height-17, width+70-moved,height-5,width+70-moved,height-29);
    triangle(width+70-moved,height-5,width+70-moved,height-29,width+85-moved,height-17);
    rect(width+45-moved,height-30,30,10);
    rect(width+55-moved,height-35,15,10);
    rect(width+60-moved,height-45,5,10);
    rect(width+55-moved,height-42,15,3);
    stroke(90);
    strokeWeight(1);
    line(width+5-moved,height-17,width+80-moved,height-17);

    //Ring2 
    noFill()
    stroke(40);
    strokeWeight(2);
	arc(width/2-43,height/2-38,22,22,0,radians(360));
	stroke(color(30,140,40));
    //Equator Line
    stroke(80);
    strokeWeight(3);
    line(width/2-109,height/2,width/2+109,height/2);

    //Equator Lights
    for (var i = 0; i < H; i++){
    	stroke(255);
    	strokeWeight(1);
    	line(cut_start+1+i*div, height/2, cut_start+1+i*div+seg,height/2);
    }
    // Compute the widths of the rectangles

    //Texture on the Deathstar
    var box_s = width/2 - 85;
    noStroke();
    fill(105);
    for (var i = 0; i < 3; i++){
    	rect(box_s + 20*i,height/2+10,10, 40)
	}    
	rect(box_s + 60, height/2+10, 70, 20);
	for (var i = 0; i < 2; i++){
    	rect(box_s + 135 + 20*i,height/2+10,15, 60-i*10)
	}    
	rect(box_s + 60, height/2+35,20,65);
	rect(box_s + 87.5, height/2+35, 42.5,42.5);
	rect(box_s + 87.5, height/2+82.5,42.5, 10);
	arc(box_s + 50, height/2+60, 85,65, radians(90),radians(180));
	arc(box_s + 85, height/2-10,180,180,radians(270),radians(360));
	fill(120);
	rect(box_s + 100, height/2-100,10,90);
	rect(box_s + 125, height/2-90,10,80);
	rect(box_s + 150, height/2-70,10,60);
    

}

I am a huge star wars fan and this was a fun project for me. I started off of thing about rings and how that can represent time, which then lead me to the death star on how the cannon needs to charge to fire. Below are some sketches that described what I had in mind before implementing it in p5.js. The seconds are represented by the green charging ring of the cannon of the Death Star. At the end of every min, the canon will fire. The lights at the equator of the Death Star represent each hour of the day. For example, 7AM will have 7 lights lit up. Finally the Star destroyer at the bottom moves across the screen every hour.

yunzhous-project-06

sketch

var eW = 30; //top of shishi odoshi
var eH = 15; //top of shishi odoshi
var yShift = 50; //mition of shishi odoshi
var SbeadD = 5;
var MbeadD = 8;
var HbeadD = 15;
var Mx = 110; //x position of minute moving bead
var Hx = 110;//x position of hour moving bead
var Sy = 5;////y position of second moving bead
var My = 100; ////y position of minute moving bead
var Hy = 260;////y position of hour moving bead


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

function draw() {
    var s = second();
    var m = minute();
    var h = hour();
    var mil = millis();

    //backgound color change from day to night
    if (h > 5 & h < 18){
        background(251, 237, 160);//yellow
    } else{
        background(70, 134, 186);//blue
    }

    //shishi odoshi pivot - second
    if (s % 2 != 0){
        shishiUP();
        plate();
        Sbead();
    } else{
        shishiDown();
        plate();
        Sbead();
    }

    //shishi odoshi pivot - minute
    if (s > 58){
        push();
        translate(0, 160);
        shishiDown();
        plate();
        Mbead();
        pop();
    } else{
        push();
        translate(0, 160);
        shishiUP();
        plate();
        Mbead();
        pop();
    }

    //shishi odoshi pivot - hour
    if (m > 58 & s > 58){
        push();
        translate(0, 320);
        shishiDown();
        plate();
        Hbead();
        pop();
    } else{
        push();
        translate(0, 320);
        shishiUP();
        plate();
        Hbead();
        pop();
    }

    //moving bead for second
    if (s % 2 != 0){
        Sy += 1;
        fill(199, 240, 245);
        ellipse(65, Sy, SbeadD, SbeadD);
    } else{
        //limit bead position
        Sy = 5;
    }
    
    //moving bead for minute
    if (s > 57 & s < 59){
        Mx -= 1.3;
        My += 3.2;
        fill(199, 240, 245);
        ellipse(Mx, My, MbeadD, MbeadD);
        //limit the bead position
        } else{
            Mx = 110;
            My = 100;
        }

    //moving bead for hour
    if (m > 58 & s > 57 && s < 59){
        Hx -= 1.3;
        Hy += 3.2;
        fill(199, 240, 245);
        ellipse(Hx, Hy, HbeadD, HbeadD);
        //limit the bead position
    } else {
        Hx = 110;
        Hy = 260;
    }

}

function shishiUP(){
    //shishi odoshi
    fill("green");
    rect(55, 45, 5, 35);//support
    quad(50, 30, 80, 30, 30, 80, 0, 80);
    arc(15, 79, eW, eH, 0, 180);
        //top
    ellipse(65, 30, eW, eH);
    fill(0);
    ellipse(65, 30, eW - 7, eH - 7);
            //support
    fill("green");
    rectMode(CORNER);
    quad(42, 55, 52, 45, 52, 50, 47, 55);
    rect(40, 50, 5, 35);
}

function shishiDown(){
    fill("green");
    rect(55, 45, 5, 35);//support
    quad(65, 30 + yShift, 95, 30 + yShift, 45, 80 - yShift, 15, 80 - yShift);
    arc(30, 81 - yShift, eW, eH, 180, 0);
    arc(80, 79, eW, eH, 0, 180);     //top
            //support
    fill("green");
    rectMode(CORNER);
    quad(42, 55, 52, 45, 52, 50, 47, 55);
    rect(40, 50, 5, 35);
}

function plate(){
    fill(255);
    //base
    ellipse(150, 110, 40, 20);
    //top
    ellipse(150, 100, 90, 30);
}

function Sbead(){ //beads accumulating according to seconds
    var s = second();
    var x = [110,115,120,125,130,135,140,145,150,155,160,165,170,175,180,185,
        115,120,125,130,135,140,145,150,155,160,165,170,175,180,
        120,125,130,135,140,145,150,155,160,165,170,175,
        125,130,135,140,145,150,155,160,165,170,
        130,135,140,145,150,155,160,165];
    var y = [100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,
        96,96,96,96,96,96,96,96,96,96,96,96,96,96,
        92,92,92,92,92,92,92,92,92,92,92,92,
        88,88,88,88,88,88,88,88,88,88,
        84,84,84,84,84,84,84,84,];
    for (i = 0; i < s; i ++){
        frameRate(20);
        fill(199, 240, 245);
        ellipse(x[i], y[i], SbeadD, SbeadD);
    }

}

function Mbead(){//beads accumulating according to minutes
    var m = minute();
    var x = [110,115,120,125,130,135,140,145,150,155,160,165,170,175,180,185,
        115,120,125,130,135,140,145,150,155,160,165,170,175,180,
        120,125,130,135,140,145,150,155,160,165,170,175,
        125,130,135,140,145,150,155,160,165,170,
        130,135,140,145,150,155,160,165];
    var y = [100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,
        96,96,96,96,96,96,96,96,96,96,96,96,96,96,
        92,92,92,92,92,92,92,92,92,92,92,92,
        88,88,88,88,88,88,88,88,88,88,
        84,84,84,84,84,84,84,84,];
    for (i = 0; i < m; i ++){
        frameRate(20);
        fill(199, 240, 245);
        ellipse(x[i], y[i], MbeadD, MbeadD);
    }

}

function Hbead(){//beads accumulating according to hours
    var h = hour();
    if (h > 12){
        h -= 12;  //12-hour clock
    }
    var x = [110,125,140,155,170,185,
            125,140,155,170,
            140,155,];
    var y = [100,100,100,100,100,100,
            88,88,88,88,
            76,76];
    for (i = 0; i < h; i ++){
        frameRate(20);
        fill(199, 240, 245);
        ellipse(x[i], y[i], HbeadD, HbeadD);
    }
}

I got the idea from shishi odoshi, a Japanese devices that’s made to frighten away animals. The weight of running water makes the bamboo pivot. I feel like water could be a metaphor for time, so I made three shishi odoshis, each representing second, minute, and hour, respectively. Beads that represent water, fall into the shishi odoshis, and the weight of the beads make the bamboo pivot and fall down to a plate nearby. The beads are passed down like time flows. The number of beads in the plate indicate the second/minute/hour. The background color indicate day/night.

I had problem making the bamboo to pivot according to time at first. Then I break the motion down to two parts: one with the bamboo up, one with bamboo down, and wrote conditions according to time to control motion. I also had trouble matching the motion of the bamboo with that of the moving beads. After hours of test/adjustments they finally match.

 

rkondrup-looking-outwards-06

cool
Mark Wilson’s computational art is a combination of randomly generated images and geometric relationships. He has been a trailblazer in the field of computational art since the 80s, presenting his work at exhibitions all over the world. By layering complex geometrical patterns Wilson is able to produce an image with many layers of colors, shapes, sizes, textures, and visual effects. I was drawn to this project because it appeared to be a very intricate type of computational design which is endlessly interesting. I am curious to see how random image generation from basic geometrical shapes has developed since the early days of computational design, and whether this sort of drawing has entirely gone out of fashion as a result of the development of more sophisticated algorithms which can produce more visually appealing products. I am also curious to see how designers of computational design have responded to the psychological side of random image generation, maybe tweaking algorithms to still produce images that can be called random, but which contain certain constraints that result in more refined visual or emotional effects.