Category: Section D

hyt-Project-06: Clock Works

hyt-06-project

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-06-clock


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


function draw() {

    // current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // color palette
    var transparency = 170; // alpha value
    var red = color(255, 0, 0, 170);
    var orange = color(255, 100, 0, 170);
    var green = color(7, 150, 70, 170);
    var yellow = color(255, 250, 55, transparency);
    var blue = color(0, 155, 250, 170);
    var purple = color(142, 78, 201, 170);

    // draw rainbows
    var hDiff = 30;// height difference each time
    var initialHL = 190; // initial height on the left
    var initialHR = 20; // initial height on the right

    background(200 - H, 255 - M * 0.5, 210 - S * 0.7); // bg color randomizes as time goes by

    
    //red
    strokeWeight(25); // line thickness
    stroke(red);
    line(0, initialHL, width, initialHR);
    //orange
    stroke(orange);
    line(0, initialHL + hDiff, width, initialHR + hDiff);
    //green
    stroke(green);
    line(0, initialHL + hDiff * 2, width, initialHR + hDiff * 2);
    //blue
    stroke(blue);
    line(0, initialHL + hDiff * 3, width, initialHR + hDiff * 3);
    //purple
    stroke(purple);
    line(0, initialHL + hDiff * 4, width, initialHR + hDiff * 4);

//----------------------------


    // HOURS dots
    for (var dotH = 1; dotH <= 24; dotH++) {
        noStroke();
        fill(yellow); 
        rect(20 * H, initialHL + 30 - 7.1 * H, 3, 3); 
        // pacman shape
        noStroke();
        fill(yellow);
        var angle1 = 20; 
        var angle2 = 310;
        arc(20 * H - 20, initialHL + 40 - 7.1 * H, 20, 20, angle1, angle2);
    }


    // MINUTES dots
    for (var dotM = 1; dotM <= 60; dotM++) {
        noStroke();
        fill(yellow);
        rect(7.9 * M, initialHL + 60 - 2.8 * M, 3, 3); 
        // pacman shape
        noStroke();
        fill(yellow);
        var angle1 = 20; 
        var angle2 = 310;
        arc(7.9 * M - 20, initialHL + 70 - 2.8 * M, 20, 20, angle1, angle2);
    }



    // SECONDS dots
    for (var dotS = 1; dotS <= 60; dotS++) {
        noStroke();
        fill(yellow);
        rect(7.9 * S, initialHL + 90 - 2.8 * S, 3, 3); 
        // pacman shape
        var angle1 = 20; 
        var angle2 = 310;
        arc(7.9 * S - 20, initialHL + 100 - 2.8 * S, 20, 20, angle1, angle2);
    }


    // clock time shown on the left top side
    fill(0, 100);
    rotate(-20);
    textFont("Courier New", [60]);
    time = H + ":" + M + ":" + S; 
    text(time, -10, 163); 

}

For this project, I had several ideas in mind, and somehow thought of the viral Nyan cats looped video on Youtube. Inspired by that, I decided to make a rainbow background with each Pacman moving as a way of representing the clock’s hour, minute, and seconds.

(A really rough sketch for ideation phase)

However, later I realized the extreme difficulty of drawing an arc movement for the Pacman, and resorted to a simpler version of straight lines of rainbow. Some of the variations within the projects are play with colors, transparency, movements and the background color gradient throughout time. I like how the final results turned out, and also enjoyed the process of making.

Jihee Kim_SectionD_Project-06-Abstract-Clock

jiheek1_project6

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//project6 Abstract Clock
//section D

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

