Author: Shirley

Looking Outwards 05: 3D Computer Graphics

https://www.behance.net/gallery/151840435/Into-the-forest?tracking_source=curated_galleries_3d-arteativeapplications.net/maxmsp/forms-string-quartet/
David Padilla
Into the Forest
2022

This project is an excellent example of graphics combining 3D computing and nature.

Through algorithms and renderings, it simulates the natural ecosystem and explores the local trees, vegetation, fungus, and many other species and forms, as well as their relationships with each other.

The renderings of plants including moss and wood in this series of works are very realistic. The use of light is also very elegant and appropriate. The ratio of sunlight to shadow is just right, which makes the overall look very attractive — where the sun shines is where our vision focuses on, leading people to the incredible shapes of the fungus. The colors of the presented works are mainly shades of yellow and green to present the plants. The colors of the plants are different but also echo each other with wood in brown. The color collocation is very harmonious.

Project 5: Wallpaper

Shirley P5

sketch
//Xinyi Du 
//15104 Section B
//xinyidu@andrew.cmu.edu
//Project-05

var w = 100; 
var h = 100;


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

function draw() {
    background(0, 58, 100);

    for (var col=0; col<3; col++) {
        for (var row=0; row<10; row++) {
            stroke(200, 223, 82); //green
            rotateEllipsee(w+3*w*col, h-100+h*row);
            stroke(221,160,221); //pink
            fill(221-90,160-90,221-90); //pink
            circleLine2(w+3*w*col, h-100+h*row);
        }
    }
    for (var col=0; col<3; col++) {
        for (var row=0; row<10; row++) {
            stroke(221,160,221); //pink
            rotateEllipsee(w+100+3*w*col, 0+h*row);
            stroke(200, 223, 82); //green
            fill(200-90, 223-90, 82-90); //green
            circleLine2(w+100+3*w*col, 0+h*row);   
        }
    }
    for (var col=0; col<3; col++) {
        for (var row=0; row<10; row++) {
            stroke(200, 223, 82); //green
            circless(-20+3*w*col, h/2+h*row);
            stroke(221,160,221); //pink
            circless(20+3*w*col, -50+h/2+h*row);
        }
    }
    
}

//draw the small circles and lines
function circleLine(x, y) {
    strokeWeight(1.5);
    push();
    translate(x, y); 
    line(60/2-5, 0, 60/2+20*sqrt(2), 0); 
    ellipse(60/2+20*sqrt(2)-10/2, 0, 10, 10);
    rotate(radians(25)); //rotate to get the second pair of ellipse and line 25 degrees above
    line(60/2-5, 0, 60/2+20*sqrt(2)-5, 0); 
    ellipse(60/2+20*sqrt(2)-10/2-5, 0, 10, 10);
    rotate(radians(-50)); //rotate to get the third pair of ellipse and line 25 degrees below
    line(60/2-5, 0, 60/2+20*sqrt(2)-5, 0); 
    ellipse(60/2+20*sqrt(2)-10/2-5, 0, 10, 10);
    pop();
}

//draw the ellipses center on (x,y)
function ellipsee(x, y) {
    strokeWeight(1.5);
    //mirror the small circles and lines though rotating them 18 degrees
    circleLine(x, y); 
    push();
    translate(x, y);
    rotate(radians(180));
    circleLine(0, 0);
    pop();

    //white ellipses
    fill(0, 58, 100);
    ellipse(x, y, 60, 39);
    ellipse(x, y, 40, 26);
    ellipse(x, y, 20, 13);
}

//roatate the ellipses drawn in the previous function
function rotateEllipsee(x, y) { 
    fill(0, 58, 100);
    push();
    translate(x, y);
    rotate(radians(-45));//rotate -45 degrees
    ellipsee(0, 0);
    pop();
}

//draw the vertical lines and circles
function circleLine2(x, y) {
    strokeWeight(2);
    //fill(221,160,221);
    line(x, y-w, x, y-w+50);
    line(x, y-w+50, x, y-w+50+h);
    line(x, y-w+50+h, x, y-w+50+h+50);
    ellipse(x, y-w+50, 12);
    ellipse(x, y-w+50+h, 12);
}

//draw the vertical circles
function circless(x, y) {
    strokeWeight(1.5);
    noFill();
    ellipse(x, y, 25);
    ellipse(x, y, 10);
    ellipse(x, y-25, 7);
    ellipse(x, y+25, 7);
    ellipse(x, y-42, 7);
    ellipse(x, y+42, 7);
}

