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

Project 06: Abstract Clock

For my abstract clock I built it off the idea that we (or at least I), run on coffee. The day starts with a cup of coffee and is essentially continuously fueled by yet another cup. The clock begins with 12 empty cups on the screen that represent each hour in the AM or PM. Then with each minute – the coffee level increases in the cup until its filled, capped, and sleeved. Ticking along is a coffee bean counter that is representative of each second that goes by (the brewing/drip process) that helps fill the cup.

During the AM hours, the background represents a daytime sky with a sun. Then during PM hours, there is a night sky with a moon and randomly generated stars.

sketch

//Helen Cheng
//helenc1@andrew.cmu.edu
//Section C
//Project-06

var mugX = [];
var currH;
var starX = [];
var starY = [];

function setup() {
    createCanvas(480, 300);
    rectMode(CENTER);
    //initializes array with num of cups
    for (h=0; h<12; h++) {
        mugX[h] =  h*40 + 20
    }

    for (i=0; i< 20; i++) {
        starX[i] = random(width);
        starY[i] = random(height);
    }
}

function draw() {
    //colors sky based on AM or PM
    if(hour()<12){
        dayTime();
    }
    else{
        nightTime();
    }

    //draws table
    fill(235, 227, 218);
    rect(240, 250, 480, 200);

    //draws a coffee bean per second
    for(s =0; s<second(); s++){
        coffRow = Math.floor(s/20);
        coffeeBean(45 + 20*(s-20*coffRow), 200 + 30*coffRow);
    }
  
    //draws coffee cups depicting hours
    currH = hour()%12;
    for (h=0; h<12; h++) {
        if (h<currH){
          fill(92, 48, 7);
          strokeWeight(1);
          rect(mugX[h], height/2, 30, 50); 
          strokeWeight(0);
          ellipse(mugX[h], height/2 + 25, 30, 10);
          //cap
          fill(191, 155, 187);
          rect(mugX[h], height/2-25, 35, 10);
          ellipse(mugX[h], height/2-30, 25, 10);
          //cup sleeve
          rect(mugX[h], height/2, 35, 20);
        }
        else{
          fill(240, 234, 223);
          strokeWeight(1);
          rect(mugX[h], height/2, 30, 50); 
          arc(mugX[h], height/2 + 25, 30, 10, 0, PI);
        }
    }
  
    //fills coffee cup per minute
    for (m=0; m<minute(); m++) {
        strokeWeight(0);
        fill(92, 48, 7);
        ellipse(hour()%12*40 + 20, (height/2+25)-(m*50/60), 30, 10);
    }
}

function coffeeBean(x,y){
    strokeWeight(2);
    fill(92, 48, 7);
    ellipse(x, y, 10, 20);
    line(x, y-10, x, y+10);
} 

function nightTime() {
    background(35, 41, 94);
    fill(242, 242, 233);
    circle(width/3, height/5, 30);

    for (i=0; i< 20; i++) {
        circle(starX[i], starY[i], 5);
    }
}

function dayTime() {
    background(152, 210, 237);
    fill(245, 205, 103);
    circle(width/3, height/5, 40);
}

LO-06 Randomness

For this week’s looking outwards, I thought I would discuss something unconventional. While we normally consider art within a narrow frame, computational art casts a much wider net and I thought this might fit. Every year for april fool’s, since the game’s release in 2011, Mojang (which develops the game) releases a joke update for Minecraft, and this year’s was extraordinary.

Using every facet of the game’s parameters for world generation, this snapshot allows players to randomly generate entire worlds. Consisting of everything from endless procedurally generated structures to maze-like worlds made entirely of sponge. This update takes the beautiful but rather utilitarian world generation of minecraft to a new level by generating endless experiential environments that often amaze with their sublime beauty. Instead of working within normal ranges for materials like dirt & stone to create a natural-looking world, the algorithm instead uses wild, extreme parameters to create dimensions out of any and all materials or structures in the game. A bit like H.R. Geiger playing god, the sheer strangeness of it all is captivating. It’s right in line with the sort of simple, sublime beauty that Minecraft has always sought to capture – from its soundtrack to its design.

-Robert

Looking Outwards – 06

The piece I decided to write about is “Take Me to the Desert” by Tyler Hobbs. To create this piece, Hobbs created an algorithm that randomly places circles of different sizes and colors. The algorithm starts by placing the largest circles first and the smallest last. It finds a spot to place each circle by checking for collisions. This is done checking if the difference between two circles’ center point is larger than the sum of their radii. It will continue to insert circles until the desired number of circles is reached or until the failed attempts limit is reached. I admire this piece because despite the circles being randomly placed, it still looks clean and none of them overlap. I also really like the colorfulness of this generative art.

