Author: xkang@andrew.cmu.edu

Xiaoyu Kang – Looking Outwards – 12

For the first project, I looked at “Shadow” by Scott Snibbe in 2002. This project is done by projecting a white rectangular light onto an object or person, which would cast a shadow on a wall. The projection is generated as soon as the person steps between the projector and the wall. This allows the people to be able to create cinema with the movement of their body and examine their shadow separate from their bodies. Even if the person moves away from the projector, the record of the project would be played over and over again until it fades slowly back into the white rectangle. 

This is an interactive object that captures audiences’ act and generates cinematic art through the use of computational technologies. Since no group of people would create the same combination of movements, the art created would be different every single time.

The other project I looked at is “Line segments space” by Kimchi and Chips studio. It is exhibited in Seoul Art Space Geumcheon in 2013. The entire project is created in combination of nylon strings and digital emulsion. The strings act as positive elements in a dark room to create a series of abstract and undefined negative space. 

A 2D canvas is reduced from surface piece and then into line segments. And the line segments then construct a 3D volume. Light is casted onto the lines to articulate digital matters. 

Xiaoyu Kang – Project 11 – Generative Landscape


sketch

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

var star = [];
var tree = [];
var terrainSpeed = 0.0008;
var terrainDetail1 = 0.014;
var terrainDetail2 = 0.01;

function setup() {
    createCanvas(480, 400);
    frameRate(10);
    for (var i = 0; i < 15; i++){
        var starX = random(width);
        var starY = random(0, height/2);
        star[i] = makeStar(starX, starY);
    }

    for (var i = 0; i < 7; i++){
        var treeX = random(width);
        var treeY = 330;
        tree[i] = makeTree(treeX, treeY);
    }
}

function draw() {
    background(0);
    displayStars();
    drawMountain1();
    drawMountain2();
    drawGround();
    drawMoon();
    displayTree();
}

function drawMountain1(){
	//draw background mountain
    noStroke();
    fill(21, 53, 82); 
    beginShape(); 

    for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail1) + (millis() * terrainSpeed);
      var y = map(noise(t), 0, 1.8, 60, 350);
      vertex(x, y);
    }

    vertex(width, height);
    vertex(0, height);
    endShape();
}

function drawMountain2(){
	//draw background mountain 2
    noStroke();
    fill(63, 94, 116); 
    beginShape(); 

    for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail2) + (millis() * terrainSpeed);
      var y = map(noise(t), 0, 1, 120, 250);
      vertex(x, y);
    }

    vertex(width, height);
    vertex(0, height);
    endShape();
}

function drawGround(){
	//draw the ground plane
    noStroke();
    fill(200); 
    beginShape(); 

    for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail2) + (millis() * terrainSpeed);
      var y = map(noise(t), 0, 2, 350, 300);
      vertex(x, y);
    }

    vertex(width, height);
    vertex(0, height);
    endShape();
}

function drawStar(){
	//draw the shape of the star
    noStroke();
    fill(210, 193, 120);
    push();
    translate(this.x, this.y);
    ellipse(20, 20, 3, 3);
    pop();
}

function makeStar(starX, starY){
    var makeStar = {x: starX,
                y: starY,
                speed: -2,
                move: moveStar,
                draw: drawStar}
    return makeStar;
}

function moveStar(){
	//give the star speed
    this.x += this.speed;
    if(this.x <= -10){
        this.x += width;
    }
}

function displayStars(){
    for(i = 0; i < star.length; i++){
        star[i].move();
        star[i].draw();
    }
}

function drawTree(){
	//draw the tree
    noStroke();
    fill(50);
    push();
    translate(this.x2, this.y2);
    rect(-10, -20, this.treeWidth, this.treeHeight);
    rect(0, 0, 5, 25);
    pop();

}

function moveTree(){
	//give the tree speed
    this.x2 += this.speed2;
    if(this.x2 <= -10) {
        this.x2 += width
    }
}

function makeTree(locationX, locationY){
    var makeT = {x2: locationX,
                y2: locationY,
                treeWidth: 25,
                treeHeight: random(20, 40),
                speed2: -6,
                move: moveTree,
                draw: drawTree}
    return makeT;
} 

