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

Looking Outwards – 04

Work Title: The Sweet Screen, A multiplayer touch installation

Artist: DA Z Digital Art Zurich

https://studiomoniker.com/projects/the-sweet-screen

“The phone has become an extension of our body, and our finger is navigating through the endless seductive space of information or entertainment.”

This project is an interactive mobile design that invites the audience to use their fingers on the screen, and the hand mirrors the touching back motion from behind the screen. While people gather in the screening room, one can also see other people’s fingers on the digital screen and interact with one another. As the finger touches back, there is also a “knock” sound playing. I am interested in this project because yet it’s generated by a very simple motion, the multimedia experience is prolific in both 2-dimension and 4-dimension spaces. I suppose the algorithm behind this work to be mimicking the user’s finger as mouseX and mouseY. When mouseX and mouseY are tracked, there is a reaction sent from the computer, which includes the audio effect and another finger appearing.

Looking Outward – 03

Work Title: Momentum, 2008, Hollywood Hills

Artist: Matt McConnell

https://www.mattmcconnell.com/momentum https://www.youtube.com/watch?v=puuTwNM3-sI&t=49s

Designed by McConnell Studio are these interactive kinetic sculptures with sound elements embedded in them. The concept is to reflect the millipede’s motion of walking. When millipedes move, their legs move in a wave-like motion from back to forth. As the first pair of legs begin to go down, the second pair of legs are already coming up. I think this idea of biomimicry — taking what we observe in nature and making it become part of the art piece —is a valuable design process. Because the structure and form of the artwork are not decided randomly, it already has a clear algorithm methodology such as repetition, arraying, rotating, etc. Fundamental functions that can potentially generate these patterns include loops, mapping, and bezier curves. There is also sound incorporated into this artwork, which is probably caused by the movement of each curve. So each curve segment is given a pitch, and when the curve is in motion in a particular direction, the sound plays with a combination of different sound waves.

Project-02: Variable Faces

I enjoyed figuring out different relationships between each variable and being able to write them as expressions to create drawings. In creating two figures on one canvas, I realized the importance of organizing my code and adding necessary comments for particular lines to remind myself about key information.

sketch

// Angela Yang 
// Section C - Project 02

// Variables are set for each facial element. 
var eyeSizeW = 100;
var eyeSizeH = 100;
var eyeSizeW2 = 70;
var eyeSizeH2 = 70;
var pupilSizeW = 50;
var pupilSizeH = 50;
var pupilSizeW2 = 30;
var pupilSizeH2 = 30;
var faceWidth = 200;
var faceHeight = 200;
var faceWidthB = 350;
var faceHeightB = 250;  
var mouthType = 2;
var noseType = 1;
var r = 200; 
var g = 100;
var b = 150;
var on = false; 


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

