Author: moon

LO: Randomness

Vera Molnar’s “Interruptions” 1968-89

Vera Molnar comes to my mind when randomness in computational art is brought up. Molnar is one of the first artists who created art through code. One of her projects that really represent randomness is “Interruptions.” Molnar created these pieces by creating square grids with little lines with tilts to different tilts and then making some lines disappear to create forms. Each piece is all different as she used a limited random generator that varied x and y by two or three millimeters. I find the works very interesting as it mimics how straightly places lines can be “interrupted”, similar to a domino effect or even the lines repelling each other. She made these to create shapes with the interruption similar to how in painting there are shapes that pop out of the background. Her pieces seem fairly easy but so much more complex. As a woman, I admire her very much.

Vera Molnar: http://www.veramolnar.com/

Project 06: Abstract Clock

For this project I wanted to play with circles and colors.

sketch
//Jessie Chen
//D
//jessiech@andrew.cmu.edu
//Project 06
//Abstract Clock


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

function draw() {
    //background(255, 234, 204);
    background(255)
    var hr = hour();
    var min = minute();
    var sec = second();
    translate(240, 240);
    rotate(radians(-90));
    noStroke();
    //blue minute circle
    let minAngle = map(min, 0, 60, 0, 360);
    fill(0, 200, 255, 190);
    var xmin = 65 * cos(radians(minAngle));
    var ymin = 65 * sin(radians(minAngle));
    ellipse(xmin, ymin, 180, 180);
    //tick inside circle
    push();
    strokeWeight(5);
    stroke(255);
    line(xmin * 2.35, ymin * 2.35, xmin * 2.23, ymin * 2.23);
    pop();
    //yellow seconds circle
    let secAngle = map(sec, 0, 60, 0, 360);
    fill(255, 213, 0, 220);
    var xsec = 50 * cos(radians(secAngle));
    var ysec = 50 * sin(radians(secAngle));
    ellipse(xsec, ysec, 150, 150);
    //tick inside circle
    push();
    strokeWeight(5);
    stroke(255);
    line(xsec * 2.45, ysec * 2.45, xsec * 2.3, ysec * 2.3);
    pop();
    //pink hour circle
    let hrAngle = map(hr % 12, 0, 12, 0, 360);
    var xhr = 85 * cos(radians(hrAngle));
    var yhr = 85 * sin(radians(hrAngle));
    fill(255, 0, 119, 190);
    ellipse(xhr, yhr, 220, 220);
    //tick inside circle
    push();
    strokeWeight(5);
    stroke(255);
    line(xhr * 2.17, yhr * 2.17, xhr * 2.26, yhr * 2.26);
    pop();
    //centerdot
    fill(255);
    ellipse(0, 0, 10, 10);
    //ticks
    tick(255, 153, 201); //pink
    push();
    rotate(radians(30));
    tick(255, 234, 125) //yellow
    pop();
    push();
    rotate(radians(60));
    tick(182, 237, 252); //blue
}


function tick(r, g, b) {
    radius = 225;
    for (angle = 0; angle < 360; angle = angle + 90) {
        var x = radius * cos(radians(angle));
        var y = radius * sin(radians(angle));
        fill(r, g, b);
        ellipse(x, y, 25, 25);
    }
}

LO: 3D Computer Graphics

“Self-Portrait” (2020) by Ian Spriggs

One 3D computer graphics artist that I find inspiring is Ian Spriggs and his 3D portraits. For most of his works, he models and textures using the Maya and Mudbox programs without using any scans. He adds touch-ups in Photoshop and renders his work using RTX graphic cards from Nvidia. It is a phenomenon of how realistic each portrait is. It is inspiring to see him create such realistic 3D forms in 2D space. Besides the fact that his work is inspiring, he himself as a person is as well. He is very generous in sharing his work and even sharing tutorials in his methods. Even though it’s just a project, it is so jaw-dropping how he creates every strand of hair, the glimmer of light in the iris, down to even single pore. It’s hard enough to paint a realistic portrait but to render it through computer graphics is insane.

