Lan – Page 2 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Lan Wei-Project -07-Curves

//Lan Wei
//Section D
//lanw@andrew.cmu.edu
//Project-07

function setup() {
    createCanvas(450, 450);
    strokeWeight(2);
    noFill();
}

//http://mathworld.wolfram.com/LogarithmicSpiral.html
var nPoints = 1000;
function draw() {
    background(0);
    push();
    var red = map(mouseX, 0, width, 255, 0);
    var green = map(mouseX, 0, width, 20, 150);
    var blue = map(mouseX, 0, width, 0, 150)
    var col = color(red, green, blue); //change the color
    stroke(col);
    translate(mouseX, mouseY); //draw  with the mouse
    logarithmicSpiral();
    pop();
    push();//another logarithmicSpiral
    var red = map(mouseX, 0, width, 0, 200);
    var green = map(mouseX, 0, width, 100, 50);
    var blue = map(mouseY, 0, width, 0, 150)
    var col = color(red, green, blue); //change the color
    stroke(col);
    translate(width - mouseX, height - mouseY); //draw  with the mouse
    logarithmicSpiral();
    pop();
    stroke(255);
}

function logarithmicSpiral(){
    var a = 0.1;
    var b = 0.1;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, - 16 * PI, 8 * PI);
        var x = 1000 * a * cos(t) * pow(Math.E, b * t);
        var y = 1000 * a * sin(t) * pow(Math.E, b * t);
        vertex(x, y);
        rotate(atan(mouseY/mouseX)); //rotate with the tangent of the mouse
    }
    endShape();
}

In the project I try to create rotating spirals that change angles and color with mouse movement. I struggled with it at first, having problems figuring out the relationships between the parameters. But finally it works.

Lan Wei-LookingOutwards-07

The project’s name is ‘Mesmerizing flight visualizations over 24 hour periods’ and it’s created by NATS, an air traffic control services provider. It is not produced by an artist as an artwork but it did provide me with a fanscinating new way of looking at the sky.

As a student of design, it is often required to produce good-looking drawings that contain information. But I feel most of them a waste of time since the raw data is as clear as the visualized version. There are only two kinds of information visualization that I find meaningful: information that is ‘dynamic’ and information that can have interaction with. This project falls into the first category. For this project, even looking at the screenshot the dynamic flow of it can be felt.

In technical aspects, I think arrays in P5js can do similiar things by putting data of different flight courses in different arrays.

https://thekidshouldseethis.com/post/flight-visualizations-over-24-hour-periods

http://moebio.com/exomap/viewsofthesky/2/

(This link is an example of visualization of information that can have interaction with)

Lan Wei-Project-03

my-sketch.js

//Lan Wei
//Section D
//lanw@andrew.cmu.edu
//Project-03

var starXArray = [];
var starYArray = [];
var starRArray = [];

function setup() {
    createCanvas(450, 450);
    noStroke();
    for (var i = 0; i < 200; i ++){
        var starR = random(0.5, 2);
        var starX = random(0, 2 * width);
        var starY = random(0, 2 * height/3);
        ellipse(starX, starY, starR, starR); // stars
        starXArray.push(starX);
        starYArray.push(starY); //store the positions of the stars in arrays
        starRArray.push(starR); //store the size of the stars
        print(starXArray);
    }
}

