Author: Alice

Looking Outwards-04

The Project I choose is “Light & Sound Synthesis: In conversation with Amay Kataria”. This is an interactive art device.
With the incorporation of a custom program, the audience will become part of the exhibition, and they can control light and sound with their own opinion.
The most interesting part of this project is the creator uses light and sound to create a connection between space, art, and the human mind.
The program and digital interface are able to store every different visitors’ thoughts when they are experiencing the project, and the stored data also influence the surrounding environment.
I also admire that the author tried to think about what is the maintenance of thoughts.

here is the link: https://www.creativeapplications.net/environment/light-sound-synthesis-in-conversation-with-amay-kataria/

Project 4

this is my project 4

sketch
var dx1;
var dy1;
var dx2;
var dy2;
var distance = 5
var numLines = 35;

function setup() {
    createCanvas(400, 300);
    background(0);
    line(250, 0, 25, 25); //top-left
    line(25, 25, 0, 250);
    
    dx1 = -225/numLines;
    dy1 = 25/numLines;
    dx2 = -25/numLines;
    dy2 = 225/numLines;

    line(150, 300, 375, 275);  // bottom right
    line(375, 275, 400, 50);

    bx1 = 225/numLines;
    by1 = -25/numLines;
    bx2 = 25/numLines;
    by2 = -225/numLines;

}

function draw() {

    //top left part
    var x1 = 250;
    var y1 = 0;
    var x2 = 25;
    var y2 = 25;

    stroke(0, 50, 233);

    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }  

    //bottom right
    var a1 = 150;
    var b1 = 300;
    var a2 = 375;
    var b2 = 275;
    for (var i = 0; i <= numLines; i += 1) {
        line(a1, b1, a2, b2);
        a1 += bx1;
        b1 += by1;
        a2 += bx2;
        b2 += by2;
    }

    //circular shape
    push();
    translate(width/2, height/2);
    var x = 200
    var y = 100;

    //pink
    for(y = 10; y <= 500; y += 3) {
        rotate(radians(175));
        strokeWeight(1)
        stroke(244, 82, 255);
        line(x, y, 10, y)
    }
    //blue
    for(y = 40; y <= 400; y+=0.5) {
        rotate(radians(35));
        strokeWeight(0.8)
        stroke(81, 211, 255, 70);
        line(150, y, x+distance, y+distance)
        distance -= 5;
    }

    pop()

    noLoop();
}

Project 3

this is my project:

sketch
var d = 40;
var d2 = 30;
var rotateV = 1;
var rotateR = 2;
var rotateR2 = -1;
var rotateB = 0;
var rotateL = 1; 
var r = 100;
var g = 100;
var b = 100;
 
 
function setup() {
    createCanvas(600, 450);
    text("Xinran Yu, Seciton A");
}
 
function draw() {
    background(0);
    fill(255, 255, 0)

    //background rotating green circles 
    fill(188, 225, 40, 220);
    push();
    translate(500, 350);
    rotate(radians(rotateB));     //1
    ellipse(60, 60, d2+20, d2+20);
    rotateB += 0.6;
    rotate(radians(rotateB));     //2
    ellipse(60, 60, d2+15, d2+15);
    rotateB += 0.5;
    rotate(radians(rotateB));      //3
    ellipse(60, 60, d2+10, d2+10);
    rotateB += 0.3;
    rotate(radians(rotateB));      //4
    ellipse(60, 60, d2+5, d2+5);
    rotateB += 0.2;
    rotate(radians(rotateB));      //5
    ellipse(60, 60, d2, d2);
    rotateB += 0.1; 
    pop()

    //background lines
    push();
    translate(100, 100);
    stroke(43, 255, 248, 50);
    strokeWeight(1);
    for (var rotateL = 30; rotateL<360; rotateL++) {
        rotate(radians(rotateL));
        line(0, 0, 90, 90); 
    }
    pop();


    //rotating squares
    fill(221, 4, 137, 200);
    noStroke();
    push();
    translate(mouseX, mouseY);
    rotate(radians(rotateR));
    rotateR = rotateR - 3;
    rect(-10, 0, 100, 100);

    rotate(radians(rotateR2));
    rotateR2 = rotateR2 + 2;
    rect(0, 10, 60, 60);
    pop();

    // rotating circles,changing color due to mouseX & mouseY
    fill(126, 198, 231);
    ellipse(mouseX, mouseY, 50, 50);  // center circle
    push();
    translate(mouseX, mouseY);

    if (mouseX <= width/2 & mouseY <= height/2) {
        r = 218; //yellow
        g = 177;
        b = 79;
    } else if (mouseX < width/2 & mouseY > height/2) {
        r = 205; //orange
        g = 110;
        b = 74;
    } else if (mouseX > width/2 & mouseY < height/2) {
        r = 224; //pink
        g = 128;
        b = 231;
    } else if (mouseX > width/2 & mouseY > height/2) {
        r = 135; //red
        g = 30;
        b = 12;
    }
    fill(r, g, b);
    rotate(radians(rotateV));
    rotateV = rotateV + 2;

    //change circle's raduis
    //distance to canvas center increases, rotating radius & d increases
    var x1 = dist(mouseX, mouseY, width/2, height/2);
    d = dist(mouseX, mouseY, width/2, height/2)/3;
    d = constrain(d, 10, 100);
    ellipse(x1, x1, d, d);
    ellipse(-x1, -x1, d, d);
    ellipse(-x1, x1, d, d);
    ellipse(x1, -x1, d, d);
    ellipse(0, x1*1.5, d, d);
    ellipse(0, -x1*1.5, d, d); 
    ellipse(x1*1.5, 0, d, d);
    ellipse(-x1*1.5, 0, d, d);
    pop();   

}

