Author: sxie1@andrew.cmu.edu

Siwei Xie – Project 07 – Curves

sketch

//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//project-07

var nPoints = 500;
var t;
var angle = 0;
var adj = 2;

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

function draw() {
	background(220);
    noStroke();

	//draw Quadrifolium with variant colors
    push();
    fill(mouseX, mouseY, 80);
    translate(mouseX, mouseY);
    rotate(radians(angle));
    drawQuadrifolium();
    angle = (angle + adj) % 360;
    pop();

    //draw Epitrochoid with variant colors
    push();
    fill(80, mouseX, mouseY);
    translate(200, 200);
    drawEpitrochoid();
    pop();
}

//draw rotating & moving windmill
function drawQuadrifolium() {
    var a = 70;
    
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);

        //http://mathworld.wolfram.com/Quadrifolium.html
        r = a * sin(2 * t);
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);
}

//draw variant curve in the middle
function drawEpitrochoid(){
    var a1 =  40;
    var b1 = 200;
    var h = constrain(mouseY/ 10.0, 0, b1);
    var t;
    var r = map(mouseX, 0, 600, 0, 1); 
    
    beginShape();
    fill(200, mouseX, mouseY);
    for (var i = 0; i < nPoints; i++) {

        stroke("black");
        vertex(x, y);
        var t = map(i, 0, nPoints, 0, TWO_PI * 2); // mess with curves within shapes

        //Parametric equations for Epitrochoid Curve
        x = r* ((a1 + b1) * cos(t) - h * cos((t * (a1 + b1) / b1) + mouseX));
        y = r* ((a1 + b1) * sin(t) - h * sin((t * (a1 + b1) / b1) + mouseX));
        
    }
    endShape(CLOSE);
    
}

I had fun creating this image. I used Quadrifolium and Epitrochoid in my drawing, and adjusting them according to the position of mouse.

Quadrifolium is a type of rose curve with n=2. It has the polar equation. Epitrochoid is a roulette traced by a point attached to a circle of radius r rolling around the outside of a fixed circle of radius R, where the point is at a distance d from the center of the exterior circle. 

By modifying the limits of parameters and changing value of parameters in the formula, I was able to play with the curves.

Screenshot after I finished drawing the Quadrifolium.

Siwei Xie – Looking Outwards 07

Ben Fry, Sept. 2009, Watching the evolution of the “Origin of Species”

Ben Fry created a dynamic presentation of Darwin’s multiple editions of “On the Origin of Species.” In the changes are refinements and shifts in ideas, including increasing the weight of a statement, adding details, or even a change in the idea itself. The artist uses different colors to depicts 6 different editions, and show the changes in animations. 

I admire how accessible and clear the presentation is. Darwin scholars are of course familiar with the evolution of “On the Origin of Species.” Yet the animations allow more audiences to view the changes directly, both on a macro-level as it animates, or word-by-word as they examine pieces of the text more closely. The artist might use drawing and coding software such as p5.js to draw the dots, then animate the map.

Creator’s artistic sensibility manifests by harmonize the shapes and colors of the animation. The coordinates on the layouts are simple and clear, creating soothing changes in color when the animation progresses.

Original source here.

Siwei Xie – Project 06 – Abstract Clock

sketch

//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//Project-06-Abstract Clock

var CanvasW = 480;
var CanvasH = 480;
var tx = [];
var ty = [];

function setup() {
    createCanvas(CanvasW, CanvasH);

    //randomize position of stars, IN "SETUP"!
    for (i = 0; i < 60; i ++) {
        tx[i] = random(60, 400);
        ty[i] = random(100, 460);
    }
}

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

    //fetch time at "draw", instead of at the very beginning
	var S = second();
	var M = minute();
	var H = hour();

    //compute diameter of moon, position of rocket, size of stars 
    var mappedH = map(H, 0, 23, 0, CanvasW);
    var mappedM = map(M, 0, 59, 0, CanvasH/2.5); 
    var mappedS = map(S, 0, 59, 0, CanvasH); 

    //moon enlarges according to hours
    noStroke();
    fill("orange");
    circle(0, 0, mappedH);

    //rocket lands diagonally according to minutes
    stroke("white");
    fill(0, 26, 185);
    ellipse(mappedM+150, mappedM+200, 70, 100);
    ellipse(mappedM+120, mappedM+260, 20, 30);
    ellipse(mappedM+150, mappedM+260, 20, 30);
    ellipse(mappedM+180, mappedM+260, 20, 30);

    //create new stars according to seconds
    noStroke();
    circle(mappedS);
    for (i = 0; i < S; i ++) {
        fill("white");
        ellipse(tx[i], ty[i], 5, 5);
    }