function draw() {
  if(on) {
    background(243, 200, 174);
  } else {
    //background changes from yellowish-green to a pink tone with 30% transparency. 
    background(219, 226, 175, 30);
  }
  

   
//LEFT FIGURE
    //Body
    fill(r, g, b);
    stroke("white");
    ellipse(width/4, height/2 + 200, width/1.5, height/1.5);
  
    // Face base
    noStroke();
    fill(r, g, b);
    ellipse(width / 4, height / 2, faceWidth,  faceHeight);
  
    // Eyes
    stroke(r, g, 50);
    strokeWeight(1);
    fill(255);
    var eyeLX = width / 4 - faceWidth * 0.25;
    var eyeRX = width / 4 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSizeW, eyeSizeH);
    ellipse(eyeRX, height / 2, eyeSizeW, eyeSizeH);
    fill(r-100, g+50, b+50);
    var pupilLX = width / 4 - faceWidth * 0.25;
    var pupilRX = width / 4 + faceWidth * 0.25;
    ellipse(pupilLX, height/2, pupilSizeW, pupilSizeH);
    ellipse(pupilRX, height/2, pupilSizeW, pupilSizeH);

  
    //Nose Variations
    fill("white");
  
    if (noseType >= 0 & noseType <= 1.5){
       noStroke();
       rect(width/4 - faceWidth*0.03, height/2 + faceHeight*0.1, 10, 20);
       //When the value of nose type is >= to 0 and <= 1.5, a rectangular nose is drawn. 
      
    } else if(noseType > 1.5 & noseType <= 3){
        noStroke();
        ellipse(width/4, height/2 + faceHeight*0.1, faceWidth/5, faceHeight/10);
        //When the value of nose type is greater than 1.5 and smaller+equal to 3, 
        //a circular nose is drawn. 
      
    } else if(noseType > 3 & noseType <= 4.5){
        stroke("white");
        strokeWeight(4);
        line(width/4, height/2, width/4+15, height-230);
        //When the value of nose type is greater then 3 and smaller+equal to 4.5, 
        //a linear nose is drawn. 
      
    } else{
        noStroke();
        triangle(width/4, height/2, width/4+15, height-230, width/4-15, height-230);      
      //When the value of nose type is equal to all other numbers in the range of 0~6, 
      //a triangular nose is drawn. 
    }

  
   // Mouth Variations   
    if (mouthType >= 0 & noseType <= 1.5){
       stroke("white");
       fill(r-60, g, b);
       rect(width/4 - faceWidth*0.05, height/2 + faceHeight*0.35, 20, 5);
       // A confusing mouth is drawn. 
      
    } else if(mouthType > 1.5 & mouthType <= 3){
        stroke("white");
        strokeWeight(1);
        fill(r, g, b+80);
        ellipse(width/4, height/2 + faceHeight*0.35, faceWidth/6, faceHeight/10);
        //A shocking mouth is drawn. 
      
    } else if(mouthType > 3 & mouthType <= 4.5){
        noStroke();
        triangle(width/4 - faceWidth*0.05, height/2 + faceHeight*0.35, width/4+15, height-190, width/4-15, height-190); 
        //A happy mouth is drawn. 
      
    } else{
        stroke("white");
        strokeWeight(1);
        fill(r, g+60, b);
        ellipse(width/4, height/2 + faceHeight*0.35, faceWidth/2, faceHeight/8);
        //A shocking mouth is drawn. 

    }
  
  
  
