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

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

Project 05 – Wallpaper

I thought it would be an interesting exercise to simplify the intricate orchid flower with code. It was a fun challenge determining the most essential shapes out of the organic form. After getting the basic shapes down on paper, I made a sketch in Illustrator, then translated it into p5.js coordinates to create a “tile.” I then used loops to create a wallpaper out of the original tile design.

orchid et

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

function draw() {
  background(200);
  scale(.2);//scale down coordinates based on 600x600 canvas
  for (var x = 0; x <= 5*width; x += 600) { 
    for (var y = 0; y <= 5*height; y += 600) { 
      push();
      translate(x, y);
      tile();
      pop();
       }
  
  noLoop(0);
  //}
  
  
}
}
function tile() { //use repeating tile to simplify loop function
  
  noStroke();
  fill(35, 58, 58);//bg dark green color
  rect(0, 0, 600, 600);
  //decorative lines
  stroke(227, 239, 177); //yellow line
  line(0, 399, 600, 399);
  line(0, 407, 600, 407);
  line(300, 0, 300, 600);
  stroke(115, 140, 127); //green line
  strokeWeight(0.5);
  line(0, 403, 600, 403);
  line(250, 0, 250, 600);
  line(255, 0, 255, 600);
  line(350, 0, 350, 600);
  line(355, 0, 355, 600);
  push();
  orchid();
  pop();
}

function orchid() {
  
  noStroke();
  push();
  fill(206, 126, 179);  //midtone magenta
  ellipse(300, 240, 107, 142); //back petal
  fill(191, 86, 156);  //darker magenta
  translate(-165, 310);
  rotate(radians(-45));
  rect(180, 312, 115, 76, 60, 0, 0, 0);
  pop();
  push();
  fill(191, 86, 156);  //midtone magenta
  translate(340,-115);
  rotate(radians(45));
  rect(305, 312, 115, 76, 0, 60, 0, 0);
  pop();
  
  push();
  fill(228, 211, 229); //light magenta
  ellipse(212, 315, 183);//large petal1
  ellipse(388, 315, 183);//large petal2
  pop();
  push();
  fill(206, 126, 179);  //midtone magenta
  rect(292, 329, 16, 80);//center rectangle
  pop();
  
  push(); //top "sandle"
  fill(255); //white
  ellipse(300, 320, 33);
  triangle (300, 295, 317, 315, 283, 315);
  fill(205, 59, 113); //true magenta
  ellipse(273, 335, 24);
  triangle(264, 343, 278, 343, 295, 387);
  ellipse(327, 335, 24);
  triangle(336, 343, 322, 343, 305, 387);
  rect(268, 401, 64, 21, 0, 0, 21, 21);
  fill(249, 239, 130);//yellow
  ellipse(293, 400, 11);
  ellipse(307, 400, 11);
  pop();
  
  
}

LO 5

Throughout the past year, I noticed that 3-D graphics have become a very popular medium to decorate and enliven websites and apps. One of my favorite artists I’ve come across is Laurie Rowan. His work takes advantage of animation and the physical “realness” of his medium to communicate out-of-the-box and quirky ideas. It’s difficult to choose one, but I enjoy “MTV: Love,” a short animation reel made for MTV. I think this is a great example of how imaginative and seemingly non-practical artistic visions can be used for the benefit for mainstream audiences on a platform like television.

I assume that Laurie uses a program like Cinema4D to render his characters, and an editing software like AfterEffects to piece them together, but I’m unfamiliar with the algorithmic process. Laurie’s work inspires me to look toward other mediums to further my illustration practice.

Another favorite of mine

LO – 4

With my short-lived experience in physical computing taking an intro Arduino class last semester, I was drawn to the appearance of Ototo by Yuri Suzuki. It resembles a chip but claims to be a musical invention kit. Reading into it, Ototo does exactly as it promises. It allows the user to interact tactically with the product to experiment with possible sounds, manipulate add-ons that increase the range of sounds that can be made, and wire the product to everyday items (i.e. water, a piece of cake, a spoon) so that the musical performance experience expands to include any object you desire.