Looking Outwards-03

The project I choose is “Rocailles” by Benjamin Dillenburger. It’s a digital fabrication model made by 3D printing. The general shape is a curvature dynamic surface, and by bending and delicate arrangement, the model presents a circular flower shape. I’m attracted by the flower shape, the curve flows have a sense of fluidity and coherence, and the trend of the shape leads the audience’s eye to the hole, trying to explore more things about the project.
The advanced production methods highly increase the development of these high-resolution forms, specifically in this project, spaces between every curve are filled with some X shape. I think the algorithm and fabrication parameters are more integrated with the initial design stage, and then the database served as an information exchange platform.
The way they use digital fabrication explores a new paradigm in architecture, also in a more open manner, which is a good inspiration for future building development.

and here is a link: https://benjamin-dillenburger.com/rocaille/

Project 2

this is my second portrait.

sketch


var eyeSizeX = 14;
var eyeSizeY = 20; 
var faceWidth = 100;
var faceHeight = 150;
var hairR = 80;
var hairG = 60;
var hairB = 50;
var mouth = 4;
var hairSizeX = 160;
var hairSizeY = 150;

 function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    angleMode(DEGREES);
    //hair    
    background(180);
    strokeWeight(0);
    fill(hairR, hairG, hairB);
    ellipse(width/2, height/2-45, hairSizeX, hairSizeY);
    
    //face size
    fill(240, 221, 210);
    ellipse(width/2, height / 2, faceWidth,  faceHeight);

    //eyes
    strokeWeight(0);
    var eyeLX = width/2 - faceWidth * 0.2;
    var eyeRX = width/2 + faceWidth * 0.2;
    fill(0);
    ellipse(eyeLX, height/2, eyeSizeX, eyeSizeY);
    ellipse(eyeRX, height/2, eyeSizeX, eyeSizeY);
    fill(255, 255, 255, 170);
    ellipse(eyeLX-2, height/2, eyeSizeX/3, eyeSizeY/3);
    ellipse(eyeRX-2, height/2, eyeSizeX/3, eyeSizeY/3);
    
    
    //eyebrow 
    var BrowLX1 = width/2 - faceWidth*0.15;
    var BrowLY1 = height/2 - faceHeight*0.15;
    var BrowLX2 = width/2 - faceWidth*0.35;
    var BrowLY2 = height/2 - faceHeight*0.15;
    var BrowRX1 = width/2 + faceWidth*0.15;
    var BrowRY1 = height/2 - faceHeight*0.15;
    var BrowRX2 = width/2 + faceWidth*0.35;
    var BrowRY2 = height/2 - faceHeight*0.15;
    stroke(0);
    strokeWeight(3);

    line(BrowLX1, BrowLY1, BrowLX2, BrowLY2);
    line(BrowRX1, BrowRY2, BrowRX2, BrowRY2);
   
    //mouth
    var mouthLX = width/2 - faceWidth*0.2;
    var mouthLY = height/2 + faceHeight*0.2;
    var mouthRX = width/2 + faceWidth*0.2;
    var mouthRY = height/2 + faceHeight*0.2;

    if (mouth <= 1) {
        //happy
        strokeWeight(3);
        stroke(0);
        fill(50);
        beginShape();
        curveVertex(mouthLX, mouthLY);
        curveVertex(mouthLX, mouthLY);
        curveVertex((mouthLX+mouthRX)/2-faceWidth*0.08, mouthLY+faceHeight*0.07);
        curveVertex((mouthLX+mouthRX)/2+faceWidth*0.08, mouthLY+faceHeight*0.07);
        curveVertex(mouthRX, mouthRY);
        curveVertex((mouthLX+mouthRX)/2+faceWidth*0.08, mouthLY+faceHeight*0.15);
        curveVertex((mouthLX+mouthRX)/2-faceWidth*0.08, mouthLY+faceHeight*0.15);
        curveVertex(mouthLX, mouthLY);
        curveVertex(mouthLX, mouthLY);
        endShape();
    } else if (mouth > 1 & mouth <=2) {
        //sad
        strokeWeight(3);
        stroke(0);
        fill(50);
        beginShape();
        curveVertex(mouthLX, mouthLY+14);
        curveVertex(mouthLX, mouthLY+14);
        curveVertex((mouthLX+mouthRX)/2-faceWidth*0.08, mouthLY-faceHeight*0.07+14);
        curveVertex((mouthLX+mouthRX)/2+faceWidth*0.08, mouthLY-faceHeight*0.07+14);
        curveVertex(mouthRX, mouthRY+14);
        curveVertex((mouthLX+mouthRX)/2+faceWidth*0.08, mouthLY-faceHeight*0.15+14);
        curveVertex((mouthLX+mouthRX)/2-faceWidth*0.08, mouthLY-faceHeight*0.15+14);
        curveVertex(mouthLX, mouthLY+14);
        curveVertex(mouthLX, mouthLY+14);
        endShape();
    } else if (mouth > 2 & mouth <=3) {
        //shock
        fill(20);
        strokeWeight(3);
        ellipse((mouthLX+mouthRX)/2, mouthLY+10, 10, 20);
    } else if (mouth > 3 & mouth <= 4){
        strokeWeight(4);
        line(mouthLX, mouthLY+10, mouthRX, mouthRY+10);
    }
}


