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

Project-06-Abstract-Clock

//Jasmin Kim
//Section D
var x =[];
var y = [];
var dy = [];

function setup(){
  createCanvas(480,480);
  for(var i=0; i<100; i ++){
    x[i] = random(0,width);
    y[i] = random(0,height);
    dy[i] = random(1,4);
    frameRate(10);
  }
}

function draw(){
  background(43,40,41);
  var hr = hour();
  var min = minute();
  var sec = second();
  push();

  fill(0);
  stroke(255);
  text(hr + ':' + min + ':' + sec,width/2-20,20);     //written clock

  rectMode(CORNER);   //snow on the floor (seconds)
  noStroke();
  fill(255);
  rect(0,480,width,-(sec));

  fill(244,234,77);     //moon on the sky (minutes)
  circle(96,81,109);
  fill(43,40,41);
  circle(145+min,81,112);

  if(hr>=19){
    fill(142,98,50);
    rect(404,480, 16, -hr*15);    //tree trunk growing (hours)
    push();
    translate(390,340);           //tree branch 1
    rotate(PI /4);
    rect(0,0,45,18,20);
    pop();
    push();
    translate(404,340);           //tree branch 2
    rotate(-PI /4);
    rect(0,0,45,18,20);
    pop();
    push();
    translate(390,246);           //tree branch 3
    rotate(PI /4);
    rect(0,0,45,18,20);
    pop();
    push();                     //tree branch 4
    translate(404,210);
    rotate(-PI /4);
    rect(0,0,45,18,20);
    pop();

  } else{
    fill(142,98,50);
    rect(404,480, 16, -hr*15);    //tree trunk growing (hours)
    push();
    translate(390,340);           //tree branch 1
    rotate(PI /4);
    rect(0,0,45,18,20);
    pop();
    push();
    translate(404,340);           //tree branch 2
    rotate(-PI /4);
    rect(0,0,45,18,20);
    pop();
    push();
    translate(390,246);           //tree branch 3
    rotate(PI /4);
    rect(0,0,45,18,20);
    pop();
  }
  pop();

  snow();                         //snow fall
  for(var i=0; i<height; i ++){
    snowfall(x[i], y[i], dy[i]);
    y[i] += dy[i];
    if (y[i]> height){
      y[i] =0;
    } else if(y[i]<0){
      y[i]=height;
    }
  }
  push();
  noFill();                       //outline of the canvas
  strokeWeight(2);
  stroke(176,197,226);
  rect(0,0,width,height);
  pop();
}

function snow(){
  var b1;
  var b2;
  b1=color(183,195,206);
  b2=color(205,218,239)
  push();
  noStroke();
  fill(b1);  //3rd snowman body
  circle(245,374,145);
  fill(b2); 
  circle(242,368,149);
  fill(b1);  //2nd snowman body
  circle(245,279,109);
  fill(b2); 
  circle(242, 273,116);
  fill(b1);   //1st snowman body
  circle(243,196,79);
  fill(b2); 
  circle(242,192,82);
  fill(112,119,127);  //snowman eyes
  circle(222,185,11);
  circle(260,185,11);
  fill(222,168,108);  //snowman nose
  triangle(215,200,242,194,242,204);
  fill(182,137,92);
  triangle(215,200,242,202,242,204);

}

function snowfall(x,y,dy){
  fill(255);
  circle(x,y,8);
}

For this project, I tried to draw a season Winter, to my canvas. Depending on the second, the snow gets piled up on the floor as the moon slowly appears referring to the minutes. Trees next to the snowman grows depending on hours.

LO: Randomness

Tyler Hobbs is an artist who acknowledges that randomness and spontaneity play a role in great works. I admire that this artist believes studying/experimenting/controlling randomness is useful for artistic purposes. In this “Continuity No. 8” art piece, I was able to see his attempt to explain his thoughts on one aspect of randomness here. His “Continuity series begins by generating semi-random quadrilaterals.” The overlapping intersections of the quadrilaterals become the negative space(black-colored area). The proximity to a randomly chosen focal point draws the brightness, transparency, sharpness, and other aspects of the positive space. The combined contents of the first layer takes a role in the generation of the next layer and created a harmonious art piece at the end.

