Kai Zhang – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Kai Zhang-Looking Outwards-12

Image result for limbo

For this weeks Looking Outwards, I’m to show two examples of the platform games that’s going to be helpful as for some inspiration for the project. First of which is called Limbo, which is puzzle-platform video game developed by independent studio Playdead, available on both mobile and PC platforms. In the game, the player guides an unnamed boy through dangerous environments and traps as he searches for his sister. The developer built the game’s puzzles expecting the player to fail before finding the correct solution. Playdead called the style of play “trial and death”, and used gruesome imagery for the boy’s deaths to steer the player from unworkable solutions.

I really enjoyed playing this game, not only because its unique gameplay experience, but also the aesthetic choices of the scenes, characters and objects, that make the game really go well with its atmosphere. There’s very limited use of color, in fact, there nearly isn’t any other color than black and white in this game. All the objects are made up by silhouettes, which is very appealing to me.

Here is a YouTube video for the game trailer from the developer.

Image result for subway surfers

Another game is called Subway Surfers, an endless runner mobile game co-developed by Kiloo and SYBO Games, private companies based in Denmark, which is available on all mobile platforms and PC. Players take the role of young graffiti artists who, upon being caught in the act of applying graffiti to a metro railway site, run down railroad tracks to escape from an inspector and his dog. As they run, they grab gold coins out of the air while simultaneously dodging collisions with trains and other objects, and can also jump on top of the trains to evade capture. Special events, such as the Weekly Hunt, can result in in-game rewards and characters.

Here’s a gameplay video on YouTube.

From the gameplay, we can see the play navigate the runner using mouse positions, while in mobile game it’s using swiping gestures. As people develop games, they have to think about the best way people control their subjects – mouse, controller, keyboard, or their fingers. So I believe we should think about how we can use different kinds of interaction techniques to develop the game so it works best with the current platform.

Also the game comes with reward system, which also accompanies with sound effects, as they usually provide some more positive feedback as people are playing the game. Perhaps we can also incorporate that in the game we are going to develop.

Kai Zhang-Looking Outwards-11

DEADMAU5

Image result for deadmau5

Talking about computational music, one of the most hyped music type EDM (electric dance music) is definitely worth mentioning. And Deadmau5 is one of the EDM artists that I love the most. Here’s one of his latest release:

EDM is a music form that’s sythesized in computer using various music generating programs. In these programs, there are many different tools that can generate different sound effects as well as editing existing sound files. For this perticular sound type, there are usually repetitive beats sythesized and played along with back tracks. Often times, vocals are also involved that adds to the richness of the music piece. In Deadmau5’s music, usually there are very long repetitive elements but slowly more and more elements are added along with the change of flow.

Music taste is rather subjective, so what I want to highlight is his workflow. In the foloowing YouTube video, Deadmau5 is streaming his composition on a track. And that’s also what I appreciate about him, which is sharing the working process with his audience. Ableton Live is one of his many weapon in the toolkit that powers his music pieces. As in the video, he’s experimenting with all types of sound and see how they’re mixed in a harmonic style. And the tools are also very powerful of doing all kinds of gestures to the play of sound that makes into a masterpiece.

I also learned about making EDMs in one of the music department courses. And what I appreciate about his ideology about sound is that everyone can make very good music. EDM opens up unlimited possibilities that even if you can’t play any instrument, you can still make a musician.

Kai Zhang-Project-11-Composition

sketch

//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-11


var ttl = []; //turtle array
var strW = 3; //stroke weight of turtles
var num = 20;
var col = 0;



function setup() {
    createCanvas(400, 400);
    background(0);
    strokeJoin(MITER);
    strokeCap(PROJECT);


    for (var i = 0; i < num; i++) {
        ttl.push(makeTurtle(200, 200));
        ttl[i].penDown();
        ttl[i].right(360 / num * i);
    }   
}

function draw() {
        var dire = random(-45, 45);
        var dist = random(0, 2.5);
        if (col < 200) {
            col += random(0, 0.5);
        }
        var rest = random(0, 5);

    for (var i = 0; i < num; i++) {
        ttl[i].setColor(col);
        ttl[i].setWeight(strW);
        ttl[i].forward(dist);
        ttl[i].right(dire);

    }

}


function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

