lingfanj@andrew.cmu.edu – Page 2 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Lingfan Jiang – Looking Outwards 07

This week, I am particularly interested in this project called “skies painted with unnumbered sparks”. It was done by an interactive artist, Aaron Koblin collaborated with Janet Echelman in 2014. Made entirely of soft fibers, the sculpture can attach directly into existing city architecture.

Being an architecture student myself, I really like how the artist started to think about the space between the buildings and how art could be involved in it. I really like the contrast between the hard concrete buildings and the smooth, light installation. Most importantly, with computational information visualization and great lighting effects, it really became something its audiences are willing to interact with. It is also amazing how people could just use their phones to draw lines and that would project directly onto the installation.

I think the final form of this art piece is very successful. As I mentioned earlier, this project is done by an interactive artist, Aaron Koblin and another artist, Janet Echelman, who mainly does amazing huge scale installation art. Therefore, I think the combination of the two artists really created something fascinating. As for the algorithm behind it, I would assume that the installation becomes a bigger monitor of people’s phones. Whatever is drawn on the phones would project directly on to the installation.

Furthermore, I think this kind of techniques could really make some science fiction movie scenes come true where a lot of projecting figures are floating in the air in the future.

Lingfan Jiang – Project 07 – Curves

lingfanj-07

// Lingfan Jiang
// Section B
// lingfanj@andrew.cmu.edu
// Project-07



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

function draw(){
    background(80);
    //tranlate the center of the canvas
    translate(240, 240);
    stroke(255);
    strokeWeight(0.5);
    Hypotrochoid();
}

function Hypotrochoid(){
    //x and y defines the positions of points
    var x;
    var y;
    //use map and constrain to keep the shapes inside the canvas
    //Also, use mouseX and mouseY to change all the variables inside the equation
    var xbound = constrain(mouseX, 0, 480);
    var a = map(xbound, 0, 480, 0, 130);
    var b = map(xbound, 0, 480, 0, 60);
    var h = constrain(mouseY, 0, 270);
    noFill();
    //Hypotrochoid
    beginShape();
    for (var i = 0; i < 360; i++) {
        x = (a - b) * cos(i) + h * cos((a - b) / b * i);
        y = (a - b) * sin(i) - h * sin((a - b) / b * i);
        vertex(x, y);
    };
    endShape();

}

I think this is an easy but super fun project. Before working on this project, I have seen projects using the spirograph technique. I was very interested in how math was a natural art. However, I am surprised by how much I could do just using mathematical curves and p5.js.

This project also became more interesting adding the interactive aspect. By doing this project, I realized that sometimes the artist does not need to have a clear vision about how the final form looks at first. Design within the process can also be a great way to have surprising results.

Lingfan Jiang- Looking Outwards 06

http://color-wander.surge.sh/

The project that I am interested in this week is done by Matt Deslauriers in 2016, called generative art with node.js and canvas. The project created distorted images using the codes.

Here is an example. It transfers the image into the artists’ own style just using codes.

The reason I admire this project is that create a new and unique art style itself is already very interesting. However, I think there are much more opportunities to the project. At the early stage of the project, the artist was only able to convert existing images into this kind of style. However, when the database grows into certain size, it is able to call out a random image by itself, just like the link I added at the beginning of the post. For the next stage, I think the project would be benefited a lot from the machine learning process where the codes could understand and establish links between words and images. To me, that would be the most interesting aspect of the project.

For the algorithm of this project, I would assume that based on the contrast of the image, the codes are able to identify the shapes of the images and use codes to generate random geometries according to the fundamental shapes of the images. Also, it is very wise for the author to use color palettes that are existed from ColourLovers.com API to make his work pleasant to look at.

Here is the original link to the artist’s own page.

https://mattdesl.svbtle.com/generative-art-with-nodejs-and-canvas

Lingfan Jiang-Project-06-Abstract Clock

lingfanj-06

// Lingfan Jiang
// Section B
// lingfanj@andrew.cmu.edu
// Project-06

var y = 100;
var up = 0;

function setup(){
    createCanvas (480, 200);
}