function mousePressed() {
    faceWidth = random(75, 120);
    faceHeight = random(90, 140);
    eyeSizeX = random(15, 20);
    eyeSizeY = random(15,25);
    hairR = random(80, 255);
    hairB = random(100, 200);
    hairSizeX = random(130, 190);
    hairSizeY = random(130, 160);
    mouth = random(0, 4);
}

Looking Outwards 2

The project I’m choosing is Michael Hansmeyer’s Zauberflöte(2018), which is a stage design for Mozart’s Magic Flute.  In my previous research about Hnsmeyer’s architectural design, I admire how he focused more on the process of generating design and the visual impact. And for this stage design specifically, Hansmeyer used the computer to generate countless details and constellations, which makes astonishing visual effects for the audience. The visual impact helps the audience directly sense the stage atmosphere. With the cooperation of actors, the audience will be able to gain novel spacial feelings about the show, using their own imagination to dig into the deeper core of the opera’s philosophical part.

Moving on to the algorithm that generated the work, Hansmeyer said that they “seek to create an architecture that defies classification and reductionism”. The algorithm runs continuously and forms a constant and holistic shape. The computer algorithm plays a major role in the design: with the organization of designers, the computer can bring some of the expected effects, while also bringing unexpected results with its own permutation.

here is a link: https://www.michael-hansmeyer.com/zauberfloete

Project 01

this is my project 1

sketch 

function setup() {
    createCanvas(350, 405);
    background(224, 179, 179);
    text("Xinran Yu, Section A");
}

function draw() {
    strokeWeight(0);

    //hair    
    if(mouseX < (width/2)) {
        fill(79, 62, 53); 
        ellipse(170, 190, 200, 200);
        rect(70, 200, 200, 250)
    } else if(mouseX > (width/2)) {
        fill(35, 35, 35);
        ellipse(170, 190, 200, 200);
    rect(70, 200, 200, 250);
    }  

    //ear
    fill(210, 159, 137);       
    ellipse(95, 220, 20, 40);
    ellipse(245, 220, 20, 40);
    fill(245, 208, 155);
    rect(91, 232, 5, 40);
    rect(245, 232, 5, 40);
    
    //neck
    fill(177, 156, 144);       
    triangle(135, 280, 205, 280, 170, 370);
    
    //face
    fill(240, 221, 210);       
    ellipse(170, 210, 150, 170);
    
    //eyes
    fill(0)                    
    ellipse(140, 200, 20, 30);
    ellipse(200, 200, 20, 30); 
    fill(255, 255, 255, 150);
    ellipse(136, 203, 10, 15);
    ellipse(196, 203, 10, 15);

    //clothes
    fill(85, 112, 142);        
    rect(95, 330, 150, 200);
    ellipse(95, 405, 159, 150);
    ellipse(255, 405, 150, 150);
    fill(122, 163, 208);
    triangle(95, 330, 245, 330, 170, 380);

    //eyebrows
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(125, 177);
    curveVertex(125, 177);
    curveVertex(135, 175);
    curveVertex(145, 175);
    curveVertex(153, 177);
    curveVertex(153, 177);
    endShape();
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(185, 177);
    curveVertex(185, 177);
    curveVertex(195, 175);
    curveVertex(205, 175);
    curveVertex(213, 177);
    curveVertex(213, 177);
    endShape();
       
    //nose
    strokeWeight(0);
    fill(210, 159, 137);       
    triangle(160, 225, 180, 225, 170, 250);

    //mouth
    strokeWeight(3);
    noFill();
    beginShape();
    curveVertex(150, 260);
    curveVertex(150, 260);
    curveVertex(165, 270);
    curveVertex(175, 270);
    curveVertex(190, 260);
    curveVertex(190, 260);
    endShape();
}