For this project, I’ve got inspiration from the Kaleidoscopes feature of the game Monument Valley 2 when you customize all your path and it shows up in a rotational symmetry manner. So in my code, I set the turtle to go from the center of the canvas and to several different directions. All the initial directions are evenly distributed along the 360 degrees. Also, the paths of all turtles are completely identical. As they start walking, I’m assigning random directions and random stepping lengths for the turtles so they’re walking in a crooked style. But because they’re all going for the same paths, the result can be really interesting. I used different numbers of turtles, and the path started off being really dark and slowly turn white, which is an aesthetic choice that adds to the “vibrance“ of the imagery.

3 turtles

4 turtles

6 turtles

8 turtles

20 turtles

Kai Zhang-Looking Outwards-10

Katherine Bennett

For this week’s looking outwards, I’m going to talk about an artist called Katherine Bennett. Katherine Bennett is a media artist. She utilizes sound and light to represent people, relationships and activities that happen in other spaces and times. She creates a delicate presence of these entities, mapping it over time and making it visceral. She utilizes programming and physical computing to create interactive and responsive multichannel installations and narratives. She earned her MFA from The School of the Art Institute of Chicago, in Art & Technology Studies. She has won several grants. Her work has been featured in many exhibitions nationally and internationally.

One of my favorite works of her is the Memory Capsules. Memory Capsules is a series where organic structures enshroud personal memories, protecting them from vanishing. Big P is a small felted structure that houses a small LCD screen, WiFi-enabled micro-controller, breathe sensor and LED’s along with custom software. When a puff of air breathes on the structure, a memory is stirred and appears on the screen. As our own breath sustains us, our memories sustain us and impact our identity.

This is a rather simple device, nor any of the codes are anyhow hard to generate. But I really appreciate the ideology of putting thought into how the most gentle interactive actions can be stimulating the most feelings. Memory Capsules seeks to nurture those memories by preserving them. As it’s said in the description: “technology’s role in our culture is called into question, as different algorithms curate and weave different narratives, while erasing others. These narratives may be erroneous. Is technology a “true” mirror? How much does it shape us with what we remember? ”

The narrative of this single object is woven by the nuances of the sensibilities we have and how the technology is informed in a much more reflective manner.

Memory Capsules

Memory Capsules: Big P (2015)
Felt, silk, breath sensor, LED’s, micro-controller, WiFi, LCD, custom software
5 x 5 x 4 inches

Katherine’s personal website: http://www.katherinebennett.net/index.html

Kai Zhang-Project-10-Landscape

sketch

//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-10

var bcs = []; //bloodcells
var bcpositionX = [];
var bcpositionY = [];
var bcspeed = [];
var bcsizing = [];
var bccolor = [];

var vesselDetail = 0.002;
var vesselSpeed = -0.001;

function setup() {
    createCanvas(480, 400);
    colorMode(HSB, 100);
}

function draw() {
    background(240, 70, 40);

	//vessel fluid
	for (var i = 0; i < 480; i += 20) {
	    push();
	    stroke(255, 70, 55);
	    fill(255, 60, 55);
	    strokeWeight(3);
		beginShape();
	    for (var q = 0; q < width; q++) {
	        var t = (q * vesselDetail) + (millis() * vesselSpeed);
	        var y = map(noise(t), 0,1, i, i + 30);
	        vertex(q, y);
	    }
	    endShape();
	    pop();
	}


    noStroke();
    //assigh all the variables
    for (var i = 0; i < 80; i ++) {
        bcpositionX.push(random(-200, 600));
        bcpositionY.push(random(140, 260));
        bccolor.push(random(80, 100));
        bcsizing.push(random(15,35));
        bcspeed.push(random(2, 5));
    }

    //draw the bloodcells
    for (var i = 0; i < 80; i ++) {
        bcs[i] = makeBloodCell(bcpositionX[i], bcpositionY[i], bccolor[i], bcsizing[i]);
        bcpositionX[i] += bcspeed[i];
        bcs[i].draw();
        if (bcpositionX[i] > 800) {
            bcpositionX[i] = -200;
        }
    }

    //masking
    stroke(255, 70, 60);
    strokeWeight(7)
    fill(255, 30, 20);
    rect(-20, -20, 520, 160);
    rect(-20, 260, 520, 160);

	

}


//function to draw each bloodcell
function bcDraw() {
    fill(255, 80, this.bccolor,);
    ellipse(this.bcx, this.bcy, this.bcsize);

    fill(255, 80, this.bccolor - 10,);
    ellipse(this.bcx, this.bcy, this.bcsize * 0.6);
}

//function to create a bloodcell object
function makeBloodCell(x, y, col, size) {
    var bc = {"bcx": x, "bcy": y, "bccolor": col, "bcsize": size};
    bc.draw = bcDraw;
    return bc;
}

