Author: xkang@andrew.cmu.edu

Xiaoyu Kang-Project 06-Abstract Clock

sketch

//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-06

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

function draw(){
    background(233,217,120);
    noStroke();

    var s = second();
    var m = minute(); 
    var h = hour();

    //background circle
    fill(62,124,208);
    circle(150, 150, 270);

    //arc of second
    strokeWeight(10);
    stroke(180,230,255);
    arc(width/2, height/2, 230, 220, PI + HALF_PI, PI + HALF_PI + 2 * PI * (s/60));

    //arc of minute
    strokeWeight(20);
    stroke(147,193,255);
    arc(width/2, height/2, 170, 170, PI + HALF_PI, PI + HALF_PI + 2 * PI * (m/60));

    //arc of hour
    strokeWeight(30);
    stroke(110,148,255);
    fill(71,93,137);
    arc(width/2, height/2, 90, 90, PI + HALF_PI, PI + HALF_PI + 2 * PI * (h/12));
    
    //center circle 
    fill(233,217,120);
    noStroke();
    circle(width/2, height/2, 15);

    //marks on the sides
    fill(255);
    noStroke();
    rect(width/2 - 20/2, 0, 20, 50);
    rect(width/2 - 20/2, height - 50, 20, 50);
    rect(0, height/2 - 20/2, 50, 20);
    rect(width - 50, height/2 - 20/2, 50, 20);
}

For this project, I thought about the more modern design of watches that is designed nowadays. So I tried to keep the way of representing the time simple and easy to understand. I also tries to use some pop of color to make the image visually pleasing.

Xiaoyu Kang – Looking Outwards – 06

This projected is first presented at the exhibition at the Louchard Gallery in December, 2017. It consist of a series of small to medium sized drawings that are in relations to chaos and order. They all focuses on the idea of “directed randomness”. The drawings are all done on rice paper and watercolor. Gold refers are also used in reference to traditonal Inian art as a sacred art elements.

The project is started first by applying watercolor pigments randomly to the canvas. After the application, the author alters the rythem of the watercolor with an iron as a drawing tool. So as a result, the final drawing is presented with a combination of conscious and unbconscious act, which in the end creates a new form of order. The pigment application process is uncontrolled but the water drying process is controlled.

Xiaoyu Kang – Project 05 – Wallpaper


sketch


//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-05

var s1 = 20;
var s2 = 15;
var s3 = 10;
function setup(){
createCanvas(620, 620);
    noStroke();
}
 
function draw() {
    background(172,198,253);

//lines
    for (var a = 0; a < 620; a += 80){
    	fill(235,226,158);
        rect(a + 65,0,10,620);
    }
   
    //clouds
    for (var y = 0; y < 620; y += 4) {
        for (var x = 0; x < 620; x += 4) {
        	fill("white");
            ellipse(y * s1 + (s1 / 20) + 30, x * s1 + (s1 / 20) + 30,s1,s1);
            ellipse(y * s1 + (s1 / 20) + 15, x * s1+ (s1 / 20) + 30,s1,s1);
            ellipse(y * s1 + (s1 / 20) + 35, x * s1 + (s1 / 20) + 35,s1,s1);
            ellipse(y * s1 + (s1 / 20) + 25, x * s1 + (s1 / 20) + 38,s2,s2);
            ellipse(y * s1 + (s1 / 20) + 45, x * s1 + (s1 / 20) + 32,s2,s2);
        }   
    }
    
    //yellow stars
    for (var y = 0; y < 620; y += 4) {
        for (var x = 0; x < 620; x += 4) {
        	fill(243,246,202);
        	quad(y * s1 + (s1 / 20) + 25, x * s1 + (s1 / 20) + 72, y * s1 + (s1 / 20) + 29, x * s1 + (s1 / 20) + 66, y * s1 + (s1 / 20) + 33, x * s1 + (s1 / 20) + 72, y * s1 + (s1 / 20) + 29, x * s1 + (s1 / 20) + 78)
        }
    }
}

For this project, I was inspired by the wallpaper in my bedroom when I was young. I remembered that it consists of many white clouds printed over a blue canvas. So I tried to recreate that with some additional decorations to make the drawing look more diverse.

 

Xiaoyu Kang – Looking Outwards – 05

The name of the project is called Everyday: December – 2016. It is a series of digital artwork created by Eugene Golovanchuk, who is a self taught 3D digital concept artist also known as Skeeva. 

The project consists of thirty one drawings that are created through digital medium, and the drawings are created one per day in the month of December in 2016.