What I love about the Ototo is the accessibility of the product by the communicative means of sounds and its relationship with touch. From a young age, we are introduced to toys with buttons assigned to certain sound effects. I think this project builds on that simple concept but elevates it to something even more interesting by allowing the user to transform their own personal items into musical instruments. I’m unsure of how the machine detects changes in the connected objects (conductivity?), but I do know that a lot of thought was put into writing code that assigns sounds to different ports on the device that is further changed based on the additional input information from the connected objects. I think Suzuki’s artistry comes into this project in the consideration of human emotion and how we respond to interactivity and sound. His sound projects are highly engaging and portray sound as a viable and fun aspect of art and design.

Any object the Ototo is connected to becomes a musical instrument.

Project 4 – String Art

I began this project by playing around with loops to experiment with different forms. However, I later realized the loops could be used to create interesting environments with “perspective lines.” I decided to run with this and create an empty room with a door at the end. The color changing with the position of the mouse give a sense of dimension and personalization.

string art et

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

function draw() {
    spacing = 20;
    red = mouseX;
    blue = mouseY;
   
    for (var a = 0; a <= 600; a += spacing) {
        // sloped plane
        stroke(255);
        strokeWeight(0.5);
        line(0, a, a, 200);

        // vertical grid
        stroke(red, 0, 200);
        line(a, mouseX, a, a);
    }
    for (var a = width/3; a <= width; a += spacing/2) {
        //bg diagonals
      stroke(red, 255, blue);
      line(a, 0, 2*a, 200);
      line(2*a, 200, a, 200); //2 sets of lines converge at horizon
    }
  //door
  stroke(red, 255, blue);
  strokeWeight(1);
  fill(0);
  rect(width/2, height-200, 50, 100);
    //doorknob
    circle(width/2+40, height-150, 5);
}

Project 3: Dynamic Drawing

For this week’s project, I wanted to visualize my (poor) sleep schedule with code. I realized through my time in college that I work better at night, but this makes it hard for me to function normally in the daytime.

night:day

var faceWidth;

function setup() {
  createCanvas(450, 650);

}

function draw() {
  //sky color shift
  if (mouseX>= width/2.2) {
    background (255, 243, 170);//daytime
  } else {
    background (66, 56, 148); //nighttime
  }

  //base figure
  var faceWidth = width/2;
  push();
  noStroke();
  fill(20, 20, 50) //facecolor
  var faceShift = constrain(mouseX, 150, 500);
  ellipse (width/2, height/2, faceWidth, faceWidth);
    //body
    rectMode(CENTER);
    rect (width/2, height/2 + 300, faceWidth, 420, 50, 50,0, 0);
    pop();   
    
  //moon
  var moonX = constrain(mouseX, width/4, width/2);
    if (mouseX<width/2.5){
      noStroke();
      fill(66, 98, 167);
      ellipse(moonX, height/5, faceWidth/2, faceWidth/2);
      fill(66, 56, 148);
      ellipse(moonX +30, height/5, faceWidth/2, faceWidth/2);
    }
  //sun
  var sunX = constrain(mouseX, width- width/2, width - width/4)
    if (mouseX>width/2.2){
      noStroke();
      fill(255, 214, 139);
      ellipse(sunX, height/5, faceWidth/2, faceWidth/2);
      stroke(255, 214, 139);
      strokeWeight(2);
      noFill();
      ellipse(sunX, height/5, faceWidth/2 + 20, faceWidth/2 +20);
      ellipse(sunX, height/5, faceWidth/2 + 40, faceWidth/2+40);
    }
      
  
  //dayface
    //eyelids
    var eyeWidth= faceWidth/4
    push();
    
      //eyebag droop
      var bagdroop= constrain(mouseY, height/2, height/2 + faceWidth/10); //eyebag droop factor
    if(mouseX>width/2){
      //eyebag droop
      stroke(173, 85, 255);
      strokeWeight(3);
      fill(218, 170, 255);
      ellipse (176, height/2- faceWidth*1.5+ bagdroop, faceWidth/4, faceWidth/4)
      ellipse (width- 176, height/2- faceWidth*1.5 + bagdroop, faceWidth/4, faceWidth/4)
      }
    pop();
  
    //eyes
    push ();
    noStroke();
    fill(255);
    ellipse (176, height/2, eyeWidth, eyeWidth)
    ellipse (width- 176, height/2, eyeWidth, eyeWidth)
    pop();
  
    //eyelid droop
    var droop = constrain(mouseY, height/2- faceWidth/8, height/2);// eyelid droop factor
    if(mouseX>width/2){
      noStroke();
      fill(20, 20, 50);
      rect( 140, droop*.75+ eyeWidth/2, eyeWidth+20, eyeWidth)
      rect (width- 218, droop*.75+ eyeWidth/2, eyeWidth+20, eyeWidth);
    }
  
    //pupils
    push ();
    noStroke();
    fill(20, 20, 50);
    ellipse (176, height/2, faceWidth/8, faceWidth/8)
    ellipse (width- 176, height/2, faceWidth/8, faceWidth/8)
    pop();
    
  
    //mouth
    push();
    noFill();
    stroke(255);
    strokeWeight(10);
    beginShape ();
    curveVertex( width/2 -50, height/2 +40 );
    curveVertex( width/2 -50, height/2 +40 );
    curveVertex( width/2 -30, height/2 +55);
    curveVertex (width/2, height/2 + 60);
    curveVertex( width/2 +30, height/2 +55);
    curveVertex( width/2 +50, height/2 +40 );
    curveVertex( width/2 +50, height/2 +40);
    endShape();
    pop();
  
  
  //sky shift
  push();
  var bgshift = constrain (mouseX, 120, width - width/3) //shift only happens once
  translate (-50, -50)
  rotate (radians(bgshift*1.75))
  noStroke();
  fill(20, 20, 50);
  rect (0, 0, height* 1.5, height *1.75)
  pop ();
  

  
}