function draw(){
    background("pink");

    //turn down the frame rate to limit the movement
    frameRate(1);
    angleMode(DEGREES);

    var H = hour();
    var M = minute();
    var S = second();

    //remap second according to the width of the canvas
    var x = map(S, 0, 60, 0, 480);

    //fill the base with dark grey
    fill(45);
    strokeWeight(0);
    rect(0, 145, 48, 100);
    rect(48, 140, 40, 100);
    rect(88, 135, 40, 100);
    rect(128, 130, 40, 100);
    rect(168, 125, 40, 100);
    rect(208, 120, 72, 100);
    rect(280, 125, 40, 100);
    rect(320, 130, 40, 100);
    rect(360, 135, 40, 100);
    rect(400, 140, 40, 100);
    rect(440, 145, 40, 100);

    //fill the platforms with different shades of grey
    fill(240);
    rect(0, 110, 48, 35);
    fill(200);
    rect(48, 105, 40, 35);
    fill(160);
    rect(88, 100, 40, 35);
    fill(120);
    rect(128, 95, 40, 35);
    fill(100);
    rect(168, 90, 40, 35);
    fill(80);
    rect(208, 85, 72, 35);
    fill(100);
    rect(280, 90, 40, 35);
    fill(120);
    rect(320, 95, 40, 35);
    fill(160);
    rect(360, 100, 40, 35);
    fill(200);
    rect(400, 105, 40, 35);
    fill(240);
    rect(440, 110, 40, 35);

    textSize(10);
    text('Time Survived:', 140, 170);
    textSize(13);
    text(nf(H + ' hours', 8, 0), 220, 170);
    text(nf(M + ' minutes', 10, 0), 279, 170);

//set a strokeweight for the man
    strokeWeight(0.7);
    //body
    line (x, y, x, y + 8);
    //front leg
    line (x, y + 8, x + 5, y + 10);
    line (x + 5, y + 10, x + 5, y + 15);
    //back leg
    line (x, y + 8, x, y + 11);
    line (x, y + 11, x - 5, y + 15);
    //arms
    line (x, y + 4, x + 6, y + 4);
    line (x, y + 6, x + 6, y + 6);
    //head
    ellipse(x, y, 5, 5);

//pac-man at the back
    strokeWeight(0.5);
    fill("yellow");
    arc(x - 30, y + 8, 20, 20, 40, 320, PIE);

    //eye of pac-man
    fill(0);
    ellipse(x - 30, y + 3, 2.5, 2.5);


    //set conditions so that the running man moves up 5 pixels every 5 seconds
    if (S % 5 == 0) {
        up = 5;
    }
    else {
        up = 0;
    };

    //set the man back to the left of the screen
    if (S > 60) {
        x = 0;
    };

    //make the man goes up before he reaches the middle
    if (S > 0 & S < 30){
        y -= up;
    }
    //make the man goes down after he reaches the middle
    if (S > 30 & S < 60) {
        y += up;
    };





}

The way to read the clock is that the minute and the hour are clearly stated in the text, and the second is related to the position of the stickman. The stickman would climb up 5 pixels every 5 seconds before it reaches to the middle, and it would climb down afterward.

The biggest struggle I had while doing this assignment is that I do not know how to make the man only step up once every 5 seconds and not to go straight up unstopping. Also, every time I refresh the page, the stickman would go back to its pre-set “y” location which causes a problem visually. Although there are a few hard codes in it, the final result still turns out good to me.

Lingfan Jiang- Looking Outwards 05

This project is done by four students from the University of Hertfordshire in 2016. I am always a big fan of 3d animation. Being an architecture student myself, I also do a lot of photorealistic renderings, and I understand how hard they are and how long they take to make perfect light and shadow. For animations, it is definitely even harder to do. I am always amazed by the smooth and realistic movement from the main character. The details of these characters are just incredible.

Also, animations are also very good ways to present ideas that sometimes cannot be accomplished in normal films. For example, different from other videos that calling on protecting the planet, the artists uses an alien background and hides the theme to the very end which really surprises me in the end. The authors really presented their idea well within three minutes.

Furthermore, it is also very surprising to to know that the project was done by four university students with some help from others, because the quality of the whole video and the idea behind it are both fascinating.

Lingfan Jiang – Project 05 – Wallpaper

