sketch

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


function draw () {
    background(0)
    noFill()
    stroke(255)
    var nPoints = 20;
    var radius = 50;
    var separation = 125;
    var R1 = mouseX/2
    var R2 = mouseY/2

//the color of the pattern changes slowly from bluee to red as the mouse moves along the diagnal of canvas  
//the first set of rectangle loop
    stroke(mouseX, 10, 10)
    push();
    translate(2*separation, height / 2);
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = R1 * cos(theta);
        var py = R2 * sin(theta);
        rect(px - 5, py - 5, 10, 10);
    }
    pop();

//the second set of rectangle loop
    stroke(mouseX, 30, 30)
    push();
    translate(2*separation, height / 2);
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = R1 * cos(theta);
        var py = R2 * sin(theta);
        rect(px - 10, py - 10, 20, 20);
    }
    pop();

//the third set of rectangle loop
    stroke(mouseX, 50, 50)
    push();
    translate(2*separation, height / 2);
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = R1 * cos(theta);
        var py = R2 * sin(theta);
        rect(px - 15, py - 15, 30, 30);
    }
    pop();

//the fourth set of rectangle loop
    stroke(mouseX, 70, 70)
    push();
    translate(2*separation, height / 2);
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = R1 * cos(theta);
        var py = R2 * sin(theta);
        rect(px - 30, py - 30, 60, 60);
    }
    pop();

//the fifth set of rectangle loop
    stroke(mouseX, 90, 90)
    push();
    translate(2*separation, height / 2);
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = R1 * cos(theta);
        var py = R2 * sin(theta);
        rect(px - 50, py - 50, 100, 100);
    }
    pop();

//the sixth set of rectangle loop
    stroke(mouseX, 110, 110)
    push();
    translate(2*separation, height / 2);
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = R1 * cos(theta);
        var py = R2 * sin(theta);
        rect(px - 90, py - 90, 180, 180);
    }
    pop();

//the seventh set of rectangle loop
    stroke(mouseX, 140, 140)
    push();
    translate(2*separation, height / 2);
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = R1 * cos(theta);
        var py = R2 * sin(theta);
        rect(px - 95, py - 95, 190, 190);
    }
    pop();

//the eighth set of rectangle loop
    stroke(mouseX, 170, 170)
    push();
    translate(2*separation, height / 2);
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = R1 * cos(theta);
        var py = R2 * sin(theta);
        rect(px - 100, py - 100, 200, 200);
    }
    pop();

//the nineth set of rectangle loop
    stroke(mouseX, 220, 220)
    push();
    translate(2*separation, height / 2);
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = R1 * cos(theta);
        var py = R2 * sin(theta);
        rect(px - 105, py - 105, 210, 210);
    }
    pop();

}    

In this project, I wanna design a floral pattern that can change colors using repeating geometries. The flower’s color changes to blue to read as the mouse moves diagonally on the canvas. The change of color also represents blossom.

meng-sketch

//Sean Meng
//Section B
//hmeng@andrew.cmu.edu
//Project 06

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


function draw (){
    background(0);
    var h = hour();
    var m = minute();
    var s = second(); 

    stroke(27, 101, 211)
    for (var i = 0; i < 100; i += 3)
        line(width/5 + i*10, 0, 0, height + i*(-10))

    stroke(145, 200, 224)
    for (var i = 0; i < 100; i += 2)
        line(width/20 + i*10, 0, 0, height + i*(-10))
    
    stroke(27, 101, 211)
    for (var i = 0; i < 100; i += 3)
        line(width/20 + i*10, height, width, height + i*(-10))
   
    stroke(145, 200, 224)
    for (var i = 0; i < 100; i +=2)
        line(width/5 + i*10, height, width, height + i*(-10))

    
    push();
    noStroke();
    fill(20, 27, 226);
    translate(width/2,height/2);
    rotate(s*(360/60));
    rotate(-90);
    rect(120, 0, 90, 10);
    pop();
    
    push();
    noStroke();
    fill(125, 114, 224)
    translate(width/2,height/2);
    rotate(m*(360/60));
    rotate(-90);
    rect(30, 0, 50, 5);
    pop();
    
    push();
    noStroke();
    fill(171, 45, 206);
    translate(width/2,height/2);
    rotate(h*(360/12));
    rotate(-90);
    rect(50, 0, 20, 2);
    pop();

    noStroke()
    fill(211, 107, 196)
    ellipse(width/2, height/2, 30, 30)
}
    