Looking Outwards 04: Sound Art

https://www.creativeapplications.net/maxmsp/forms-string-quartet/
Playmodes
FORMS – String Quartet
2021

The project “FORMS – String Quartet” uses an algorithm (a “realtime visual score generator” called  “The Streaming Bot”) to generate great visual representations of various forms including lines and shapes as graphic scores, which are then converted into actual sounds and music.

“FORMS – String Quartet”, which is a performance in its eventual form, is derived from the works of “Screen ensembles”. In “Screen ensembles”, graphics that work as scores were created by the algorithm and were later converted into different sounds. Each screen represents a different role like “Rhythm”, “Harmony”, or “Texture”.

Screen Ensembles

One thing that I appreciate and admire a lot about this project is that it liberated the music scores from the traditional, rigid, black and white styles and transformed them into more flexible, diverse, and artistically-attractive visual forms. Also, they try to generate music from random graphics and shapes, which I think is an innovative attempt.

Project-04: String Art

Shirley Du P4

sketch

Examples:

//Xinyi Du 
//15104 Section B

var dx;
var dy;
var dx2;
var dy2;
var numInterval1 = 12; //number of intervals
var numInterval2 = 10; //number of intervals

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

function draw() {
    background(0);

    //the first series of strings
    stroke(189, 252, 83);
    string1(mouseX, mouseY);
    stroke(100);
    string2(mouseX, mouseY);

    push();
    translate(400, 0); //translate the orgin to top right corner
    rotate(radians(90)); //rotate to get the second series of strings in another color
    stroke(47, 109, 246);
    string1(mouseX, mouseY);
    stroke(100);
    string2(mouseX, mouseY);
    pop();

    push();
    translate(400, 400); //translate the orgin to bottom right corner
    rotate(radians(180)); //rotate to get the third series of strings in another color
    stroke(106, 214, 129);
    string1(mouseX, mouseY);
    stroke(100);
    string2(mouseX, mouseY);
    pop();

    push();
    translate(0, 400); //translate the orgin to bottom left corner
    rotate(radians(270)); //rotate to get the fourth series of strings in another color
    stroke(91, 196, 218);
    string1(mouseX, mouseY);
    stroke(100);
    string2(mouseX, mouseY);
    pop();
}

//draw the small and grey central strings that follows the mouse
function string2(x, y) {
    var dx2 = (dist(x, y, width/2, y))/numInterval1; //strings horizontal interval
    var dy2 = (dist(x, y, x, height/2))/numInterval1; //strings vertical interval
    for (var i = 0; i < numInterval1; i += 1){ //use for loop to repeat the drawing process
        line(width/2, y+dx2*i, width/2+dx2*i+dx2, height/2);
        line(width/2, y, width/2, height/2);
        line(width/2, height/2, x, height/2);
    }
}

function string1(x, y) {
    //draw the bigger strings at one side of the canvas
    var dx = (height/2)/numInterval1; //strings horizontal interval
    var dy = (width/2)/numInterval1; //strings vertical interval
    for (var i = 0; i <= numInterval1; i += 1){ //use for loop to repeat the drawing process
        line(0, dy*i-dy, dx*i, width/2); 
        line(0, height/2, width/2, height/2)
        line(0, width/2+dy*i+dy, width/2-dx*i, height/2);
        
    }

    //draw the smaller strings that follows the mouse
    var dx2 = (dist(x, y, width/2, y))/numInterval2;
    var dy2 = (dist(x, y, x, height/2))/numInterval2;
    for (var i = 0; i < numInterval2; i += 1){ //use for loop to repeat the drawing process
        line(width/2+dx2*i, y, x, y+dx2*i+dx2);
        line(width/2, y, x, y);
        line(x, y, x, height/2);
    }

}

Looking Outwards 03: Computational Fabrication

https://www.behance.net/gallery/21605971/Wanderers
Christoph Bader, Dominik Kolb, William Patrick, Steven Keating, Sunanda Sharma, Prof. Neri Oxman
The “Wanderers”
2014 

The “Wanderers” by MIT Media Lab professor Neri Oxman is an extraordinary and inspirational project.

