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

Project 6

My clock is made up of a few planets that orbit each other. One representing the hours, another the minutes, and the last representing seconds.

sketch Download


//dvargas David vargas
var starX=[] //x position of stars
var starY=[]//y position of stars
var starB=[]//brightness value of stars
var hourV = {x:0,y:0,diam:50,c:'orange'} //array w/values for orange (hours) circle
var minuteV = {x:0,y:0,diam:30,c:'lightgreen'}//array w/ values for green (minutes) circle
var secondV = {x:0,y:0,diam:10,c:'lightblue'} //array w/ values for blue (seconds) circle
var orbitV ={hX:300,hY:300,mX:0,mY:0,sX:0,sY:0,hD:180,mD:150,sD:75} //array w/ values for 'orbit rings'
var noiseOffset=0 //perlin noise offset



function setup() {
    createCanvas(600, 600);
    background(255);
    for (var i=0;i<80;i++){ //creates random stars
        starX[i]=random(0,width)
        starY[i]=random(0,height)
    }

}

function draw() {
  background(0);
  var theTime=currentTime() //the time represented by a value between 0 & 12

  for(var i=0;

Andrej Bauer’s random art generator

Alexia Forsyth

Bauer’s random art generator utilizes pseudo-random numbers to construct a mathematical formula. This formula is responsible for each pixel color and sequence of random choices. I really admire the semi formed appearance of Bauer’s pieces. Though random, his series have a particular look and create distinct, colorful visuals. His generator is able to transform into completely new and unique pieces with one word change in the program. I appreciate the versatility. For example, this particular piece, can be interpreted in many different ways; for me, it looks like a stingray.The artist uses an acyclic directed graph coded in the python coding language and implemented in ocaml.

Link: https://www.random-art.org/about/

LO-06 Randomness

Random generation in music/synthesis has always confused me a bit, because part of the point of music (at least, what Western music theory says), is that music wants to fit into a pattern that is pleasing for the human ear, and that’s how tunes get stuck in our head and how we end up attached to a certain song. Randomness doesn’t often lean in the acoustically pleasing direction, because our ears are so attuned to patterns and tones. Even someone with little musical training or ability can guess if a note is incorrect, and will often have a visceral reaction to a wrong note played in a familiar melody. I was intrigued by this tutorial because it showed how to use randomness along with other elements within the Ableton software (confining notes to a certain scale, randomizing the note value within a number of choices, etc) to create something that, however randomly generated, still sounds pleasing to our ear.

P-06 Abstract Clock

sketch

// Bridget Doherty
// bpdohert@andrew.cmu.edu 
// 104 Section C


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

function draw() {
    background(0); // black background
    translate(width/2, height/2); // center-based coordinates

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

    drawStars(h);
    drawEarth(s);
    drawSun(h);
    
}

function drawSun(h){
    if (h == 0) { // eclipse every night from 00:00 - 00:59
        fill('black');
        strokeWeight(2);
        stroke('white');
        circle(0, 0, 100);
    } else {
        fill('yellow'); // the sun!
        noStroke();
        circle(0, 0, 100);
    }
}

function drawEarth(s){ // the earth completes a rotation every minute
    noStroke(); // and moves every second
    push();
    rotate(s*6);
    fill('blue');
    circle(150, 0, 70);

    // triangles to approximate land on earth 
    fill('green');
    triangle(170, 0, 120, 0, 150, 20);
    triangle(170, 10, 130, 10, 120, 20);
    triangle(175, -10, 130, -20, 120, 10);

    // ellipse to approximate Antarctica
    fill(220);
    ellipse(150, -30, 30, 10);
    pop();
}

function drawStars(h){ // the amount of stars increases every hour
    for (var i = 0; i<(h*10); i++){ // there are no stars between 00:00 and 00:59
        stroke('white');
        point(random(-width/2,width/2), random(-width/2, width/2));
    }
}

This is obviously based on Earth’s rotation around the sun, but condensed so it makes one revolution every minute. The number of stars increase with every hour passed. Every night from 00:00-00:59 there is a solar eclipse which is so naturally impossible with how I’ve set up the scene but looks cool nonetheless.

Looking Outwards 06- Section A

Kaitlyn Chow

I was inspired by Tyler Hobbs’s watercolor paintings that I found in his article “How to Hack a Painting.” I specifically looked at his piece Linear II (Welcome Back) which looks like watercolor. I thought his piece was really cool because he had to use a lot of intentional layering and calculations to get that watercolor effect but he also used a bit of randomness to keep it interesting.

His artistic senses are really shown because watercolor is very flowy. This contrasts from coding on a computer where everything is defined and it seems hard to get it flowly. However, watercolor is usually slightly random because the paint flows and spreads based on the water and the paper.

For the main shape, he makes rough edges by including very tiny details. So, it appears to be textured. Combining these with a low opacity, it creates the edges that give the signature watercolor effect.

It is interesting because he described how there is, “a lot of carefully applied randomness in these [pieces].” So, he artfully sprinkles randomness in his paintings so that we would see something different each time.

Here is the link to the piece:
Linear II (Welcome Back), 2017, Tyler Hobbs

LookingOutwork 6 Randomness

Link: https://www.slam.org/collection/objects/27407/
The piece I want to focus on is Jackson pollock’s Number three. In this
painting, he “layered multiple strands of paint” to generate the painting
where the colors seem to be interwoven together. What I really admire by the
the piece is its apparent order despite the randomness in its creation, where
through the layering of the painting, the artist still creates this hierarchy
between the different colors of paint, demonstrating order in the chaos.

The randomness executed by the artist is a form of pseudo-randomness, where
although the pollock seems to layer on the paint randomly, he still created
the painting with an intention of not creating a focal point, thus if the
painting medium is in control of the artist, the randomness executed will
definitely, be influenced by the artist’s creative intentions.

Despite the apparent random qualities, you can still see the artistic
sensibilities of Jackson, where the painting still displays a sense of unity
with color. His artistic sensibilities are also demonstrated in the flow of
the paint, where the artist creates different thicknesses of paint lines and
curvature through how fast and how hard he pours the paint – which is another
demonstration of pseudo-randomness.

Project 6 Abstract Clock

This is my abstract clock: The candles’ fire represents the passing of each second, the height of the candle represents the hour of the day and the sheets of paper represent the minutes remaining in the hour.

sketch

//Michael Li
//Section C 

function setup() {
    createCanvas(480, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    background (220)

    
}
    //write object for candle dimensions
    var candle = {xPos: 130, yPos: 120, w: 50,  h: 280}
    //establish variables for the timer
    var timerS;
    var timerM; 
    var timerH;
    //Pen x position
    var penX = 370;
    //pen movement indedx
    var moveP = 0.3;

function draw() {
    background(62, 35, 16); //dark brown
    timerM = minute(); //assign minute function for variable
    //pages
    fill(76, 135, 74); //green book cover
    rect(190, 420, 230, 20); //draw bottom cover
    //alternate the page color between white and grey for distinction
    //use for loop to draw number of pages depending on the minute
    for (var i = 0; i<=60-timerM; i++){
        noStroke();
        if (i%2==0){
            fill(255);
        } else {
            fill(200);
        }
        //draw pages
        rect(190, 420-(3*i), 230, 3);

    }
    //draw pen function
    drawPen(penX, 235+3*timerM);
    //pen moves left and right
    penX +=moveP;
        //constrain pen in a range
        if (penX>= 380 || penX <= 350){
            moveP = -moveP;
        } 
    //draw the panel with the hour carvings
    drawBackPanel(80, 100);

    //draw the table
    fill(154, 121, 102);
    rect(0, height*9/10, width, height*9/10);

    //draw hour carvings behind the candle
    //for loop to draw the larger lines
    for (var i = 0; i <=12; i++){
        strokeWeight(3);
        stroke(161, 158, 75);
        line(100, 350.4-(9.6*2*i), 215, 350.4-(9.6*2*i));
    //drawing the shorter lines
    } for (var i = 0; i <=12; i++){
        strokeWeight(2);
        stroke(161, 158, 75);
        line(120, 360-(9.6*2*i), 195, 360-(9.6*2*i));
    }
    //drawing the body of the candle
    drawCandleB(candle.xPos, candle.yPos, candle.w, candle.h);
    //drawing the base of the candle
    drawBase(candle.xPos-10, 360);

    //assign hour to variable timerH
    timerH = hour();
    //map the hour to fit the candle length
    var hourMap = map(timerH/2, 0, 12, 240, 10);
    //candle length changes depending on the hour
    candle.yPos = 120 + 240 - hourMap;
    candle.h = hourMap + 30;

}
//function for drawing the candle's body
function drawCandleB (x, y, w, h){
    //establish remapped value for hour
    var hourMap = map(timerH/2, 0, 12, 240, 30);

    fill(250, 244, 192); //light yellow
    noStroke()
    rect(x, y, w, h); //candle  body
    //function for drawing the fire
    drawCandleFire(x, y, w, h);
    //function for drawing the wax dripping
    drawCanldeT(x, y, w);
    //function for drawing the halo of light
    drawLight(x, y, w, h, hourMap);

}
//function for drawing the wax
function drawCanldeT (x, y, w){
    //set lineweight
    strokeWeight(8);
    stroke(220, 213, 142); //darker yellow

    line(x+2, y, x+w-2, y);//horizontal line
    //two drips
    line(x+w*3/5, y, x+w*3/5, y+w/2); 
    line(x+w*4/5, y, x+w*4/5, y+w*3/4);
}
//function for drawing the fire
function drawCandleFire (x, y, w, h){
    //establish variable for the tip of the fire
    //fire positions
    var fTipy; 
    var fTipx;
    //variable for seconds for fire flicker
    timerS = second();
    //fire flickers each second
    if (timerS %2 == 0){
        fTipy = y-w*4/5;
        fTipx = x+w/2;
   
    } else {
        fTipy = y-w*4/5;
        fTipx = x+w/2 - 10;
    }
    noStroke();
    //draws the fire
        fill(246, 74, 22); //red
        ellipse(x+w/2, y-w/5, w/4, w/3);
        triangle(fTipx, fTipy, x+w*5/8, y-w/5, x+3*w/8, y-w/5);
    
}
//halo of light
function drawLight (x, y, w, h, hour){

    timerS = second();//establish the second variable
    //halo grows and shrinks each second
    if (timerS %2 == 0){
        hourMap = hour+10;
    } else {
        hourMap = hour-5;
    }

    noStroke();
    fill(249, 246, 152, 20);//yellow with light transparency
    ellipse(x+w/2, y-w*2/5, hourMap*2, hourMap*2); //draws light

}
//function drawing the back panel
function drawBackPanel (x, y){
    
    strokeWeight(9);
    stroke(225, 176, 104); // light brown
    //outer framing
    line(x, y, x, y+350);
    line(x+155, y, x+155, y+350);
    arc(x+77, y, x+75, y+55, PI, 0);

    //inner board
    noStroke();
    fill(186, 167, 135);

    ellipse(x+77, y, x+75, y+55);
    rect(x, y, x+75, y+250);
}
//candle base
function drawBase (x, y){
    fill(100); //grey
    //top and bottom qadralateral
    quad(x, y, x+70, y, x+60, y+20, x+10, y+20);
    quad(x+10, 420, x+60, y+60, x+70, y+73, x, y+73);
    //middle rectangle
    fill(150);
    rect(x+10, y+20, 50, 40);
}
//pen
function drawPen (x, y){
    push();
        translate(x, y); //move to the right
        rotate(radians(315)); //rotate for pen mvement
        noStroke();
        fill(200); //grey
        //draws pen
        rect(0, 0, 100, 5);
        fill(255); //white
        triangle(0, 0, 0, 5, -5, 2.5);
    pop();
}

Project 06 – Abstract Clock

I created a boba clock which is milk tea with boba from noon to midnight and juice with lychee jelly from midnight to noon. The number of Jelly/Boba inside the cup, including one inside the straw, represents the hour. Juice/milk shrinks per second, and the full amount disappears per minute. Lastly, a Jelly/Boba stuck inside the straw moves upward per minute and got out from the straw each hour.

sketch Download

//Alicia Kim
//Section B

var x = [];
var y = [];
var angle = [];


function setup() {
    createCanvas(300, 400);
    for (var i=0; i<(hour()%12-1); i+=1) {
        x[i] = random (120,190);
        y[i] = random (200,340);
        angle[i] = random(360);
    }

    for(var j=0; j<height; j+=1){
        stroke(lerpColor(color(255,232,239) ,color(255,253,208),j/height));
        line(0,j,width,j);
    }
}

function draw() {
    var s = second();
    var min = minute();
    stroke(0);    

//juice with lychee jelly from midnight to noon
//& milk tea with boba from noon to midniht
    push();
    if (hour()>12){
        drawMilk(s);
    }
    else if (hour()<=12){
        drawJuice(s);
    }
    pop();
    
    push ();
    drawCup();
    pop();

    push();
    drawStraw();
    pop();

    push();
    if (hour()>12){
        drawBoba();
        strawBoba(min);
    }
    else if (hour()<=12){
        drawJelly();
        strawJelly(min);
    }
    pop();

}

// juice inside the cup shrinks per sec
function drawJuice(s){
    fill(255,203,164); //orange
    quad(70,75,230,75,215,350,85,350); //juice

    //cover
    fill(255);
    quad(70,75,230,75,230-(15/60)*s,75+s*(275/60),70+(15/60)*s,75+s*(275/60));

    stroke(255,178,120); //dark orange 
    fill(255,203,164);
    ellipse (width/2, 75+(275/60)*s, 160-(0.5)*s, 60);
}

function drawCup(){
// bigger circle
    fill(224,255,255); //light cyan
    ellipse (width/2, 75 , 160, 60);
// smaller circle
    push();
    if (hour()<=12){
        fill(255,203,164);
    }
    else if (hour()>12){
        fill(247,231,200);
    }
    ellipse (width/2, 350, 130, 50);
    pop();

//connecting lines
    line (70, 75, 85, 350);
    line (230, 75, 215, 350);
}

function drawStraw(){
// straw body
    push();
    fill(0,191,255,50); //sky blue
    rect(140,30,20,300);
    pop();
// straw holes 
    ellipse(width/2,30,20,10);
    ellipse(width/2,330,20,10);
    fill(224,255,255); //light cyan
    arc (width/2, 75 , 160, 60, 0, PI, OPEN);
}

// number of jelly inside the cup represents the hour
function drawJelly(){ 
    for (var i=0; i<(hour()%12-1); i++) {
        push();
        translate(x[i],y[i]);
        rotate(radians(angle[i]));
        noStroke();
        fill(249,246,231,150); //lychee 
        rect (0,0,10,30); //lychee jelly
        pop();  
    }
}

// jelly inside the straw moves up per minute
function strawJelly(m){
        noStroke();
        fill(255,255,142);
        rect (width/2-5,300-(225/60)*m,10,30);
}

// milk inside the cup shrinks per sec
function drawMilk(s){
    stroke(236,220,194); //dark milk color
    fill(247,231,200); //milk color
    quad(70,75,230,75,215,350,85,350); //juice

    
    //cover
    fill(255);
    quad(70,75,230,75,230-(15/60)*s,75+s*(275/60),70+(15/60)*s,75+s*(275/60));

 
    fill(247,231,200); //milk color
    ellipse (width/2, 75+(275/60)*s, 160-(0.5)*s, 60);
}

// number of boba inside the cup & straw represents the hour
function drawBoba(){
    for (var i=0; i<(hour()%12-1); i++) {
        push();
        stroke(70, 51, 51,100); //darker brown
        fill(88,59,57,150); //dark brown 
        ellipse (x[i],y[i],20,20); //boba
        pop();
    }
}

// boba inside the straw moves up per minute
function strawBoba(m){
    noStroke();
    fill(88,59,57);
    ellipse (width/2,300-(225/60)*m,20,20);
}

Looking Outwards 06: Randomness

I am inspired by the project, Gush by Adam Ferriss. This piece of digital, algorithmic art is created by the random noise function called Perlin noise. The noise is a pseudo-random function for generating values, which are deterministic sequences and reproducible. The function adds realistic randomness to the color and composition of the piece. Ferriss still has control over some parameters such as the speed of the color change, allowing him to generate images with gradual gradients and in turn, create crazy psychedelic transitions. What I admire about this project is that the piece is not entirely automated, while image-making itself is. Ferriss’s artistic sensibilities could be still manifested in the final piece as he adjusts the parameter’s values until he gets an aesthetically satisfying and completely new type of work.

https://www.itsnicethat.com/articles/adam-ferriss

Project 06: Abstract Clock

I created a lighthouse clock. The ocean level represents the hour of the day with low tide as hour 0 or midnight and when the water level reaches the top of the canvas, or floods the island, it is 11:00. The lighthouse’s beam rotates each minute and the lighthouse beam flashes each second.

sketch

//amyhu
//amhyhu@adrew.cmu.edu
//section d 

var h;  //hour
var m;  //minute
var s;  //second
var theta = 6; //angle to increase by each minute
var r = 500;    //radius of light beam

function setup() {
    createCanvas(450,450);
    background(220);
}

function draw() {
    background("lightblue");

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

    //water level is hour 
    fill("blue");
    h = map(h,0,24,0,height);
    rect(0, height-h, width, height);


    //lighthouse object
    drawLighthouse();

    //island object
    drawIsland();

    //light beam speed is what minute it is
    push();
    translate(125,135);
    var x = r*cos(radians(theta*m));
    var y = r*sin(radians(theta*m));

    //light beam flashing every second
    if(s % 2 == 0){
        stroke("yellow");
        strokeWeight(18);
        line(0,0,x,y);   
    }else{
        stroke("white");
        strokeWeight(18);
        line(0,0,x,y);
    }
    pop();
}

function drawIsland(){
    fill("lightyellow");
    //noStroke();
    ellipse(0,height,500);
}

function drawLighthouse(){
    //rectMode(CENTER);
    //stroke(1);
    fill("white");
    rect(110,120,30,50);    //top white bit
    fill("red");
    rect(100,150,50,200);   //red
    fill("white");
    rect(100,170,50,20);    //white stripe
    fill("yellow");
    circle(125,135,20);      //light circle
}