Project 06 – Aquarium Clock

For this project, I was inspired by the week’s lab. At first, I thought it would be simple to convert the fish code to a clock but this was not the case. I had to play around with the arrays and indexes to make everything work. The number of fish represent the minutes as well as the level of water. The color of the water represents the hour of the day to show the tank getting dirtier until it is finally cleaned. Lastly, the clam opening and closing represents seconds.

sketch Download

var x = [];
var y = [];
var dx = [];
var c = [];
//var numFish = minute()
function setup() {
    createCanvas(480, 480);
    background(220);
    //stores values for 59 fish in an array
    for (var i=0; i<59; i++) {
        //random x position for fish array
        x[i] = random(50, width-50);
        //y position so fish will only be spawned within the water
        y[i] = 3/4*height-i*((5/12/60)*height)
        //random speed of the fish
        dx[i] = random(-5, 5);
        //random color of the fish
        c[i] = color(random(255), random(255), random(255));
    }
}

function draw() {
    //variables to keep track of time
    var s = second();
    var h = hour();
    var m = minute();

    background(220);
    stroke(0);

    //fish tank with water level
    //creates background rectangle of water based upon the hour
    fill(0, 255, 255-(75/23)*h);
    rect(10, 1/4*height, width - 20, 3/4*height)
    //matches the background color and shrinks to reveal more water
    fill(220);
    rect(10, 1/4*height, width - 20, 1/3*height-(1/4*height/60)*m);
    //creates fish
    //creates the number of fish based upon minutes (+1 fish each minute)
    //resets to zero fish every hour
    for (i=0; i<m; i++) {
        fish(x[i], y[i], dx[i], c[i]);
        x[i] += dx[i];
        //makes the fish turn within the aquarium
        if(x[i] >= width - 25) {
            dx[i] = -dx[i]
        } else if(x[i] <= 25) {
            dx[i] = -dx[i]
        }
    }
    //sand
    fill(237, 201, 175);
    rect(10, 410, width-20, height-405);
    //open and closes the clam every second (logic is based upon even/odd
    //seconds)
    if(s%2 == 1) {
        openClam();
    } else {
            closedClam();
      }

}
//used two functions to open and close clam
function closedClam() {
    fill(199, 176, 255);
    //top half of clam
    arc(385, 400, 70, 30, PI, 0, CHORD)
    //bottom half of clam
    arc(385, 400, 70, 30, 0, PI, CHORD);
    noStroke();
    //back of clam
    quad(430, 410, 430, 390, 410, 400, 410, 400);
}

function openClam() {
    fill(255);
    //creates the pearl
    circle(390, 400, 20);
    fill(199, 176, 255);
    push();
    //allows for rotation around back of clam
    translate(420,400)
    //rotates the top half of the clam
    rotate(radians(30));
    //top half of clam
    arc(385-420, 400-400, 70, 30, PI, 0, CHORD)
    pop();
    //bottom half of clam
    arc(385, 400, 70, 30, 0, PI, CHORD);
    noStroke();
    //back of clam
    quad(430, 410, 430, 390, 410, 400, 410, 400);
}

//creates the fish based on the following parameters
function fish(x, y, dx, c){
    //fills fish with the color from the array
    fill(c);
    //initial position of the fish based on the array
    ellipse(x, y, 20, 10);
    //logic for whether the fish tail is on the right or left side of fish
    if(dx >= 0) {
        triangle(x - 10, y, x - 15, y - 5, x - 15, y + 5);
    }
    else if(dx < 0) {
        triangle(x + 10, y, x + 15, y - 5, x + 15, y + 5);
    }
}

LO 6 – Randomness in Art

Artist: Dane Clark
Project: Coding Architecture 2: Randomness Project

I admire the project because while it was created with randomness, the values were stored to create a repeatable art piece. The artist described his piece as appearing random, but it was in fact a pre-conceived final product. It is interesting to show many of the random possibilities then the selection of the actual element. This was done through different shading and opacities. The artist described the randomness as the appearance of many different possibilities and through deletion and rearrangement the creation of the final product. The algorithms showed the many possibilities of randomness, but the algorithms all led to the planned out piece. The artistic sensibilities are shown through the dynamic movement and flow of the piece. Additionally, the scaling and connection between the opacity of pieces add to the art. The most interesting aspect is the “revealing” of the possible randomness. For each additional branch several possibilities are shown, but only some are added before the next branch is created. The project shows that while some things may appear random, they are in fact not at all.