Ian Spriggs’ 3D Portraits: https://ianspriggs.com/portraits

Project 5: Wallpaper

sketch
//Jessie Chen
//D
//Project 05
//Floral Wallpaper


function setup() {
    createCanvas(600, 600);
    background(255, 247, 224);
    noLoop();
}

function draw() {
    //background white dots
    for (var x = 0; x <= width; x += 10) {
        for (var y = 0; y<= height; y += 10) {
            dots(x,y);
            print(dots);
        }
    }
    push();
    //rows of red flowers
    translate(-200, -85);
    for (x = 0; x <= width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            rotate(radians(25));
            flower(0, 0, 220, 50, 20);
            pop();
        }
    }
    //rows of brown flowers
    translate(100, 100);
    for (x = 0; x <= width * 2; x += 200) {
        for (y = 0; y < height* 2; y += 400) {
            push();
            translate(x, y);
            rotate(radians(55));
            flower(0, 0, 112, 66, 36);
            pop();
        }
    }
    //rows of green flowers
    translate(-100, 100);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height* 2; y += 400) {
            push();
            translate(x, y);
            rotate(radians(25));
            flower(0, 0, 130, 186, 114);
            pop();
        }
    }
    //rows of orange flowers
    translate(100, 100);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            rotate(radians(55));
            flower(0, 0, 255, 133, 2);
            pop();
        }
    }
    pop();
    //rows of small pink flowers
    translate(-95, -45);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            smallflower(0, 0, 255, 163, 163);
            pop();
        }
    }
    //rows of small brown flowers
    translate(50, 95);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            smallflower(0, 0, 156, 116, 65);
            pop();
        }
    }
    //row of small green flowers
    translate(145, 100);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            smallflower(0, 0, 161, 214, 157);
            pop();
        }
    }
    //rows of small orange flowers
    translate(55, 100);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            smallflower(0, 0, 255, 167, 89);
            pop();
        }
    }
}

//background dot
function dots(x,y) {
    noStroke();
    fill(255);
    ellipse(x, y, 5, 5);
}

//one regular flower
function flower(x, y, r, b, g) {
    noStroke();
    fill(r, b, g);
    push();
    rect(30, 20, 30, 40, 15, 15, 10, 10);
    translate(95, 5);
    rotate(radians(72));
    rect(30, 20, 30, 40, 15, 15, 10, 10);
    translate(95, 5);
    rotate(radians(72));
    rect(30, 20, 30, 40, 15, 15, 10, 10);
    translate(95, 5);
    rotate(radians(72));
    rect(30, 20, 30, 40, 15, 15, 10, 10);
    translate(95, 5);
    rotate(radians(72));
    rect(30, 20, 30, 40, 15, 15, 10, 10);
    pop();
    //yellow center
    fill(255, 215, 135);
    ellipse(43, 68, 30, 30);
}

//small flowers
function smallflower(x, y, r, b, g) {
    noStroke();
    fill(r, b, g);
    push();
    rect(3, 20, 15, 20, 15, 15, 10, 10);
    translate(40, -5);
    rotate(radians(72));
    rect(30, 20, 15, 20, 15, 15, 10, 10);
    translate(65, -5);
    rotate(radians(72));
    rect(30, 20, 15, 20, 15, 15, 10, 10);
    translate(65, -5);
    rotate(radians(72));
    rect(30, 20, 15, 20, 15, 15, 10, 10);
    translate(65, -5);
    rotate(radians(72));
    rect(30, 20, 15, 20, 15, 15, 10, 10);
    pop();
    //yellow center
    fill(255, 215, 135);
    ellipse(10, 42, 13, 13);
}

this was inspired by my golf le fleur shoes 🙂

Project 04: String Art

sketch
//Jessie Chen
//D
//String Art

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

