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

Project 06: Abstract Clock

var x=[]
var y=[]
var w=[] //height of rects at background
var a=[-50,0,150,250,300]
var b=[]
var l=[100,200,100,250,100]
var dx=[]
var dy=[]
var r
var spd
var theta
var sunposX
var sunposY

function setup(){
    createCanvas(480,300);
    background(220);
    for(var i=0;i<20;i++){          //setting up array for background gradiant
        y[i]=7.5*i;
        w[i]=height-15*i;
    }
    for(var n=0;n<5;n++){           //setting up the changes in x,y for reflection
        dx[n]=l[n]/20;          //the change in x
        dy[n]=l[n]/3*20;            //the change in y
        b[n]=200; 
    }
    r=height/2-20;
    //spd=1;
    //theta=90;



}

function draw(){
    BackColor();                                //draw backgrounds

    let Sec = map(second(), 0, 60, 0, radians(360)) - radians(90);
    let Min = map(minute() + norm(second(), 0, 60), 0, 60, 0, radians(360)) - radians(90);
    let Hour= map(hour(),0,24,0,radians(360))-radians(90);       // inspired by code here: https://p5js.org/examples/input-clock.html

    push();
    translate(width/2,height/2);
    drawingContext.shadowBlur=40;        
    drawingContext.shadowColor=color(251,114,39);       //glowing effect
    sunposX=r*cos(Hour);
    sunposY=r*sin(Hour);                           //polar coordinates
    fill(244,116,95);
    Sun(sunposX,sunposY); 
                          //draw sun
    drawingContext.shadowBlur=40;        
    drawingContext.shadowColor=color(255); 
    fill(238,243,196);
    Moon(sunposX,sunposY);                      //draw moon
    pop();



    Mountain();                                 //draw mountains
    WaterColor();

    ReflectionMount();
    

}

function Mountain(){            //draw mountain
    noStroke();
    fill(40);                   //color dark grey 
    for (var n=0;n<5;n++){
        triangle(a[n],b[n],a[n]+l[n]/2,b[n]-l[n]/3,a[n]+l[n],b[n]);
    }                   
}

function ReflectionMount(){
    noStroke();
    fill(140);                   //color dark grey
    for (var n=0;n<5;n++){
        triangle(a[n],b[n],a[n]+l[n]/2,b[n]+l[n]/6,a[n]+l[n],b[n]);
    }
    
}



function Sun(x,y){
    ellipse(-x,-y,40,40);
}

function Moon(x,y){
    ellipse(x,y,40,40);
}


function BackColor(){
    noStroke();
    let h=hour()
    if (h>=6 & h<8){                           //6am-8am sunrise
        for(var i=0;i<20;i++){
            fill(178+i*3,206-i*5/2,245-i*6);
            rect(0,y[i],width,w[i]);
        }
    }else if(h>=8 & h<18){                     //8am-6pm day time
        for(var i=0;i<20;i++){
            fill(120+i*5,200+i*3/2,239-i*0.5);
            rect(0,y[i],width,w[i]);
        }
    }else if(h>=18 & h<20){                    //6pm-8pm sunset
        for(var i=0;i<20;i++){
            fill(178+i*3,206-i*5/2,245-i*6);
            rect(0,y[i],width,w[i]);
        }
    }else if(h>=20 || h<6){                     //8pm-6am night time
        for(var i=0;i<20;i++){
            fill(44-i*3/2,46-i*3/2,88-i*5/2);
            rect(0,y[i],width,w[i]);
        }
    }

}

function WaterColor(){
    noStroke();
    let h=hour()
    if (h>=6 & h<8){                           //6am-8am sunrise
        for(var i=0;i<20;i++){
            fill(178+i*3,206-i*5/2,245-i*6);
            rect(0,200,width,w[i]/2);
        }
    }else if(h>=8 & h<18){                     //8am-6pm day time
        for(var i=0;i<20;i++){
            fill(120+i*5,200+i*3/2,239-i*0.5);
            rect(0,200,width,w[i]/2);
        }
    }else if(h>=18 & h<20){                    //6pm-8pm sunset
        for(var i=0;i<20;i++){
            fill(178+i*3,206-i*5/2,245-i*6);
            rect(0,200,width,w[i]/2);
        }
    }else if(h>=20 || h<6){                     //8pm-6am night time
        for(var i=0;i<20;i++){
            fill(44-i*3/2,46-i*3/2,88-i*5/2);
            rect(0,200,width,w[i]/2);
        }
    }

}

The abstract I created has four different scenes: sunrise, daytime, sunset, and night time; I want to create a reflection of the mountain and the sky; and the sun and moon goes with the current time, rising from left and falls from right.

Looking Outwards 06: Randomness

Creator’s name: Wenran Zhao
Title of work: Random waLK & particles, vehicles system
Year of Creation: Unknown

