October 2020 – Page 31 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project 6: Abstract Clock

(The illustration file wasn’t loading properly so I had to embed it twice!)

Since Nintendo recently announced that Hyrule Warriors: Age of Calamity is coming out soon, I decided to create a clock inspired by The Legend of Zelda’s Breath of the Wild. The sky changes color depending on the hour, the clouds move across the sky every minute, and pink sparkles appear every second.

breath of the wild

var dusk;
var dawn;
var sparkleX = [];
var sparkleY = [];
var randomW = [];
var randomH = [];
let yPerl = 0.0;

function preload() {
    mySon = loadImage("link_illustration.png");
}

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

    greenDusk = color(162, 219, 202); //dusk sky color
    yellowDawn = color(252, 246, 211); //dawn sky color
    mountainColor = color(56, 116, 150); //color of the mountains
    cloudColor = color(225, 223, 184); //colod of the clouds
    ledgeColor = color(19, 68, 97); //color of Link's ledge
    ledgeShadow = color(4, 42, 50, 75); //color of ledge shadow
    hyrulePink = color(255, 145, 203); //color of the sparkles

    lerpValue = 0;
    dusk = "nightfall";
    dawn = "daybreak";
    sunlight = "sunrise";
    moonlight = "twilight";

    //sparkles
    for (i = 0; i < 60; i++) {
        sparkleX[i] = random(width);
        sparkleY[i] = random(175, 300);
        randomW[i] = random(3, 6);
        randomH[i] = random(3, 6);
    }
}

function draw() {
    background(0);
    noStroke();
    sky(); //sky incremently changes color based on hour

    push(); //clouds move across sky based on minute
    var m = minute();
    driftingCloud = map(m, 0, 60, 0, width);
    translate(driftingCloud, 0);
    clouds();
    pop();

    mountains(); //randomly generated mountains
    castle(); //castle in the distance

    //sparkles in the horizon
    fill(hyrulePink);

    for (i = 0; i < second(); i++) {
        rect(sparkleX[i], sparkleY[i], randomW[i], randomH[i]);
    }
    
    //ledge that Link stands on
    ledge();

    //illustration of Link
    scale(0.2);
    image(mySon, 1100, 350);

}

//sky incremently changes color each hour
function sky() {
    var h = hour();

    if (dawn === "daybreak") {
        lerpValue = map(h, 23, 0, 0, 1);
    }
    else {
        lerpValue = map(h, 0, 23, 0, 1);
    }

    if (h < 12) {
        lerpValue = map(h, 0, 11.5, 0, 1);
    } else {
        lerpValue = map(h, 11.5, 23, 1, 0);
    }
    
    var skyChange = lerpColor(greenDusk, yellowDawn, lerpValue);
    fill(skyChange);
    rect(0, 0, width, height);
}

//mountain horizon
function mountains() {
    fill(mountainColor);
    beginShape();
    let xPerl = 0;

    for (let x = 0; x <= width; x += 10){
        let y = map(noise(xPerl), 0, 1, 150, 200);
        vertex(x, y);
        xPerl += 0.2;
    }

    yPerl += 0.2;
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
}

//clouds based on minute
function clouds() {
    fill(cloudColor);
    var m = minute();

    for (var c = 0; c <= m; c++) {

        //top left middle cloud
        push();
        scale(0.75);
        translate(0, -50);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //middle cloud
        push();
        translate(150, -20);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //top left small cloud
        push();
        scale(0.5);
        translate(-70, -80);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //bottom left large cloud
        push();
        scale(1.25);
        translate(-90, -20);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //top right cloud
        push();
        scale(0.75);
        translate(320, -80);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //top middle cloud
        push();
        scale(0.5);
        translate(50, -110);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //far left middle cloud
        push();
        translate(-250, -50);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();
    }
}

//ledge where Link is standing
function ledge() {
    push();
    fill(ledgeColor);
    translate(width/1.8, height + 10);
    beginShape();
    vertex(-30, -50);
    vertex(0, -90);
    vertex(90, -85);
    vertex(130, -40);
    vertex(160, 50);
    vertex(-60, 50);
    endShape(CLOSE);
    pop();

    push();
    fill(ledgeShadow);
    translate(width/1.8, height + 10);
    beginShape();
    vertex(-10, -75);
    vertex(0, -90);
    vertex(90, -85);
    vertex(130, -40);
    vertex(160, 50);
    endShape(CLOSE);
    pop();
}