LO – 3

Floraform by Nervous System (2014) first caught my attention because of its aesthetics and practical application in beautiful flower-inspired jewelry, sculptures, and animations. Reading more into it, I became even more inspired knowing that the generative jewelry pieces were based on extensive scientific research into the way flowers grow and the differential system. The designers took into consideration the effects of physics, environmental factors, collision detection, growth patterns, and more. At first, I was skeptical at anyone’s ability to replicate nature, as I’ve grown to understand that anything “natural” is imperfect, but the thoroughness of the project site and the practical, commercial outcome made me appreciate the initiative and its respect to reality.

Although a ton of scientific research went into creating the final products of Floraform, a lot of artistic license were taken in the way the floral system is represented visually and made into pieces of art. Nervous System creates their own software system to visualize their creations, but I can assume that it resembles a 3-D modeling software but with the capabilities of incorporating custom algorithms in accordance to the different natural considerations they made.

One of their considerations when simulating flower growth: edge.

Project – 02: Variable Faces

My week could be described with this emoji: 🤡, so I decided to lock myself in my apartment to code this as a coping mechanism.

I thought it was interesting that clowns are interpreted very differently depending on their context and appearance. I decided to take advantage of this project to demonstrate the unsettling feeling they give me. I was surprised to see that the incremental changes in color and size of the clown’s features actually increased the cursed factor significantly.

clown!

//global variables
var eyewhite = 42;
var eyeshadow = 60;
var pupil = 20;
var faceWidth = 315;
var faceHeight = 315;
var nose = 63;
var cheek = 58;
var eyebrow = 50;
var shoulderWidth = 480;
var mouthType = 1
//shirtcolor
var shirtR = 0;
var shirtG = 192;
var shirtB = 184;
//red default color
var r  = 255;
var g = 5;
var b = 37;
//eyeshadowcolor
var shadowR = 97;
var shadowG = 116;
var shadowB = 255;

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