Wall paper

sketch

var s = 70;
var x = 50;
var y = 0;


function setup() {
  createCanvas(550, 500);
}

function draw() {
  background(250);
  drawGrid();
  noLoop();
}

function drawGrid(){
    push();
    translate(x,y);                                     //background circles
        for (var i = 0; i < 8*s; i += s) {
            for (var j = 0; j <= 8*s; j += 15) {
                noStroke();
                fill(38,56,71);
                circle(i, j,5);
            }
        }
    translate(0,y);                                     //Odd column trees
        for( var q =0;q <7*s; q += s*2){
            for(var a =0; a <=500; a +=136){
                fill(55,83,102);
                stroke(55,83,102);
                shape(q-50,a);
            }
        }
    translate(70,s);                                  //Even column trees
        for( var q =0;q <7*s; q += s*2){
            for(var a =0; a <=500; a +=136){
                fill(35,52,61);
                stroke(35,52,61);
                shape(q-50,a);
            }
        }
    translate(-50,-68);                               //Red Diagonal lines
        for(var r =-70; r <=1000; r+= 140){
            stroke(163,69,89);
            strokeWeight(7);
            line(r,0,-500*(r/2),550*(r*0.45));    
        }
    translate(-500,0);                                //Beige Diagonal lines
        for(var r =-520; r <=1000; r+= 140){
            stroke(232,186,177);
            strokeWeight(2);
            line(r-100,0,250*r,500*(r*0.45));    
        }
    pop();
}

function shape(x,y) {
    push();
    translate(x,y);         //trees
    beginShape();
    vertex(50,0);
    vertex(34,21);
    vertex(39,24);
    vertex(30,28);
    vertex(38,32);
    vertex(25,38);
    vertex(34,41);
    vertex(22,48);
    vertex(47,48);
    vertex(47,61);
    vertex(52,61);
    vertex(52,48);
    vertex(78,48);
    vertex(64,41);
    vertex(73,37);
    vertex(63,31);
    vertex(69,28);
    vertex(57,23);
    vertex(64,20);
    vertex(50,0);
    endShape(CLOSE);
    push();
    fill(255);              //white circles
    circle(55,17,2);
    circle(52,21,3);
    circle(46,24,2);
    circle(39,28,4);
    circle(44,31,2);
    circle(53,34,3);
    circle(58,36,2);
    circle(66,38,3);
    circle(61,43,4);
    circle(54,44,3);
    circle(45,46,3);
    circle(39,46,2);
    circle(32,46,3);
    pop();
    pop();
}

Because Christmas season is coming soon, I wanted to create something related with Christmas. First thing that pop up in my head was Christmas trees with colors of red, green, and white.

LO: 3D Computer Graphics

Edward Mcevenue is a 3D & motion graphics freelancer who created this art piece called “Wires & Splines.” These art pieces evoke the tornado/wind feelings as those colorful lines are rendered like a pattern. I admire how the configuration of those beautiful colors creates these harmonies patterns. Most of his works are created with the idea of repetitive geometric patterns. It is also interesting to see how he explores different abstract landscapes and geometric designs using 3ds Max, TyFlow & Redshift. He also illustrates by playing with dramatic lighting & atmosphere. He usually works with this type of imaginary spaces more than realistic aspects so that he could explore/create as he wants.

String Art

sketch

//Jasmin Kim
//Section D

var numLines = 70;


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

function draw(){
    background(0);
    var x1 = -10;
    var y1 = -10;
    var x2 = width;
    var y2 = height;
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);

    for(var i = 0; i <= numLines; i += 1) {     
        stroke(i,150,100);
        line(mouseX, y1*i, x2*i, y2*i);         //right top green line
        stroke(200,i,90);
        line(x1*i,mouseY,x2*i,y2*i);            //left bottom red line
        stroke(i,i,190);
        line(mouseX*i,mouseY*i,width,height);   //blue line going over red and green

    }
    for(var i=0; i<= width; i+=30){
        stroke(255,255,0);                      //yellow curve
        line(mouseX, i, i, height - mouseY)
        line(mouseX, i, i, width - mouseX)
        stroke(255);                            //white curve
        line(width-i,y,x,height-i);     


    }
}