This series of artwork uses randomness to create captivating variations of protrusions that resemble squid tentacles. I love the motion depicted in these pieces and the water-like and fluid quality that they have. The computation relies on wavy lines that extrude from a center-horizontal line of the canvas made up of random strings of yellow and blue as well as a circle spread across the canvas. I highly doubt that these works are generated in a “truly” random sense since it is much more likely that a sequence with certain bounds is used to generate these variations. I believe it is so as a result of the loose observable pattern or similar quality from one piece to the other. The artist’s artistic sensibilities portray a very fun and playful essence.

Randomness – TheUnthoughts

LO6: Random Computational Art

the computational art using randomness that i’m interested in is Wired0513 by deskriptiv.
In this work, the artist uses random lines and curves to form unique patterns that look like weaving wires. Inside those random wires, we can recognize the “0513” texts formed by the wires.

This is very interesting because the artist uses randomness in exploring the uncertainty of how a line will go and where it’s going, but also controlling them by creating a text from it. I think the author first define the text that occupies a certain part of the space in the whole canvas, and then when the line goes by, it just goes around the text rather than across it. This is similar to some kind of ant marching movement, so I think part of the inspiration comes from the nature as well.

This artwork using randomness is also inspiring for architecture work. We usually deal with different landscapes, so this randomness can help us generate different complicated contours and lanscapes, so that we can find some parts where we can build houses.

link here

Looking Outward – 06

John Cage had this exhibition in Cambridge. He was known for his different kinds of music and his 1952 composition in which his music was so random. He also used randomness in his hard and it determined his entire exhibition from which stones were chosen to what would be painted around the stones. He also used computer generated coordinates to determine the heights and positions of the pictures while also using a random process to add and remove different pieces during the exhibition as well!

This is important because it starts talking about how certain artists can afford to give up control so he uses computation as a way to make “no mistakes”. Everything has a purpose even if its randomness.

Sometimes randomization also came from solutions. This stained glass window was actually created as a solution to a Sudoku puzzle. So, broken down by row and column, it’s solutions defined the color and types of the stained window.

https://understandinguncertainty.org/node/1066

Project 06

sketch

//Keng Pu (Paul) Li
//section A 

var minuteX = [];
var minuteY = [];
var minuteColor = [];
var sec;
var mnth;
var hr;

function setup() {
    createCanvas(300,400);
    rectMode(CENTER);
    //assigns array for minute fn

}

function draw() {
    background(40,10,10);
    sec = second()+1;

    //allows minute circles to produce jittering effect
     for(var i = 0; i<=minute(); i++){
        minuteX[i] = min(56+i*random(2.5,3),245);
        minuteY[i] = max(340-i*random(3,5),100);
        minuteColor[i] = minute()*4;
    }

    timeMonth();
    timeHours();
    timeMinutes();
    frameRate(sec); //higher the second faster the frame-> quickker jitters
}

function timeMonth(){
    mnth = month();
    noStroke();
    //changes color depending to season, fall = orange, winter =  blue, spring =  pink, summer = green, code in that order
    //also places circle on diff corner of that color depending on the season
    if(mnth>=9 & mnth<12){
        fill(255,160,70);
        circle(20,20,30);
    } else if(mnth>=12 & mnth<3){
        fill(18,130,210);
        circle(width-20,20,30);
    } else if(mnth>=3 & mnth<6){
        fill(255,100,220);
        circle(width-20,height-20,30);
    }else{
        fill(30,230,70);
        circle(20,height-20,30);
    }
    rect(width/2,height/2,200,300);
}


// draws a strike every hour and resets every 12 hr on top of the orange cube,, resets to 0 strikes each 24 hr

function timeHours(){
    hr = hour();
    var strikeW = (200/24) - 13;
    var strikeH = 30;
    fill(255,40,40);
    stroke(0.5);
    if(hr<24){
        for (var i = 0; i<hr; i++){
            rect((55+strikeW/2)-i*(strikeW-200/48),50-strikeH/2,strikeW,strikeH);
        }
    }else{
        var i = 0;
        for (var i = 0; i<hr; i++){
            rect((55+strikeW/2)-i*(strikeW-200/48),50-strikeH/2,strikeW,strikeH);
        }
    }
}

//for every minute, a ball is added into the orange box, and as time goes on the color of the balls get lighter, the spread also goes further ddepending on time

function timeMinutes(){
    noStroke();
    fill(0,0,0,0);
   for(var i = 0; i<=minute(); i++){
        circle(minuteX[i],minuteY[i],10);
        fill(minuteColor[i]);
    }
   

}

Looking Outwards 06