function draw() {
    background(0);
    var x1 = width/2;
    var y1 = height/2;
    //center white
    stroke(255);
    strokeWeight(0.1);
    radius = mouseX;
    for (angle = 0; angle <360; angle=angle+ 5) {
        x = cos(radians(angle)) * radius + 200; 
        y = sin(radians(angle)) * radius + 150;
        line(x1, y1, x , y);
    }
    //bottom right green
    stroke(24, 200, 90);
    strokeWeight(0.3)
    radius = mouseY;
    for (angle = 0; angle <360; angle=angle+ 3) {
        x = cos(radians(angle)) * radius + 300;
        y = sin(radians(angle)) * radius + 200;
        line(x1, y1, x , y);
    }
    //top left yellow
    stroke(240, 200, 90);
    strokeWeight(0.3)
    radius = mouseY;
    for (angle = 0; angle <360; angle=angle+ 3) {
        x = cos(radians(angle)) * radius + 100;
        y = sin(radians(angle)) * radius + 100;
        line(x1, y1, x , y);
    }
    //top right red
    stroke(200, 40, 90);
    strokeWeight(0.3)
    radius = mouseX;
    for (angle = 0; angle <360; angle=angle+ 5) {
        x = cos(radians(angle)) * radius + 300;
        y = sin(radians(angle)) * radius + 100;
        line(x1, y1, x , y);
    }
    //bottom left blue
    stroke(10, 40, 190);
    strokeWeight(0.3)
    radius = mouseX;
    for (angle = 0; angle <360; angle=angle+ 5) {
        x = cos(radians(angle)) * radius + 100;
        y = sin(radians(angle)) * radius + 200;
        line(x1, y1, x , y);
    }
    //top center pink
    stroke(255, 138, 200);
    strokeWeight(0.3)
    radius = mouseX;
    for (angle = 0; angle <360; angle=angle+ 20) {
        x = cos(radians(angle)) * radius + 200;
        y = sin(radians(angle)) * radius + 100;
        line(x1, y1, x , y);
    }
    //bottom center purple
    stroke(160, 0, 255);
    strokeWeight(0.3)
    radius = mouseY;
    for (angle = 0; angle <360; angle=angle+ 20) {
        x = cos(radians(angle)) * radius + 200;
        y = sin(radians(angle)) * radius + 200;
        line(x1, y1, x , y);
    }
}

This was inspired by lasers and how they look when they are projected.

LO: Sound Art

Meandering River (2018) by onformative

One particular sound art project I find interesting is the Meandering River, created from a collaboration between onformative and Funkhaus Berlin. Meandering River is an audiovisual art installation made from real-time generated visuals and music composed by an A.I. The Meandering River is a captivating and vibrant landscape that imitates the flow of rivers and how they shape the natural landscape. Based on a custom-made code, the music constantly reinterprets river patterns and changes into sound. The installation brings awareness to the beauty of nature and its complexity in how impactful small changes can be over time. The music and visuals are engaging, pulling the audience into an emotional experience.

Meandering River (2018) by onformative: https://onformative.com/work/meandering-river

Project 3: Dynamic Drawing

sketch
//Jessie Chen
//D
var half = 225

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