function draw() {
    background(5, 5, 32);
    fill(136, 3, 11);
    rect(0, 2 * height/3, width, height/3); //lower part of the city scene

    //stars
    for (var i = 0; i < 200; i ++){
        fill(150);
        ellipse(starXArray[i] - mouseX/7, starYArray[i], starRArray[i], starRArray[i]);
    }

    // buildings
    push();
    fill(136, 3, 11);
    rect(-mouseX/2, 200, 50, 150);
    rect(50-mouseX/2, 270, 30, 150);
    rect(80-mouseX/2, 230, 70, 150);
    rect(150-mouseX/2, 280, 90, 150);
    rect(240-mouseX/2, 250, 50, 150);
    rect(290-mouseX/2, 190, 50, 150);
    rect(340-mouseX/2, 230, 20, 150);
    rect(400-mouseX/2, 200, 50, 150);
    rect(450-mouseX/2, 270, 30, 150);
    rect(480-mouseX/2, 230, 70, 150);
    rect(550-mouseX/2, 280, 90, 150);
    rect(640-mouseX/2, 250, 50, 150);
    rect(690-mouseX/2, 190, 50, 150);
    rect(740-mouseX/2, 230, 20, 150);
    pop();

    //roller coaster
    for (var x = 0; x < 5 * width/8; x += 0.1){ // the less thriller part
        var xInSin = map(x, 0, width, 0, 4 * PI);
        var y = 50 * sin(xInSin) + height/2 + 50;
        fill(255);
        ellipse (x, y, 1, 1);
        if (x % 20 <= 0.1){ //vertical structure
            push();
            stroke(200);
            strokeWeight(1);
            line(x, height, x, y);
            pop();
        }
    }
    for (var x = 5 * width/8; x < width; x += 0.1){ //the thriller part
        var xInSin = map(x, 0, width, 0, 4 * PI);
        var y = 100 * sin(xInSin) + height/2;
        ellipse (x, y, 1, 1);
        if (x % 20 <= 0.1){ //vertical structure
            push();
            stroke(200);
            strokeWeight(1);
            line(x, height, x, y);
            pop();
        }
    }

    //carriage
    if (mouseX < 5 * width/8){
        y = 50 * sin(xInSin) + height/2 + 50;
        fill(255, 255, 0);
        var fakeX = map(mouseX, 0, width, 0, 4 * PI);
        var rectY = 50 * sin(fakeX) + height/2 + 50
        push();
        rectMode(CENTER);
        var ang = asin(sin(fakeX + PI/2));
        translate(mouseX, rectY);
        rotate(ang);
        rect(0, 0, 20, 10);
        pop();
    }
    if (mouseX >= 5 * width/8){
        y = 100 * sin(xInSin) + height/2;
        fill(255, 255, 0);
        var fakeX = map(mouseX, 0, width, 0, 4 * PI);
        var rectY = 100 * sin(fakeX) + height/2;
        push();
        rectMode(CENTER);
        var ang = asin(sin(fakeX + PI/2));
        translate(mouseX, rectY);
        rotate(ang);
        rect(0, 0, 20, 10);
        pop();
    }
}

I trird to make a scene of roller coaster at night, with the stars in the sky and buildings far away. The stars, buildings and roller coaster should move with different speeds (and probably different directions) with mouse moving. The hardest part is to make the roller coaster move along its track. The process is very fun.

Lan Wei-Looking Outwards-03

Design Miami Pavilions: Flotsam & Jetsam

The project was designed by SHoP Architects in 2016. What is amazing about the project is the completely digital design and the 100% 3D-printing. As a designer, I feel very excited about the power of machine to achieve what human cannot achieve, which sets free designer’s imagination and has potential to bring more exciting works to our physical world. As an architecture student, I was tortured by endless repetitive work in design process but now I believe computational fabrication will take all the job in the future and designers can focus on the intellectual work.

The material used in the prpavilion is carbon fiber, which has both high strength and the flexibility and thus can be used in 3D printing. The design can be achieved using Rhino and Grasshopper. Another thinking of mine is that the design can be integrated with ecological features such as having plants in its structure.

http://www.shoparc.com/projects/design-miami-flotsam-jetsam/

Lan Wei-Project-06-Abstract Clock

sketch

function setup() {
    createCanvas(450, 450);
    stroke(255, 215, 0);
    background(0);
    frameRate(1);
}