function draw() {
    background(127, 87, 75);
    drawGrid(); // draw a picnic table pattern in the background with grid
    var H = hour()%12; //the hour restarts on a 12-hour basis
    var M = minute();
    var S = second();

    //SECONDS
    //for every second, a salt particle comes out of the shaker
    //draw the salt shaker
    stroke(180);
    strokeWeight(2);
    fill(220);
    ellipse(77.5, 120, 55, 55); // head of the shaker
    fill(255);
    stroke(180);
    quad(35, 20, 50, 120, 105, 120, 120, 20); // the body of salt shaker
    line(55, 20, 70, 120); // left profile line of shaker
    line(100, 20, 85, 120); // right profile line of shaker
    noStroke();
    fill(180);
    ellipse(73, 138, 5, 5); // hole left
    ellipse(82, 138, 5, 5); // hole right
    ellipse(77.5, 144, 5, 5); // hole middle
    //have the salt particles come out every second
    for (var i = 0; i < S; i ++) {
    fill(255);
    rect(76, 152 + i*5, 2.5, 2.5);
    }

    // MINUTES
    // a ring forms on the plate of eggs every minute
    //draw the plate of eggs
    fill(230);
    noStroke();
    ellipse(width*3/4-1, height/4+3, 403, 403); // plate shadow for volume
    fill(255);
    ellipse(width*3/4, height/4, 400, 400); // plate
    //draw navy blue patterns on the plate
    noFill();
    stroke(155, 187, 234);
    strokeWeight(1);
    //have ring draw every minute
    for (var i = 0; i < M; i++) {
    ellipse(width*3/4, height/4, 390-i*6.5, 390-i*6.5);
    }

    //draw the eggs
    noStroke();
    //Egg1
    fill(239, 228, 202); //428
    ellipse(270, height/2-96, 153, 133); //egg white shadow for volume
    fill(249, 245, 232);
    ellipse(270, height/2-100, 150, 130); //egg white
    fill(237, 130, 37);
    ellipse(width-230, height/2-85, 53, 53); //egg yolk shadow for volume
    fill(242, 139, 40);
    ellipse(width-232, height/2-86, 50, 50); //egg yolk
    //Egg2
    fill(239, 228, 202); //362
    ellipse(width*3/4+2, height/2-5, 153, 133); //egg white shadow for volume
    fill(249, 245, 232);
    ellipse(width*3/4, height/2-9, 150, 130); //egg white
    fill(237, 143, 50);
    ellipse(width-133, height/2-13, 53, 53); //egg yolk shadow for volume
    fill(242, 152, 54);
    ellipse(width-135, height/2-14, 50, 50); //egg yolk


    //HOURS
    //a sausage will appear every hour
    //the tray of sausages will clear every 12 hours
    //draw a tray for sausage
    fill(255);
    rect(width/3-45, height-100, width*2/3+45, 100);
    rect(width/3-30, height-115, width*2/3+30, 15);
    ellipse(width/3-30, height-100, 30, 30); //round the corner of the tray
    //draw patterns on the tray
    noFill();
    stroke(160, 157, 78);
    strokeWeight(1);
    line(width/3-42, height-100, width/3-42, height);
    line(width/3-27, height-112, width, height-112);
    arc(width/3-27, height-97, 30, 30, PI, 3*PI/2);
    //draw sausage (a sausage appears every hour)
    var X = [130, 160, 190, 220, 250, 280, 310, 340, 370, 400, 430, 460];
    var Y = 410;
    for (var i = 0; i < H; i++) {
        stroke(147, 49, 28);
        strokeWeight(15); //thickness of the sausage
        line(X[i], Y, X[i] + 15, Y + 40);
    }
}

function drawGrid() {
    // cover canvas with vertical lines to depict a wood table
    for (var y = 0; y < height; y ++) {
        for (var x = 50; x < width; x += 50) {
            stroke(102, 69, 56);
            strokeWeight(3);
            line(x, y, x, height);
        }
    }
}

For this project, I created an abstract clock in a picnic setting. I used a hierarchy in size to depict the seconds, minutes and hours. The smallest element, which is the salt particles, represent the seconds. The second in size, which is the blue rings/pattern that form on the plate, depict the minutes. Lastly, the biggest element, the sausages represent the hours. The tray of sausages clears every 12 hours, making this clock based on a 12hr system.

sketch

Jihee Kim (Section D)– LookingOutwards-06

Forms (excerpt) from Memo Akten on Vimeo.