The entire project focused on the idea of dark surrealism.  However, each one of these drawings in the project is constructed based on different topics, ranging from environmental design to installation design. Since all thirty one drawings are drastically different, I only picked two images that represents the diversity in Golovanchuk’s style.

Xiaoyu Kang – Project 04 – String Art


sketch

//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-04

var color = 10;
function setup() {
    createCanvas(400,300);
}

function draw() {
	background("black");
	for (var i = 0; i < width; i += 12){
	//curve set 1
        stroke(255,200 + i, mouseX);
        strokeWeight(1);
        line(i + mouseX,0, 0,300);
        line(i - mouseX,0,400,300);
    //curve set 2
        stroke(255,100 + i,200);
        strokeWeight(1);
        line(0,0,i + mouseX,400);
        line(400,0,i - mouseX,400);
    }
    for (var i = 0; i < width; i += 15){
    //curve set 3
        stroke(10,mouseX,255);
        strokeWeight(1);
        line(0 - i, height - mouseX, width + 1, i + mouseY);
        line(0 - i, height - mouseX, width + i, i - mouseY);
    //curve set 4
        stroke(10,mouseY,255);
        strokeWeight(1);
        line(width + i, height - mouseX, 0 - 1, i + mouseY);
        line(width + i, height - mouseX, 0 - 1, i - mouseY);
    }

}

For this project, I attempted weave different sets of strings together to create a complete image. I tried to link the string art’s color and position with the position of the mouse. So as the mouse moves, the strings’ position will be influenced by the mouse and will change color.

Xiaoyu Kang – Looking Outwards – 04

27_lady-4

The Lady’s Glove is an experimental instrument that is developed by Laetitia Sonami first in 1991. The first glove is made from a kitchen glove and is glued with five hall effect transducers on its finger and a magnet on its right hand. As the fingers touch the magnet, the extruding voltages were converted into MIDI signals and which is then converted to synthesizers and samplers.

The later generation of the Lady’s glove incorporated much more elements such as pressure pad, resistive strips and ultrasonic receivers. It is made to create movement without spatial reference. Sonami had performed many times with the glove. The glove will capture the slightest movement as she was dancing and create sound. So in her performances, the Lady’s Glove helps to create an art show that her dance moves shapes the music and create a scene that is pleasing in both the musical and visual aspect.

Xiaoyu Kang – Project 03 – Dynamic Drawing


sketch

//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-03

var cir = 20;
var angle = 0;

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