//castle in the horizon
function castle() {
    fill(mountainColor);
    rect(125, 110, 30, 100); //castle tower
    rect(102, 150, 75, 100); //castle building
    rect(90, 165, 100, 50); //castle ledge
    rect(122.5, 125, 35, 10); //lower level of castle
    triangle(120, 110, 140, 50, 160, 110); //main spire
    triangle(100, 150, 107.5, 110, 115, 150); //left spire
    triangle(165, 150, 172.5, 110, 180, 150); //right spire
    triangle(85, 200, 92.5, 130, 100, 200); //bottom left spire
    triangle(180, 200, 187.5, 130, 195, 200); //bottom right spire

    //windows
    fill(greenDusk);
    rect(135, 110, 5, 10);
    rect(130, 110, 2, 10);
    rect(135, 140, 10, 10);

    //jagged rocks from mountain
    push();
    fill(mountainColor);
    rectMode(CENTER);
    translate(450, 225);
    rotate(PI/1.2);
    rect(0, 0, 50, 250);
    rotate(PI/4.0);
    rect(415, -150, 40, 250);
    rect(200, -50, 35, 250);
    pop();
}

Quick sketch of Link I drew for this project.

Looking Outwards 06

Jae Son
Section C

Looking Outwards 06

I found Marius Watz’s “Abstract01.js” interesting. Using processing.js, he created this piece of computational art. I think it might be “pseudo-random” because of the composition. The composition/visual of the shape when mouse clicked is random yet has somewhat consistent shape. To make it complicated and random but organized at the same time, I think Watz has used probability distributions to bias randomness to get this kind of composition. I admire the randomness and organized system that coexist in this artwork. I like the interactivity of it, too. It draws the shape when I click the mouse, and I like how interactive input and randomness are both present in this artwork.

Abstract01.js

LO 06 – Randomness

Last year, I was browsing Reddit when I stumbled on a post that took me to a little website: https://nopaint.art/. It’s the work of Jeffrey Alan Scudder, a digital artist who teaches Emerging Digital Practices as a professor in Oregon currently. No Paint is a pseudo-random artwork in the sense that the algorithm contributes randomness, but the user can determine how to utilize it.

No Paint is an online painting game / program. However, the user is presented with only two buttons to interact with the canvas: “No” and “Paint”. Within the program, a vast array of brushes, stickers, and effects are programmed in. Each round of painting, the program presents the user with a brush, sticker, or effect: for example, a two-tone brush that snakes in a random direction continuously, or an effect that continuously changes the saturation the entire canvas. When the user clicks “Paint”, the element or effect is applied in its current state. For example, if a user was presented with a randomly snaking brush, they could wait a long time for the brush to cover most of the canvas before pressing “Paint”, or press it shortly after for a short stroke. Pressing “No” cycles onto the next element or effect.

This project stuck with me because of its unique take on drawing programs. Since the brushes are randomly chosen and most never cohere well with your existing artwork, you have very little control over what you can draw on the canvas and have to be creative with using randomly selected elements to form a cohesive artwork.

Looking Outwards 06: Randomness

Robbie Barrat’s Neural Network Balenciaga series is a fascinating
amalgamation of AI, fashion, and the fine line between creativity
and mimicry. Barrat utilized new neural network processing methods
to analyze the similarities in thousands of images from Balenciaga
runway shows and lookbooks and pushed this data to another one of
his neural networks, prompting the system to interpret what makes
Balenciaga Balenciaga. The results are random but creative
mishmashes of what the AI learned from thousands of images and
is trained to think Balenciaga looks like.

I was especially drawn to this work because of how it throws the whole
concept of randomness into question – the AI may generate random iterations
of Balenciaga outfits, but the iterations look so similar to each other
that it makes the viewer ponder about the original source material itself.
I additionally was interested in this glimpse into how generative algorithms
really work – the AI doesn’t know what Balenciaga or fashion really is, yet
tries to replicate these foreign concepts to its best approximation and
succeeds quite well.

Project 06 – Abstract Clock

I recently saw a tv show that talked about fish. It reminded me of my goldfish I used to take care of for 7 years, but died just a few months before I graduated high school. In memories of my goldfish, I wanted to create an abstract clock of a fish tank in space on an unknown planet. Each tank represents hours, minutes, and seconds as the water fills up the tank.

sketch

//Stefanie Suk
//ssuk@andrew.cmu.edu
//15-104 Section D