Forms is a computational project that is a collaboration between Memo Akten and Quayola, both who are visual/media artists. From March to September of 2012, Forms was a part of the In the Blink of an Eye: Media and Movement exhibition at the National Media Museum in Bradford, England. The project reflects restricted randomness that leads to a dynamic, organic animation of movements.

a moment in the project

The project explores interaction between the human body and forces in movements, concentrating on athletes who exert significant forces. It is interesting how through abstract visual elements, the authors portray relationships between the human and its environment, such as balance, force, and beauty. The video below compares the software-generated art and the subject(athletes) that was studied.

Forms (process) from Memo Akten on Vimeo.

In the initial stages of the project, the artists created a setting that responds to the dynamic movements of the human body, acquired data on the athletes and ran physics-based simulations. This beginning stage is when they came across random yet predicted animations using 3D Studio Max and custom-made software. Although the animation may seem to be following the athlete’s motions strictly and simply depicting his/her movements, a sense of randomness exists in that the artists of the project focused more on what they see. If the hands of the person is being the attractor point, the authors augmented that part of the body more than other ones and created a flowing, enticing, random project. The end product is a combination of multiple layers that each focuses on different powers and actions of various parts of the athlete’s body.

It is intriguing how Memo Akten and Quayola were able to depict natural activities through random, anthropogenic elements and engage the audience through different senses. Their concentration on collisions between nature and “data dramatizations” as artists successfully manifest itself in the project.

More information can be found on the artists’ websites:

Memo Akten

Quayola

jennyzha-Project 06

sketch

// Jenny Zhang
// Section D
// jennyzha@andrew.cmu.edu
// Project 06

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var r = 100;
var b = 100;
var g = 100;
var e1 = 100;
var e2 = 100;
var e3 = 100;
var mouthSizeW = 5;
var mouthSizeH = 10;
var prevSec;
var millisRolloverTime;

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

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

	// 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);

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

    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);

    noStroke();
    fill(255, 200, 200);
    ellipse(width/2, height/2, hourBarWidth, hourBarWidth);
    var eyeLX = width/2 - hourBarWidth*0.25;
    var eyeRX = width/2 + hourBarWidth * 0.25;
    fill(0,90,150);
    ellipse(eyeLX, height/2, minuteBarWidth/3, minuteBarWidth/3);
    ellipse(eyeRX, height/2, minuteBarWidth/3, minuteBarWidth/3);
    fill(226,43,42);
    var mouth = width/2 
    ellipse(mouth, height-height/4, secondBarWidthChunky/3, secondBarWidthChunky/3)
}

This project was inspired by our third project, the variable faces, where I made the head the hour, the eyes the minute, and the mouth a function of the seconds. I enjoyed going back to my previous project and reviewing, improving, and understanding my past code on a deeper level as I refined it into an abstract clock for this project.

danakim-LookingOutwards-06

“Flux” is a particle system based generative display typeface created by Gabriel Comym. The program generates 1,000 particles at a random location within a limited masking area, the type. Each particle behaves singularly and follows a random direction and velocity based on values from sine and cosine mathematical sequences. Each particles’ time, point size, and transparency value is randomized. Line segments are created between the particle’s starting point and the different points along the path the particle follows.

Gabriel Comym is a visual designer who specializes in interface design, which explains his use of typeface to explore the possibilities of computational design. I admire how simple the process actually is and how he makes such simple geometries come together to create a complex whole.

Flux; Gabriel Comym

Flux; Gabriel Comym

creyes1-Project-06-Abstract-Clock

creyes1 Project-06 (Abstract Clock)

//Christopher Reyes
//Section D
//creyes1@andrew.cmu.edu
//Project-06 (Abstract Clock)

var prevSec;
var millisRolloverTime;

var moonX = 280;
var moonY = 160;
var moonSize = 260;
var moonShadowSize = moonSize*.9

var bgColor = [192, 214, 180];

var jewelHue;
var bgColorH;

var cx = moonX;
var cy = moonY;