The works integrate the themes of nature, life, fashion, and 3D design so perfectly. Through exploring the biological growth process and the elements that sustain life–“earth, water, air, and fire”, the works are not only full of vitality and connotation, but also they are very sophisticated and exquisite in terms of the aesthetic aspect.

As for the algorithms that generated the work, “phenotype” is transformed into “genotype”. The input geometric representations are repeatedly transformed and deformed to form various organic shapes that simulate the process of growth.

The colors in the wearables are well-combined. You can get an understanding of “life” through her designs–the organic shapes and forms, simulating the biological growth process in nature, remind the viewers of the constantly dividing cells, the sophisticated brain, and the marvelous and diverse plants.

Project-03: Dynamic Drawing

Moving the cursor up and down can change the rotation direction of the white “flower”. Moving the cursor left and right can change the canvas color and the size of the circles. If the cursor is inside the circle, the corresponding circle will change color.

Xinyi Du

sketch
//Xinyi Du 
//15104 Section B

var w = 20;
var x1 = 150;
var y1 = 150;
var w1 = 220; 
var x2 = 400;
var y2 = 300;
var w2 = 260;
var x3 = 500;
var y3 = 75;
var w3 = 130;
var r = 30;
var g = 144;
var b = 255;
var lineY = 1000;
var angle = 10;
var dia = 15;

function setup() {
    createCanvas(600, 450);
}
 
function draw() {
    background(r, g, b);
    noStroke();
    //left circle
    r1 = 100;
    g1 = 149;
    b1 = 237;
    fill(r1, g1, b1);
    ellipse(x1, y1, w1, w1);
    // bottom circle
    r2 = 100+20;
    g2 = 149+20;
    b2 = 237+10;
    fill(r2, g2, b2);
    ellipse(x2, y2, w2, w2);
    //right circle
    r3 = 100-20;
    g3 = 149-20;
    b3 = 237-10;
    fill(r3, g3, b3);
    ellipse(x3, y3, w3, w3);

    // change mouse X to change the size fhe circles as well as the color of the canvas
    if (mouseX < width/2) {
        w1 = constrain(w1-5, 150, 400); //decrease left circle size
        w2 = constrain(w2+5, 200, 450); // increase bottom circle size
        w3 = constrain(w3-5, 80, 280); //decrease right circle size
        r = constrain(r + 0.5, 30, 60);
        g = constrain(g + 0.5, 144, 174);
        b = constrain(b + 0.5, 255, 275); // make canvas color lighter and limit the rgb range
    }

    if (mouseX > width/2){
        w1 = constrain(w1+5, 150, 400); //increase left circle size
        w2 = constrain(w2-5, 200, 450); //decrease bottom circle size
        w3 = constrain(w3+5, 80, 280); //increase right circle size
        r = constrain(r - 0.5, 5, 30);
        g = constrain(g - 0.5, 114, 144);
        b = constrain(b - 0.5, 225, 255); // make canvas color darker and limit the rgb range
    }

    // if mouse is inside the circle, change color
    if (dist(mouseX, mouseY, x1, y1)<w1/2){ 
        r1 = 195;
        g1 = 177;
        b1 = 225;
        fill(r1, g1, b1);
    //left circle
        ellipse(x1, y1, w1, w1);
        }
    if (dist(mouseX, mouseY, x2, y2)<w2/2){
        r2 = 189;
        g2 = 181;
        b2 = 213;
        fill(r2, g2, b2);
    // bottom circle
        ellipse(x2, y2, w2, w2);
        }
    if (dist(mouseX, mouseY, x3, y3)<w3/2){
        r3 = 204;
        g3 = 204;
        b3 = 255;
    //right circle
        fill(r3, g3, b3);
        ellipse(x3, y3, w3, w3);
        }

    // draw white lines and circles
    stroke(255);
    noFill();
    strokeWeight(1.2);
    ellipse(mouseX, mouseY, w+10, w+10);

    translate(mouseX, mouseY); // translate the origin from (0,0) to (mouseX, mouseY)
    line(0, 0, 0, lineY); //one line and three circles on the line
    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);
    rotate(radians(angle)); // rotate the line and repeat the process
    line(0, 0, 0, lineY);
    ellipse(0, 40, dia); ellipse(0, 100, dia+10);
    rotate(radians(angle)); // rotate the line and repeat the process
    line(0, 0, 0, lineY); 
    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 40, dia); ellipse(0, 100, dia+10);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 40, dia); ellipse(0, 100, dia+10);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 40, dia); ellipse(0, 100, dia+10);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 40, dia); ellipse(0, 100, dia+10);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 40, dia); ellipse(0, 100, dia+10);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 40, dia); ellipse(0, 100, dia+10);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 40, dia); ellipse(0, 100, dia+10);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 40, dia); ellipse(0, 100, dia+10);
    rotate(radians(angle));
    line(0, 0, 0, lineY);
    ellipse(0, 60, dia); ellipse(0, 130, dia+20);ellipse(0, 200, dia+40);

    // change mouseY to change the rotating direction and rotation angles
    // if mouseY is at the bottom half of the canvas, increase the rotation angle
    if (mouseY < height/2) { 
        angle = constrain(angle + 0.5, -10, 20);
    }
    // if mouseY is at the top half of the canvas, decrease the rotation angle
    if (mouseY > height/2){
         angle = constrain(angle - 0.5, -10, 20); 
    }
}