This project is a version of the set algorithm where the color of each triangle gradually changes according to when it was created. The color changes gradually from white to black, then flips instantly back to white again. According to the artist, this was originally just an accident, but somehow it turns into this cool piece with three dimensional illusion. I admire this piece of work because seems random upon first glance but it creates this overall beautiful organic pattern. It started by his other project “Differential Lines” and from that he moved on to this 3D algorithm. The key thing to get this to work is to have the mesh do various self-balancing operations as it grows. From this project, I learned that randomness exist by following certain rules, for example, this project was following rules like

Split edges that are too long.
Avoid inserting new vertices where the vertex density is too high.
Flip edges to reduce the length of the edge.
Add a force that makes the triangles attempt to be roughly equilateral.

When randomness is in balance, art is created.

“Different Meshes” by Anders Hoff

Randomness Blog

For this blog, I found “Eternal Connection” by Claus O.Wilke very interesting. In the series of work, he dives not only a generative method using parameters, but he also employs randomness to aid his iterations that are now available as NFT’s. His method of creating these included Javascript and WebAssembly that allows for the art to “run live in the browser”. Moreover, there were multiple strategies of generating these connections, including Perplexity progression, Random seed progression, and color palette progression. Each of these variates one single starting piece that progresses step by step in very different ways. For the random seed progression, it uses a code very similar to noise in Java, meaning between every step in the 2D or 3D noise, taking different combination of input data types Each version is different but still very closely related, creating gradual but powerful changes over a “randomizer’’ that remains constant over the course of a loop. Through combining the different progressions, the system can alter the shape, concentration, and color of the patterns. Wilke uses this to generate grids that show similar variations side by side to create interesting patterns, whether it is the changing colors, shapes, or density.

https://clauswilke.com/art/project/eternal-connection

Project 06: Abstract-Clock

For this project, the inner circle represents every second, the outer circle shows the seconds turning to minutes, the different colored rays of the “sun” show the different minutes, and the pink background shows the number of hours in the day!

sketch

function setup() {
    createCanvas(350, 350);
    background(173, 216, 230);
}

function draw() {
    background(173, 216, 230);
    hoursBackground();
    minutesCircle();
    secondsCircle();
}

function hoursBackground() { //creates pink rectangles every hour
    push();
    for(var i = 0; i < hour(); i++) {
        strokeWeight(0.1);
        fill(243, 196, 207);
        rect(0,0, width/24, height);
        translate(width/24,0);
    }
    pop();
}

function minutesCircle() { //every minute, a new ray appears coming out of the inner circle
    push();
    strokeWeight(11);
    translate(width/2, height/2);
    for (var i = 0; i < minute(); i ++) {
        angleMode(DEGREES);
        if(i % 2 == 0) { //if i mod 2 is 0, then a short yellow line is drawn
            stroke(253, 253, 150, 200);
            line(0,0, 0, -100);
            rotate(6);
        }else{ // else a long orange line is drawn
            stroke(255, 179, 71, 200);
            line(0,0, 0, -125);
            rotate(6);
        }   
    }
    pop();
}

function secondsCircle() {
        fill(173, 216, 230); //creates inner blue circle
        strokeWeight(0.1);
        circle(width/2, height/2, 40);

        strokeWeight(10); //creates outer white circle that counts 60 seconds in a minute
        stroke(255);
        noFill();
        arc(width/2, height/2, 250, 250, 270, 270 + second()*6);

        strokeWeight(1); // creates inner circle that visually shows every second
        fill(255);
        arc(width/2, height/2, 30, 30, 270, 270 + millis()*0.36);
}

Project 06 Abstract Clock

The way time is tracked in this piece of design is by having the little blue fish tracking seconds, the little pink fish tracking minutes, and the rainbow tracking hours. So the blue fish moves right a bit every second and when the minute increases the pink fish moves right. the rainbow goes from red to blue every hour and it restarts from red again when the full rainbow is done.

sketch

//Jenny Wang
//Section B
//jiayiw3@andrew.cmu.edu
//Project 06 Abstract Clock

//set variables
var H;//hour
var M;//min
var S;//sec
var bx;//blue fish x
var px;//piink fish x

function setup() {
    createCanvas(480, 400);
    background(255);

} 