function draw() {
    background(255, 160, 59);
    var centerX = width / 2;
    var centerY = height / 2;

//body
    //shoulders
        noStroke();
        fill (shirtR, shirtG, shirtB);
        rect(0, 480, shoulderWidth, 165, 90, 90, 0, 0);

    //bottomneck
        noStroke();
        fill (255, 237, 219);
        ellipse (centerX, 486, 144, 82);

    //neck
        noStroke();
        fill (255, 237, 219);
        rect (168, 419, 144, 66);

    //buttons
        noStroke();
        fill (255, 250, 116);
        ellipse (centerX, 557, 27, 27);

        noStroke();
        fill (255, 250, 116);
        ellipse (centerX, 592, 27, 27);

        noStroke();
        fill (255, 250, 116);
        ellipse (centerX, 626, 27, 27);

//face
    noStroke(); 
    fill(255, 245, 227);
    ellipse ( centerX, centerY, faceWidth, faceHeight);

    //cheeks
        noStroke();
        fill(255, 51, 86, 100);
        ellipse (140, centerY, cheek, cheek);

        noStroke();
        fill(255, 51, 86, 100);
        ellipse (333, centerY, cheek, cheek);

    //nose
        noStroke();
        fill (r - 18, g, b); //darker red
        ellipse (centerX, 320, nose, nose);

    //eye
    var eyeLX = 185;
    var eyeRX = 291;
    var eyeY = 271;

        //eyeshadow
            noStroke();
            fill (shadowR, shadowG, shadowB);
            ellipse (eyeLX, eyeY, eyeshadow);

            noStroke();
            fill (shadowR, shadowG, shadowB);
            ellipse (eyeRX, eyeY, eyeshadow);

        //eyewhite
            noStroke ();
            fill (255);
            ellipse (eyeLX, eyeY, eyewhite);

            noStroke ();
            fill (255);
            ellipse (eyeRX, eyeY, eyewhite);

        //pupil
            noStroke ();
            fill (0);
            ellipse (eyeLX, eyeY, pupil, pupil);

            noStroke ();
            fill (0);
            ellipse (eyeRX, eyeY, pupil, pupil);

    //mouth
    var mouthLX = 170;
    var mouthRX = 310;
    var smileY = 352;
    var neutralY = 374;
    var frownY = 400;

    //draw three different mouth expressions
    if (mouthType ==1){
        //smile
            noFill();//lips
            stroke(r, g, b);
            strokeWeight(36);
            beginShape ();
            curveVertex( mouthLX, smileY)
            curveVertex( mouthLX, smileY)
            curveVertex( 195, 377)
            curveVertex (centerX, 393)
            curveVertex( width - 195, 377)
            curveVertex( mouthRX, smileY)
            curveVertex( mouthRX, smileY)
            endShape();

            noFill();//teeth
            stroke(255);
            strokeWeight(11);
            beginShape ();
            curveVertex( mouthLX, smileY)
            curveVertex( mouthLX, smileY)
            curveVertex( 195, 377)
            curveVertex (centerX, 393)
            curveVertex( width - 195, 377)
            curveVertex( mouthRX, smileY)
            curveVertex( mouthRX, smileY)
            endShape();

    } else if (mouthType ==2){
        //neutral
            noFill();//lips
            stroke(r,g,b);
            strokeWeight (36);
            line (mouthLX, neutralY, mouthRX, neutralY);

            noFill();//teeth
            stroke(255);
            strokeWeight (11);
            line (mouthLX, neutralY, mouthRX, neutralY);

    } else if (mouthType ==3){
        //frown
            noFill();//lips
            stroke(r, g, b);
            strokeWeight(36);
            beginShape ();
            curveVertex( mouthLX, frownY)
            curveVertex( mouthLX, frownY)
            curveVertex( 195, 370)
            curveVertex( centerX, 359)
            curveVertex( width - 195, 370)
            curveVertex( mouthRX, frownY)
            curveVertex( mouthRX, frownY)
            endShape();

            noFill();//teeth
            stroke(255);
            strokeWeight(11);
            beginShape ();
            curveVertex( mouthLX, frownY)
            curveVertex( mouthLX, frownY)
            curveVertex( 195, 370)
            curveVertex( centerX, 359)
            curveVertex( width - 195, 370)
            curveVertex( mouthRX, frownY)
            curveVertex( mouthRX, frownY)
            endShape();
    }
    //hair
        //left
        noStroke();
        fill(r,g,b);
        ellipse (83, 260, 42);
        ellipse (91, 230, 42);
        ellipse (57, 209, 42);
        ellipse (77, 203, 42);
        ellipse (68, 167, 42);
        ellipse (52, 147, 42);
        ellipse (56, 209, 42);
        ellipse (47, 182, 42);
        ellipse (67, 235, 60);
        ellipse (98, 198, 50);
        ellipse (57, 125, 29);

        //right
        noStroke();
        fill(r,g,b);
        ellipse (width- 83, 260, 42);
        ellipse (width- 91, 230, 42);
        ellipse (width- 57, 209, 42);
        ellipse (width- 77, 203, 42);
        ellipse (width- 68, 167, 42);
        ellipse (width- 52, 147, 42);
        ellipse (width- 56, 209, 42);
        ellipse (width- 47, 182, 42);
        ellipse (width- 67, 235, 60);
        ellipse (width- 98, 198, 50);
        ellipse (width- 57, 125, 29);
}