function setup() {
    createCanvas(480, 480);
    colorMode(HSL);
    angleMode(DEGREES);
    background(bgColor);
    millisRolloverTime = 0;
}

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

    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;

    //Converts current time to a number between 0 and 24
    var currentTime = H + (M/60) + (secondsWithFraction/3600);

    //Changes background color every minute, lighter in AM, darker in PM
    var bgColorH = map(currentTime%6, 0, 6, 0, 360);
    var bgColorS = map(currentTime, 0, 24, 30, 60);
    var bgColorL = map(currentTime, 0, 24, 80, 20);

    background(bgColorH, bgColorS, bgColorL);

    //Lighter background ellipse towards bottom
    noStroke();
    fill(bgColorH, bgColorS-5, bgColorL+5);
    ellipse(width/2, height, 500, 315);

    //Moon
    fill(0, 0, 90, 1);
    ellipse(moonX, moonY, moonSize);

    fill(0, 100, 100, 1);
    ellipse(moonX, moonY, moonSize*.95);

    fill(0, 0, 90, 1);
    moonDetail(moonX, moonY);

    //Moves shadow throughout the day, creating an eclipse at noon
    var moonShadowX = map(currentTime, 0, 24,
                          moonX-(moonSize/2+moonShadowSize/2),
                          moonX+(moonSize/2+moonShadowSize/2));

    //Moon Shadow, changes color along with background
    fill(bgColorH, bgColorS, bgColorL, 1);
    ellipse(moonShadowX, moonY, moonShadowSize);

    //Clockwise spinnning ring based on current secondsWithFraction
    stroke(0, 100, 100, 1);
    noFill();
    strokeWeight(5);

    push();
    translate(moonX, moonY);
    rotate(map(secondsWithFraction, 0, 60, 0, 360));
    arc(0, 0, moonSize*1.75, moonSize*1.75, 10, 110);
    arc(0, 0, moonSize*1.75, moonSize*1.75, 130, 230);
    arc(0, 0, moonSize*1.75, moonSize*1.75, 250, 350);
    pop();

    //Counter-clockwise spinning ring, also based on current secondsWithFraction
    strokeWeight(2);

    push();
    translate(moonX, moonY);
    rotate(map(secondsWithFraction, 0, 60, 360, 0));
    arc(0, 0, moonSize*1.7, moonSize*1.7, 10, 110);
    arc(0, 0, moonSize*1.7, moonSize*1.7, 130, 230);
    arc(0, 0, moonSize*1.7, moonSize*1.7, 250, 350);
    pop();

    noStroke();

    //Creates clouds that float across the screen every minute
    var cloudX = map(secondsWithFraction, 0, 60, -100, width+140);

    fill(0, 0, 95, .8);
    cloud((cloudX-40)*1.05, 250+35, 1);
    cloud((cloudX-30)*.9, 250-20, 1);
    cloud(cloudX, 250, 1);
    cloud((cloudX+20)*.95, 250-30, 1);
    cloud((cloudX+30)*1.1, 250+30, 1);
    cloud(cloudX+50, 250-25, 1);

    //Jewel color is 180 degrees less the background's hue, including wraparound
    var jewelHue = bgColorH - 180;

    if (bgColorH < 180) {
        jewelHue = 360 - (180-bgColorH);
    } else {
        var jewelHue = bgColorH - 180;
    }

    //Static jewels
    jewel(115, 275, 1, jewelHue);
    jewel(160, 350, .6, jewelHue);
    jewel(65, 375, .8, jewelHue);

    //Rotates 3 jewels around moon in a clock-like fashion according to time
    var handOffset = 270; //Readjusts hands to start at 0 mark of the clock
    var handPlace = moonSize;

    //Second hand
    var handAngleS = map(secondsWithFraction, 0, 60,
                         handOffset, 360+handOffset);
    jewel(computeX(handPlace, handAngleS), computeY(handPlace, handAngleS),
          .2, jewelHue);

    //Minute hand
    var handAngleM = map(M+(secondsWithFraction/60), 0, 60,
                         handOffset, 360+handOffset);
    jewel(computeX(handPlace, handAngleM), computeY(handPlace, handAngleM),
          .2, jewelHue);

    //Hour hand
    var handAngleH = map(currentTime%12, 0, 12, handOffset, 360+handOffset);
    jewel(computeX(handPlace, handAngleH), computeY(handPlace, handAngleH),
          .2, jewelHue);

}