function draw() {
    mouseX = constrain(mouseX, 0, 440);
    //bee
    background(123, 176, 223);
    noStroke();
    var bY = constrain(bY, 200, 300);
    var w = 15 + (mouseX * 0.03);
    var h = 10 + (mouseX * 0.03);
    //petal behind bee
    fill(233, 120, 79);
    ellipse(half, 330 - (h * 3), w * 3, h * 3);
    //bee
    push();
    var bY = 200;
    if (mouseX < half) {
        translate(60, 0);
         rotate(radians(15));
    } else {
       translate(-25, 110);
        rotate(radians(345));
    }
    fill(202, 228, 250);
    ellipse(mouseX - 5, bY - 13, w, h);
    ellipse(mouseX - 15, bY - 15, w, h); //wings
    fill(255, 229, 122);
    ellipse(mouseX, bY, 40, 25); //body
    fill(60, 60, 60);
    rect(mouseX - 15, bY - 9 , 5, 19, 100, 5, 40, 40); //black lines
    rect(mouseX - 6, bY - 12, 5, 24, 100, 5, 40, 40);
    rect(mouseX + 3, bY - 11.5, 5, 23, 100, 5, 40, 40);
    ellipse(mouseX + 13, bY - 2, 5, 5); //eye
    stroke(60);
    line(mouseX + 16, bY - 8, mouseX + 18, bY - 12); //attennas
    line(mouseX +14, bY - 8, mouseX + 14, bY - 14);
    line(mouseX - 21, bY, mouseX - 24, bY); //stinger
    //sun
    pop();
    fill(255, 213, 0);
    ellipse(half, 0, 250 + w, 250 + h);
    //clouds
    fill(245, 255, 255);
    rect(mouseX - 100, 50, 100, 75, 35);
    rect(mouseX - 60, 85, 95, 55, 35);
    rect(mouseX - 350, 55, 120, 55, 35);
    rect(mouseX + 100, 20, 120, 55, 35);
    rect(mouseX - 270, 40, 75, 50, 35);
    rect(mouseX + 300, 75, 80, 40, 35);
    rect(mouseX + 250, 65, 70, 30, 35);
    //stem
    fill(115, 172, 111);
    rect(half - 7.5, 340 - (h * 2), 15, 400, 30);
    //leaves
    push();
    translate(193, 100);
    rotate(radians(25));
    ellipse(half - 19, 440, w * 3, 20 + h);
    ellipse(half - 94, 280, w * 3, 20 + h);
    pop();
    push();
    translate(-150, 200);
    rotate(radians(335));
    ellipse(half + 19, 440, w * 3, 20 + h);
    //flower
    pop();
    fill(233, 120, 79); // back petals
    ellipse(half - 30, 360 - (h * 3), w * 4, h * 3);
    ellipse(half + 30, 360 - (h * 3), w * 4, h * 3);
    ellipse(half + 25, 345 - (h * 3), w * 5, h * 3);
    ellipse(half - 25, 345 - (h * 3), w * 5, h * 3);
    fill(255, 215, 102);
    ellipse(half, 360 - (h * 4), w * 3, h * 2); //center
    rect(half - 10, 385 - (h * 7), 2, 3 + h, 20);
    rect(half + 10, 385 - (h * 7), 2, 3 + h, 20);
    rect(half, 380 - (h * 7), 2, 3 + h, 20);
    rect(half - 20, 390 - (h * 7), 2, 3 + h, 20);
    rect(half + 20, 390 - (h * 7), 2, 3 + h, 20);
    fill(233, 120, 79); // front petal
    ellipse(half, 360 - (h * 3), w * 3, h * 3);
    
}

This was inspired by the mutualistic relationship between the bee and the flower. The bee is becoming full while the flower is being pollinated, allowing it to grow and reproduce.

LO: Computational Fabrication

Agate Puzzle by Nervous System

One project that particularly stands out to me is the generative jigsaw puzzles by Nervous System, a Massachusetts-based design studio. They write specialized programs that imitate processes found in nature. They then use that code to create projects inspired by organic forms. Their recent geode jigsaw puzzle is made out of slices of agate that mimics the natural variations in how geodes form that changes the puzzle’s shape, color, and pattern, making each one uniquely different. The goal of Nervous System was to forge together the artistry of traditional, hand-made jigsaw puzzles with the possibilities of new technology. It is interesting using man-made technology to imitate nature and try to artificially create nature. However, by doing so, it allows us to recognize and closely analyze on how nature works. This could allow us to make advances to technology and create new opportunities that weren’t possible before.

Nervous System: https://n-e-r-v-o-u-s.com/index.php

Project 2: Variable Faces

soot sprite
//Jessie Chen
//Section D
var sprite = 220;
var eyeWidth = 82;
var eyeHeight = 82;
var irisX = 240;
var irisY = 320;
var aX = 380;
var aY = 380;
var bX = 440;
var bY = 300;
var cX = 40;
var cY = 340;
var dX = 80;
var eX = 225;
var eY = 500;
var fX = 280;

let r, g, b;
r = random(255);
g = random(255);
b = random(255);

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