function displayTree(){
    for (var l = 0; l < tree.length; l++){
        tree[l].move();
        tree[l].draw();
    }
}
function drawMoon() {
    fill(210, 193, 120);
    ellipse(370, 50, 60, 60);
    fill(230, 213, 140);
    ellipse(370, 50, 55, 55);
    fill(240, 223, 150);
    ellipse(370, 50, 50, 50);
}

For this project, I planed to create a landscape of snowy mountains at night. So I created some stars and a moon in the background, and I created two mountains with different color darkness to show the depth. In the front, I create a white snow covered ground plane and some trees growing on top. The position of the stars and trees are randomly generated, and I made the speed of the stars slower than other elements since that is what naturally happens in real life. 

Xiaoyu Kang – Looking Outwards – 11

This is an installation done by Mimi Son from KIMCHI and CHIPS, which is an art studio Seoul. The installation is called Light Barrier Third Edition, and it is presented in Asian Cultural Centre at Gwangju Korea in 2016. 

In this edition of installation, 8 architectural video projectors are split into 630 sub -projectors using the structure on concave mirrors, and each mirror’s backing structure is computationally generated so that they collaborate as a single image in the air. A total of about 16,000,000 pixels are calibrated and so that the light beams can be merge in the haze to create an image in the air. In addition to the visual elements, 42 audios are added to create a sound field. 

The installation attempts to exploit the ambiguity and non-conformities between materials and non-materials, reality and illusion, existence and absence. It focused on the theme of birth, death, and rebirth. The entire installation is inspired by impressionism paintings that the images arise from the canvas and became a drawing in the air. 

I found this project to be interesting because it combined the idea of traditional impressionism art with computational technology to create a cohesive project. The project is not only visually pleasing but also takes visitor’s experiences into account.

Xiaoyu Kang – Project 10 – Sonic Sketch

sketch

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

var rainThunder;
var waterSound;
var catMeow;
var catGroom;
function preload() {
    rainThunder = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/rain.wav");
    waterSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/water-1.wav");
    catMeow = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/catmeow.wav");
    catGroom = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/catgroom.wav")
}

function setup() {

    createCanvas(400, 300);
    useSound();
}


function soundSetup(){
    rainThunder.setVolume(1);
    waterSound.setVolume(1);
    catMeow.setVolume(2);
    catGroom.setVolume(2);
}

function draw() {
    background(200);
    noStroke();
    //wall
    fill(250, 230, 230);
    rect(0, 0, 400, 200);
    //floor
    fill(173, 144, 115);
    rect(0, 200, 400, 100);
    //window
    fill(255);
    rect(100, 20, 200, 150);
    fill(26, 64, 111);
    rect(110, 30, 180, 130);
    //cloud
    fill(150);
    ellipse(165, 80, 30, 30);
    ellipse(190, 60, 50, 50);
    ellipse(230, 70, 40, 40);
    ellipse(205, 85, 30, 30);
    //rain
    fill("blue");
    ellipse(170, 130, 10, 10);
    ellipse(220, 140, 10, 10);
    ellipse(240, 100, 10, 10);
    ellipse(190, 120, 10, 10);
    //cat
    fill(255);
    ellipse(350, 220, 30, 30);
    ellipse(360, 260, 50, 60);
    ellipse(350, 282, 50, 10);
    ellipse(380, 280, 70, 5);
    ellipse(335, 222, 8, 8);
    triangle(353, 195, 348, 210, 362, 212);
    triangle(343, 195, 340, 210, 354, 210);
    fill(50);
    ellipse(345, 215, 5, 5);
    //cup
    fill(200);
    rect(150, 240, 20, 35);
    ellipse(160, 275, 20, 10);
    fill(150, 170, 255);
    ellipse(160, 240, 20, 10);

    }

function mousePressed(){
    //sound of rain when touch the cloud
    if (mouseX >= 110 & mouseX <= 290 && mouseY >= 30 && mouseY <= 160){
        rainThunder.play();
    }
    //sound of water when touch the cup
    if (mouseX >= 150 & mouseX <= 170 && mouseY >= 240 && mouseY <= 275){
        waterSound.play();
    }
    //sound of cat meowing when touch the head of the cat
    if (mouseX >= 320 & mouseX <= 380 && mouseY >= 190 && mouseY <= 250){
        catMeow.play();
    }
    //sound of cat grooming when touch the body of the cat
    if (mouseX >= 335 & mouseX <= 385 && mouseY >= 230 && mouseY <= 290){
        catGroom.play();
    }
}