function cloud(x, y, SCALE) {
    quad(x, y+(20*SCALE), x+(40*SCALE), y, x, y-(20*SCALE), x-(40*SCALE), y);
}

function moonDetail(x, y) {
    var moonDetailX = [x+55, x-25, x+20, x, x+70, x+103, x-70, x-55];
    var moonDetailY = [y-15, y-45, y-78, y+30, y+30, y-10, y, y+55];
    var moonDetailScale = [1.8, 1.2, .65, .8, .9, .5, .5, .3];

    for (var i = 0; i < 8; i++) {
        push();
        translate(moonDetailX[i], moonDetailY[i]);
        rotate(45)
        cloud(0, 0, moonDetailScale[i]);
        pop();
    }
}

function jewel(x, y, SCALE, col) {

    //I || Base shape
    fill(col, 54, 71);
    quad(x+(35*SCALE), y+(10*SCALE),
         x, y-(83*SCALE),
         x-(35*SCALE), y+(10*SCALE),
         x, y+(83*SCALE));

    //II
    fill(col, 68, 80);
    triangle(x-(35*SCALE), y+(10*SCALE),
             x-(10*SCALE), y+(20*SCALE),
             x, y-(83*SCALE));
    //III
    fill(col, 75, 75);
    triangle(x-(35*SCALE), y+(10*SCALE),
             x-(10*SCALE), y+(20*SCALE),
             x, y+(83*SCALE));

    //IV
    fill(col, 46, 64);
    triangle(x+(35*SCALE), y+(10*SCALE),
             x-(10*SCALE), y+(20*SCALE),
             x, y+(83*SCALE));

}

//Computes the X position of a point on a circle according to given parameters
function computeX(handRadius, angle) {
return cx + handRadius*cos(angle);
}

//Computes the Y position of a point on a circle according to given parameters
function computeY(handRadius, angle) {
return cy + handRadius*sin(angle);
}

For this project I wanted to loosely base it off of the eclipse mechanic I included in my Dynamic Drawing assignment, but still create a unique stand-alone image.

The shadow of the moon displays the time on a 24-hour cycle, eclipsing at noon every day, and all the colors of the image change throughout the course of the day in hue, saturation, and lightness. A lot of my process regarding this project simply came from experimenting and adding layers of elements to see what was effective.

Through the creation of this, I enjoyed being able to play around with the timing of my elements and seeing the little interactions between them as their cycles played out.

hyt-Looking-Outwards-06: Randomness

 

For this week’s topic, I came across a multidisciplinary performance piece by Claire Bardainne and Adrien Mondot, “The Movement of air”. The piece was mesmerizing to watch as elements of acrobatic dancing movements, algorithmic stage design, and live music performance come together with the perfect rhythm and movement, eventually capturing the invisible movement of air using the tangible visuals and sounds.

It is interesting to learn about the duo artists’ work of progress and mechanism behind the final result. Particularly, the stage visuals are in fact projected and controlled by both human interventions and reactive data censors reinterpreting the three dancers’ location. Therefore, the factor of “randomness” is in some way controlled and “biased”, yet still spontaneous. That being said, each performance is real-time and never repetitive; while having an agenda, it concurrently allows the dancers to move freely in alignment with the digital projections, deconstructing the three-walled cube space.

However, it was disappointing that the artists disclose more information on how the set of algorithms is constructed, other than the fact that it was created with the software Millumin 2 (after ten years of using their custom made software eMotion). It seems that the speed and direction of the dancers are all detected by the sensor, then translated into those geometric patterns such as circling lines and pieces.

yunzhous-LookingOutwards-05