lingfanj-project05

//Lingfan Jiang
//Section B
//lingfanj@andrew.cmu.edu
//Project-05

var tx; //triangle positions
var tw = 60; //triangle width

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

function draw(){
    background(229, 249, 224);
    translate(-150, -200); //make sure the pattern fills canvas

    for (var tx = 0; tx < 800; tx += (1.25 * tw)){ //make sure the distance between the triangles stays 1.25 in x axis
        for (var j = 0; j < 20; j++){ //make the pattern repeats in the y axis

            fill(163, 247, 181);
            stroke(229, 249, 224);
            strokeWeight(10); //create a different visual effect where one group of triangles has lineweight and the other don't
            //calculating the positions of each points using tw and tx
            //basically all the triangles are based on the first triangle created in the left up corner
            triangle(tx + (j * tw / 4), (sqrt(3) * tx / 5) + (j * 3 * sqrt(3) / 4 * tw),
                    tx + tw + (j * tw / 4), (sqrt(3) * tx / 5) + (j * 3 * sqrt(3) / 4 * tw),
                    tx + tw / 2 + (j * tw / 4), (sqrt(3) * tx / 5) + (sqrt(3) * tw / 2) + (j * 3 * sqrt(3) / 4 * tw));


            fill(64, 201, 162);
            noStroke();
            //calculating the other group of triangles using tw and tx
            triangle(tx + 0.75 * tw + (j * tw / 4), (sqrt(3) * tx / 5) + (sqrt(3) * tw) / 4 + (j * 3 * sqrt(3) / 4 * tw), 
                    tx + 1.75 * tw + (j * tw / 4), (sqrt(3) * tx / 5) + (sqrt(3) * tw) / 4 + (j * 3 * sqrt(3) / 4 * tw), 
                    tx + 1.25 * tw + (j * tw / 4), (sqrt(3) * tx / 5) - (sqrt(3) * tw) / 4 + (j * 3 * sqrt(3) / 4 * tw));
        }
    }
}

This is the starting idea of my wallpaper, and I really liked how triangles form the hexagon in the middle. However, when I get into the codes, I realized the difficulties to code triangles. In order to form the triangles, I have to calculate the positions of each point and the distance with other ones so that they could form the hexagon perfectly. It is also hard to lay out those triangles since they do not array in the x or y-axis directly. Instead, they move diagonally. Therefore, it is harder to use the nested loop. In the end, I played a little bit with line weights and color to make it look nicer and more interesting.

Lingfan Jiang – Looking Outward – 04

‘Déguster l’augmenté’is a project done by Erika Marthins with ECAL (Bachelor Media & Interaction Design) which tries to add a sound dimension to food. I found this project very interesting because food is always about smell, taste and visual impression. Sound could really be a new dimension to think about.

It is quite interesting to see how chocolate and Oreo could be transformed into discs, but it is definitely still in its early stage in terms of accuracy. However, the accuracy could also be used as an advantage. For example, it could be used to test the quality of the food.

Lingfan Jiang – Project 04 – String Art

lingfanj-04

//Lingfan Jiang
//Section B
//lingfanj@andrew.cmu.edu
//Project-04


var dx; //x coordinate for points on curve
var dy; //y coordinate for points on curve
var circleDiameter; //diameter of the center circle


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

}

function draw(){
    background(0);
    angleMode(DEGREES);
    strokeWeight(0.1); //set a lineweight for the bottom curves
    circleDiameter = 75;


    stroke(255,104,107); //red lines
    for (var x = 0; x < 95; x += 5) {
        dx = 200 + (circleDiameter * cos(x));
        dy = 150 + (circleDiameter * sin(x));
        //connect first quarter of the points on the circle with the points on the top
            for (var i = 0; i < 400; i += 5){
            line(i,0,dx,dy);  
        }
    }
    strokeWeight(0.08);
    stroke(27,179,244); //light blue lines
    for (var x = 90; x < 275; x += 5) {
        dx = 200 + (circleDiameter * cos(x));
        dy = 150 + (circleDiameter * sin(x));
        //connect half quarter of the points on the circle with the points on the left
            for (var i = 0; i < 300; i += 5){
            line(0,i,dx,dy);  
        }
    }
    strokeWeight(0.05);
    stroke(0,40,255); // dark blue lines
    for (var x = 180; x < 275; x += 5) {
        dx = 200 + (circleDiameter * cos(x));
        dy = 150 + (circleDiameter * sin(x));
        //connect quarter of the points on the circle with the points on the bottom
            for (var i = 0; i < 400; i += 5){
            line(i,300,dx,dy);  
        }
    }
    stroke(143,113,255);
    strokeWeight(0.04); // purple lines
    for (var x = 270; x < 455; x += 5) {
        dx = 200 + (circleDiameter * cos(x));
        dy = 150 + (circleDiameter * sin(x));
        //connect half quarter of the points on the circle with the points on the right
            for (var i = 0; i < 300; i += 5){
            line(400,i,dx,dy);  
        }
    }

    noLoop();
}