For this week’s project “landscape”, instead of creating a normal type of landscape that passes by, I decided to do a microscopic approach – blood cells, as it’s a perfect demonstration of the effect showing different blood cells of difference sizes and move at different speeds across the vessel.

In the code, I’ve used the object “bc” which represents blood cells, assign it with different sizes, colors, and speed. I’ve also put a background fluid flow to increase the fidelity of the imagery.

I’ve used a reference image I found online, and I also did a sketch to represent the logic of the codes.

Image result for blood cells

image URL: https://immuno-oncologynews.com/2017/03/13/erytech-presents-new-data-employing-red-blood-cells-cancer-vaccines/

Kai Zhang-Looking Outwards-09

This week for Looking Outwards, I looked through LIngfan Jiang’s post for Looking Outwards 07 about an interactive art installation. Here’s his decription and reflection of the project below.

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.

I really appreciate his reflection of this art installation from a perspective of an architect’s point of view. And for a person of the same identity, I do also have many of the same feelings when I see this project.

And I also see something else. Other than the aesthetic aspect of the project, I also see how this is valuable to the public. Often times we have nothing more to do with the architectural or many of the art installtion than being able to snap photos and post them to Instagram. But this kind of the work enables the possibility for the public to become part of the work. By using technology, everyone is able to join the party and become the composer of the great piece. Also, the form of interaction has a decent amount of capacity for everyone who wants to do the work. It creates a virtual connection between people and encourages the interaction between not only people to technology, but people with each other. And I think this the temperature of the technology driven by people with such ambitions to bring everyone together.

Kai Zhang-Project-09-Portrait

sketch

//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-09

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/ABkk19M.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(500);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    strokeWeight(3);
    stroke(theColorAtLocationXY);
    line(px + 8, py - 8, px - 5, py + 5);
}

So for this project of mine, I tried to think of how I would use graphite to quickly sketch a portrait in the shortest amount of time possible. Usually I would use very dense diagonal lines to do that. So in my code, the “drawing stroke” I chose is a line of roughly 18 pixels long and in 45 degrees with a stroke weight of 3. The stroke weight should be small to achieve a higher resolotion. The subject of the portrait is Lingfan Jiang, and I took this photo for him when he was struggling with his studio work. In the end, I increased the frame rate to 500 frames per second to generate the resulte much faster.

Following are the origianl photo and three stages of the resolution.

Kai Zhang-Looking Outwards-08

Chris Sugrue – How Real Do These Pixels Feel?

Chris Sugrue holds a Masters of Fine Arts in Design and Technology from Parsons School of Design. She has worked as a creative engineer at the Ars Electronica Futurelab where she was the lead developer for a stereoscopic interactive dance performance with artist and choreographer Klaus Obermaier. Sugrue was the recipient of a year-long fellowship at the Eyebeam Art and Technology Center in New York, and has held artist residencies with Hangar in Barcelona, La Casa De Velázquez in Madrid and Harvestworks in New York.

Chris is an artist and programmer developing interactive installations, audio-visual performances and experimental interfaces. Her works experiment with technology in playful and curious ways and investigate topics such as artificial life, eye-tracking and optical illusions.

She presented a few of the works during the speech, most of which have one common ground that explores the vanishment of boundaries between virtual and reality. As an architect junior designer, I have the experience of dealing with the virtualization of objects within the digital space; however, it’s rarely the case when the digital represented works meet with the actual object in a mutual coexisting guesture. In Chris’s presentation, she has shown the power of how virtual imageries would have to interfere with the real sensatives. The most interesting project of hers is how human hands are scanned using cameras and projected on the screen with distorted fingers. I don’t even have to experience it in person to feel the distortion happening not only visually, but also psychologically with the person of the hand.

Also, what’s very inspiring about her works is how technology is involved. Most of the equipments are relatively simple to adopt and use. The codes are also not too complicated either. The focus of the works isn’t necessarily about the shwocase of tech but to achieve the minimal sense of technology involvement.

Sometimes “bugs” of the codes can even be a playful part of the experience. During her presentation of the work of the crawling bugs that travels from the screen to your body when you touch them, she describes how there’s an actual bug in the code that unable to retrieve the bugs that already off the screen. She talked about the kids tried to get the last bug from the screen. To me this is also another beautiful accident that adds to the spice of the whole experience.