Boulon

Metaballs

Metaballs

I picked two artwork to show how 3D rendering can be applied to both large scene and small scale. Boulon is done by Florent Duport and Metaballs is done by Elmar Glaubauf. I really like the depth of field of the scene in Boulon, and the poping signboard. The contrast is well controlled, just enough for the lanterns and  signs to pop out.

The balls in Metaballs has a gradient color, and semi-opaque and glossy texture. It seems to be reflecting the background color, which is very delicate.

The algorithm used for rendering is vray. It is commonly used in architectural rendering, and now I learned it can be applied to wider fields. The users can adjust many settings in vray, such as amount of light, amount of reflection, etc.

You can see larger images here: metaballs  Boulon

daphnel-Looking Outwards-06

         Random Number Generated Arcs

Marius Watz and Jer Thorp, a generative and data artist respectively, used pseudo-random compositions of shapes and figures in order to create a set of computational designed artworks for the “Random Number Multiples” series. The photo above is supposed to be a volcano erupting with the molten lava colored as different streaks. I find this piece of work to be very intriguing; how a series of lines and basic colors were able to make a simple yet colorful piece of work. I admire the fact that even though these artists are skilled in computers, they chose instead to screen print their artworks that they created through their computer softwares by hand. I feel that this work of art is very representative of the artists themselves because although randomized to a certain point, the lines still look very uniform, clean-cut and neat.

yunzhous-project-05

sketch

function setup() {
    createCanvas(480, 480);
    background(41, 90, 141);
    angleMode(DEGREES);
    noLoop();
    
}

function draw() {

    for (var x = 0; x < 480; x += 96){
        for (var y = 0; y < 480; y += 96){
            push();
            translate(x, y);
            pattern();
            pop();

        }
    }
}

function pattern(){
    var radius = 20;
    var centerX = 40;
    var centerY = 40;

    //main piece
    strokeWeight(1.5);
    stroke(0);
    fill(214, 151, 0);
    arc(centerX, centerY, radius * 2 + 10, radius * 2 + 10, 0, 315); //edge
    fill(243, 210, 132);
    arc(centerX, centerY, radius * 2, radius * 2, 0, 315); //inside

    //separate piece
    push();
    rotate(-45);
    strokeWeight(1.5);
    stroke(0);
    fill(214, 151, 0);
    arc(centerX - 25, centerY + 22, radius * 2 + 10, radius * 2 + 10, 0, 45); //edge
    fill(243, 210, 132);
    arc(centerX - 25, centerY + 22, radius * 2, radius * 2, 0, 45); //inside
    pop();

    //toppings
    strokeWeight(1/2);
    fill(238, 97, 69);
    ellipse(centerX, centerY - 8, 6, 6);
    ellipse(centerX - 3, centerY + 5, 6, 6);
    ellipse(centerX - 10, centerY - 3, 6, 6);
    ellipse(centerX - 10, centerY - 13, 6, 6);
    ellipse(centerX + 8, centerY - 13, 6, 6);
    ellipse(centerX - 18, centerY + 3, 6, 6);
    ellipse(centerX - 12, centerY + 9, 6, 6);
    ellipse(centerX - 3, centerY + 13, 6, 6);
    ellipse(centerX + 7, centerY + 9, 6, 6);
    ellipse(centerX + 17, centerY + 4, 6, 6);
    ellipse(centerX + 27, centerY - 11, 6, 6);

    //division
    for (i = 0; i < 360; i += 45){
        strokeWeight(1);
        line(40, 40, centerX + cos(i) * (radius + 5), centerY + sin(i) * (radius + 5));
    }
    
}

For this project, I wanted to make the wallpaper fun and cute (as always). I thought food that’s partially bitten is very cute. I thought of lollipops, popsicles, donuts, and finally decided to go with pizza because I really wanted to have pizza. I tried creating my own function for the pizza pattern. Then I used for loop to repeat the pattern. I was actually amazed at how easily I could create only one single for loop and put the function inside rather than writing multiple loops for each element.