In this project, I wanna combine the previous work with my abstract clock design, the three rectangles represents three hands of the clocks and their colors varies.

sketch

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

}

function draw() {
    
    background(245,245,220);
    noStroke()
//The repreating circles 
    for (var x = 0; x < 10; x++) {
        for (var y = 0; y < 10; y++) {
            fill(178,34,34);   
            ellipse(50*x + 25, 50*y + 40, 10, 10);

        }

    }
//The first set of vertical shapes
    for (var a = 0; a < 5; a++) {
        for (var b = 0; b < 7; b++) {
            fill(0,0,139);
            rect(a*100, b*60, 5, 200)
        }
    }

//The second set of vertical shapes    
    for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 10; j++) {
            fill(210,180,140)
            rect(i*100+45, j*50, 20, 200)
        }
    }
//The first set of horizontal shapes
    for (var m = 0; m < 5; m++) {
        for (var n = 0; n < 15; n++) {
            fill(240,230,140)
            rect(m*120, n*50, 300, 3)
        }    
    }
//The second set of horizontal shapes
    for (var p = 0; p < 5; p++) {
        for (var q = 0; q < 15; q++) {
            fill(255)
            rect(p*120, q*50+20, 300, 12)
        }    
    }
    
}

Speaking of something that I would wear everyday, plaid pattern is one of my favorites. In this project, I played with simple geometries and designed this multicolored plaid pattern. And I added circle shapes to contrast with the rectangles to increase the visual balance.

The Avatar

The computational-capture graphics technique

Speaking of computational 3D artwork, the first project that comes to  my mind is definitely the 2009 sci-fic movie Avatar by James Cameron. I still remember when I first saw the movie, I was totally shocked by the breathtakingly beautiful scene: the Avatars, the enormous valley, the dragons etc. I was even more surprised when I knew those graphics were computer generated. The director planned to make use of photorealistic computer-generated characters, created using new motion capture animation technologies he had been developing in the 14 months leading up to December 2006. Innovations include a new system for lighting massive areas like Pandora’s jungle, a motion-capture stage or “volume” six times larger than any previously used, and an improved method of capturing facial expressions, enabling full performance capture. To achieve the face capturing, actors wore individually made skull caps fitted with a tiny camera positioned in front of the actors’ faces; the information collected about their facial expressions and eyes is then transmitted to computers.

Reference:

http://www.avatarmovie.com/

sketch

//Sean(Han) Meng
//Section B
//hmeng@andrew.cmu.edu
//Project 4

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

}


function draw() {
    
    background(0);

    //First upper eyelip
    stroke(87, 250, 255)
    for (var i = 0; i < 100; i +=1)
        line(width/20 + i*10, 0, 0, height + i*(-10))
    //Second upper eyelip
    stroke(153, 50, 204)
    for (var i = 0; i < 100; i +=1)
        line(width/5 + i*10, 0, 0, height + i*(-10))
    //First lower eyelip
    stroke(0, 0, 205)
    for (var i = 0; i < 100; i +=1)
        line(width/20 + i*10, height, width, height + i*(-10))
    //Second lower eyelip    
    stroke(255, 128, 128)
    for (var i = 0; i < 100; i +=1)
        line(width/5 + i*10, height, width, height + i*(-10))

    //Pupil
    fill(75, 0, 130)
    ellipse(200, 150, 150, 150)
    
    fill(0, 0, 128)
    ellipse(200, 150, 100, 100)




}