var fishx = 15; //width of fish
var fishy = 10; //height of fish

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

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

    var starx = random(0, 600);   //random x position of stars
    var stary = random(0, 250);   //randolm y position of stars

    background(50); //background color

    //moon and stars
    fill("yellow");
    ellipse(70, 70, 100, 100);  //moon at top left 
    ellipse(starx, stary, 5, 5);  //stars randomly placed

    //light brown base of planet
    fill(184, 165, 162)
    rect(0, 250, width, 200);  

    //darker brown oval holes on planet, left to right
    fill(158, 142, 140);
    strokeWeight(6);
    stroke(0);
    ellipse(30, 300, 100, 40);
    ellipse(100, 380, 100, 40);
    ellipse(300, 290, 100, 40);
    ellipse(400, 350, 100, 40);
    ellipse(600, 280, 100, 40); 

    //mapping time to fit in the fish tank
    mS = map(s, 0, 70, 0, 110);
    mM = map(m, 0, 70, 0, 110);
    mH = map(h, 0, 30, 0, 110); 
    
    //hour tank on left, dark blue
    strokeWeight(5);
    stroke(255);
    fill(31, 56, 240);
    rect(120, 150, 100, 100);  
    
    //minute tank in middle, dark blue
    stroke(255);
    fill(31, 56, 240);
    rect(260, 150, 100, 100); 
    
    //second tank on right, dark blue
    stroke(255);
    fill(31, 56, 240);
    rect(400, 150, 100, 100);  

    //three fish in each tank right to left
    strokeWeight(1);
    stroke(0);
    fill(255, 169, 157);
    ellipse(420, 230, fishx, fishy);
    triangle(427, 230, 435, 225, 435, 235);
    ellipse(320, 200, fishx, fishy);
    triangle(313, 200, 305, 195, 305, 205);
    ellipse(190, 215, fishx, fishy);
    triangle(197, 215, 205, 210, 205, 220);  

    //time rect in tank changing upwards, light blue
    noStroke();
    fill(157, 185, 255);
    rect(122.5, 152, 95, 95 - mH); //hour
    fill(157, 185, 255); 
    rect(262.5, 152, 95, 95 - mM); //minute
    fill(157, 185, 255);
    rect(402.5, 152, 95, 95 - mS); //second

}

LO 6 – Randomness in Computational Art

Randomness in Time

Daniel Kim (2015)

Daniel Kim’s Randomness in Time is a featured project from RISD’s spring Coding Architecture course taught by Carl Lostritto. The artwork has an array of random numbers on the left side along with a spider web of randomly interconnected lines on the right side. Kim explains that the project examines “data from the running time of a particular algorithm.” This running time data is then stored, placed in a list, then evaluated. As the algorithm continues to run, the values deviate further and further away from the initial starting point, thereby creating more randomness and unpredictability. I found this piece particularly interesting because the idea of using an algorithm to create randomness seems paradoxical, and begs the question if the values generated can truly be considered “random.” It also makes me wonder if it is possible to create truly “random” computational art; it seems as if there always needs to be a set of rules, restrictions, algorithms, etc. to create the starting foundation for the piece.

Looking Outwards 06 – Randomness

Image of “4900 Colours: Version II” in exhibition

Gerhard Richter’s “4900 Colours: Version II” is an artwork of 196 panels that is made up of 5×5 squares. The colors used in these panels are distributed randomly by a computer, and then the panels are randomly arranged by the eyes. The 196 penales can be displayed as one whole artwork together, or it can be arranged at random in sets of four panels (which forms a 10×10 square panel). What’s amazing about this artwork is that the 4,900 colors used in each block of Richter’s artwork are fully randomized by computer, yet they still look very harmonized all together. I can see how the artist incorporates the beauty of randomness into his artwork, and how the artist uses his artistic sensibilities to arrange the panels and create a harmonious and beautiful piece of artwork. I love the fact that his artworks are not limited, and shows a variety of expressions through his artwork by randomly generating colors.

Gerhard Richter’s Website: https://www.gerhard-richter.com/en/art/paintings/abstracts/colour-charts-12

Video of “4900 Colours: Version II” in exhibition

Project 6 – Clock

sketch Download

//Se A Kim
//Section D
//seak

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


function setup() {
    createCanvas(400, 400);
    for (var i = 0; i < 100; i ++){
        x[i] = random(width);
        y[i] = random(height);
        dx[i] = random(-5,5);
        dy[i] = random(-5,5);
        c[i] = color(random(255), random(255), random(255));
    }
    frameRate(20);
}

