Han Meng – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice https://courses.ideate.cmu.edu/15-104/f2018 Professor Roger B. Dannenberg • Fall 2018 • Introduction to Computing for Creative Practice Sat, 12 Sep 2020 00:17:52 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.25 Sean Meng – Project 7 https://courses.ideate.cmu.edu/15-104/f2018/2018/10/12/sean-meng-project-7/ https://courses.ideate.cmu.edu/15-104/f2018/2018/10/12/sean-meng-project-7/#respond Sat, 13 Oct 2018 03:12:18 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=33931 Continue reading "Sean Meng – Project 7"]]>

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.

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/10/12/sean-meng-project-7/feed/ 0
Sean Meng – Project 06 https://courses.ideate.cmu.edu/15-104/f2018/2018/10/06/sean-meng-project-06/ https://courses.ideate.cmu.edu/15-104/f2018/2018/10/06/sean-meng-project-06/#respond Sat, 06 Oct 2018 04:03:27 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=32911 Continue reading "Sean Meng – Project 06"]]>

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.

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/10/06/sean-meng-project-06/feed/ 0
Sean Meng – Project 5 https://courses.ideate.cmu.edu/15-104/f2018/2018/09/29/sean-meng-project-5/ https://courses.ideate.cmu.edu/15-104/f2018/2018/09/29/sean-meng-project-5/#respond Sat, 29 Sep 2018 22:55:26 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=31943 Continue reading "Sean Meng – Project 5"]]>

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.

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/09/29/sean-meng-project-5/feed/ 0
Sean Meng – Looking Outwards 5 https://courses.ideate.cmu.edu/15-104/f2018/2018/09/29/sean-meng-looking-outwards-5/ https://courses.ideate.cmu.edu/15-104/f2018/2018/09/29/sean-meng-looking-outwards-5/#respond Sat, 29 Sep 2018 21:41:48 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=31914 Continue reading "Sean Meng – Looking Outwards 5"]]>

The Avatar

The left image shows the blue cat-like alien Neyitiri shouting. The right image shows the actress who portrays her, Zoe Saldana, with motion-capture dots across her face and a small camera in front of her eyes.

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/

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/09/29/sean-meng-looking-outwards-5/feed/ 0
Sean Meng – Project 04 https://courses.ideate.cmu.edu/15-104/f2018/2018/09/21/sean-meng-project-04/ https://courses.ideate.cmu.edu/15-104/f2018/2018/09/21/sean-meng-project-04/#respond Sat, 22 Sep 2018 03:43:58 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=30857 Continue reading "Sean Meng – Project 04"]]>

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.

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/09/21/sean-meng-project-04/feed/ 0
Sean Meng – Looking Outwards 4 https://courses.ideate.cmu.edu/15-104/f2018/2018/09/21/sean-meng-looking-outwards-4/ https://courses.ideate.cmu.edu/15-104/f2018/2018/09/21/sean-meng-looking-outwards-4/#respond Sat, 22 Sep 2018 00:19:40 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=30585 Continue reading "Sean Meng – Looking Outwards 4"]]>

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/

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/09/21/sean-meng-looking-outwards-4/feed/ 0
Sean Meng – Dynamic Drawing https://courses.ideate.cmu.edu/15-104/f2018/2018/09/14/sean-meng-dynamic-drawing/ https://courses.ideate.cmu.edu/15-104/f2018/2018/09/14/sean-meng-dynamic-drawing/#respond Fri, 14 Sep 2018 21:16:43 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=29344 Continue reading "Sean Meng – Dynamic Drawing"]]>

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();
    
}

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/09/14/sean-meng-dynamic-drawing/feed/ 0
Sean Meng-Looking Outwards 3 https://courses.ideate.cmu.edu/15-104/f2018/2018/09/13/sean-meng-looking-outwards-3/ https://courses.ideate.cmu.edu/15-104/f2018/2018/09/13/sean-meng-looking-outwards-3/#respond Thu, 13 Sep 2018 06:08:39 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=28871 Continue reading "Sean Meng-Looking Outwards 3"]]>

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

 

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/09/13/sean-meng-looking-outwards-3/feed/ 0
Sean Meng-Looking Outwards 02 https://courses.ideate.cmu.edu/15-104/f2018/2018/09/07/sean-meng-looking-outwards-02/ https://courses.ideate.cmu.edu/15-104/f2018/2018/09/07/sean-meng-looking-outwards-02/#respond Sat, 08 Sep 2018 03:46:17 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=28563 Continue reading "Sean Meng-Looking Outwards 02"]]>

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/

 

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/09/07/sean-meng-looking-outwards-02/feed/ 0
Sean Meng-Project-02-Variable-Face https://courses.ideate.cmu.edu/15-104/f2018/2018/09/07/sean-meng-project-02-variable-face/ https://courses.ideate.cmu.edu/15-104/f2018/2018/09/07/sean-meng-project-02-variable-face/#respond Sat, 08 Sep 2018 03:12:28 +0000 https://courses.ideate.cmu.edu/15-104/f2018/?p=28550 Continue reading "Sean Meng-Project-02-Variable-Face"]]>

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)
}
	

 

]]>
https://courses.ideate.cmu.edu/15-104/f2018/2018/09/07/sean-meng-project-02-variable-face/feed/ 0