For this image, I created an image of a cat inside a house on a rainy day. I think it would be interesting if different sounds can be activated when the user clicks on different objects. If the user clicked on the cloud, the sound of a thunder storm would start and goes on for two minutes. If clicks on the cup a sound of water would be activated. And clicking the head or the body of the cat would activate two different sounds.

Xiaoyu Kang – Looking Outwards – 10

The project that I looked at is named Data Peluda. It is a performance done by Jorge Chikiar and Luis Conde at Roseti in Buenos Aires, on August 11, 2017. Jorge Chikiar is a composer and sound artist from Argentina. He has worked at many places such as Colon Theater, CETC, and Michell  Maccarone’s Art Gallery. He has been experimenting with different ways to present music for many years, and many of his project involves the use of different kinds of computer technologies.

This performance itself used a combination of saxophone and computer technologies. The music that the audience heard is the sound of the saxophone modified electronically by the computer. The processed sound turns out to be a combination of classic instrumental music and contemporary music. The most impressive part of this performance is that the music is produced live, which means that the process of modifying the saxophone music happened at the same time as the saxophone is played. I found this to be a great example of how computers are used in live music performances.

Xiaoyu Kang – Project 09 – Computational Portrait

sketch

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

var baseImage;

function preload() {
	//loadimage
    var imageURL = "https://i.imgur.com/WFLOSwy.jpg";
    baseImage = loadImage(imageURL);
}

function setup() {
    createCanvas(500, 320);
    background(0);
    baseImage.loadPixels();
    frameRate(150);
}

function draw() {
	//define location
    var x = random(width);
    var y = random(height);
    //define color
    var ix = constrain(floor(x), 0, width - 0.1);
    var iy = constrain(floor(y), 0, height - 0.1);
    var ColorXY = baseImage.get(ix, iy);

    //draw circle
    noStroke();
    fill(ColorXY);
    ellipse(x, y, 6, 6);

    //draw square
    noStroke();
    fill(ColorXY);
    rect(x + random (-2, 2), y + random (-2, 2), 3, 3);

    //draw bigger circle when mouse is pressed
    var ColorMouse = baseImage.get(mouseX, mouseY);
    if (mouseIsPressed){
        fill(ColorMouse);
        ellipse(mouseX, mouseY, 10, 10);
	}
}

For this project, I used my friend Claire’s photo to generate the portrait. I used an combination of circle and suqare shapes appearing at random location to create the final image. I also wrote the code that when the mouse clicks, a bigger circle appears at the mouse location.

       

 

Xiaoyu Kang – Looking Outwards – 09

For this assignment, I looked at Xu Xu’s looking outward 05: 3D computer graphics. She looked at the work of Alexey Kashpersky, who is a 3D digital artist. Kashpersky’s work mostly focused on CG art and 3D modeling and printing.

For this particular project, by modeling a series of virus, he attempted to raise people’s awareness through his artwork. He created a beautiful model of Hepatitis C to remind people the deadliness of virus despite their visually pleasing appearance. Through his artwork, he tried to make people be aware of the danger of HCV infection and bloodborne pathogens.

In Xu’s looking outward, she stated how she really appritiate the cleaness of Kashpersky’s model and how she thinks the VR technology really helps to create a sense of realism. I agree with her that the artist is admirable in putting a lot of effort into makeing the model perfect. The result product definitly captures people’s attentation. But I also think the artist’s intention of wanting to help people with his artwork is admirable and how he actually achieved his goal of creating awareness through his work. 

Xu Xu’s original post: https://courses.ideate.cmu.edu/15-104/f2019/2019/09/24/xu-xu-looking-outwards-05/

Project website: https://kashpersky.com/hepatitis-c-virus

Xiaoyu Kang – Looking Outward – 08