Project-02: Variable Faces; Face Variables

P2 Shirley

sketch
//Xinyi Du 
//15104 Section B

var eyes = 20;
var mouth = 20;
var face = 100;
var ears = 20;
var r // red
var g // green
var b // blue
var hairDeco = 20; //hair decorations
var hair = 30; //hair
var cloth = 200;

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

}
 
function draw() {
    background(80);
    noStroke();

    // clothing
    fill(255-r, 255-g, 255-b);
    triangle(width / 2, height / 2, width/2-cloth/2, height/2+cloth, width/2+cloth/2, height/2+cloth);

    fill(255, 229, 204);
    ellipse(width / 2, height / 2, face, face); // face

    fill(255, 229, 204);
    ellipse(width / 2 - face / 2, height / 2, ears, ears); // left ear
    fill(255, 229, 204);
    ellipse(width / 2 + face / 2, height / 2, ears, ears); // right ear
    fill(255, 102, 102);
    ellipse(width/2, height/2+face/4, mouth,); // mouth

    var eyeL = width/2 - face/4; // left eye
    var eyeR = width/2 + face/4; // right eye
    fill(64, 64, 64);
    ellipse(eyeL, height/2, eyes, eyes+5);
    ellipse(eyeR, height/2, eyes, eyes+5);

    //hairstyle
    fill(r, g, b);
    ellipse(width/2, height/2-face/2, hairDeco, hairDeco); // hair decorations 1
    fill(r, g, b);
    // hair 1
    var x1 = width/2-hair/2;
    var y1 = height/2-face/2-hairDeco-hair;
    var x2 = width/2+hair/2;
    var y2 = height/2-face/2-hairDeco-hair;
    var x3 = width/2;
    var y3 = height/2-face/2-hairDeco/2;
    triangle(x1, y1, x2, y2, x3, y3);
    fill(r-30, g-30, b-30);
    ellipse(width/2-face/4, height/2-face/3, hairDeco, hairDeco); // hair decorations 2
    ellipse(width/2+face/4, height/2-face/3, hairDeco, hairDeco); // hair decorations 3

    // hair 2
    var x1 = width/2-face/4;
    var y1 = height/2-face/3-hairDeco/2;
    var x2 = width/2-face/4-hair/2;
    var y2 = height/2-face/3-hairDeco/2-hair;
    var x3 = width/2-face/4+hair/2;
    var y3 = height/2-face/3-hairDeco/2-hair;
    triangle(x1, y1, x2, y2, x3, y3);

    // hair 3
    var x1 = width/2+face/4;
    var y1 = height/2-face/3-hairDeco/2;
    var x2 = width/2+face/4-hair/2;
    var y2 = height/2-face/3-hairDeco/2-hair;
    var x3 = width/2+face/4+hair/2;
    var y3 = height/2-face/3-hairDeco/2-hair;
    triangle(x1, y1, x2, y2, x3, y3);

}
 
function mousePressed() {
    face = random(80, 150);
    eyes = random(10, 20);
    ears = random(12, 30);
    mouth = random(10, 25);
    hairDeco = random(10, 30);
    hair = random(20, 50);
    r = random(10, 250);
    g = random(10, 250);
    b = random(10, 250);
    cloth = random(150, 300);
    //
}

Looking Outwards 02: Generative Art

Link: http://sansumbrella.com/works/2011/drawing-water/
David Wicks
Drawing Water
Spring 2011