function draw() {
    background(199,137,201);//purple
    
    //current time
    H = hour();
    M = minute();
    S = second();

    //rainbow (hour)
    if(H == 6 || H == 12 || H==18 || H==24){
        noStroke();
        fill(122,153,229);//blue
        ellipse(240,140,560,470)
        fill(131,226,210);//teal
        ellipse(240,140,480,390);
        fill(151,226,134);//green
        ellipse(240,140,400,310);
        fill(239,232,101);//yellow
        ellipse(240,140,320,230);
        fill(229,156,90);//orange
        ellipse(240,140,240,150);
        fill(247,129,87);//red
        ellipse(240,140,160,70);
    }
    else if(H == 5 || H == 11 || H==17 || H==23){
        noStroke();
        fill(131,226,210);//teal
        ellipse(240,140,480,390);
        fill(151,226,134);//green
        ellipse(240,140,400,310);
        fill(239,232,101);//yellow
        ellipse(240,140,320,230);
        fill(229,156,90);//orange
        ellipse(240,140,240,150);
        fill(247,129,87);//red
        ellipse(240,140,160,70);
    }
    else if(H == 4 || H == 10 || H== 16 || H== 22){
        noStroke();
        fill(151,226,134);//green
        ellipse(240,140,400,310);
        fill(239,232,101);//yellow
        ellipse(240,140,320,230);
        fill(229,156,90);//orange
        ellipse(240,140,240,150);
        fill(247,129,87);//red
        ellipse(240,140,160,70);
    }

    else if(H == 3 || H == 9 || H== 15 || H== 21){
        noStroke();
        fill(239,232,101);//yellow
        ellipse(240,140,320,230);
        fill(229,156,90);//orange
        ellipse(240,140,240,150);
        fill(247,129,87);//red
        ellipse(240,140,160,70);
    }

    else if(H == 2 || H == 8 || H== 14 || H== 20){
        noStroke();
        fill(229,156,90);//orange
        ellipse(240,140,240,150);
        fill(247,129,87);//red
        ellipse(240,140,160,70);
    }

    else if(H == 1 || H == 7 || H== 13 || H== 19){
        noStroke();
        fill(247,129,87);//red
        ellipse(240,140,160,70);
    }

    //ocean
    fill(198,230,227);
    rect(0,132,480,351);

    //bluefish(sec)
    bx = width/59;
    bluefish(S*bx,height/2);

    //pink fish(min)
    px = width/59
    pinkfish(M*px,3*height/4);
}
 
function bluefish(x,y){
    //tail
    fill(44,170,213);
    triangle(x-38,y+13,x-38,y-13,x,y);
    //fin on top and bottom
    fill(144,214,235);
    triangle(x+5,y-17,x-10,y-23,x-10,y+10);
    //body
    fill(44,170,213);
    ellipse(x,y,55,34);
    //fin
    fill(144,214,235);
    triangle(x-15,y-6,x-15,y+6,x,y-2);
    //head
    fill(144,214,235);
    ellipse(x+16,y,23,27);
    //eye
    fill(73,64,24);
    ellipse(x+15,y-3,5,5);
    fill("white");
    ellipse(x+14,y-4,2,2);
    //smile
    stroke(73,64,24);
    strokeWeight(1);
    point(x+19,y+6);
    point(x+20,y+6.5);
    point(x+21,y+7);
    point(x+22,y+7.3);
    point(x+23,y+7);
    point(x+24,y+6.5);
}

function pinkfish(x,y){
    //tail
    noStroke();
    fill(193,82,144);//dark pink
    triangle(x-38,y+13,x-38,y-13,x,y);
    //fin on top and bottom
    fill(233,171,205);//light pink
    triangle(x+5,y-17,x-10,y-23,x-10,y+10);
    //body
    fill(193,82,144);
    ellipse(x,y,55,34);
    //fin
    fill(233,171,205);
    triangle(x-15,y-6,x-15,y+6,x,y-2);
    //head
    fill(233,171,205);
    ellipse(x+16,y,23,27);
    //eye
    fill(73,64,24);
    ellipse(x+15,y-3,5,5);
    fill("white");
    ellipse(x+14,y-4,2,2);
    //smile
    stroke(73,64,24);
    strokeWeight(1);
    point(x+19,y+6);
    point(x+20,y+6.5);
    point(x+21,y+7);
    point(x+22,y+7.3);
    point(x+23,y+7);
    point(x+24,y+6.5);
}

LO: 06

When thinking about randomness, my mind went straight to Dada, specifically Dada poetry. So much of Dada itself is left up to chance: the process, the reaction, the viewer, the artist: this is especially true with Dada poetry. Paradoxically, Dada poetry often both gave instruction on how to create Dada art while considered a piece of Dada art itself. Tristan Tzara’s 1920 To Make a Dadaist Poem is a great example:

“Pick up a newspaper.

Take some scissors.

Choose in the newspaper an article of length that tells you to give your poem.

Cut out the item.

Carefully cut out each of the words that make up the item carefully and put them in a bag.

Shake gently.

Now pull each cutting one after another.

Copy conscientiously

In the order they have left the bag.

The poem will resemble you.

And you are an infinitely original writer and a bewitching sensibility, although misunderstood by the vulgar.”

There is obvious randomness in the actions described: random newspaper, random words, random order. But Tzara’s call to action is also given to a random artist. This serves the Dada goal of nonmeaning well. I have also been considering the fact that Dada poetry that prompts viewer response is similar in a lot of ways to programming. Obviously there are differences, but the fact that one is given a list of instructions to follow, usually phrased particularly does connect the two in my mind.