//     write time at upper right corner
//     noStroke();
//     fill("white");
//     text("Hour: "   + H, 350, 22);
//     text("Minute: " + M, 350, 42);
//     text("Second: " + S, 350, 62);

}

I painted the night sky. As hours proceed, moon enlarges; as minutes proceed, rockets lands to ground diagonally; as seconds proceed, more stars appear in sky. The elements interact with each other organically, and follow the time schedule.

The process of creating was romantic and technical for me. I learned about fetching time and incorporating it into my animations. Compared to other projects, I spent more time on the creative and aesthetic sides of the work. Since it gives us more freedom on the form of output, I decided to draw without limitations first. Then after all elements were drawn, I figured out a way to connect the story – a moon and starry night with a rocket landing to grounds.

Ideation process – sketch on my notebook.

Siwei Xie – Looking Outwards – 06

Gerhard Richter’s 4900 Colours: Version II at Serpentine Galleries, 2008

Gerhard Richter is the German visual artist who created “4900 Colours: Version II” in 2008. The 196 square panels of 25 colored squares was conceived to be configured in a number of variations, from one large-scale piece to multiple, smaller paintings.The development of 4900 Colors was influenced by Richter’s grid paintings in 1966.

I admire how rigorous the process of generating randomness is. A computer program assigned a color to each square drawn at random from a palette of 25 colors. The 196 panels can be put together to form one huge display, or in the Serpentine exhibition were arranged at random in sets of four to form 49 10x 10 displays.

Creator’s artistic sensibility manifests by how “non-random” the panels look, with some dominated by particular colors which are often placed next to each other. But the whole point of “pure” randomness is that apparent patterns are expected to occur.

Original source here.

Siwei Xie – Project 05 – Wallpaper

sketch

//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//Project-05-wallpaper

function setup() {
    createCanvas(400, 400);
    background(236, 214, 180);
    
}

function draw() {
	//use Nested Loop to create shapes
	for (var j = 0; j < 13; j++) {
        for (var i = 0; i < 12; i++) {

        //maroon circles
        noStroke();
        fill(185, 88, 84);
        circle(i * 46 + 15, j * 30 + 15, 20);

        //yellow triangles
        fill("yellow");
        triangle(i*40+65, j*40+20, i*40+5, j*40+50, i*40+35, j*40+50);
        
        //white verticle lines
        fill("white");
        rect(i*46+15, 0, 3, 400);

        }
    }

    noLoop();
}

Nested loop is a very useful tool when creating repetitive patterns. It was fun to design an aesthetically pleasing image by balancing the colors and shapes of different elements.

I researched wallpaper or tablecloth patterns on the internet first, then tried to design my own image. I set the overall color to be soft and harmonious, by using a combination of pink, maroon, light yellow and white. The shapes I used include triangles, circles and rectangles, which overlap on each other to create a harmonious pattern.

Siwei Xie – Looking Outwards – 05

Deer, Julian Bonequi, Digital 3D Collage, 2014

In 2014, Mexico City-based artist Julian Bonequi uses digital drawing technology to create surreal – yet lifelike – animal portraits. I admire the project because it is very detail-driven. The detail involved in each of Bonequi’s 3D compositions captivates the eye, making even the most mundane joint on the leg of an insect into a point of intense interest. The inspiration of Bonequi comes from nature, which he portraits animals with vibrant colors and scientific structures. 

The source does not include the exact software or technique the artist uses. However, his possible 3D drawing tools may be Blender, ZBrush, Lightwave, etc. He may creates the shining pink and purple bubbles, bright blue doughnuts and red-orange tubes by these tools.

Creator’s artistic sensibility manifests by capturing normal animals and transforming them into hyper-detailed psychotropic beings from another reality. His works include stag, grasshopper, tiger, elephant, scorpion, etc.

Tiger, Julian Bonequi, Digital 3D Collage, 2014

Original source here.

Siwei Xie – Project04 – String Art

sketch

//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//Project-04

var StepSize1 = 30;
var StepSize2 = 50;

function setup() {
    createCanvas(400, 300);
    background("black");
}
 