I think the project “Drawing Water” by David Wicks is a very impressive and amazing work.

1. Regarding the project, what do you admire about it, and why do you admire these aspects of it?

Firstly, on the aspects of aesthetics, the works are very visually impressive and pleasing. The images have so many details–The strokes are so delicate and look like the strokes of pencils. The combination of colors, shades and the background is very comfortable as well–blue and white, or blue and black. They present the pattern of the flow of water nicely. What’s more, what makes it admirable is that the visual representations are dynamic. That is to say, the patterns or colors can change according to the amount of rainfall.

2. What do you know (or what do you suppose) about the algorithm that generated the work?

The algorithm that the artist used is related to water resources (“the amount of rainfall”, “where waterfalls” and “where it is consumed within the United States”). The further the rainfall, the darker or whiter the color.


3. In what ways are the creator’s artistic sensibilities manifest in their algorithm?

The paths are created based on real-life data of waterfalls, but the creator also adds his imagination when trying to show the pattern of the flow of water. That is to say, David Wicks turns the data of rainfalls into visual representations–by showing the flowing patterns of water and showing the number of rainfalls through those beautiful lines.

Project-02: Variable Faces; Face Variables

//Xinyi Du 
//15104 Section B

var eyes = 20;
var mouth = 20;
var face = 100;
var ears = 20;
var r // red
var g // green
var b // blue
var hairDeco = 20; //hair decorations
var hair = 30; //hair
var cloth = 200;

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

}
 
function draw() {
    background(80);
    noStroke();

    // clothing
    fill(255-r, 255-g, 255-b);
    triangle(width / 2, height / 2, width/2-cloth/2, height/2+cloth, width/2+cloth/2, height/2+cloth);

    fill(255, 229, 204);
    ellipse(width / 2, height / 2, face, face); // face

    fill(255, 229, 204);
    ellipse(width / 2 - face / 2, height / 2, ears, ears); // left ear
    fill(255, 229, 204);
    ellipse(width / 2 + face / 2, height / 2, ears, ears); // right ear
    fill(255, 102, 102);
    ellipse(width/2, height/2+face/4, mouth,); // mouth

    var eyeL = width/2 - face/4; // left eye
    var eyeR = width/2 + face/4; // right eye
    fill(64, 64, 64);
    ellipse(eyeL, height/2, eyes, eyes+5);
    ellipse(eyeR, height/2, eyes, eyes+5);

    //hairstyle
    fill(r, g, b);
    ellipse(width/2, height/2-face/2, hairDeco, hairDeco); // hair decorations 1
    fill(r, g, b);
    // hair 1
    var x1 = width/2-hair/2;
    var y1 = height/2-face/2-hairDeco-hair;
    var x2 = width/2+hair/2;
    var y2 = height/2-face/2-hairDeco-hair;
    var x3 = width/2;
    var y3 = height/2-face/2-hairDeco/2;
    triangle(x1, y1, x2, y2, x3, y3);
    fill(r-30, g-30, b-30);
    ellipse(width/2-face/4, height/2-face/3, hairDeco, hairDeco); // hair decorations 2
    ellipse(width/2+face/4, height/2-face/3, hairDeco, hairDeco); // hair decorations 3

    // hair 2
    var x1 = width/2-face/4;
    var y1 = height/2-face/3-hairDeco/2;
    var x2 = width/2-face/4-hair/2;
    var y2 = height/2-face/3-hairDeco/2-hair;
    var x3 = width/2-face/4+hair/2;
    var y3 = height/2-face/3-hairDeco/2-hair;
    triangle(x1, y1, x2, y2, x3, y3);

    // hair 3
    var x1 = width/2+face/4;
    var y1 = height/2-face/3-hairDeco/2;
    var x2 = width/2+face/4-hair/2;
    var y2 = height/2-face/3-hairDeco/2-hair;
    var x3 = width/2+face/4+hair/2;
    var y3 = height/2-face/3-hairDeco/2-hair;
    triangle(x1, y1, x2, y2, x3, y3);

}
 
function mousePressed() {
    face = random(80, 150);
    eyes = random(10, 20);
    ears = random(12, 30);
    mouth = random(10, 25);
    hairDeco = random(10, 30);
    hair = random(20, 50);
    r = random(10, 250);
    g = random(10, 250);
    b = random(10, 250);
    cloth = random(150, 300);
    //
}