In this project, I explore the coding method that I learned to draw complex shape. This “eye” was consisted of for eyelips that are drew with straight lines. But the way they overlapped create a delusion that there is a curve at the very end of them. And I use the bold colors to add aesthetic value to it.

Ed Sheeran’s creating process of ‘Shape Of You’ Using Music Visualization

The visualization of ‘Shape Of You’

As Technology improves nowadays, music, as a mainstream media, evolves both in many ways that it is been heard. And among these evolution, music visualization is the most interesting aspect that I found out. Because it visualizes the music, which is only supposed to be heard, by using coding program and computational design. For example, in the process of composing the hit song “Shape Of You”, artist Ed Sheeran uses visualization technique to create the backdrop of music video. As a result, listeners can “see” the music through those geometric shape and lines that represent the drum beats and rhythm. The ‘visualizer’ itself is just a computer program that takes the sound tracks as input and transfer them into those shapes that move with the music. Ed Sheeran also brings this visualization technique to  his live performance, where he can enlighten the vibe.

Reference:

https://flowingdata.com/2017/12/21/ed-sheerans-creative-process-explained-with-music-visualization/

In this drawing, there are four aspects that change when the mouse moves: color, size, angle and position of the geometry. The rectangles represent the outer-space and the “UFO” in the middle rotates by itself and changes its orbit as the mouse moves.

sketch

//Sean(Han) Meng
//Section B
//hmeng@andrew.cmu.edu
//Project-03

var interv = 50
var angle = 0
var degree = 0

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


function draw() {
    
    background(0)
    noStroke()
    
    
    //horizontal set of rectangles
    


    fill(mouseX/2, mouseY/3, mouseY)
    
    rect(640-mouseX, mouseY+interv, 640-mouseX, mouseY*0.05)
    
    rect(640-mouseX, mouseY+interv*2, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*3, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*4, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*5, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*6, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*7, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*8, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*9, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*10, 640-mouseX, mouseY*0.05)

    //vertical set of rectangles

    fill(mouseX, mouseY/2, mouseX)

    rect(640-mouseX-interv*1, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*2, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*3, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*4, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*5, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*6, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*7, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*8, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*9, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*10, 640-mouseY, mouseX*0.05, 640-mouseY)

    //the "UFO" in the middle
    push()
    fill(640-mouseX, 640-mouseY, 200)
    translate(320, 320);
    rotate(radians(degree));
    rectMode(CENTER);
    ellipse(mouseX - 320, mouseY - 320, 50, 50);
    ellipse(mouseX - 340, mouseY - 340, 20, 20);
    ellipse(mouseX - 360, mouseY - 360, 20, 20);
    ellipse(mouseX - 380, mouseY - 380, 20, 20);
    ellipse(mouseX - 300, mouseY - 300, 20, 20);
    ellipse(mouseX - 280, mouseY - 280, 20, 20);
    ellipse(mouseX - 260, mouseY - 260, 20, 20);

    degree = degree + 6
    pop();
    
}

Silk Pavilion

The final form of Silk Pavilion

The Silk Pavilion is a project designed by Mediated Matter Research Group at MIT Lab. For me the most amazing part of this project is it creates a breathtakingly beautiful installation with not only digital fabrication but also biological fabrication. It is really hard to tell whether the researchers or the silkworm is the author of this project. The primary structure was a system of 26 polygonal panels made of silk threads laid down by a CNC(Computer-Numerically-Controlled)machine. Inspired by the silkworm’s ability to generate a 3D cocoon out of a single multi-property silk thread, the overall geometry of the pavilion was created using an algorithm that assigns a single continuous thread across patches providing various degrees of density. The algorithm enables designers to engage such a sophisticated pattern combined with natural fabrication. As a result, the final work has both artificial designed overall shape and natural fabricated surfaces. 