function mousePressed() {
eyewhite = random (30, 60);
eyeshadow = random( 55, 70);
pupil = random (15, 30);
faceWidth = random(300, 330);
faceHeight = random(315, 380);
nose = random(45, 90);
cheek = random(55, 90);
mouthType = int(random(1,4));
//shirtcolor
shirtR = random(0, 255);
shirtG = random(0, 255);
shirtB = random(0, 255);
//eyeshadowcolor
shadowR = random(0, 255);
shadowG = random(0, 255);
}

LO2 – Generative Art

LIA’s SV01, SV15, SV04, SV08 was a generative art installation at One Culver creative space, Culver City, California, displayed on 2018/07/01 – 2018/09/30 and 2018/07/01 – 2018/12/31. Most of her contract work seems to be displayed on a large screen in large, public areas. The large scale of LIA’s art is what inspires me– it commands just the right amount of presence and has the impact to elevate the space to feel more high-end and dynamic. Though the reel showcases moving pictures that involve both angular and more fluid, blob-like shapes, they all complement the architectural elements of the space and serves as both an aesthetically-pleasing side piece but also a moment for visitors to be present in the space and admire the artwork.

I believe the algorithm that generated the work is probably dependent on layers and has a flexible system that controls transparency. Semi-transparent layers crossing over each other at a more-or-less constant pace are a recurring element in LIA’s work. LIA’s artistic sensibilities are very present in her work, as she must create a piece of work that not only matches but elevates the experience of a large space. It is functional in that way, but it is also a very abstract concept that she must translate into a tangible product.

Project 01 – Self-Portrait

My default pose:)

Self-Portrait

function setup() {
    createCanvas(600,600);
    background(155, 154, 255, 255)
}