function draw() {
//background color change as mouse moves down
background(400-mouseY,245,255);
//sun
    //sun shows when the mouse moves to the top of the canvas
     fill("yellow");
    if (mouseY<=200) {
        fill(255,242,122);
        ellipse(50,20,200,200); 
        triangle(10,100,50,100,30,200);
        triangle(40,60,100,30,150,200);
        triangle(60,70,30,0,230,60);
        triangle(50,20,0,0,200,0);
    }
    //sun disappears
    if (mouseY>200) {
        fill(400-mouseY,245,255); 
    }
//bubbles
    fill("white");
    //bubble gets bigger as they move up
    ellipse(50,640-mouseY-30,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(100,640-mouseY+230,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(150,640-mouseY+70,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(270,640-mouseY+150,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(360,640-mouseY,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(300,640-mouseY+370,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(470,640-mouseY+270,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(160,640-mouseY+490,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(530,640-mouseY+520,cir+0.1*mouseY,cir+0.1*mouseY);
//jelly fish body
    noStroke();
    //color change on body
    fill(190,900-mouseY,900-mouseY);
    //moves vertically
    ellipse(240,mouseY,180,140);
    ellipse(180,mouseY+60,70,50);
    ellipse(240,mouseY+70,70,50);
    ellipse(300,mouseY+60,70,50);
//jelly fiish eyes
    noStroke();
    fill("white");
    ellipse(190,mouseY,30,30);
    ellipse(290,mouseY,30,30);
    fill("grey");
    ellipse(190,mouseY,20,20);
    ellipse(290,mouseY,20,20);
//jelly fish blush
    fill(224,196,218);
    ellipse(190,mouseY+25,40,10);
    ellipse(290,mouseY+25,40,10);
    
}

da

For this project, I was inspired by how the color of sea water changes from light to dark as it gets deeper. So I tried to create an image of a sea creature swimming in the ocean following the movement of the mouse. When the mouse moves down, the background color gets darker and some bubbles appears. When the mouse moves up the sun appears.

Xiaoyu Kang – Looking Outwards – 03

The Suture Chair is developed by Andrew Kudless in 2005. The chair itself is an extension of his “Honeycomb Morphologies/Manifold research project” that a double layered honeycomb system is used in designing the chair.


The honeycomb structure allows the chair to be both flexible and stable in shape, the chair itself however is able to rock in different directions and seating configurations. The exterior shape of the chair is designed based on the idea of suture curve, which is the same curve that is used to put balls such as the tennis ball together. The rings that made up the structure of the chair is known to have the minimal surface known as a Enneper surface spans, which also allows the chair supporting structure to be the thickest at the edge and the thinest at the center. To balance out the structural strength, a higher density of honeycomb members are put in the center of the chair, which also turns out to require the least structural depth in each of the cell units.

Xiaoyu Kang – Project 02 – Variable Face


sketch

/*
Xiaoyu Kang
Section B
xkang@andrew.cmu.edu
Assignment-02-B
*/
var circles = 200;
var faceW = 280;
var faceH = 300;
var hairL = 200; 
var eyes = 30;
var backC = 100;

function setup() {
    createCanvas(640, 640);
    background(242,180,180);
}
function draw() {
	var hairW = faceW + 90;
    noStroke();
//background circles
    fill(158,37,circles);
    ellipse(30,80,backC,backC);
    ellipse(100,320,backC,backC);
    ellipse(300,60,backC,backC);
    ellipse(530,30,backC,backC);
    ellipse(540,580,backC,backC);
    ellipse(600,280,backC,backC);
    ellipse(50,520,backC,backC);
//hair
    fill(221,184,85);
    ellipse(320,310,hairW,faceH + 90);
    rect(320 - hairW * 0.5,310,hairW,hairL);
//face
    fill(242,232,221);
    ellipse(320,320,faceW,faceH);
//hair
    fill(221,184,85);
    arc(320, 200, 280, 80, 180, PI + QUARTER_PI, CHORD);
//neck 
    fill(242,232,221);
    rect(280,440,80,80);
//cloth
    fill(229,128,circles);
    rect(270,490,100,20);
    ellipse(320,640,400,280);
//ear
    fill(242,232,221);
    ellipse(320 - faceW * 0.5,320,50,90);
    ellipse(320 + faceW * 0.5,320,50,90);
//eyes
    fill("grey");
    ellipse(320 - 60,300,eyes,eyes);
    ellipse(320 + 60,300,eyes,eyes);
    fill("white");
    ellipse(320 - 70,290,10,10);
    ellipse(320 + 50,290,10,10);
//eyebrowsL
    fill(214,179,85);
    strokeWeight(10);
    beginShape();
    vertex(230,270);
    vertex(240,275);
    vertex(270,270);
    vertex(280,260);
    endShape(CLOSE);
    fill(214,179,85);
    strokeWeight(10);
    beginShape();
    vertex(410,270);
    vertex(400,275);
    vertex(370,270);
    vertex(360,260);
    endShape(CLOSE);
//nose
    fill(195,154,133);
    strokeWeight(10);
    beginShape();
    vertex(295,340);
    vertex(310,350);
    vertex(330,350);
    vertex(345,340);
    endShape(CLOSE);
//lips
    fill(216,135,128);
    strokeWeight(10);
    beginShape();
    vertex(270,380);
    vertex(290,400);
    vertex(350,400);
    vertex(370,380);
    endShape(CLOSE);
}
function mousePressed() {
	circles = random(100,250);
    faceW = random(260,300);
    faceH = random(280,320);
    hairL = random(180,380);
    eyes = random(20,35);
}

I mainly focused on writing a code that will allow shape changes and color changes. The size of the person’s face are made changeable by clicking the mouse. And since the size of the hair is based on the size of the face, the hair changes as the face changes. The size of the person’s eyes also varies. I also made the color of both the clothings and the circles in the background changeable. The color varies in a range of different kind of red and purple.

Xiaoyu Kang – Looking Outwards – 02


Marcin Ignac create a design project at the Copenhagen Institute of Interaction Design in 2011. The project is called “Sea Transport Network,” in which Ignac took inspiration from traditional route of sea transport and created a bunch of light path that he stated to be traceable based on a real GPS coordinate system . 
To generate a piece of art from the sea transport network, Ignac used a series of sea transport data and transformed them into visualization. In the visualization Ignac marked out the important trading cities in a relatively brighter spot and used strand of light to connect those spots. And for the final result, he used computational technology to create a series of videos that shows the flow of transport around the earth. After he hides the earth, all that is left is a sphere that is formed by light spots and stands that simulates the sea transport network.