While I was processing this coding, I tried to display contrasting lines depending on each other’s position. I also thought about how the lines will move when my mouse moves towards the left or right.

Sound Art

This “Multiverse” is a real-time A/V installation that was built in 2018 by several teams for fuse, BDC – Bonanni Del Rio Catalog. I admire this project because I was surprised how the team tried to express the evolution of infinite possible universes through the use of generative graphics and sounds that exploit the theorization of the existence of that co-exist parallel space, the multiverse. Fuse explains that this draws inspiration from the “creation of a sequence of digital paintings, generated in real-time, attempts to represent the eternal birth and death of the endless parallel universe.” It is also interesting for me how that majestic low tone sounds create a mysterious and dreamlike environment for the audience.

Dynamic Drawing

sketch

//Jasmin Kim
//Section D
var r=63;
var b=219;
var br=90;
var fishX=200;
var fishY=300;
var seaY=160;
var bubblebright=0;
var angle=0;

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

function draw() {
    //Sky
    //Changes Night to morning as mouseY moves downward
    let back=constrain(mouseY,70,height)
    background(back);

    //Stars & Sun
    //Star comes out during night time(mouse at the top right side)
    //Sun grows from 0 to 128 during the morning(mouse at the bottom right side)
    //Star rotates as mouseX increases(mouse at the topside)
    let op=constrain(mouseX,0,width/2);
    let sunsize=constrain(mouseX,0,129);
    if(mouseY<200){
        push();
        noStroke();
        push();
        translate(79,121);      //star1
        rotate(radians(mouseX));
        fill(230,219,57,op);
        ellipse(0,0,4,17);
        ellipse(0,0,17,4);
        pop();
        push();
        translate(175,164);     //star2
        rotate(radians(mouseX));
        fill(230,219,57,op);
        ellipse(0,0,4,17);   
        ellipse(0,0,17,4);
        pop();
        push();
        translate(355,145);     //star3
        rotate(radians(mouseX));
        fill(230,219,57,op);
        ellipse(0,0,4,17);   
        ellipse(0,0,17,4);
        pop();
        pop();
    } else{
        push();
        noStroke();
        fill(247,212,40);
        circle(351,45,sunsize);
        pop();
    }


    //Sea
    //Color changes from deap sea color to shallow water level color
    //as mouseY moves downward
    let seaY = constrain(mouseY,180,300);
    let gr = constrain(mouseY,85,174);
    push();
    fill(r,gr,b);
    noStroke()
    square(0,seaY,width);            
    pop();

    //mouth
    fill(112,196,161);   
    //let animalY = constrain(mouseY,160,390);
    let fishY = constrain(mouseY,130,287);
    moveY=height-fishY
    push();
    noStroke();
    circle(fishX+91,moveY-5,13);
    circle(fishX+91,moveY+5,13);

    //Tail
    push();
    fill(246,208,98);
    stroke(246,208,98);
    strokeWeight(3);
    beginShape();
    curveVertex(fishX-86,moveY-4);
    curveVertex(fishX-86,moveY-4);
    curveVertex(fishX-122,moveY-13);
    curveVertex(fishX-114,moveY+1);
    curveVertex(fishX-120,moveY+22);
    curveVertex(fishX-86,moveY+12);
    curveVertex(fishX-86,moveY+12);
    endShape();
    pop();

    //fish body/eyes
    ellipse(fishX,moveY,181,85);
    fill(0);
    ellipse(fishX+70,moveY-11,16,14);
    fill(255);
    ellipse(fishX+74,moveY-13,5,4);
    pop();

    //fins
    push();
    fill(246,208,98);
    stroke(246,208,98);
    strokeWeight(3);
    beginShape();
    curveVertex(fishX+23, moveY-5);
    curveVertex(fishX+23, moveY-5);
    curveVertex(fishX-6, moveY-8);
    curveVertex(fishX-5, moveY+5);
    curveVertex(fishX-4, moveY+18);
    curveVertex(fishX+25, moveY+7);
    curveVertex(fishX+25, moveY+7);
    endShape();
    pop();

    //Bubbles
    //Bubble disappears as mouseY moves upwards
    push();
    if(mouseY<230){
        fill(31,131,172,0);
        strokeWeight(1);
        fill(31,131,172);
        circle(fishX+102,moveY-2,4);
        circle(fishX+106,moveY-10,3);
        circle(fishX+118,moveY-13,4);
        circle(fishX+114,moveY-31,5);
        circle(fishX+127,moveY-45,7);
    } else if(mouseY<280){
        fill(31,131,172,100);
        strokeWeight(1);
        fill(31,131,172,100);
        circle(fishX+102,moveY-2,4);
        circle(fishX+106,moveY-10,3);
        circle(fishX+118,moveY-13,4);
    } else{
        fill(0);
    }
    pop();

    //cloud color gets brighter as mouseY moves downward
    //cloud comes in as mouseX moves right
    //leftside cloud
    let skyX = constrain(mouseX,0,width/2);
    let rrr =constrain(mouseY,210,252);
    push();
    noStroke();
    fill(rrr,185,153);
    circle(skyX-64,43,50*1.5);        //big cloud
    circle(skyX-106,46,22*1.5);          //small cloud
    rectMode(CENTER);
    rect(skyX-72,64,99*1.5,30*1.5,30);
    pop();

    //rightside cloud
    //comes in from the left edge
    let skyyX =constrain(mouseX+30,0,width/2);        
    push();
    noStroke();
    fill(rrr,185,153);
    circle((width-skyX)+73,73,61*1.4);        //big cloud
    circle((width-skyX)+115,76,31*1.5);          //small cloud
    rectMode(CENTER);
    rect((width-skyX)+84,93,123*1.3,31*1.5,30);
    pop();
}