In this project, I had some difficulties to picture the final form at first. However, after looking through some of the string art examples, I became particularly interested in the circle from. Different from architectural modeling software, you cannot evaluate curves and find points on them. Therefore, the coordinates of the points that form a circle gave me a little bit of trouble. After understanding how “cos” and “sin” could help form it, here is the final result.

Lingfan Jiang- Looking Outwards 03

The project that I am interested in is called the Silk Pavilion, done by the Mediated Matter group at MIT in 2013. The project mainly focused on the relationship between digital and biological fabrication in design. With silkworms’ spinning experiments, researchers are able to emulate silkworms’ behavior and digitalize it in computational tools.

It is fascinating to see how we could combine nature with technology, and how we could always learn from nature. Manmade objects would always have limitations to them, and we always make things based on things we know and understand. Although technology has developed so rapidly in the recent hundred years, nature, on the other hand, has much more profound knowledge than at any time in human history.

Lingfan Jiang-Project-03-Dynamic-Drawing

lingfanj-project03

var position = -30; // set a standard position for the rectangles
var ssize = 10; // set a standard size for the rectangles
var rectcolor; //call a variable for the color of rectangles

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

}

function draw(){
    background(0);
    
    var m = max(min(mouseX, 640),0); //create a new variable "m" that give mouseX a range between 0 to 640
    var angle = m * 360 / 640; //remap the domain from 0-640 to 0-360 for angle
    var rectcolor = m * 255 / 640; // remap the domain from 0-640 
    var p = position * (1 + m / 500); //make the positions bigger over time
    var rectsize = ssize * (1 + m / 1000); //make the sizes of the rectangles bigger 

    stroke(255, rectcolor, rectcolor); //set stroke color for all the squares
    strokeWeight(0.5);
    translate(width/2, height/2); //translate the origin to the center of the canvas
    rotate(radians(angle));
    fill(255, rectcolor, rectcolor); //fill the special square 
    rect(p * 0.5,p,rectsize,rectsize); 

    //create other white squares to form a bigger square ring
    fill("white");
    rect(p,p,rectsize,rectsize);
    rect(0,p,rectsize,rectsize);
    rect(-p * 0.5,p,rectsize,rectsize);
    rect(-p,p,rectsize,rectsize);

    rect(p,p * 0.5,rectsize,rectsize);
    rect(p,0,rectsize,rectsize);
    rect(p,-p * 0.5,rectsize,rectsize);
    rect(p,-p,rectsize,rectsize);

    rect(p * 0.5,-p,rectsize,rectsize);
    rect(0,-p,rectsize,rectsize);
    rect(-p * 0.5,-p,rectsize,rectsize);
    rect(-p,-p,rectsize,rectsize);

    rect(-p,p * 0.5,rectsize,rectsize);
    rect(-p,0,rectsize,rectsize);
    rect(-p,-p * 0.5,rectsize,rectsize);


    //use the scale and rotate syntax to offset a smaller ring and rotate in a different direction
    push();
    scale(0.5);
    rotate(radians(-2 * angle));
    fill(255, rectcolor, rectcolor);
    rect(p * 0.5,p,rectsize,rectsize);

    fill("white");
    rect(p,p,rectsize,rectsize);
    rect(0,p,rectsize,rectsize);
    rect(-p * 0.5,p,rectsize,rectsize);
    rect(-p,p,rectsize,rectsize);

    rect(p,p * 0.5,rectsize,rectsize);
    rect(p,0,rectsize,rectsize);
    rect(p,-p * 0.5,rectsize,rectsize);
    rect(p,-p,rectsize,rectsize);

    rect(p * 0.5,-p,rectsize,rectsize);
    rect(0,-p,rectsize,rectsize);
    rect(-p * 0.5,-p,rectsize,rectsize);
    rect(-p,-p,rectsize,rectsize);

    rect(-p,p * 0.5,rectsize,rectsize);
    rect(-p,0,rectsize,rectsize);
    rect(-p,-p * 0.5,rectsize,rectsize);
    pop();

    //use the scale and rotate syntax to offset a bigger ring and rotate in different direction
    push();
    scale(2.2);
    rotate(radians(-2 * angle));
    fill(255, rectcolor, rectcolor);
    rect(p * 0.5,p,rectsize,rectsize);

    fill("white");
    rect(p,p,rectsize,rectsize);
    rect(0,p,rectsize,rectsize);
    rect(-p * 0.5,p,rectsize,rectsize);
    rect(-p,p,rectsize,rectsize);

    rect(p,p * 0.5,rectsize,rectsize);
    rect(p,0,rectsize,rectsize);
    rect(p,-p * 0.5,rectsize,rectsize);
    rect(p,-p,rectsize,rectsize);

    rect(p * 0.5,-p,rectsize,rectsize);
    rect(0,-p,rectsize,rectsize);
    rect(-p * 0.5,-p,rectsize,rectsize);
    rect(-p,-p,rectsize,rectsize);

    rect(-p,p * 0.5,rectsize,rectsize);
    rect(-p,0,rectsize,rectsize);
    rect(-p,-p * 0.5,rectsize,rectsize);
    pop();

    //use the scale and rotate syntax to offset a bigger ring
    push();
    scale(5);
    fill(255, rectcolor, rectcolor);
    rect(p * 0.5,p,rectsize,rectsize);

    fill("white");
    rect(p,p,rectsize,rectsize);
    rect(0,p,rectsize,rectsize);
    rect(-p * 0.5,p,rectsize,rectsize);
    rect(-p,p,rectsize,rectsize);

    rect(p,p * 0.5,rectsize,rectsize);
    rect(p,0,rectsize,rectsize);
    rect(p,-p * 0.5,rectsize,rectsize);
    rect(p,-p,rectsize,rectsize);

    rect(p * 0.5,-p,rectsize,rectsize);
    rect(0,-p,rectsize,rectsize);
    rect(-p * 0.5,-p,rectsize,rectsize);
    rect(-p,-p,rectsize,rectsize);

    rect(-p,p * 0.5,rectsize,rectsize);
    rect(-p,0,rectsize,rectsize);
    rect(-p,-p * 0.5,rectsize,rectsize);
    pop();

    //use the scale and rotate syntax to offset the biggest ring rotate in different direction
    push();
    rotate(radians(-2 * angle));
    scale(12);
    fill(255, rectcolor, rectcolor);
    rect(p * 0.5,p,rectsize,rectsize);

    fill("white");
    rect(p,p,rectsize,rectsize);
    rect(0,p,rectsize,rectsize);
    rect(-p * 0.5,p,rectsize,rectsize);
    rect(-p,p,rectsize,rectsize);

    rect(p,p * 0.5,rectsize,rectsize);
    rect(p,0,rectsize,rectsize);
    rect(p,-p * 0.5,rectsize,rectsize);
    rect(p,-p,rectsize,rectsize);

    rect(p * 0.5,-p,rectsize,rectsize);
    rect(0,-p,rectsize,rectsize);
    rect(-p * 0.5,-p,rectsize,rectsize);
    rect(-p,-p,rectsize,rectsize);

    rect(-p,p * 0.5,rectsize,rectsize);
    rect(-p,0,rectsize,rectsize);
    rect(-p,-p * 0.5,rectsize,rectsize);
    pop();


}

I got the composition idea from another elective I am taking called communication design. The assignment was to just use squares and to create different kinds of compositions. Since the composition has a strong motion in it, I thought it would be a good idea to do it in this project as well.