// RIGHT FIGURE 
    //Body
    fill(0, g, b+50);
    stroke("white");
    ellipse(width/1.4, height/2 + 200, width/1.5, height/1.5);
  
    // Face base
    noStroke();
    fill(0, g, b+50);
    ellipse(width/1.4, height/2, faceWidthB, faceHeightB);
  
    // Eyes
    stroke(r, g, 100);
    strokeWeight(1);
    fill(255);
    var eyeLX2 = width / 1.4 - faceWidthB * 0.25;
    var eyeRX2 = width / 1.4 + faceWidthB * 0.25;
    ellipse(eyeLX2, height / 2, eyeSizeW2, eyeSizeH2);
    ellipse(eyeRX2, height / 2, eyeSizeW2, eyeSizeH2);
    fill(r-100, g+50, b+50);
  
    var pupilLX2 = width / 1.4 - faceWidthB * 0.25;
    var pupilRX2 = width / 1.4 + faceWidthB * 0.25;
    ellipse(pupilLX2, height/2, pupilSizeW2, pupilSizeH2);
    ellipse(pupilRX2, height/2, pupilSizeW2, pupilSizeH2);

  
    //Nose Variations
    fill("white");
  
    if (noseType >= 0 & noseType <= 1){
       noStroke();
       ellipse(width/1.4, height/2 + faceHeightB*0.1, faceWidthB/5, faceHeightB/10);
      
    } else if(noseType > 2 & noseType <= 4){
       noStroke();
       fill("white");
       rect(width/1.4 - faceWidthB*0.03, height/2 + faceHeightB*0.1, 30, 10);
      
    } else if(noseType > 4 & noseType <= 5.5){
        stroke("white");
        strokeWeight(5);
        line(width/1.4, height/2, width/1.4+15, height-230);
      
    } else{
        noStroke();
        triangle(width/1.4, height/2, width/1.4+50, height-220, width/1.4+50, height-220);      
    }
  
  
     // Mouth Variations   
    if (mouthType >= 0 & noseType <= 1.5){
       stroke("white");
       fill(r-60, g, b);
       rect(width/1.4 - faceWidthB*0.05, height/2 + faceHeightB*0.35, 20, 5);
      
    } else if(mouthType > 1.5 & mouthType <= 3){
        stroke("white");
        strokeWeight(1);
        fill("black");
        ellipse(width/1.4, height/2 + faceHeightB*0.35, faceWidthB/6, faceHeightB/10);
      
    } else if(mouthType > 3 & mouthType <= 4.5){
        noStroke();
        triangle(width/1.4 - faceWidthB*0.05, height/2 + faceHeightB*0.35, width/1.4+15, height-190, width/1.4-15, height-190); 
      
    } else{
        stroke("white");
        strokeWeight(1);
        fill(r, g+60, b);
        ellipse(width/1.4, height/2 + faceHeightB*0.35, faceWidthB/10, faceHeightB/8);
}
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 100 and 300.
    faceWidth = random(100, 300);
    faceHeight = random(100, 400);
    faceWidthB = random (100, 300);
    faceHeightB = random (200, 450);
    noseType = random(0, 6);
    mouthType = random(0, 8);
    eyeSizeW = random(10, 80);
    eyeSizeH = random(10, 80);
    eyeSizeW2 = random(30, 70);
    eyeSizeH2 = random(30, 70);
    pupilSizeW = random(5,30);
    pupilSizeH = random(5,20);
    pupilSizeW2 = random(10, 30);
    pupilSizeH2 = random (5, 30);
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
    if(mouseX > 250 & mouseX < 350 && mouseX);
    on = !on;

}

LO2: Generative Art

Work Title: Quantum Fluctuations

Artist: Markos R. Kay

https://www.mrkism.com/

This work is made from multi-layered virtual experiments that demonstrate the fundamental and transient nature of the quantum world that we all live in. What fascinates me the most is the work’s visual impact. Although the quantum world is a difficult object to measure, this drawing allows me to see things that are not visible to the naked eye, which also resonates with the value of art: allows one to visualize imaginative ideas. In this art piece, parallel to those experiments conducted in the laboratory, the particles are simulated as brush strokes in order to paint the image of a proton collision. The algorithms behind this artwork consist of rigorous data collection of the proton beams, particle analysis, time, etc. According to the artist’s website, the visualizations of these processes are created with “input from scientists working on Large Hadron Collider at the CERN, Geneva. Beyond algorithms, the artist uses color combinations to create depth that draws our attention to its innermost point. The colors are stacked together with different alpha values to create blurriness and reflections. The realistic effects of the shapes and their splashing particles bring the artwork to life as if it was a standing painting.

Project 1: My Self Portrait

This is my project

sketch

var g = 15;
var b = 255;

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