For created this idea, I had to let a lot of values into constrain so that the mouseX and the mouseY values does not get mixed up each other.

Computational Fabrication

I admire Andrew Kudless‘s collaborative idea of nature and the computational form that is shown in the picture of “C_Wall” / 2006. When I look at this picture, I think it is interesting to see how natural wave-like circular patterns are created from the shadow of the sun, coming from the physical sculpture. I feel like the artist generated this work from nature like coral reef/honeycomb/etc something that is repetitive but not artificially but naturally created structural forms. Looking at the final forms(including other works) the Voronoi algorithm that the creator used, is successfully displayed to facilitate the translation of information from simulations and other point-based data. I think the creator created the perfect harmony of nature/man-made physical-forms considering how to express the materialization aspects at the same time.

LO: Generative Art

I admire Joshua Davis’s art piece, ‘HPsprout’, because of the vague randomness of triangles with different colors but also includes the pattern of how geometric triangles are repetitive.

This piece can somehow be described with a term, “chaos” but also can be described as geometric. It is also interesting how the mood of the piece changes depending on the number of triangles. Depending on how the artist articulates the shape of it, the audience can be allured more into the art piece. This artist loves playing with new ideas and tools. That is why he decided to #GoMakeThings and challenged himself to make something new images. Not only fundamentally thinking about those primary colors, but he also wrapped all those new transparent PNGs into some processing code to come with an infinite number of colors/layouts.

This piece n0t only includes some processing code but also requires hand-made efforts. The artist had to scan the pools of color from shredded papers to come up with natural dropped shadows and lights.

Different elevations to create natural drop shadows

Variable Face

sketch

//Jasmin Kim
//Section D

var eyeSize = 70;
var faceWidth = 200;
var faceHeight = 250;
var mouthSize = 80;
var mouthW = 80;
var mouthH=40;
var R = 188;
var G = 212;
var B = 246;