The artist Rachel Binx introduces herself as an only child who grew up in Mexico. And her work started with her dream of becoming a world traveler by herself when she was younger. She would handwritten the location CSV of every city she travels to and tracted that information for years. What she did with the data was that she generated an image from all the places that she has been to through programming. She started collaborating with a jewelry company that use shapes that are generated from places to make jewelry, and the idea of the whole project is to take people’s experiences as data points and visualize them, thus summarizing someone’s life through the medium of a map. 

As the first project became successful, she started to create more products. For the people who didn’t move as much in their lives, she connects the streets that people walk every single day to generate patterns and creates them into jewelry. She also incorporated maps into other items such as skirts and pillows. 

In addition, she also did projects that used programming to document her life. For example she programmed her laptop to take pictures whenever she uses her laptop in a new environment. All of her works focused on data journaling, either through automated data or memory. What she was trying to do is to take the data points that are important and personal to people and turn the data points into something visual and physical.

The speaker talks about her project by connecting her work to her own stories and experiences. In this way, she made the lecture much easier to understand and much more relatable since a lot of her experiences are commonly shared among many people.

https://rachelbinx.com

Xiaoyu Kang – Project 07 – Curves


sketch

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

var angles = 0;
function setup() {
    createCanvas(480, 480);
}

function draw() {
    background(0);
    stroke(mouseX, 220, mouseY);
    translate(width / 2, height / 2);
    // all the curves rotate at the same speed
    rotate(radians(angles));
    angles += (mouseY/30);
    drawCruciform(); 
    drawAstroid();
    drawEpitrochoid();
}

function drawCruciform() {
    // http://mathworld.wolfram.com/Cruciform.html
    push();
    noFill();
    strokeWeight(1);

    
    //creates the cruciform
    beginShape();
    var a = map(mouseX, 0, width, 0, 300);
    var b = map(mouseY, 0, height, 0, 300);
       
    for (var i = 0; i < 800; i++) {
        var t = map(i, 0, 150, 0, TWO_PI);
        var x = a * 1 / (cos(t));
        var y = b * 1 / (sin(t));
        vertex(x, y);
    }
    endShape();
    pop();
}

function drawAstroid() {
    // http://mathworld.wolfram.com/Astroid.html
    push();
    noFill();
    strokeWeight(1);
    
    //draw astroid
    beginShape();
    var a = map(mouseX, 0, width, -300, 300);

    for (var i = 0; i < 500; i++) {
        var t = map(i, 0, 150, 0, TWO_PI);
        var x = 3 * a * cos(t) + a * cos(3 * t);
        var y = 3 * a * sin(t) - a * sin(3 * t);
        vertex(x, y); 
    }
    endShape();
    pop();
}

function drawEpitrochoid() {
    // http://mathworld.wolfram.com/Epitrochoid.html
    push();
    noFill();
    strokeWeight(1);
    
    //draw epitrochoid
    beginShape();
    var a = map(mouseX, 0, width, -100, 100);
    var b = map(mouseX, 0, width, -100, 200);
    var h = map(mouseY, 0, height, -300, 200);


    for (var i = 0; i < 600; i++) {
        var t = map(i, 0, 150, 0, TWO_PI);
        var x = (a + b) * cos(t) - h * cos(((a+b)/b) * t);
        var y = (a + b) * sin(t) - h * sin(((a+b)/b) * t);
        vertex(x, y); 
    }
    endShape();
    pop();
}

For this project, I really want to create curves that are diverse in shape as the mouse moves around. I picked three curves that are all very different in shape an as the mouse moves they turn into patterns with different level of complexity. Also to add some more visual elements, I changed the color setting so that as the mouse moves the color changes as well.

Xiaoyu Kang-Looking Outwards-07



Every IP, 1999

This project is called 1:1. It is a project that was created in 1999 as a collection of database. The database was created to eventually contain the addresses of every website in the world. The data was collected through sending out a crawler, which will determine if there is a website at a specific numeric address, which is called IP and range between 0.0.0.0 and 255.255.255.255. The crawler also determines whether the website is open to public or not. When this project first started in 1999, around two percent of the website, which is around 186100 sites were included in the database. However, the internet world in changing at a speed faster than anticipated in 2001 so the first version of this project is out of date.

1:1 (2) is then created as a continuous project based on the first version. This project consists of the database of the website addresses generated between 2001 and 2002. This second project also includes interfaces that compare the data between the first and the second database.

Every IP, 2001