What I enjoy about her way of presenting is that there’s a very immediate fascination from her storytelling that’s easy to understand and reflect. And her visual representations are also very clear and interpretable. The use of music and video clips works together in a synergy that delivers the exact experience as you’re right at the place.

Artist Website – http://csugrue.com/

Kai Zhang-Looking Outwards-07

Fathom

Fathom is a database analysis platform that understands data and converts them into a visualization form. There are various facets of the data analyzation happening within this platform.

Partnering with State Street, they built a visualization depicting the scale, growth, and complexity of 200 years of finance. Fathom combed through a database of 40,000 financial indicators and built prototypes to dig into selected data. Of the many possible stories to tell, they focused on four facets of growth: data, connectivity, complexity, and scope.

They also have partnership with On Being to create new ways of understanding the 14 years of diaglogs archived in the database. By doing this can help with On Going’s pattern of conversation happened and used visual representation that links the useful information of the same categories that for the purpose of developing new methodologies.

The part that fascinates me about this platform is how it’s super flexible about the utility in different fields of practice. The developers are devoted to create easier to understand database “translator” that everyone is able to understand to help people get the most out of their data. The data are most useful when it’s more straitforward and easeir to understand. The methodologies introduced is very meaningful for the evolution of database management in firms.

https://fathom.info/

Kai Zhang-Project-07-Curves

sketch

//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-07

var nPoints = 100;

function setup() {
    createCanvas(600, 600);
    colorMode(HSB, 100);
}

function draw() {
    background(60, 40, 30);
    angleMode(RADIANS);

    translate(width / 2, height / 2);
    rotate(-atan((mouseX - 300) / (mouseY - 300))); //rotate the object along with mouse

    for (var m = 50; m < 130; m += 5) {
        stroke(mouseX / 6, 130 - m, m - 10); // gives the radient curve colors
        drawdevilsCurve(m); // generates a series of curves

        stroke(mouseX / 6, 130 - m, m - 10);
        drawastroidpedalCurve(m);
    }

}

function drawdevilsCurve(v) {
    var x;
    var y;
    
    var a = (mouseX - 300) / 3 * (100 + v) / 100;
    var b = (mouseY - 300) / 3 * (100 + v) / 100;
    
    noFill();
    beginShape(); // draw the devil curves
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = cos(t) * sqrt((pow(a, 2) * pow(sin(t), 2) - pow(b, 2) * pow(cos(t), 2)) / (pow(sin(t), 2) - pow(cos(t), 2)));
        y = sin(t) * sqrt((pow(a, 2) * pow(sin(t), 2) - pow(b, 2) * pow(cos(t), 2)) / (pow(sin(t), 2) - pow(cos(t), 2)));
        vertex(x, y);
    }
    endShape(CLOSE);

    beginShape(); // draw the devil curves 90 degree rotated
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        y = cos(t) * sqrt((pow(a, 2) * pow(sin(t), 2) - pow(b, 2) * pow(cos(t), 2)) / (pow(sin(t), 2) - pow(cos(t), 2)));
        x = sin(t) * sqrt((pow(a, 2) * pow(sin(t), 2) - pow(b, 2) * pow(cos(t), 2)) / (pow(sin(t), 2) - pow(cos(t), 2)));
        vertex(x, y);
    }
    endShape(CLOSE);
    
}

function drawastroidpedalCurve(v) {
    var x;
    var y;
    
    var a = (mouseX - 300) / 3 * (100 + v) / 100;
    var b = (mouseY - 300) / 3 * (100 + v) / 100;
    
    noFill();
    beginShape(); // draw the pedals
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = a * cos(t) * pow(sin(t), 2);
        y = a * sin(t) * pow(cos(t), 2);
        vertex(x, y);
    }
    endShape(CLOSE);

    beginShape(); // draw the astroids
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = a * pow(cos(t), 3);
        y = a * pow(sin(t), 3);
        vertex(x, y);
    }
    endShape(CLOSE);


}

In this project, I’ve used the combination of a few equations to generate my curves: the devil curve, the astroid curve, and the pedal curve.

(URL: http://mathworld.wolfram.com/AstroidPedalCurve.html; http://mathworld.wolfram.com/DevilsCurve.html)

I was looking to find curves that are dual symmetrical in respect to both axis. And I used for loop technique to create an array of radient color curves. Also as I move the mouse, the curves will expand, shrink, and changes color, because I’ve embedded variables that changes it. I also used arctangent to deduce the mouse orientation to the origin and then the curves will rotate as I move my mouse around. Here are three different satate of the curves.