Link: http://matter.media.mit.edu/environments/details/silk-pavillion

How Generative Design Affect Meets Architecture

The canopy of British Museum, Foster and Partners

The Great court at British Museum is designed by Foster and Partners architecture firm. The amazing part of this project is the dome(roof) is in a very hi-tech architecture. This roof was designed firstly by modeling in Grasshopper, which is an architecture software that can help architects to design complex in a parametric method. Because the software is based on algorithm. The canopy is in a engineering and economy form. The unique geometric shape is used to expand the gap between the courtyard and the reading room. Most importantly, The structure and the frame is designed to reduce the solar gain. Without the engineering and physical feature that is made by the modeling tools, the architects can not come with this precise and scientific canopy from scratch. From my perspective, generative modeling tool makes it possible for designers, includes architects, to collaborate engineering skills.

https://www.fosterandpartners.com/projects/great-court-at-the-british-museum/

I started this project based on my self portrait and explored the command to change the size of the image both randomly and steadily.

sketch

//Sean Meng
//Section B
//hmeng@andrew.cmu.edu
//Assignment1

function setup() {
    createCanvas(480, 640);
    background(0);
    text("p5.js vers 0.7.1 test.", 10, 15);
}

var mouth1=30
var mouth2=5
var glassescolor=0
var BW1=50
var BW2=80
var BW3=10
var BW4=120
var earH=40
function draw() {
    fill(255, 255, 255)
    rect(0, 0, 300, 600)

    //ears
    fill(225, 197, 164)
    ellipse(380, 330, 20, earH)
    strokeWeight(0)
    ellipse(220, 330, 20, earH)
   
    //face
    strokeWeight(0)
    fill(236, 212, 190)
    rect(220, 250, 160, 100)
    triangle(220, 350, 300, 350, 300, 420)
    triangle(220, 350, 240, 390, 300, 420)
    quad(300, 420, 300, 350, 380, 350, 340, 400)

    //hair
    fill(0)
    triangle(205, 250, 290, 275, 405, 250)
    triangle(205, 250, 230, 220, 300, 220)
    triangle(230, 220, 265, 200, 300, 220)
    rect(265, 200, 60, 30)
    triangle(265, 200, 300, 195, 300, 220)
    triangle(205, 250, 300, 220, 300, 250)
    rect(370, 240, 10, 70)

    //glasses
    fill(glassescolor)
    ellipse(255, 315, 60, 60)
    fill(245, 245, 245)
    ellipse(255, 315, 53, 53)
    fill(glassescolor)
    ellipse(335, 315, 60, 60)
    fill(245, 245, 245)
    ellipse(335, 315, 53, 53)
    strokeWeight(1)
    fill(200)
    rect(283.5, 309, 22, 3)
    rect(219, 309, 7, 3)
    rect(364, 309, 16, 3)
    
    //nose
    strokeWeight(2)
    line(290, 315, 290, 350)
    line(290, 350, 300, 350)

    //mouth
    fill(220, 145, 140)
    rect(280, 380, mouth1, mouth2)

    //background buildings
    strokeWeight(0)
    fill(153, 138, 138)
    rect(370, 470, BW1, 160)
    rect(480, 500, BW2, 100)
    rect(395, 440, BW3, 40)
    fill(136, 115, 117)
    rect(400, 520, BW4, 80)

    //backgrounds 2

    strokeWeight(12)
    triangle(60, 170, 130, 170, 130, 50)
}    

function mousePressed(){
    //if you click the mouse, the glasses is going to change from black to white.
    //if you click the mouse, the mouth and the building in the background are going to be bigger.
    // 
    mouth1 = random(10, 60)
    mouth2 = random(1, 20)
    glassescolor+=20
    BW1+=3
    BW2+=3
    BW3+=3
    BW4+=3
    earH = random(20, 80)
}