Author: Xiangqi Liu

Liu Xiangqi-Project Proposal

I would like to create an animation of time tunnel.

1083315448
This is to provide users with the feeling of travelling on a train forward. I would love to share my photos taken in my traveling in US. The photo will emerge as we’ve done in customized pixels. And the time each photo takes to emerge will be scaled to how long it has passed since I took the photo. Flashing points can be added to the background to represent passing time. When user click the mouse, the train can take a turn and a new different timeline will be shown.

Liu Xiangqi-Looking Outwards 12

The first project I found interesting is “On Broadway” by Lev Manovich. In this project, he trying to analyze and present a city by collecting data from new media Instagram, Foursquare, Twitter, and from traditional indicators taxi and income. What interests me most is how he compressed a 3-D city into one single string(a street, Broadway), and by analyzing those aggregation of data, he found a clear division between city upper 110th street and below. This is a video.

The second project I admire is Phototrail by Nadav Hochman, Lev Manovich and Jay Chow. In this project, they collect data directly from photos uploaded to Instagram by people in different cities. Multiple grams are used to correlate the attributes of photos and other factors. For example, they used radicals to organize the images by their visual attribute (hue, brightness, texture, etc.) and by when and where they were taken. One parameter decides the angle; another parameter controls the radius (how far a photo is from the center).

Liu Xiangqi-Project-11

sketch

/*Liu Xiangqi Section A xiangqil@andrew.cmu.edu Assignment-10-A*/
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;
}


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

function draw() {
     background(0);

    var turtle5 = makeTurtle(mouseX, 200);
    turtle5.penDown();
    turtle5.setColor(255);
    turtle5.setWeight(6);
    turtle5.penDown();
    
        turtle5.face(-90);
        turtle5.forward(200-mouseY);
        turtle5.face(0);
        turtle5.forward(35);
        turtle5.face(90);
        turtle5.forward(25);
        turtle5.face(180);
        turtle5.forward(15);
        turtle5.face(-90);
        turtle5.forward(10);
        turtle5.face(0);
        turtle5.forward(7);
        turtle5.face(-90);
        turtle5.forward(7);
        turtle5.face(180);
        turtle5.forward(18);
        turtle5.face(90);
        turtle5.forward(200-mouseY-8);
        turtle5.face(0);
        turtle5.forward(40);
        
    
}

Liu Xiangqi-Looking Outwards 10

The artist I choose is Caroline Sinders. Here is a link for her work.I admire her project “Night Witches”. It is a mobile game. I enjoyed her flattening and childish design style. The color scheme is simple (mainly consists of black, white and grey) but harmonious. I also like how she developed the game using analogy of films with preparation, development, climax and the resolution. To provide more lifelike interaction, she added plenty of story narratives.

Caroline Sinders is a machine learning designer/user researcher, artist, and digital anthropologist obsessed with language, culture and images. She works in BuzzFeed/Eyebeam Open Labs. She holds a master degree from NYU’s Interactive Telecommunications Program where she focused on HCI, storytelling, and social media theory, and a BFA in Photography and Imaging with a focus in digital media and culture from NYU.

Here is a video for “Night Witches”.

Liu Xiangqi-Project 10

I tried to make this project look like heartbeat pattern of a dying person. The person will die after a while.sketch

var pulses = [];
var initialX = 0;

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

    for (var i = 0; i < 10; i ++){
     pulses[i] = makePulses(width);
    }
    frameRate(10);
}


function draw() {
    background(0); 
    updateAndDisplayPulses();
    removePulsesThatHaveSlippedOutOfView();
    addNewPulsesWithSomeRandomProbability(); 
    
    
}


function updateAndDisplayPulses(){
    // Update the pulse's positions, and display them.
    for (var i = 0; i < pulses.length; i++){
        pulses[i].move();
        pulses[i].display();
    }
}


function removePulsesThatHaveSlippedOutOfView(){
    var pulsesToKeep = [];
    for (var i = 0; i < pulses.length; i++){
        if (pulses[i].x + pulses[i].breadth > 0) {
            pulsesToKeep.push(pulses[i]);
        }
    }
    pulses = pulsesToKeep; 
}


function addNewPulsesWithSomeRandomProbability() {
    // With a very tiny probability, add a new shape of pulse to the end.
    var newPulsesLikelihood = 0.007; 
    if (random(0,1) < newPulsesLikelihood) {
        pulses.push(makePulses(width));
    }
}


// method to update position of pulse every frame
function PulseMove() {
    this.x += this.speed;
}
    