function draw() {
    background(0);

    //drawing circles in the background
    noStroke();
    for(i = 0; i < 50; i++){
        fill(c[i], 100, 100);
        ellipse(x[i], y[i], 20);
        x[i] += dx[i];
        y[i] += dy[i];
        if(x[i] > width){
            x[i] = 0;
        } else if (x [i] < 0){
            x[i] = width;
        } 
        if (y[i] > height){
            y[i] = 0;
        } else if (y[i] <0){
            y[i] = height;
        }
    }

    //clock ellipses
    var s = second();
    var m = minute();
    var h = hour();

    push();
    translate(200, 200);
    noStroke();

    //second circle
    let sAngle = map(s, 0, 60, 0, 360);
    var sx = 50 * cos(radians(sAngle));
    var sy = 50 * sin(radians(sAngle));
    fill(c[i]);
    rotate(radians(-90));
    ellipse(sx, sy, 100);

    //minute circle
    let mAngle = map(m, 0, 60, 0, 360);
    var mx = 50 * cos(radians(mAngle));
    var my = 50 * sin(radians(mAngle));
    fill(255, 100, 100, 100);
    rotate(radians(90));
    ellipse(mx, my, 80);

    //hour circle
    let hAngle = map(h, 0, 60, 0, 360);
    var hx = 50 * cos(radians(hAngle));
    var hy = 50 * sin(radians(hAngle));
    fill(255, 255, 255, 100);
    rotate(radians(10));
    ellipse(hx, hy, 100);

    pop();
}

For this project, I wanted to practice some of our in class exercises/lectures and fully understand the cos and sin (polar coordinates) and on arrays. I integrated these topics with the clock.

Project – 06 – abstract clock

sketch

    // Fangzheng Zhu
    // Section D
    // jtimczyk@andrew.cmu.edu
    // Project-06-abstract clock



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


function draw (){
    angleMode(DEGREES);
    let hr = hour();
    let mn = minute();
    let sc = second();

    push();
    translate(240,240);
    rotate (-90);
    strokeWeight(8);

    // second circle
    stroke(255,100,150);
    noFill();
    var end1 = map(sc, 0, 60, 0, 360);
    arc(0,0,300,300,0,end1);

    //minute circle
    stroke(150,100,255);
    var end2 = map(mn, 0, 60, 0, 360);
    arc(0, 0, 280, 280, 0, end2);

    //hour circle
    stroke(150,255,100);
    let end3 = map(hr%12, 0, 12, 0, 360);
    arc(0, 0, 260, 260, 0, end3);
    pop();

    


    //face
    //black eyebrows 
    stroke(255);
    fill(0);
    rectMode(CENTER);
    rect(170, 170, 25, 5, 15);
    rect(310, 170, 25, 5, 15);
  
    //eyes
    ellipseMode(CENTER);
    ellipse(170, 200, 20, 20);
    ellipse(310, 200, 20, 20);
  
    //nose
    noStroke();
    strokeWeight(6);
    fill(204, 95, 95);
    rect(240, 230, 15, 30, 20);
  
    //lips
    stroke(250);
    noFill();
    rect(240, 280, 60, 20, 20);
  
    //teeth
    line(240, 270, 240, 290);
    line(240 - 15, 270, 240 - 15, 290);
    line(240 + 15, 270, 240 + 15, 290);

    //face animation
    if (sc % 2 == 0) {
    //eyebrows raise
    //cover old eyebrows w white
    stroke(0);
    strokeWeight(8);
    rectMode(CENTER);
    rect(170, 170, 25, 5, 15);
    rect(310, 170, 25, 5, 15);
    //new raised eyebrows
    strokeWeight(5);
    stroke(255);
    rect(170, 170, 25, 5, 15);
    rect(310, 170, 25, 5, 15);
    
    //mouth becomes smaller
    //cover old mouth
    //lips
    strokeWeight(10);
    stroke(0);
    noFill();
    rect(width/2, 280, 60, 20, 20);
    //teeth
    line(width/2, 270, width/2, 290);
    line(width/2 - 15, 270, width/2 - 15, 290);
    line(width/2 + 15, 270, width/2 + 15, 290);
    //new small mouth
    strokeWeight(6);
    stroke(255);
    ellipse(width/2, 280, 20,20);
  }
  
}

LO 6

“Future Alterations” by Anders Hoff explores randomly generated art that explores future changes applied to a simple graph. He describes these changes as alterations in which these nested alterations are dependent to other alterations. He created a dependency graphs of futures. The graphs started with a single straight line or edge and then proceeds to select edges at random. The edges sometimes split in the middle or rotate around to produce new edges. I founded the implementation interesting because of its simplistic nature, but the results can be drastically different from one another. Hoff describes how having this functionality allows him to write an algorithm that almost looks like pseudo code. From my own experiences with coding, I can safely assume that he is using random variables in his functions, which result in multiple future changes.

https://inconvergent.net/2020/future-alterations/