function draw() {
    //backhair
    fill(0);
    noStroke();
    rect(257, 362, 149, 237, 0, 105, 0, 0);

    noFill();
    stroke(255, 242, 165);
    strokeWeight(2);
    rect(260, 358, 151, 242, 0, 106, 0, 0);

    //shirt
    fill(255, 64, 34);
    noStroke();
    rect(96, 419, 292, 181, 0, 81, 0, 0);

    fill(244, 64, 34);
    noStroke();
    rect(438, 528, 83, 72, 0, 20, 0, 0);

    //neck
    fill(255,216,195);
    noStroke();
    rect(170,274,92,181);

    fill(255,216,195);
    noStroke();
    rect( 151, 419, 156, 81, 0, 0, 55, 0);

    //face
    strokeWeight(2);
    stroke(0);
    fill(255, 247, 227);
    rect(195, 222.5, 120, 170, 0, 0, 0, 400);

    fill(255, 247, 227);
    noStroke();
    ellipse(278, 223, 258);

        //coverface
        fill(155, 154, 255, 255);
        noStroke();
        rect(369, 162, 47, 160);

        //chin
        noStroke();
        fill(255, 247, 227);
        ellipse (312, 366.5, 52);


    //black long hair
    noStroke();
    fill(0);
    rect(86, 208, 112, 135);

    noStroke();
    fill(0);
    rect(29, 327, 169, 273, 106, 0, 0, 0);

    //blonde long hair
    fill(255, 242, 165);
    noStroke();
    rect(161, 208, 38, 399, 0, 0, 0, 37);

    noFill();
    stroke(255, 242, 165);
    strokeWeight(2);
    rect(157, 212, 42, 400, 0, 0, 0, 41)

    //eyes
        //white
        noStroke();
        fill(255);
        rect(245, 235, 29, 20, 0, 0, 0, 15);

        noStroke();
        fill(255);
        rect(356, 237, 13, 13, 0, 0, 0, 8);

        //pupil
        noStroke();
        fill(0);
        ellipse(275, 243, 26);

        noStroke();
        fill(0);
        ellipse(369, 243, 16);

        //eyeliner
        stroke(0);
        strokeWeight(3);
        line(248, 229, 273, 232);

        stroke(0);
        strokeWeight(3);
        line(369, 237, 387, 235);

        //eyebrow
        stroke(0);
        strokeWeight(3);
        line(220, 191, 289, 215);

        stroke(0);
        strokeWeight(2);
        line(326, 200, 390, 200);
        

    //nose
    noStroke();
    fill(0);
    ellipse(310, 300, 5);

    stroke(0);
    strokeWeight(2);
    noFill();
    arc(335, 297, 12, 12, 7*PI/4, PI/4);

    strokeWeight(2);
    line(326, 294, 326, 200);

    //lips
    noStroke();
    fill(255, 216, 195);
    ellipse(333, 345, 27);

    noStroke();
    fill(255, 151, 135);
    arc(333, 338, 47, 47, PI, 2*PI);

    noStroke();
    fill(255, 247, 227);
    ellipse(333, 315, 23);

    //cheek
    noStroke();
    fill(255, 151, 135, 120);
    ellipse(198, 311, 106);

    noStroke();
    fill(255, 151, 135, 120);
    ellipse(369, 280, 44);

    //bangs
        //right
        noStroke();
        fill(255, 242, 165);
        rect(311, 78, 91, 104, 0, 70, 0, 70);

        noStroke();
        fill(0);
        rect(311, 74, 91, 104, 0, 70, 0, 70);

        //left
        noStroke();
        fill(255, 242, 165);
        rect(86, 54, 253, 163, 142, 0, 146, 0);

        noStroke();
        fill(0);
        rect(86, 35, 260, 167, 145, 0, 150, 0);

    //hand
        //pointer
        noFill();
        stroke(255, 247, 227);
        strokeWeight(20);
        line(437, 405, 458, 486);

        //middle
        noFill();
        stroke(255, 247, 227);
        strokeWeight(20);
        line(496, 405, 471, 486);


    fill(255, 215, 195);
    noStroke();
    rect(438, 474, 83, 82, 23, 0, 36, 0);

        //4thfinger
        fill(255, 247, 227);
        noStroke();
        rect(487, 467, 20, 61, 10);

        //pinkie
        fill(255, 247, 227);
        noStroke();
        rect(504, 470, 20, 47, 10);

        //thumb
        noFill();
        stroke(255, 247, 227);
        strokeWeight(20);
        line(471, 486, 471, 540);

    fill(255, 247, 227);
    noStroke();
    rect(438, 496, 50, 59, 0, 46, 0, 0);

noLoop();

}

After sketching out different poses, I went into Illustrator to create my self-portrait so I could reference the dimensions and color codes of my shapes without as much guess-and-check. Translating the shapes into p5.js still took longer than expected, but it was pretty gratifying to see myself slowly building up a finished painting. Along the way, I realized that I was unable to replicate some rounded rectangles from Illustrator because p5.js does not recognize a radius as large as Illustrator does. This was frustrating but I came to enjoy the limitations of the program and my final result. I also wasn’t able to figure out how to rotate an object, so I ended up making my fingers out of strokes with a heavy stroke-weight– it worked!