function draw() {
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();

    // HourRect
    var rectHH = height/24; //height of each 'hourfloor'
    var rectMH = rectHH/60; //height of each 'minutefloor'
    var rectW = [100, 140, 120, 130];
    for(var i = 0; i < H; i ++){
        fill(25, 25, 112); //add changefulness to different floors color
        var rectX = width/2 - 0.5 * rectW[i % 4]; //X coordinate of HourRect
        var rectY = height -(i + 1) * rectHH; //Y coordinate of HourRect
        rect(rectX, rectY, rectW[i % 4], rectHH);
    }

    //MinuteRect
    for(var j = 0; j < M; j ++){
        fill(255);
        var rectX = width/2 - 0.5 * rectW[j % 4]; //X coordinate of MinuteRect
        var rectY = height -(j + 1) * rectMH - H * rectHH; //Y coordinate of MinuteRect
        rect(rectX, rectY, rectW[j % 4], rectMH);
        //cover secondRect in every new minute
        push();
        fill(0);
        noStroke();
        rect(width/2 - 140/2, height - M * rectMH - H * rectHH - 17, 150, 17);
        pop();
    }

    //SecondRect
    for(var k = 0; k < S; k ++){
        fill(150);
        var heightRange = [5,14,3,8,17]; //to get random height
        var widthRange = [7,5,2,8,6]; //to get random width
        var gap = rectW[k % 4] / 60; // distribute second rectangles
        var rectX = width/2 - 130/2 + k * gap; //X coordinate of MinuteRect
        var rectY = height - M * rectMH - H * rectHH - heightRange[k % 5]; //Y coordinate of MinuteRect
        rect(rectX, rectY, widthRange[k % 5], heightRange[k % 5]);
    }
}

In the design I try to make the clock look like a building under construction. The ‘second rectangles’ and ‘minute rectangles’ are the parts being built and the ‘hour rectangles’ are floors that are already built.

Lan Wei-Looking Outwards-06

The project Forms is an ongoing collaboration between visuals artists Memo Akten and Quayola. It illustrates how athletes’ body motions move in a creative way.

When the video just started, I didn’t notice the human body in it and I thought it was all about visual effects. But after I saw the body motions in it I felt the great power and creativity of the artwork. The blurring between real life experience and the abstract effect interpretes body movement in a new way, which fascinates me the most, implying that body is part of the environment and every movement will have invisible impact to the surroundings. Randomness of the elements plays an important role in achieving the effect. The elements in the video are throwed about randomly but acturally they are in some ways controlled by the pathway of the body. So the randomness is not pure, containing certain level of logic.

Forms

Lan Wei-Looking Outwards-02

The project Unnumbered Sparks was done by Janet Echelman and Aaron Koblin in 2014. It was installed in the busy city centre of Vancouver.

It is very touching to see people taking off their gloves in cold winter to interact with the artwork with smiles on their faces. Nowadays peoples are moving around between cities and they seem like outsiders to everywhere. And electrical devices seems to alienate people from real life. But in this artwork electrical devices help people to engage in the environment around them and even change it, which brings warmth to the city. I love the idea to engage people’s behavior into the appearance of the artwork. In technical senses, the artwork was lit up by the projectors on the top of the net. And the technologies behind are Google Chrome, Go, WebGL, WebSockets, Web Audio and Polymer.

I feel that generative art is very promising to integrate with public spaces in the profession of architecture.

http://www.unnumberedsparks.com/

Lan Wei-Project-02-Variable-Face

sketch

var facePink = 20;
var eyeW = 50;
var eyeH = 7;
var eyebrowH1 = 270;
var eyebrowH2 = 270;
var mouthH = 355;

function setup() {
    createCanvas(640, 480);
    background(255, 196, 238);
    strokeWeight(3);
}

function draw() {
    //hat
    fill(196, 42, 42);
    stroke(196, 42, 42);
    ellipse(300, 260, 205, 195);

    //quilt
    ellipse(300, 570, 320, 500);
    stroke(232, 139, 139);
    push();
    strokeWeight(40);
    beginShape();
    curveVertex(240, 350);
    curveVertex(240, 290);
    curveVertex(230, 370);
    curveVertex(350, 440);
    curveVertex(360, 470);
    curveVertex(350, 500);
    curveVertex(330, 600);
    curveVertex(330, 700);
    endShape();
    pop();

    //face
    fill(250, 240, 200);
    stroke(250, 240, 200);
    beginShape();
    curveVertex(220, 100);
    curveVertex(220, 240);
    curveVertex(230, 350);
    curveVertex(300, 400);
    curveVertex(370, 350);
    curveVertex(380, 240);
    curveVertex(380, 100);
    endShape();
    push();
    fill(232, 169, 132);
    stroke(232, 169, 132);
    ellipse(250, 360, facePink, facePink);
    ellipse(350, 360, facePink, facePink);
    pop();

    //eyebrow
    stroke(0);
    push();
    strokeWeight(5)
    line(230, eyebrowH1, 270, eyebrowH2);
    line(370, eyebrowH1, 330, eyebrowH2);
    pop();

    //eye
    line(220, 320, 270, 330);
    push();
    translate(350, 325);
    fill(255);
    strokeWeight(2);
    rotate(radians(-7));
    ellipse(0, 0, eyeW, eyeH);
    strokeWeight(3);
    ellipse(-2, 0, 5, 5);
    pop();

    //mouth
    fill(250, 70, 70);
    stroke(250, 70, 70);
    triangle(300, mouthH, 293, 375, 307, 375);
    fill(255);

    //hair
    fill(0);
    stroke(0);
    quad(220, 241, 170, 330, 230, 370, 230, 350);
    quad(380, 241, 370, 241, 370, 370, 450, 330);

    //hat part 2
    fill(207, 71, 71);
    stroke(207, 71, 71);
    ellipse(300, 247, 175, 45);
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    facePink = random(15, 30);
    eyeW = random(45, 52);
    eyeH = random(7, 40);
    eyebrowH1 = random(250, 270);
    eyebrowH2 = random(265, 285);
    mouthH = random(350, 370);
}