function draw() {

  //red curves on upper left
   var x1 = 0;
   var y1 = 0;
   var x2 = 300;
   var y2 = 5;

   for (var i = 0; i < 85; i += 1) {
    stroke(220, 104, 100);
    line(x1, y1, x2, y2);

    x2 -= 30;
    y1 += 30;

  }

  //orange curves on lower left
   var x1 = 0;
   var y1 = 0;
   var x2 = 60;
   var y2 = 400;

   for (var i = 0; i < 85; i += 1) {
    stroke("orange");
    line(x1, y1, x2, y2);

    x2 += 30;
    y1 += 30;
  }

  //yellow curves on lower left
   var x1 = 0;
   var y1 = 0;
   var x2 = 200;
   var y2 = 300;

   for (var i = 0; i < 85; i += 1) {
    stroke("yellow");
    line(x1, y1, x2, y2);

    x2 += 30;
    y1 += 30;
  }

  //green curves on lower right
   var x1 = 400;
   var y1 = 0;
   var x2 = 200;
   var y2 = 300;

   for (var i = 0; i < 85; i += 1) {
    stroke("green");
    line(x1, y1, x2, y2);

    x2 -= 30;
    y1 += 30;
  }

  //blue curves on lower right
   var x1 = 400;
   var y1 = 0;
   var x2 = 300;
   var y2 = 400;

   for (var i = 0; i < 85; i += 1) {
    stroke("blue");
    line(x1, y1, x2, y2);

    x2 -= 30;
    y1 += 30;
  }

  //purple curves on upper right
   var x1 = 400;
   var y1 = 0;
   var x2 = 100;
   var y2 = 5;

   for (var i = 0; i < 85; i += 1) {
    stroke("purple");
    line(x1, y1, x2, y2);

    x2 += 30;
    y1 += 30;
  }

}

I created a color scheme with a hollow diamond in the middle.

It was hard to figure out how to form the curvy lines at the beginning, but after I got the first set of lines done, the following constructions were easier.

Siwei Xie-Looking Outwards-04

Using “Apparatum” created by panGenerator in 2018.

Apparatum is a custom made apparatus with digital interface that emits purely analogue sound. I admire the project because it takes inspirations from earlier studios and musician, then gives it a modern twist. The physical form is inspired by Polish Radio Experimental Studio, which uses magnetic tape as primary medium. Musically, it is inspired by Boguslaw Schaeffer, who conceived his own visual language of symbols that conveyed the cues for sound engineers. 

The creator, panGenerator, utilizes electron (node.js) and c running on teensy 3.2 to generate  interface and micro-controller elements. Creator’s artistic sensibility manifests by borrowing from Oskar Hansen’s “Black Room.” The original design was generated more than 100 years ago, yet panGenerator is able to add touch screen and modern studio elements to create a chic apparatus. The black and white combination would easily catch consumers and artists’ eyes today.

Link to original source is here.

Siwei Xie-Project 03-Dynamic Drawing

sketch

//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//Project-03

var angle = 0;

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
	// change background color when mouse moves
    background(205, mouseX/3, mouseY/6);
    noStroke();

    // 3 black objects in background follow mouse's movements,
    // creating a dynamic triangle with changing colors
    fill("black");
    triangle(0, 0, mouseX, mouseY, 0, 480);
    triangle(mouseX, mouseY, 640, 0, 640, 480);
    rect(0,0,640,mouseY);

    // enlarge mouth when mouse moves right
    // mouth position follows mouse
    fill("pink");
    circle(mouseX,mouseY+180,mouseX/2);

    // left rotating eye
    // eye position follows mouse
    fill("white");
    push();
    translate(mouseX-80, mouseY);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 60, 60);
    pop();
    angle = angle + 3;

    // right rotating eye
    push();
    translate(mouseX+80, mouseY);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 60, 60);
    pop();
    angle = angle + 3;

    // text enlarges when mouse moves right,
    // and follows mouse's verticle position
    textSize(mouseX/8);
    textFont("old english");
    text("Monster is roaring",0,mouseY/2);
 

}

I drew a monster which follows the mouse’s movements. The monster would roar if mouse moves right, and would “stay calm” if mouse moves left.

Siwei Xie – Looking Outwards 03

Kinematics dress fits the model’s body to the largest extent, and the combination of small panels allows it to flow according to new movements. Image source: Nervous System.

I’m greatly inspired by the 3D printed Kinematics Dress that is directly generated from body scans and requires absolutely no assembly. I have some exposures to the extremely expensive “haute couture” fashion that is based on the concept of ultimate customerization. Yet today, technology can reproduce this concept more efficiently and cheaply when mass production is possible. 

In terms of the algorithms that generate the work, each dress is composed of thousands of small triangular panels that are connected by hinges. Although the material is nylon (a slightly rigid material), the body cannot feel unconformable because according to the creator, “continuous fabric allows the dress to flexibly conform and fluidly flow in response to body movement.” 

The creators are able to arrange the triangular panels in a way that artistically mimics floral print on a dress. Panels even act as look-through laces that you can find on a normal dress. The structure and cut of the dress are also aesthetically satisfying.  

Link to Kinematics Dress created by Jessica Rosenkrantz from Nervous System, 2014-2016.