// show the pulses 
function PulseDisplay() {
    var pulseWidth = 50;
    //when the frame count exceeds 250, the person is dead...
    if (frameCount < 200) {
        var quietWidth = random(width); 
    }else{
        var quietWidth = width;
    }
    stroke(244, 66, 66);
    strokeWeight(3);
    push();
    translate(this.x, 0);
    line(0, height/2, quietWidth, height/2);
    line(quietWidth, height/2, quietWidth+pulseWidth/2, height/2-this.pheight);
    line(quietWidth+pulseWidth/2, height/2-this.pheight, quietWidth+pulseWidth, height/2);
    stroke(0);
    line(quietWidth, height/2, quietWidth+pulseWidth, height/2);
    pop();
}


function makePulses(birthLocationX) {
    var pulse = {x: birthLocationX,
                breadth: 50,
                speed: -4.0,
                pheight: random(-150, 150),
                move: PulseMove,
                display: PulseDisplay,
                }
    return pulse;
}

function deathPulse(){
    stroke(244, 66, 66);
    strokeWeight(3);
    line(0, height/2, width, height/2);
}

Liu Xiangqi-Looking Outwards 09

What interests me a lot is this post DENISE JIANG-LOOKING OUTWARDS 06. Randomness can be represented in many ways, such as forms, shapes, colors, arrangement, but in this work, when it is static, everything is organized with a rigid pattern(without randomness). I agree with the author said “circles are organized in a rational way but the movement is not”. I admire this work because it keeps simplicity in its original form (the colors of the circle, the most simple geometry, and gird arrangement)which contrasts or highlight the movement.
Nicholas Hanna

Liu Xiangqi-Project-09-Portrait

I used my portrait shot during my trip in Chicago last month. I created random-shaped quads to form the photo.

sketch

var underlyingImage;

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

function setup() {
    createCanvas(800, 533);
    background(0);
    underlyingImage.loadPixels();
    frameRate(50);
}

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);

    noStroke();
    fill(theColorAtLocationXY);
    quad(px-random(10), py, px, py-random(10), px+random(10), py, px, py+random(10));

    
}

Liu Xiangqi-Looking Outwards 08

Nicky Case is an interactive video game designer. He relates a lot of games to real social problems or psychology. He is a Singapore born and moved to Canada with his family. He is now working in the US. Here is the link for Nicky’s games I admire his work for the reality reflected in the games. He said in his speech that the question he keeps thinking about is if the thing(video game design) is meaningful. By integrating his concerns of the world into his work, he tries to motivate the users to be aware of those issues. One example is “Parable of the Polygons”. It addresses the necessity of diversity in our living environment.

When presenting his work, he tried a lot to relate his personal experiences to explain the cultural differences from the listeners (such as Asian parents’ homophobia ) and used a lot of jokes.

Here is his speech.

Liu Xiangqi-Looking Outwards-07

The project “Flight Patterns” was created by Aaron Koblin, Scott Hessels and Gabriel Dunne. It visualized the paths of air traffic over North America in different colors. It created some interesting celestial patterns through intersections of different paths. And those intersections are where the big cities lie. It never occurred to me that aggregation of these paths can be a reflection of positions of celestial bodies. It seems that our planet is wrapped by layers of these nets consisting of paths. A billions of light year away, or right above our head in the stratosphere. The man-made sky map is just amazing.

Flight Pattern, Aaron Koblin

Liu Xiangqi-Project-07

The project I tried to create is made up of eight curves and parabola. The parameter a (the scale of the eight curves) and b (the scale of the parabolas) is controlled by the x coordinates of the mouse. The number and the rotation degree is controlled by the y coordinates of the mouse. When a user moves the mouse, he/she can expect a procedure of flower blossom or a comet with its long tail. I was intended to create a kaleidoscope through the intertwine and changes of different curves.
sketch


function  setup() {
  createCanvas(600, 600);
}
 
function draw(){
  background(200, 200, 255);
  //keep the size of the eight curve in a reasonable size
  var x = min(mouseX, width);
  //like the parameter to mouseX
  var a = map(x, 0, width, 0, 200);
  var b = map(mouseX, 0, width, 0, 400);
  //link the rotation to mouseY
  var deg = map(mouseY, 0, height, 0, 360);
  noFill();
  stroke(255);
  push();
  translate(width/2, height/2);
  for (var j = 0; j < deg; j += 3600/deg){
    rotate(720/deg);
    beginShape();
    curveVertex(0, 0);
    //draw the complete eight curve
    for (var i = -10; i < 10; i += 0.1){
         var x = a*sin(i);
         var y = a*sin(i)*cos(i);
         curveVertex(x, y);
    }
    curveVertex(0, 0);
    endShape();
    
    beginShape();
    curveVertex(0, 0);
    //draw the complate parabola curve
    for (var i = -10; i < 10; i += 0.1){
         var x = b*sq(i);
         var y = 2*b*i;
         curveVertex(x, y);
    }
    curveVertex(0, 0);
    endShape();
  }
  pop();
  

}