function draw() {
  // background
  g = map (mouseX, 0, 600, 0, 255);
  b = map (mouseX, 0, 600, 255, 0);
  background(0, g, b);
  
  //Hat
  noStroke();
  fill(100, 200, 230);
  circle(280, 200, 280);
    
  
  //Body
  strokeWeight(6);
  stroke(255, 255, 255);
  line(550, 300, 500, 300);
  line(500, 300, 460, 470);
  stroke(240, 224, 64);
  circle(550, 300, 20)
  
  stroke(255, 255, 255);
  strokeWeight(10);
  line(275, 424, 200, 600);
  line(200, 600, 155, 650);
  line(155, 650, 100, 700);
  line(100, 700, 460, 700);
  line(460, 700, 400, 550);
  line(400, 550, 510, 550);
  line(460, 470, 410, 470);
  line(410, 470, 350, 418);
  strokeWeight(12);
  line(510, 550, 460, 470);

  
  //Head
  stroke(255, 255, 255);
  strokeWeight(2);
  fill(255,242,230);
  circle(300, 300, 250);

  
  //Hair
  noFill();
  stroke(255, 255, 255);
  strokeWeight(10);
  fill(0, 0, 0);
  bezier(280, 170, 50, 200, 150, 50, 90, 600 );
  bezier (280, 170, 460, 330, 500, 200, 400, 100);
  strokeWeight(5);
  triangle(280, 170, 200, 350, 320, 200);
  
  
  //Eyebrow
  noFill();
  stroke(82, 71, 71);
  strokeWeight(3);
  bezier(350, 280, 360, 260, 400, 250, 415, 280)
  
  
  //Eye
  noStroke();
  fill(82, 71, 71);
  circle(383, 295, 50);
  fill(255, 255, 255);
  circle(380, 285, 20);
  circle(390, 305, 10);
  stroke(0, 0, 0);
  strokeWeight(1);
  bezier(361, 287, 350, 278, 347, 288, 340, 280);
  
  
  //Mouth
  noFill();
  stroke(0, 0, 0);
  strokeWeight(3);
  bezier(353, 350, 355, 360, 385, 365, 400, 353);
  noFill();
  stroke(245, 0, 0);
  //bezier(360, 353, 355, 355, 385, 360, 390, 355);
  
  
  //Face detail
  noStroke();
  fill(255, 204, 204);
  circle(300, 330, 55);
  stroke(94, 62, 34);
  strokeWeight(2);
  line(300, 330, 298, 335);
  line(310, 330, 307, 335);
  
  //Ear
  noFill();
  stroke(0, 0, 0);
  strokeWeight(4);
  bezier(240, 310, 170, 370, 245, 380, 230, 400);
  strokeWeight(2);
  bezier(240, 320, 230, 340, 220, 330, 240, 360);
  //Earring
  fill(240, 224, 64);
  strokeWeight(1);
  triangle(230, 400, 200, 430, 250, 430);
  fill(255, 255, 255);
  circle(230, 400, 20);
  
  //Dress
  stroke(0, 0, 0);
  rect(305, 600, 30, 40);
  rect(305, 530, 30, 40);
  rect(305, 460, 30, 40);
  fill(255, 0, 0);
  rect(313, 607, 15, 20);
  rect(313, 537, 15, 20);
  rect(313, 467, 15, 20);

  //Name
  stroke(240, 224, 64);
  strokeWeight(3);
  line (540, 645, 570, 645);
  stroke(255, 255, 255)
  strokeWeight(3)
  line (510, 700, 510, 660);
  line (510, 660, 490, 630);
  line (510, 660, 530, 630);
  line (540, 700, 540, 630);
  line (540, 630, 570, 630);
  line (540, 660, 570, 660);
  

}

LO: Kinetic Sculpture

Work title: Circe [Kinetic Wind Sculpture in Stainless Steel]

Designer: Anthony Howe

Video Link: https://www.howeart.net/circe

I am really fascinated by this project because Howe has endowed a new form of sculpture that is not a static artwork. The patterning of these sculptures also reminds me of parametric architecture, which is often created by Grasshopper (a 3D modeling program). Using specialized software that can program each component of the sculpture, Howe is able to generate the motion of steel plates through the wind. Then, the wind will allow the statue to perform based on its pre-designed structure. I believe that one of the artist’s responsibilities is to let the work speak for themselves, whether through interaction with nature or through computational control by us. Regarding the software, I suppose the author created his own scripts because every work in this series is unique in its form and motion, as well as the “wind” determinator, in this case, will require real-time data to implement the design in real life.