var value = 0;

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

function draw() {
    background(R,G,B);

    //Face Shape
    fill(243,213,B); //Beige
    noStroke();
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);  //Face
    var faceX = (width/2);
    var faceY = (height/2);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    
    //Body Shape
    var bodyW = faceWidth*1.8
    var bodyH = (height/2)+(height*0.6)
    rect((width/2)-(faceWidth/1.1),(height/2)+(faceHeight/2.4),bodyW,bodyH,80,80,20,20);
    
    //glass rectangle
    fill(158,157,156);
    stroke(1);
    rect(eyeLX,(height/2)-3,faceWidth/2,5);
    
    //Eyes
    stroke(7);
    strokeWeight(1);
    var eyeH = height/2
    ellipse(eyeLX, eyeH, eyeSize*1.3, eyeSize*1.3);   //gray glasses
    ellipse(eyeRX, eyeH, eyeSize*1.3, eyeSize*1.3);
    fill(255);
    ellipse(eyeLX, eyeH, eyeSize, eyeSize);           //white eyes
    ellipse(eyeRX, eyeH, eyeSize, eyeSize);
    
    //eyes moving
    fill(0);
    var moveXr = constrain(mouseX,eyeLX-(eyeSize/5),eyeLX+(eyeSize/5));
    var moveYr = constrain(mouseY,eyeH-(eyeSize/5),eyeH+(eyeSize/5));
    var moveXl = constrain(mouseX,eyeRX-(eyeSize/5),eyeRX+(eyeSize/5));
    var moveYl = constrain(mouseY,eyeH-(eyeSize/5),eyeH+(eyeSize/5));
    ellipse(moveXr, moveYr, eyeSize/2, eyeSize/2);       //black eyeball
    ellipse(moveXl, moveYl, eyeSize/2, eyeSize/2);

    //Mouth
    if(faceWidth <230){
        strokeWeight(5);
        line(eyeLX-(eyeSize/2),eyeH-40,eyeLX+(eyeSize/2),eyeH-50);               //sad eyebrow
        line(eyeRX-(eyeSize/2),eyeH-50,eyeRX+(eyeSize/2),eyeH-40);
        noStroke();
        fill(79,129,255)
        circle(eyeLX,(height*0.65),20);                                           //tears
        triangle(eyeLX-10, height*0.65, eyeLX, height*0.6,eyeLX+10, height*0.65);   //tears#2
        fill(0);
        ellipse(width/2,(faceY+(faceHeight/4.5))+10,50,45);     //black mouth
        if(faceHeight<290){
            stroke(4);
            line(280,90,(width/2)-20,130);      //hair
            line(300,90,(width/2)-14,125);
            line(320,90,(width/2)-8,118);
        }
        
    } else{
        fill(R,G,B);
        strokeWeight(1);
        var mouthY = faceY+(faceHeight/4.5);
        var mouthX = faceX-(mouthW/2);
        rect(mouthX, mouthY, mouthW, mouthH,25,25,25,25);       //normal mouth
        //Angry Eyebrows
        strokeWeight(5);
        line(eyeLX-(eyeSize/2),eyeH-50,eyeLX+(eyeSize/2),eyeH-40);
        line(eyeRX-(eyeSize/2),eyeH-40,eyeRX+(eyeSize/2),eyeH-50);
        //tongue
        strokeWeight(1);
        fill(239,133,154);
        arc(mouthX+(mouthW/2),mouthY+mouthH, mouthW/1.8, mouthH*0.8, PI, TWO_PI);

    }

    
}


function mousePressed() {
    faceWidth = random(200, 300);
    faceHeight = random(250, 350);
    eyeSize = random(40, 70);
    R = random(0,255);
    G = random(0,255);
    B = random(0,255);
    mouthW = random(55,85);
    mouthH = random(30,45);

}

For this project, I tried to show two different facial expressions while I limited the probability of hairs too. Skin color, background color, and eyebrows change as I click the mouse. An interesting part of this project is that I also tried to move the pupils according to the screen mouse.