http://lostritto.com/risd2015spring-seminar/?p=255

Project -06- Abstract Clock

sketch

let sec = 0; //initial seconds value
let min = 0; // initial minutes value
let hour = 0; // initial hour value
let R = 236; // starting red value for starting color
let G = 84; // starting green value for starting color
let B = 76; // starting blue value for starting color
let fph = 1296000; // frames per 6 hours, for color gradient
let mode = 1; // different colors changing 
let dx = 0; //speed of clouds
let dcar = 0; //speed of car

function setup() {
    background(R, G, B)
    createCanvas(400,400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    frameRate(60);
    count = 0;
}

function draw() {
  count += 1
  background(R, G, B);
  fill(255);
  cloud1();
  cloud2();
  cloud3();
  cloud4();
  dx += 0.5;
  dcar += 0.5;

  //initial rectangle
  fill(0,0,128);
  noStroke();
  rect(50, 380, 100, hour); //hour box, far left
  rect( 150, 380, 100, min); //min bos, middle
  rect (250, 380, 100, sec); //sec box, far right
  
    sec -= 0.1
    if(sec <= -360){
      sec = 0;
      min -= 6;
      if(min <= -360){
        min = 0;
        hour -= 30;
        if(hour <= -360){
          hour = 0;
          
        }
      }
    }
    
    if(count == fph){
      if(mode < 4){
        mode += 1;
      } else {
        mode = 1;
      }
      count = 0;
    }
  //color changing
    if(mode == 1){
      R += 9/fph;
      G += 33/fph;
      B += 60/fph;
    }
  
    if(mode == 2){
      R -= 153/fph;
      G -= 89/fph;
      B -= 84/fph;
    }
    
    if(mode == 3){
      R -= 30/fph;
      G += 19/fph;
      B += 47/fph;
    }
  
    if(mode == 4){
      R += 174/fph;
      G += 37/fph;
      B -= 23/fph;
    }
  
  
  for(i = 350;i > 25; i = i - 25){
    fill(255,255,0);
    if(i > 380+sec){
      rect(260,i,11,15);
      rect(282.5,i, 11, 15);
      rect(305,i,11,15);
      rect(327.5, i, 11, 15);
    }
    
    if(i > 380+min){
      rect(160,i,11,15);
      rect(182.5,i, 11, 15);
      rect(205,i,11,15);
      rect(227.5, i, 11, 15);
    }
    
    if(i > 380+hour){
      rect(60,i,11,15);
      rect(82.5,i, 11, 15);
      rect(105,i,11,15);
      rect(127.5, i, 11, 15);
    }
  }
  car();
  if(dx == 600){
    dx = 0;
  }
}

function cloud1(){
    ellipse(((0 + dx) % 600) - 100,50,50); //first cloud on left
    ellipse(((30 + dx) % 600) - 100,50,50); //first cloud on left
    ellipse(((55 + dx) % 600) - 100,50,50); //first cloud on left
}
function cloud2(){
    ellipse(((275 + dx) % 600) - 100,50,50); //second cloud on the right
    ellipse(((305 + dx) % 600) - 100,50,50); //second cloud on the right
    ellipse(((340 + dx) % 600) - 100,50,50); //second cloud on the right
}
function cloud3(){
    ellipse(((150 + dx) % 600) - 100,150,50); //middle cloud
    ellipse(((185 + dx) % 600) - 100,150,50); //middle cloud
    ellipse(((215 + dx) % 600) - 100,150,50); //middle cloud
}

function cloud4(){
    ellipse(((375 + dx) % 600) - 100, 150, 50);
    ellipse(((410 + dx) % 600) - 100, 150, 50);
    ellipse(((445 + dx) % 600) - 100, 150, 50);
}
function car(){
    fill(255,255,0);
    rect(50 + dcar,365,20,15);
    triangle(70 + dcar,365,70 + dcar,380,80 + dcar,380);
    fill(178,178,255);
    triangle(70 + dcar,365,70 + dcar,375,77 + dcar,375)
    fill(100);
    ellipse(57 + dcar,380,7);
    ellipse(70 + dcar,380,7);
    fill(76.1, 76.1, 100);
    rect(50 + dcar,365,5);
 
    if(dcar > 375){
      dcar = -75
    }
}

The basic idea of this project was to represent time with three buildings each representing seconds, minutes, and hour. Once the building that represents seconds is fully revealed, one increment of the minute building will show up. Once all of the 60 minutes are “filled” up, the hour building will increase by one. For all three buildings to show up, it would take hours, however, the background will slowly change colors from orange to pink, pink to purple, and purple to blue, to distinguish AM and PM. The hour building only represents 12 hours but the background color changing from warm to cool colors will separate the 24 hours into day and night.

Project 06 – Abstract Clock

sketch

//Hayoon Choi
//hayoonc
//Section C

var starx = [];
var stary = [];
var starr = [];

function setup() {
    createCanvas(480, 480); //making the stars stay in position 
    for( var i = 0; i <= 300; i++){
      starx[i] = random(width);
      stary[i] = random(height);
      starr[i] = random(3);
    }
}

function draw() {
    background(0);
    //drawing stars in the background
    fill(255, 252, 235);
    noStroke();
    for( var i = 0; i <= 300; i++){
      circle(starx[i], stary[i], starr[i]) 
    }
    flame(240, 240);
    sun(240, 240);
    blush(240, 240);
    eyelash(240, 240);
    eyelash(160, 240);
}

function sun(x, y){
    push();
    translate(x, y);
    noStroke();
    fill(237, 227, 183);
    circle(0, 0, 200); //head
    //eyes
    fill(255);
    stroke(0);
    ellipse(30, -24, 31, 12);
    ellipse(-50, -24, 31, 12);
    fill(0);
    circle(30, -24, 5);
    circle(-50, -24, 5);
    //mouth
    noStroke();
    fill(234, 136, 173);
    arc(-5, -16, 15, 10, PI, 2 * PI);
    arc(-15, -16, 15, 10, PI, 2 * PI);
    arc(-10, -16, 25, 20, 0, PI);
    fill(255);
    circle(-2, -13, 3)
    //mole
    fill(0);
    circle(5, -4, 3)
    pop();
}

function blush(x, y){ //seconds
    let s = second();
    push();
    translate(x, y);
    rotate(radians())
    fill(234, 97, 66);
    noStroke();
    let secondH = map(s, 0, 60, 0, 360);
    arc(30, -5, 30, 20, 0, -secondH);
    arc(-56, -5, 30, 20, 0, -secondH);
    pop();
}

function eyelash(x, y){ //minutes
    //eyelashes grow by minutes
    let m = minute();
    push();
    translate(x, y);
    stroke(0);
    for (var i = 0; i < m; i ++) {
        line(18.5, -29, 18.5, -29 + (-0.5 * i));
        line(30, -31, 30, -31 + (-0.5 * i));
        line(41.5, -29, 41.5, -29 + (-0.5 * i));
    }
    pop();
}

function flame(x, y){ //hours
    //the color of flame changes each hour one by one
    var hournow = hour() % 12 + 1; //restarts after 12 hours
    push();
    translate(x, y);
    //red flame
    scale(2);
      for (var i = 0; i < hournow; i++){
        push();
        fill(221, 54, 54);
        rotate(radians(30 * i - 90));
        noStroke();
        ellipse(50, 0, 45, 25); 
        pop();
    }
    //orange flame
    for (var i = hournow; i < 12; i++){
        push();
        fill(255, 149, 62);
        rotate(radians(30 * i - 90));
        noStroke();
        ellipse(50, 0, 45, 25); 
        pop();
    }
    pop();
}

I wanted to create a sun in space. The color of each flame changes after one hour, the eyelashes grow taller by minutes, and the blushes fill up by seconds.

Looking Outwards 06: Randomness

William Latham is a computer scientist who creates fractal art using the Mutator program. Fractal art is achieved through the mathematical calculations of fractal objects displayed, with the use of self-similar transforms that are generated and manipulated with different assigned geometric properties to produce multiple variations of the shape in never ending patterns. Since it can infinitely produce the patterns, the artist doesn’t know what the artwork is going to look like at the end. One of his projects that grabbed my interest is called the White Horn and was produced at IBM in 1990. This artwork is supposed to represent the reminiscent of squid and marine life. What I admire about Latham is that he creates 3D fractal art works unlike other fractal artists who work with flat surfaces. It was refreshing to see these types of artworks in the form of 3D sculptures. In addition, he spent a lot of his time in the natural history museum, taking inspiration from the natural patterns and forms. I thought it was interesting that he artistically combined the natural world with the digital world to create his own humanized version of the natural system.

LO – 5

Manfred Mohr’s “space.color.motion” initially written in 1999 is an example of computational art that uses simple design elements like lines, color fill, and eventually, animation, to convey a sense of dimensionality that is both convincing and transcendent of reality– “unimaginable constellations,” to quote Mohr. The 6-d hypercube and its angles and increments are based on the present time and date but are otherwise randomly generated with every restart of the program, creating animations that are unique with every passing frame. Although these aspects are randomly generated, there is a system of diagonals that are diametrically opposite of each other, as well as one determining the thickness of lines and how it constructs planar quadrilaterals– these are controlled by the established algorithm, systematizing randomness to create an intentional and mesmerizing work of art.

The many applications of this project demonstrate an aspect of computational art that traditional art is unable to achieve. Because of its randomly generated nature, many stills of the animation can be captured and made into collections of artwork. Mohr also exhibited this project in various galleries and public spaces in the form of animation and paintings, inspiring a myriad of different experiences with one computer program.

Mueller-Roth Gallery at Art Cologne 2003

Sony Center Berlin, June / July / August 2004

Abstract Clock

For this project I wanted to make a Pokemon clock, I decided to make a clock out of a Pokemons face, Meowth. I wanted to make his face interact as a clock, his coin on the head fills with each additional hour during the day, the eyes are moving with each additional second, and the whiskers grow longer with each additional minute.

sketch Download

function setup() {
    createCanvas(480, 480);
    background(255);
}
function draw() {
  var s= second();
  var w= width;
  var h=height;
  for(var b=0;b<480;b+=160){
    push();
    noStroke();
    fill(217,184,135);    //background
    rect(b,-1,w/3,h+2);
    fill(72,55,43);
    rect(b-20,-1,20,h+2);
    pop();
  }
  push();
  pop();
  translate(240,245);
  fill(255,0,0);    //pokeball in the background
  arc(0,-15,450,450,PI,0);
  fill(255);
  arc(0,-15,450,450,0,PI);
  push();
  strokeWeight(4);
  line(-225,-15,225,-15);
  pop();
  scale(.75);
  fill(0);    //black part of ears
  triangle(-150,-160,20,-50,-188,0);
  triangle(150,-160,-20,-50,188,0);
  fill(238,187,169);    //pink part of ears
  triangle(-138,-130,0,-50,-168,0);
  triangle(138,-130,0,-50,168,0);
  fill(245,237,198);    //head
  ellipse(0,50,400,300);
  fill(255);
  circle(100,25,125);    //white of eyes
  circle(-100,25,125);
  push();
  fill(240,191,68);    //top and bottom arcs of the coin
  arc(0,-45,80,70,0,PI);
  arc(0,-285,80,70,PI,0,CHORD);
  pop();
  whisker();    //call whiskers
  coin();    //call coin
  eyesl(-130+s,25);    //pupils move with seconds
  eyesr(70+s,25);
  hourcolor();
  push();
  strokeWeight(4);    //mouth
  line(100,125,-100,125);
  arc(100,120,10,10,3/2*PI,.5*PI);
  arc(-100,120,10,10,.5*PI,3/2*PI);
  pop();
  push();
  fill(255);    //teeth
  triangle(-80,127,-60,127,-70,150);
  triangle(80,127,60,127,70,150);
  pop();
}
function whisker(){    //whiskers grow with the minutes
  var m=minute();
  push();
  for(var i=0;i<m;i++){
    noStroke();
    fill(245,237,198+3*i);
    rotate()
    ellipse(210+1.25*i,75,55,10);
    ellipse(-210-1.25*i,75,55,10);
    ellipse(200+1.25*i,90,55,10);
    ellipse(-200-1.25*i,90,55,10);
    ellipse(-80,-70-2*i,10,55);
    ellipse(80,-70-2*i,10,55);
  }
  pop();
}
function coin(){    //rectangles inside of coin
  var h=hour();
  for(var l=0; l<24; l++){
    rect(-40,-55-10*l,80,10);
  }
}
function hourcolor(){    //rectangles go gold with each new hour
  var h=hour();
  for(var l=0; l<=h; l++){
    fill(240,191,68);
    rect(-40,-55-10*l,80,10);
  }
}
function eyesl(x,y){    //left pupil
  fill(0);
  ellipse(x,y,15,90);
}
function eyesr(x,y){    //right pupil
  fill(0);
  ellipse(x,y,15,90);
}