It’s fun to add dynamic effect to an image with randomness. And I find the mousePressed() function very useful to interact with audiences.

Lan Wei-LookingOutwards-05

The project is called When Leaving Becomes Arriving and the video is an excerpt of it. It was done by Rebecca Ruige Xu (Director/ Computer Graphics), Sean Hongsheng Zhai (Computer Graphics) and Nicolas Scherzinger (Music) in 2015. The softwares used are Processing and Max/MSP.

What fascinates me of the project is that the graphic style is like a pencil painting on paper but the effect is with depth in it. Maybe because of my architecture background, the spatial effects in computer graphics always interest me a lot. The dynamic effect is also very successful with the patterns popping up and fainting away. The graphic has some relationships with the music but I feel like it also has its own logic. So I guess the graphic has some parameters controled by the music and at the same time has randomness.

Lan Wei-Project-05-Wallpaper

my-sketch.js
>sketch

/* Lan Wei
Section D
lanw@andrew.cmu.edu
Project 05
*/

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

var gap = 20; //vertical distance between two waves
var dens = 20; //horizontal density of the waves
var waveRev = 4; // control how big the wave is

function draw(){
    //draw ocean
    var i = 0;
    for (var y = -gap; y < height - gap; y += gap){
        noFill();
        stroke(255);
        beginShape();
        i ++; //will be used for color setting
        for (var x = -50; x < width + 50; x += dens){
            y += random(-gap/waveRev , gap/waveRev );//wave
            curveVertex(x, y);
        }
        curveVertex(width, height);
        curveVertex(0, height);
        curveVertex(0, y - gap/waveRev);//just to find a point to close the shape
        var blue = map(y, 0, height, 255, 30);
        var green = map(y, 0, height, 220, 10);
        fill(50, green, blue);
        noStroke();
        endShape();
    }
    noLoop();
    drawFish();
}

//draw fish pattern
function drawFish(){
    var dist = 100; //horizontal distance between fish
    var level = 70; //vertical distance between fish
    i = 0;
    for (var x = dist; x < width; x += dist){
        i ++;
        if (i % 2 == 0){
            for (var y = level; y < height; y += level){
                fish(x, y);
            }
        }
        else{
            for (var y = level * 1/2; y < height; y += level){
                fish(x, y);
            }
        }
    }
}

//how the fish looks like
function fish(x, y){
    var fishW = 30;
    var fishH = 10;
    var tailL = 10;
    fill(240, 230, 140);
    ellipse(x, y, fishW, fishH);//body
    fill(0);
    ellipse(x-10, y, 5, 5);//eye-black part
    fill(255);
    ellipse(x - 9, y, 1.5, 1.5);//eye-white part
    fill(255, 215, 0);
    triangle(x + fishW/2, y, x + fishW/2 + tailL, y + 5, x + fishW/2 + tailL, y - 5);
    //tail
}

My initial idea was to create a scene of different depth of the ocean. I want to make the waves of some randomness and change the color to show depth difference. After I finished the waves, I added some fish to fulfill the project requirement, and surprisingly the effect is very good. What I feel the most helpful through the project is that I get familiar with ‘helper functions’ and practiced to create shape with irregular curves.