function draw() {
    var x1 = width / 2;
    var y1 = height / 2;
    background(243, 231, 211);
    //hair
    stroke(0);
    strokeWeight(5)
    radius = 122 + length;
    for (angle = 0; angle <360; angle=angle+ 6) {
        x = cos(radians(angle)) * radius + 240;
        print("x = " + x.toString())
;
        y = sin(radians(angle)) * radius + 320;
        print("y = " + y.toString());
        line(x1, y1, x , y);
    }
    //head
    fill(45);
    ellipse(x1, y1, sprite, sprite);
    //eye
    fill(255);
    var leftEye = width / 2 - 50;
    var rightEye = width / 2 + 50;
    ellipse(leftEye, height / 2, eyeWidth, eyeHeight);
    ellipse(rightEye, height / 2, eyeWidth, eyeHeight);
    //iris
    fill(0);
    ellipse(irisX - 50, irisY, 20, 20);
    ellipse(irisX + 50, irisY, 20, 20);
    //right arm
    noFill();
    stroke(0);
        beginShape();
        curveVertex(350, 320);
        curveVertex(350, 320);
        curveVertex(aX, aY);
        curveVertex(bX, bY);
        curveVertex(bX, bY);
        endShape();
    //left arm
    noFill();
    stroke(0);
        beginShape();
        curveVertex(130, 320);
        curveVertex(130, 320);
        curveVertex(cX, cY);
        curveVertex(dX, bY);
        curveVertex(dX, bY);
        endShape();
    //left leg
    noFill();
    stroke(0);
        beginShape();
        curveVertex(200, 422);
        curveVertex(200, 422);
        curveVertex(eX, eY);
        curveVertex(140, 600);
        curveVertex(140, 600);
        endShape();
    //right leg
    noFill();
    stroke(0);
        beginShape();
        curveVertex(280, 422);
        curveVertex(280, 422);
        curveVertex(fX, eY);
        curveVertex(350, 610);
        curveVertex(350, 610);
        endShape();
    //star
    stroke(r, g, b);
    fill(r, g, b);
    strokeJoin(ROUND);
    triangle(230, 120, 250, 120, 240, 103);
    triangle(230, 120, 210, 120, 220, 137);
    triangle(250, 120, 270, 120, 260, 137);
    triangle(230, 150, 210, 150, 220, 135);
    triangle(250, 150, 270, 150, 260, 135);
    triangle(230, 150, 250, 150, 240, 167);
    ellipse(240, 135, 28, 25);

}

function mousePressed() {
    //eye
    eyeWidth = random(75, 88);
    eyeHeight = random(75, 88);
    //iris
    irisX = random(230, 250);
    irisY = random(310, 330);
    //hair
    length = random(5, 13);
    //legs
    aX = random(340, 440);
    aY = random(290, 350);
    bX = random(285, 300);
    bY = random(140, 160);
    cX = random(30, 150);
    cY = random(275, 230);
    dX = random(100, 210);
    eX = random(180, 200);
    eY = random(520, 560);
    fX = random(280, 300);
    //star color
    r = random(255);
    g = random(255);
    b = random(255);
}

This was inspired by the soot sprites from the anime “Spirited Away.” This piece was really challenging since I had to use trig to figure out an equation.

LO: Generative Art

noise wrap, 2019 I

One generative art that I find inspiring is the “noise warp” series by Holger Lippmann. Using processing, Lippmann created his art by using a 2D X/Y noise structure that elongated shapes to produce brushstrokes. Lippmann was inspired heavily from the 20th-century artists who painted with expressive fluid brushstrokes. Even though his art was created through various long rectangles, they flow well and create fluidity. Through his code and noise, he was able to imitate that way of painting with various landscape photos he had taken himself. His generative art reminds me heavily of Van Gogh and Monet, but with Monet, the lines are more fluid. It distorts the reality of the landscape yet creates a beautiful fluidity of colors. I find this series very tranquil and pleasing to the eye, almost as if looking at his art in a dream state.

Holger Lippmann: http://www.lumicon.de/wp/?p=3623