October 2021 – Page 19 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project-06: Abstract Clock

//cbtruong;
//Section B;

var secondVal;
var minuteVal;
var hourVal;
var monthVal;

var sixtyCircleX = [];
var sixtyCircleY = [];
var sixtyCircleX2 = [];
var sixtyCircleY2 = [];
var hourAngle = [];


function setup() {
    createCanvas(480, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    secondVal = second();
    minuteVal = minute();
    hourVal = hour();
    monthVal = month();
    for (var i = 0; i < 8; i++){
        hourAngle.push(i*45);
    }
    for (var y = 10; y < 120; y += 20){
        for (var x = 10; x < 200; x += 20){
            sixtyCircleX.push(x);
            sixtyCircleY.push(y);
        }
    }
    for (var y2 = 370; y2 < 480; y2 += 20){
        for (var x2 = 290; x2 < 480; x2 += 20){
            sixtyCircleX2.push(x2);
            sixtyCircleY2.push(y2);
        }
    }
}

function draw() {
    background(205, 202, 240);
    timeOfDay(hourVal);
    for (var i = 0; i < 8; i++){
        noStroke();
        fill(230, 100, 120);
        if (i > hourVal % 8){
            fill(27, 30, 35);
        }
        hourSquare(hourAngle[i]);
        hourAngle[i] += 0.1;
    }
    for (var j = 0; j < 60; j++){
        fill(100, 230, 120);
        if (j > secondVal){
            fill(240);
        }
        sixtyCircleTime(sixtyCircleX[j], sixtyCircleY[j]);
    }
    for (var l = 0; l < 60; l++){
        fill(120, 120, 230);
        if (l > minuteVal){
            fill(240);
        }
        sixtyCircleTime(sixtyCircleX2[l], sixtyCircleY2[l]);
    }
    for (var m = 180; m <= 480; m += 25){
        fill(240);
        if (m >= monthVal*22.5){
            fill(45, 67, 89);
        }
        push();
        translate(-60, 20);
        rotate(radians(330));
        monthTri(20, m);
        monthTri(260, m);
        pop();
    }
}

function hourSquare(hourAngle){
    push();
    translate(230, 230);
    square(80*cos(radians(hourAngle)), 80*sin(radians(hourAngle)), 20);
    pop();
}

function timeOfDay(hourValue){
    if (hourVal > 15){
       fill(227, 111, 30);
    }
    else if (hourVal < 15 & hourVal > 7){
       fill(252, 209, 77);
    }
    else {
       fill(27, 30, 35);
    }
    circle(240, 240, 100);
}

function sixtyCircleTime(x, y){
    circle(x, y, 20);
}

function monthTri (x, y){
    triangle(x, y, x + 20, y, x + 10, y + 20);
}

I had grander ideas for an Abstract Clock, but I decided to do one that was practical. This one tells the months (the triangles that fill up according to the month), seconds and minutes (the circles arrays – the upper are seconds and the lower are minutes). And finally, the time of day (which I split into 3, Morning (7-15), Afternoon (15-23), and Night (23-7)) and the hours passed of each time. It is very basic.

LO 6: Randomness

For this Week’s LO, I will talk about Wolfgang Amadeus Mozart’s (attributed but up for debate) Musical Dice Game (1792) – also known as Musikalisches Wurfelspiel.

Seeing how we were to find Randomness, I was initially at a loss. Until I happened onto this piece that was allegedly from Mozart himself.

Its randomness lies in the fact that a die (or two) is supposed to be thrown to get a value from 2 to 12 but minus 1 – so a range of 1-11. With this number, a person will consult a chart that has 8 columns and 11 rows. The “random” number will give the person the measure of music from the row of the column and then they will move onto the next column and repeat the process. They will do this for all 8 columns and the second set of 8 columns and 11 rows each in the second chart. The end product is a 16-Measure Piece of Music.

This is where the computation comes in – it is just like the nested for loops we have been working with. Furthermore, the available measures are like the arrays.

Overall, I like Classical Music and Mozart is one of my favorites. And I find it cool that he supposedly made something like this.

Here is Mozart’s Bio and Musical Dice Games (there is a section for Mozart’s in it).

Project 06: Abstract Clock

sketch

//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Assignment 06-A: Abstract Clock


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

function draw() {
    var minu = minute();
    //sky darkens by the hour
    background(hour()*5);
    
    //scoop slowly falls by the minute
    for (var col = 0; col <= 5 * minu; col+=1) { 
        fill("pink");
        push();
        translate(225, 40);
        circle(0, col, 20);
        pop();

    } 

    //arm waves for each second
    if (second()%2 == 0){
        line(150, 350, 100, 325);
    } else if (second()%2 != 0){
        line(150, 350, 100, 375);
    } 

     //stick figure man
    fill("white");
    circle(150, 300, 50); //head
    fill("black");
    circle(140, 298, 5);
    circle(160, 298, 5);
    line(150, 325, 150, 400); //back
    line(150, 400, 125, 450); //left leg
    line(150, 400, 175, 450); //right leg
    line(150, 350, 225, 350); //arm with ice cream
    fill(250, 215, 160);
    triangle(225, 365, 215, 345, 235, 345); //ice cream cone


}

I really wanted the program to have ice cream scoops stacking, but I couldn’t figure out a way to do it without my code crashing (since the y of the circle would have to be -=, but you can’t have negative minutes). Instead it is falling very slowly until it falls onto the cone at 59 minutes.

LO-06: Randomness

For this week’s LO, I looked back on a game I used to play a lot as a kid: Minecraft created in 2011 by Mojang. It is interesting how despite its simple graphics, Minecraft encourages creativity and worldbuilding. This shows that games do not need the most sophisticated or detailed assets to still be fun and addicting. One of the main defining aspects of Minecraft is its terrains that are regenerated with every game and are virtually infinite, allowing the player to explore and build however they wish.

I was curious about how the terrains were generated, as they seemed to spawn randomly, sometimes even creating floating islands. Apparently, Minecraft terrains are generated based on Perline noise functions. When the game starts, it generates a Seed (a random 64-bit number) which is used to generate noise functions. So the game starts on a broad level by creating simple topographical maps, then goes into smaller random details like bushes, animals, lakes, etc. However, these random environments and objects still have a consistent logic and constraints they have to follow to make them believable terrains. This random generation allows for a different world each time, giving the player new ideas and possibilities to define their own gameplay.

LO 06: Randomness

Andrej Bauer, a professor of computational mathematics at the University of Ljubljana, created “random art.” Every picture is created by a computer program that accepts a string from which an image is randomly generated. The picture’s name is the base for a pseudo-random number generator, used to create a mathematical formula, which determines the colors used in the picture. The same name will always create the same picture, though adjustments like capitalization will produce a change. If the picture name consists of two words, the first word determines the colors and focal points of the image, while the second word determines the selection and arrangements of elements present. You can make your own random art – just type in a name for the picture, press “Paint,” and watch as the image loads. At first the colors are selected, and you see a pixelated screen of color. Then, it begins loading and becoming a more complex and high quality painting. Some string images are generated more quickly than others.

http://www.random-art.org/

“Play That Funky Music” random picture, words capitalized.

“play that funky music” random picture, words not capitalized.

LO-06

Karlheinz Stockhausen’s KLAVIERSTÜCK XI

I chose to write about German composer Karlheinz Stockhausen’s KLAVIERSTÜCK XI for this week’s Looking Outward assignment. Klavierstück XI consists of 19 fragments spread over a single, large page. The performer may begin with any fragment, and continue to any other, proceeding through the labyrinth until a fragment has been reached for the third time, when the performance ends. This means that there is an almost unimaginable number of versions. This huge number of options stems from the fact that it is an “open-form” composition. The nineteen fragments are then distributed over the single, large page of the score in such a way as to minimize any possible influence on spontaneity of choice and promote statistical equality. While this is not completely “truly” random, it still is similar to randomness. I think this piece by Karlheinz Stockhausen is extremely interesting and think you should look in to it more, as there is lots to learn!

6 of the 36 possible rhythm patterns from the “final matrix”.
(from Truelove’s “The Translation of Rhythm into Pitch in KLAVIERSTÜCK XI”)

Abstract Clock

sketch

angle = 20;

var x= 0;
var y = 300;

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

function draw() {

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

    dx1 = 600/s; // used for line seconds
    dy1 = 600/s;
    dx2 = 200/s; 
    dy2 = -200/s;
    x1 = 100; // used for line seconds
    y1 = 40;
    x2 = 300; 
    y2 = 400; 

    angles = 30

    push();
    background(244, 241, 222);
    for (var i = 0; i < s; i += 1) { //second lines
        strokeWeight(2)
        stroke(129, 179, 154)
        line(i, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    pop();

    for (var i = 0; i< m; i+=1) { //minute circles
        noFill();
        stroke(223, 122, 94)
        strokeWeight(2);
        ellipse(300, 100, i*7, i*7) //increase circle size
    }

    for (var i = 0; i< h; i+=1) { //hour circles
        push();
        translate(240, 240)
        noFill();
        stroke( 60, 64, 91)
        strokeWeight(3);
        rotate(radians(50));
        ellipse(i*25-300, 40, 15, 15) //change circle position
        pop();
    }

    timer(x, y); //bottom right timer


    if (h < 7 || h>=19) {
        noStroke() // moon depending on hour
        fill(60, 64, 91)
        ellipse(430, 380, 80, 80);
        fill(244, 241, 222)
        ellipse(450, 370, 80, 80);
    } else {
        sun(); //sun depending on hour
     
     }
 }


function timer(x, y) { //for bottom right corner
    textSize(20);
    push();
    noStroke()
    fill(250)
    rect(380, 450, 100, 50);

    fill( 60, 64, 91)
    text(h, 390, 470)

    fill(0)
    text(":", 412, 470)

    fill(223, 122, 94)
    text(m, 420, 470)

    fill(0)
    text(":", 442, 470)

    fill(129, 179, 154)
    text(s, 450, 470)
    pop();

}

function sun() {
        translate(410, 380);
        noStroke();
        fill(222, 222, 74)
        ellipse(0,0, 50, 50);
        for (var i = 0; i< 50; i++) {
            rotate(radians(angle))
             rect(-5,-10, 5, 60);
        }
}

Looking Outwards 6

http://www.random-art.org/online/

The Random Art Program by Andrej Bauer is a website that generates an image based on the text the user inputs as the title. The test is used as the seed for a pseudo-random number generator for a mathematical formula. The formula dictates color and sequence of random choices. Although the same title always produces the same image, it is difficult to predict the outcome of the image from the name alone. If the title has two words, the first word determines color and layout, and the second word determines composition and selection of graphics.

I had a lot of fun trying out different titles. The program is case sensitive, drastically affecting the outcome of the image.

Project 06 – Abstract Clock

I remember learning about the Korean water clock that was invented in the Chosun dynasty in elementary school, which inspired me to create a simplified version of it through p5.js.

엄마표 과학] 만공한국사, 자격루 만들기 - 물시계의 원리 : 네이버 블로그 — reference image

sketch

var angle = 180;
function setup() {
    createCanvas(420, 400);
    // rectMode(CENTER);
}

function draw() {
    background(0);
    fill(255);
    textAlign(CENTER);
    textSize(30);
    text('The water clock', width/2, 50);
    textSize(10);
    textAlign(LEFT);

    let hr = hour();
    let mn = minute();
    let sc = second();

   
    fill(255);
    text(hr + ':' + mn + ':' + sc, 10, 150);
    text('24:00:00', width-65, 150);
    rect(100, 140, 30, 5);
    rect(200, 140, 30, 10);
    
    //hour
    push();
    fill(255);
    translate(350, 380);
    rotate(radians(180)); //rotation to make the rectangle grow upwards
    rect(0, 0, 120, 240);
    fill(0, 0, 255);
    translate(5, 0);
    rect(0, 0, 110, hr*10);
    pop();

    //minute
    push();
    fill(255); //red rectangle
    translate(205, 260);
    rotate(radians(180)); //rotation to make the rectangle grow upwards
    rect(0, 0, 80, 120);
    fill(0, 75, 255);
    translate(5, 0);
    rect(0, 0, 70, mn*2);
    if (mn==59) { //when each the mn container is full, water is transferred to the hr contatiner
        translate(-30, 115);
        stroke(0, 100, 255);
        strokeWeight(5);
        line(-8, 0, 30, 0);
        stroke(0, 0, 255);
        line(-8, 0, -8, -115);
    }
    pop();

    //second
    noStroke();
    push();
    fill(255); 
    translate(100, 200);
    rotate(radians(angle)); //rotation to make the rectangle grow upwards
    rect(0, 0, 40, 60);
    fill(0, 150, 255);
    translate(5, 0);
    rect(0, 0, 30, sc);
    if (sc==59) { //when each the sc container is full, water is transferred to the mn contatiner
        translate(-30, 57.5);
        stroke(0, 150, 255);
        strokeWeight(3);
        line(-8, 0, 30, 0);
        stroke(0, 100, 255);
        line(-8, 0, -8, -115);
    }
    pop();
}

Looking Outwards 06: Randomness

This week’s topic of projects regarding randomness is probably my favorite so far. As randomness in art is open ended and up to the audience’s interpretation, it gives a much more interactive aspect to observing projects. A specific work I want to focus on is Jackson Pollock’s work. He was a major figure in the expressionist movement and widely appreciated for his contemporary art and recently has a memorial exhibition at MoMA. His methods of creating art were largely using the “drip technique” which were random pouring of paints onto the canvas. These methods create randomized artworks where no two pieces would be the same. Another influence onto his paints would be that between 1947 and 1950 was the “drip period” where these techniques were popular. My favorite specific piece from artist Pollock would be “number 1” as it is the first drip technique painting he made, using thinned paint and cans of commercial enamel. It is veru interesting to me how a random method and progress to create a piece would result in something so famous and well known.