Author: xux1@andrew.cmu.edu

Xu Xu & Xiaoyu Kang – Final Project

sketch

// Xiaoyu Kang & Xu (Claire) Xu
// Section B
// xkang@andrew.cmu.edu & xux1@andrew.cmu.edu
// Final Project
var hatShapeX = 130; //BY BOTH XIAOYU AND XU
var hatShapeY = 128;
var heartShapeX = 205;
var heartShapeY = 128;
var moneyShapeX = 270;
var moneyShapeY = 140;
var textboxShapeX = 330;
var textboxShapeY = 128;
var backgroundColor = 0;
var gameStart = false;
var badEnd = false;
var goodEnd = false;
var img1 = [];
var imageCount = 0;
var testLinks = ["https://i.imgur.com/VWoGtbO.jpg", 
             "https://i.imgur.com/OpLGpha.jpg",
             "https://i.imgur.com/1Ik4bPx.jpg",
             "https://i.imgur.com/vM6ZK9c.jpg",
             "https://i.imgur.com/8J6Gxdo.jpg",
             "https://i.imgur.com/yk3tV27.jpg",
             "https://i.imgur.com/FH9qhm4.jpg",
             "https://i.imgur.com/E7a5TDu.jpg",
             "https://i.imgur.com/9vRGrKE.jpg",
             "https://i.imgur.com/C4XhQaI.jpg",
             "https://i.imgur.com/NgIAvpS.jpg",
             "https://i.imgur.com/QRXsh9S.jpg",
             "https://i.imgur.com/04EkVKf.jpg",
             "https://i.imgur.com/0dOYwZv.jpg",
             "https://i.imgur.com/xc56D6n.jpg",
             "https://i.imgur.com/0sk94O3.jpg"];
var questionCount = 0;
let testQuestions = ["I can't code for life,", " but do you want to collaborate on this 15104 project?",
                  "Did you hear about the history exam tomorrow?", "I can’t believe it’s on EVERYTHING!",
                  "I heard Vivian got a 104/100", " on the recent physics test!",
                  "I really need to get some sleep,", "will you sign me in for lecture today?",
                  "There’s a frat party tonight,", "do you want to go and hang out?",
                  "OMG I heard there’s a new pho place downtown,", "are you interested??",
                  "There’s a library part time job on Handshake", "let’s apply together!",
                  "Let’s play","League of Legends tonight!",
                  "<Introduction to Javascript> is a required textbook,", "please get it by next class.",
                  "Re: Please see the HW attached,", "submit all to autolab by tonight at midnight.",
                  "I noticed that you have not paid attention in class.", "Is there something wrong?",
                  "Class, this project", "will be due in a week’s time.",
                  "Re: Would you like to be a generous supporter", "of the CMU community by becoming a donor?",
                  "The total amount of your food will be $15.76.", "Paid in card or cash?",
                  "New: Pittsburgh popcorn & smokey barbeque", "flavored mac and cheese",
                  "It’s 2am in the mornin’,","why are y’all still workin’?"]

var imageposX = 115;
var imageposY = 80;
var questionposY = 380;
var answerCount = 0;
let answerX = ["Um… Sure?",
               "What exam?",
               "Ha, I can do better",
               "Sure, go sleep",
               "Sure, I’ll go!",
               "YES LET’S GO",
               "Sure I’ll join",
               "I'll grab my laptop",
               "I’ll buy it",
               "Grinds through HW",
               "It won’t happen again",
               "Complete the task",
               "Fine I’ll donate",
               "Takes out debit card",
               "Gives it a try",
               "We have a deadline"];
let answerY = ["I prefer someone better",
               "Ya I studied all night",
               "She must’ve worked hard",
               "I’m also not going",
               "Nah, I’ll pass",
               "No I’m broke",
               "I’m too lazy",
               "My heart is in the work",
               "I’ll find a fake one",
               "Ignores this email",
               "Your class is boring",
               "Request for extension",
               "I’m not generous",
               "Gets something cheaper",
               "Gets something normal",
               "Cries hysterically"];
var answerposX = 90;
var answerposY = 430;
var timeTracker = 0;
var choices = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
var choices_A = [];
var academicsHP = 50;
var sanityHP = 50;
var financeHP = 50;
var socialHP = 50;
var HPposX = 35;
var HPposY = 40;
var logoPosX = 15;
var logoPosY = 30;
var subtract = true;
var monthCount = 0;
var star = [];
var cloud = [];
var crow = [];

function preload(){ //BY XU
    for (var i = 0; i < testLinks.length; i++){
        img1[i] = loadImage(testLinks[i]);
    }
}
function setup(){ //BY XIAOYU
    createCanvas(480,480);
    frameRate(10);
    //setup stars that will display at night
    for (var i = 0; i < 50; i ++) {
        var starX = random(width);
        var starY = random (0, height/2);
        star[i] = makeStar(starX, starY);
    }
    //setup clouds that will display at morning
    for (var i = 0; i < 10; i ++) {
        var cloudX = random(width);
        var cloudY = random (0, height/2);
        cloud[i] = makeCloud(cloudX, cloudY);
    }
    //setup crows that will display at afternoon
    for (var i = 0; i < 20; i ++) {
        var crowX = random(width);
        var crowY = random (0, height/2);
        crow[i] = makeCrow(crowX, crowY);
    }
}
function draw(){ //BY XU
    //starting page text
    background(0);
    fill("yellow");
    textSize(70);
    textFont('Courier');
    textAlign(CENTER);
    text('REIGNS', width/2, height/2);
    fill("white");
    textSize(20);
    text('- CMU EDITION -', width/2, height/2 + 50);
    textSize(15);
    text('Press Mouse To Start', width/2, height - 70); 
    //starting page logo
    fill("yellow");
    rectMode(CENTER);
    rect(width/2, 130, 250, 60);
    //academics logo
    noStroke();
    fill(0);
    beginShape();
    vertex(hatShapeX, hatShapeY);
    vertex(hatShapeX + 20, hatShapeY - 5);
    vertex(hatShapeX + 40, hatShapeY);
    vertex(hatShapeX + 20, hatShapeY + 5);
    vertex(hatShapeX, hatShapeY);
    endShape();
    rectMode(CORNER);
    rect(hatShapeX, hatShapeY, 1, 10);
    rect(hatShapeX + 10, hatShapeY, 20, 10);
    //sanity logo
    circle(heartShapeX, heartShapeY, 15);
    circle(heartShapeX + 10, heartShapeY, 15);
    triangle(heartShapeX - 8, heartShapeY, heartShapeX + 18, heartShapeY, heartShapeX + 6, heartShapeY + 15);
    //finance logo
    textSize(33);
    text('S', moneyShapeX, moneyShapeY);
    rect(moneyShapeX - 1.5, moneyShapeY - 22, 3, 25);
    //social life logo
    ellipse(textboxShapeX, textboxShapeY, 30, 20);
    triangle(textboxShapeX, textboxShapeY, textboxShapeX + 10, textboxShapeY, textboxShapeX + 10, textboxShapeY + 15);
    if(gameStart){ 
        backgroundChange();
        fill(backgroundColor);
        rectMode(CENTER);
        rect(width/2, height/2, 480, 480); 
        //display clouds when background is light gray
        if (timeTracker == 0) {
            displayCloud();
        }
        //display crows when background is dark gray
        if (timeTracker == 1) {
            displayCrow();
            addCrow();
            removeCrow();
        }
        //display stars when background is black
        if (timeTracker == 2) {
            displayStars();
        }        
        gameInterface();
    }
    //check if the game has ended
    checkStatus();
    //bad end
    if (badEnd){
        gameStart = false;
        background(0);
        fill("yellow");
        textSize(70);
        textFont('Courier');
        textAlign(CENTER);
        text('GAME OVER', width/2, height/2);
        fill("white");
        textSize(20);
        text('- SADLY YOU DIDNT GRADUATE -', width/2, height/2 + 50);
        textSize(15);
        text('Refresh Page to Start Over', width/2, height - 70); 
    }
    //goodEnd
    if (goodEnd){
        gameStart = false;
        background(0);
        fill("yellow");
        textSize(50);
        textFont('Courier');
        textAlign(CENTER);
        text('CONGRATULATIONS', width/2, height/2);
        fill("white");
        textSize(20);
        text('- YOU SUCCESFULLY GRADUATED CMU -', width/2, height/2 + 50);
        textSize(15);
        text('Refresh Page to Play Again', width/2, height - 70); 
    }
}
function mouseClicked(){ //BY XU
    gameStart = true;
}
function gameInterface(){ //BY XU
    //frame
    fill("yellow");
    rectMode(CENTER);
    rect(width/2, height/2 - 35, 280, 280);
    //implement images
    putImage();
    //implement question
    putQuestion();
    //implement answers
    putAnswers();
    putDate();
    hpTracker();

}
function putImage(){ //BY XIAOYU
    image(img1[imageCount], imageposX, imageposY);
}
function putQuestion(){ //BY XIAOYU
    fill("white");
    textFont('Courier');
    textAlign(CENTER);
    textSize(12.5);
    text(testQuestions[questionCount], width/2, questionposY);
    text(testQuestions[questionCount + 1], width/2, questionposY + 15);
}
function putAnswers(){ //BY XIAOYU
    //left side
    fill("yellow");
    textFont('Courier');
    textSize(12.5);
    text("A. " + answerX[answerCount], answerposX, answerposY);
    text("B. " + answerY[answerCount], answerposX + 280, answerposY);
}
function putDate(){ //BY XIAOYU
    fill("yellow");
    textFont('Courier');
    textAlign(CENTER);
    textSize(12.5);
    text(monthCount*2 + " months survived", width/2, 460);
}
function keyTyped(){ //BY XU
    if (key === 'a'){
        //time passes
        timeTracker ++;
        imageCount = floor(random(choices));
        questionCount = imageCount *2;
        answerCount = imageCount;
        subtractHP();
        monthCount ++;
    } else if (key === 'b'){
        //time passes
        timeTracker ++;
        imageCount = floor(random(choices));
        questionCount = imageCount *2;
        answerCount = imageCount;
        subtractHP();
        monthCount ++;
    }
    if (timeTracker >= 3){
        timeTracker = 0;
    }
}
function notRepeat(){ //BY XU
    while (choices_A.includes(imageCount)){
        imageCount = floor(random(choices));
    }
    if(choices_A.length < 6){
        choices_A.push(imageCount);
    }else {
        choices_A.shift();
        choices_A.push(imageCount);
    }
}
function hpTracker(){ //BY XIAOYU
    //academics logo
    noStroke();
    fill("yellow");
    beginShape();
    vertex(logoPosX, logoPosY);
    vertex(logoPosX + 20, logoPosY - 5);
    vertex(logoPosX + 40, logoPosY);
    vertex(logoPosX + 20, logoPosY + 5);
    vertex(logoPosX, logoPosY);
    endShape();
    rectMode(CORNER);
    rect(logoPosX, logoPosY, 1, 10);
    rect(logoPosX + 10, logoPosY, 20, 10);
    //academics hp
    fill("white");
    textFont('Courier');
    textAlign(CENTER);
    textSize(12.5);
    text(academicsHP + "/100", HPposX + 50, HPposY);
    //sanity logo
    fill("yellow");
    circle(logoPosX + 130, logoPosY, 15);
    circle(logoPosX + 130+ 10, logoPosY, 15);
    triangle(logoPosX + 130 - 8, logoPosY, logoPosX + 130 + 18, logoPosY, logoPosX + 130 + 6, logoPosY + 15);
    //sanity hp
    fill("white");
    text(sanityHP + "/100", HPposX + 130 + 30, HPposY);
    //finance logo
    fill("yellow");
    textSize(33);
    text('S', logoPosX + 250, logoPosY + 10);
    rect(logoPosX - 1.5 + 250, logoPosY + 10 - 22, 3, 25);
    //finance hp
    fill("white");
    textSize(12.5);
    text(financeHP + "/100", HPposX + 250 + 25, HPposY);
    //social life logo
    fill("yellow");
    ellipse(logoPosX + 370, logoPosY, 30, 20);
    triangle(logoPosX + 370, logoPosY, logoPosX + 370 + 10, logoPosY, logoPosX + 370 + 10, logoPosY + 15);
    //social hp
    fill("white");
    text(socialHP + "/100", HPposX + 400, HPposY);
}
function subtractHP(){ //BY XU
    //subtract hp
    if (imageCount <= 3){
        var randomNum = random(0, 1);
        if (randomNum < 0.5){
            academicsHP -= 10;
            sanityHP += 10;
        }else{
            academicsHP += 10;
            sanityHP -= 10;     
        }
    }
    if (imageCount >= 4 || imageCount <= 7){
        var randomNum = random(0, 1);
        if (randomNum < 0.5){
            financeHP -= 10;
            socialHP += 10;
        }else{
            financeHP += 10;
            socialHP -= 10;     
        }
    }
    if (imageCount >= 8 || imageCount <= 11){
        var randomNum = random(0, 1);
        if (randomNum < 0.5){
                academicsHP += 10;
            sanityHP -= 10;
        }else{
            academicsHP -= 10;
            sanityHP += 10;     
            }
    }
    if (imageCount >= 12 || imageCount <= 15){
        var randomNum = random(0, 1);
            if (randomNum < 0.5){
            financeHP += 10;
            socialHP -= 10;
        }else{
            financeHP -= 10;
            socialHP += 10;     
        }
    }
}
function checkStatus(){ //BY XU
    if (academicsHP == 100 || sanityHP == 100 || financeHP == 100 || socialHP == 100){
        badEnd = true;
    }
    if (academicsHP == 0 || sanityHP == 0 || financeHP == 0 || socialHP == 0){
        badEnd = true;
    }
    if (monthCount >= 24){
        goodEnd = true;
    }
}
function backgroundChange(){ //BY XIAOYU
    if (timeTracker == 0) {
        backgroundColor = 130;
    }
    if (timeTracker == 1) {
        backgroundColor = 95;
    }
    if (timeTracker == 2) {
        backgroundColor = 0;
    }
}
function drawStar(){ //BY XIAOYU
    noStroke();
    fill("yellow");
    push();
    translate(this.x, this.y);
    ellipse(20, 20, random(1,5), random(1,5));
    pop();
}
function makeStar(starX, starY){ //BY XIAOYU
    var makeStar = {x: starX,
                y: starY,
                draw: drawStar}
    return makeStar;
}
function displayStars(){ //BY XIAOYU
    for (i = 0; i < star.length; i++){
        star[i].draw();
    }
}
function drawCloud(){ //BY XU
    noStroke();
    fill(185);
    push();
    translate(this.x2, this.y2);
    ellipse(15, 26, 34, 20);
    ellipse(45, 30, 22, 25);
    ellipse(15, 35, 15, 16);
    ellipse(30, 28, 28, 26);
    pop();
}
function makeCloud(cloudX, cloudY){ //BY XU
    var makeCloud = {x2: cloudX,
                y2: cloudY,
                speed: -6,
                move: moveCloud,
                draw: drawCloud}
    return makeCloud;
}
function moveCloud(){ //BY XU
    this.x2 += this.speed;
    if(this.x2 <= -10){
        this.x2 += width;
    }
}
function displayCloud(){ //BY XU
    for (i = 0; i < cloud.length; i++){
        cloud[i].move();
        cloud[i].draw();
    }
}
function drawCrow(){ //BY XIAOYU
    strokeWeight(1);
    stroke(0);
    noFill();
    arc(this.x3, this.y3, this.size, this.size/2, PI, TWO_PI);
    arc(this.x3 + this.size, this.y3, this.size, this.size/2, PI, TWO_PI);
}
function makeCrow(crowX, crowY){ //BY XIAOYU
    var makeCrow = {x3: crowX,
                y3: crowY,
                speed2: random(3, 10),
                size: random(5, 10),
                move2: moveCrow,
                draw2: drawCrow}
    return makeCrow;
}
function moveCrow(){ //BY XIAOYU
    this.x3 -= this.speed2;
    this.y3 -= this.speed2 / random(5, 10);
}
function displayCrow(){ //BY XIAOYU
    for (i = 0; i < crow.length; i++){
        crow[i].move2();
        crow[i].draw2();
    }
}
function addCrow(){ //BY XU
    if (random(0,1) < 0.1) {
        var crowX = width;
        var crowY = random(0, height/2);
        crow.push(makeCrow(crowX, crowY));
    }
}
function removeCrow() { //BY XU
    var keep = [];
    for (i = 0; i < crow.length; i++) {
        if (crow[i].x3 + crow[i].size > 0) {
            keep.push(crow[i]);
        }
    }
    crow = keep;
}

For this final project, Xiaoyu and I collaborated to use p5js to create a CMU version of Reigns (a phone game). The game starts by pressing the mouse, then a series of questions will be presented, and the player uses ‘a’ key and ‘b’ key to make choices. There are four HP counters at the top of the screen, and they will fluctuate based on the choices the player makes. Once any of the four HPs reach 0/100 or 100/100, the game will present the bad end. If the player survives until 48 months (4 years), the game presents the good end.

We used things we learned in the past semester to give the game some particular features, such as the background changes, making sure the characters don’t repeat themselves, etc. We drew the characters ourselves in illustrator, and created the gamestart/end pages with p5js.

Xu Xu – Looking Outwards – 12

I am using 1 of my grace days for this late submission.

For this looking outwards, I found two interactive art projects that are relevant to the project I have in mind: Hershman Leeson’s Lorna in 1984 and John Lennon’s The Bermuda Tapes in 2015. The first project is the first artwork that used laserdisc technology. Using this medium to explore the possibilities and extent of interactiveness, the artist enables users to explore and intervene in the world of an agoraphobic woman named Lorna. Lorna’s actions can be controlled using a remote control, and three outcomes are possible: Lorna remains trapped by her apartment and her insecurities; she commits suicide; or she shoots the television instead, in a sense ’murdering’ the medium. The second project is an interactive Album App that tells the story of John Lennon’s journey, sailing through a mid-Atlantic storm to Bermuda in June 1980. Through the screen of an iPad or iPhone, you are able to interact with the narrative, moving, swiping and tilting, to give the story a sense of personal touch. 

Both of these projects relate to the final project I have in mind, which is an interactive game composed of choices that eventually leads to an ending. I chose the first project to discuss it because it is one of the earliest works of interactive game/film, with a really similar game structure that makes the players feel relatable (because they are the ones making the choices). The second one is graphically more developed. However, I think it has more room to grow in terms of interactivity. Players can only interact with certain things in the story, but don’t necessarily have the ability to change the story.

LORNA 1984: https://zkm.de/en/artwork/lorna

THE BERMUDA TAPES 2015: https://www.design-io.com/projects/lennonbermudatapes

Xu Xu and Xiaoyu Kang – Project 12 – Proposal

We will be working on an interactive game that will be randomly generated, with a game system similar to Reigns (but simplified). In the game, there will be character cards randomly chosen and presented, asking the player a question or presenting the player a scenario. The player will need to swipe/click right or left for one of the two choices, and the choices will affect one (or more) of the four aspects of the player. In the original game, the four aspects were those of the kingdom, but we want to create a CMU student version, with the four aspects being academics, sanity, finance, and social life. Character cards will be drawn and imported, questions and outcomes will be written and randomly chosen. There will be 9 different endings based on choices. (8 of which are bad endings where the player fails the game, the last ending is when the player successfully graduates CMU)

A sample question can be: [A close architecture friend of yours] “There will be an architecture party tonight, do you wanna come?”

>Yes [result: 10% reduction in academics, 10% gain in social life]

>No [result: 10% gain in academics, 10% reduction in social life]

  • Reigns Game: Making choices
  • Reigns Game: Character cards and Questions

Xu Xu – Project 11 – Landscape

sketch

var waterSpeed = 0.00005;
var waterDetail = 0.003;
var mountain1Speed = 0.0009;
var mountain1Detail = 0.05;
var mountain2Speed = 0.0005;
var mountain2Detail = 0.014;
var crows = [];

function setup() {
    createCanvas(480, 400);
    frameRate(10);
    for (var i = 0; i < 9; i++){
        var crowX = random(width);
        var crowY = random(0, 200);
        crows[i] = makeCrow(crowY, crowX);
    }
}

function draw(){
    background(240);
    drawSun();
    drawMountain2();
    drawMountain1();
    drawBoat();
    drawWater();
    updateCrow();
    addCrow();
    removeCrow();


}
function drawSun(){
    noStroke();
    fill(239.7, 186.15, 204, 25);
    ellipse(300, 200, 500, 500);
    fill(239.7, 186.15, 204, 30);
    ellipse(350, 200, 350, 350);
    fill(239.7, 186.15, 204, 35);
    ellipse(390, 200, 200, 200);

}
function drawBoat(){
        //line(265, 330, 240, 360);
    noStroke();
    fill(100);
    arc(255,345, 50, 10, 0, PI);
    ellipse(260,340, 5, 20);
    ellipse(260, 328, 5, 5);
    triangle(250, 326, 270, 326, 260, 323);

}
function drawMountain2(){
    noStroke();
    fill(188.7, 211.65, 229.5);
    beginShape();
    for (var i = 0; i < width; i ++){
        var x = (i * mountain2Detail) + (millis() * mountain2Speed);
        var y = map(noise(x), 0, 1.5, 50, 300);
        vertex(i, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function drawMountain1(){
    noStroke();
    fill(155.55, 196.35, 226.95);
    beginShape();
    for (var i = 0; i < width; i ++){
        var x = (i * mountain1Detail) + (millis() * mountain1Speed);
        var y = map(noise(x), 0, 1.2, 150, 250);
        vertex(i, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}
function drawWater(){
    noStroke();
    fill(119.85, 140.25, 165.75);
    beginShape();
    for (var i = 0; i < width; i ++){
        var x = (i * waterDetail) + (millis() * waterSpeed);
        var y = map(noise(x), 0, 1.8, 345, 360);
        vertex(i, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}
function makeCrow(crowX, crowY){
    var crow = {
        x: crowX,
        y: crowY,
        velocity: random(3, 18),
        size: random(5, 10),
        move: moveCrow,
        show: showCrow,
    }
    return crow;
}
function moveCrow(){
    this.x -= this.velocity;
    this.y -= this.velocity / random(5, 10);
}
function showCrow(){
    strokeWeight(1);
    stroke(0);
    noFill();
    arc(this.x, this.y, this.size, this.size/2, PI, TWO_PI);
    arc(this.x + this.size, this.y, this.size, this.size/2, PI, TWO_PI);
}
function updateCrow(){
    for(i = 0; i < crows.length; i++){
        crows[i].move();
        crows[i].show();
    }
}
function addCrow(){
    if (random(0,1) < 0.1){
        var crowX = width;
        var crowY = random(0, height/2);
        crows.push(makeCrow(crowX, crowY));
    }
}
function removeCrow(){
    var keep = [];
    for (i = 0; i < crows.length; i++){
        if (crows[i].x + crows[i].size > 0){
            keep.push(crows[i]);
        }
    }
    crows = keep;
}

For this project, I wanted to create someone on a boat flowing along the landscape, with crows flying in the opposite direction.

Xu Xu – Looking Outwards – 11

For this week’s looking outwards, I decided to focus on LIA, an Austrian software and net artist. Her primary working medium is code, which consists of translating a concept into a formal written structure that then can be used to create a “machine” that generates real-time multimedia outputs. Her works can be regarded as a conversation between the human and the machine.

I chose to focus on one of her projects called Fluctus, which is a generative application that was displayed by Dong Gallery Taipei. Most of LIA’s works is not about creating an object, and her computational art exists beyond the material flow of things. Her works are enacted to give rise to objects: the art are temporarily and fleetingly created, they are brought to the canvas just to quickly disappear, leaving nothing but impressions in the memory of the viewer. Art is flow, process, concept, but more so an event. Art is brought alive through computation.

  • Dong Gallery Taipei, Taiwan, 2019/02/16 – 2019/03/23

What I admire about LIA’s Fluctus is that the work often seem to display organic traits, and the unfolding of forms leaves behind traces that builds up morphological processes of its computational core, while expressing its wholeness. The abstract and alien forms created are mesmerizing, the patterns almost seem ornamental. One would be intrigued by this artwork while passing by it on the streets, and stand for a while beside it to study its movements and developments throughout time.

Xu Xu – Project 10 – Sonic Sketch

sketch

//Claire Xu
//xux1@andrew.cmu.edu
//section B
//Project 10
var playerIMG;
var acousticBreeze;
var pianoMoment;
var goingHigher;
var retroSoul;

function preload(){
    var iphoneIMG = "https://i.imgur.com/KeDOgRs.jpg"
    playerIMG = loadImage(iphoneIMG);

    //load 4 tracks
    acousticBreeze = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bensound-acousticbreeze.wav");
    pianoMoment = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bensound-pianomoment.wav");
    goingHigher = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bensound-goinghigher.wav");
    retroSoul = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bensound-retrosoul.wav");
}

function setup(){
    createCanvas(450,450);
    background(255);
}

function soundSetup(){
    //volume for tracks
    acousticBreeze.setVolume(2);
    pianoMoment.setVolume(2);
    goingHigher.setVolume(2);
    retroSoul.setVolume(2);
}

function draw(){
    image(playerIMG, 0,0);
}

function mousePressed(){

    if (mouseX >= 150 & mouseX <= 350){
    //play acousticBreeze when it's pressed
        if (mouseY > 270 & mouseY < 290){
            //play acousticBreeze
            acousticBreeze.play();
            //pause others
            pianoMoment.pause();
            goingHigher.pause();
            retroSoul.pause();
        }
    //play pianoMoment when it's pressed
        if (mouseY > 290 & mouseY < 310){
            //play pianoMoment
            pianoMoment.play();
            //pause others
            acousticBreeze.pause();
            goingHigher.pause();
            retroSoul.pause();
        }
    //play goingHigher when it's pressed
        if (mouseY > 310 & mouseY < 330){
            //play goingHigher
            goingHigher.play();
            //pause others
            acousticBreeze.pause();
            pianoMoment.pause();
            retroSoul.pause();
        }
    //play retroSoul when it's pressed
        if (mouseY > 330 & mouseY < 350){
            //play retroSoul
            retroSoul.play();
            //pause others
            acousticBreeze.pause();
            pianoMoment.pause();
            goingHigher.pause();
        }
    }

    if (mouseX >= 155 & mouseX <= 165 & mouseY >= 385 & mouseY <= 395){
        //pause everything
        acousticBreeze.pause();
        pianoMoment.pause();
        goingHigher.pause();
        retroSoul.pause();
    }
}

For this project I wanted to do a “music app” design, and there are four songs to choose from the album, which can be paused and played by clicking the song titles or the pause button. I drew the interface from scratch in adobe illustrator and photoshop, and wrote the song names in the interface. This was a fun project, but implementing the soundtracks in the file was hard. (The soundtracks are actually only 1 minute long due to the file upload restriction)

Xu Xu – Looking Outwards – 10

For this week’s looking outwards, I decided to focus on an algorithmic sound art called “I am sitting in a machine” by Martin Backes. The work first begins with a recording of an artificial human voice reciting a text, which is run through an MP3 encoder over and over again. Through each iteration of the loop, the artifacts of the encoding process reinforce themselves and gradually distorts the artificial human voice, thus revealing its data format. This piece of work is a homage to composer Alvin Lucier’s sound art piece “I am sitting in a room” in 1969, but in a computational way. “I am sitting in a room” features similar ideas, where an recording is played over and over again, due to the emphasis of certain frequencies in the room, slowly the words become unintelligible, replaced by the pure resonant harmonies and tones of the room itself.

Alvin Lucier’s work explores the physical properties of sound, the resonance of spaces and the transmission of sound through physical media; whereas Backes’ work is more about digitized information and its artifacts, hearing science and telecommunications. He wanted to show how digitized information produces unexpected phenomena the same way physical environments do. He explains how he achieved this phenomena through computational techniques: “I have rewritten the original lyrics from the perspective of a machine. As a next step, I used the artificial human voice of a text-to-speech function and recorded the text via a script. I then wrote another script and ran the recording into a MP3 encoder automatically, over and over again. By the help of this recursive algorithm, I produced 3000 successive iterations of the 128 kbps 44.1 kHz MP3 encoding.”

I admire this project because it creates a connection between the computational and physical world, revealing that similar phenomena are able to occur in both situations. There is also a web version of this sound art online: I am sitting in a machine

Xu Xu – Project 09 – Computational Portrait

sketch

//Claire Xu
//xux1@andrew.cmu.edu
//Section B
//Project-09
var cX = 250;
var cY = 250;
var vX = 3;
var vY = 5;

var currentImage;

function preload(){
	var myImage = "https://i.imgur.com/Bo3UtYO.jpg";
	currentImage = loadImage(myImage);

}

function setup(){
	createCanvas(500,500);
	background(0);
	currentImage.loadPixels();
	frameRate(50);
}

function draw(){
	var ix = constrain(floor(cX), 0, width);
	var iy = constrain(floor(cY), 0, height);
	var xyColor = currentImage.get(ix, iy);



	if(cX >= width || cX <= 0){
		vX = -vX;
	}

	if(cY >= height || cY <= 0){
		vY = -vY;
	}

	cX += vX;
	cY += vY;

	noStroke();
	fill(xyColor);
	circle(cX, cY, random(5,20));

	var xyColorMouse = currentImage.get(mouseX, mouseY);
	if(mouseIsPressed){
		noStroke();
		fill(xyColorMouse);
		circle(mouseX, mouseY, random(5,10));
	}
}

For this project I used the cosplay image of my friend, and I wanted the circles to appear in lines rather than random dots, so it looks like something is actually “printing” the image. The circles being printed tend to be larger, and the circles drawn by the mouse are smaller so more details of the photo can be observed manually.

  • Few seconds after program has run
  • Few minutes after program has run (without manual modifications)
  • Few minutes after program has run (details added through mouse press)

Xu Xu – Looking Outwards – 09

For this looking outwards post, I decided to focus on Looking Outwards 06 by Nadia Susanto, which focuses on the Silk Pavilion created by the Mediated Matter Group at the MIT Media Lab. This project explores the relationship between digital and biological fabrication, and uses a collaboration of an algorithm-generated base structure and silkworms to create a layered structure, in order to determine the shape and material optimization of fiber-based surface structures.

I agree with Nadia’s statement of how the combination of real-life insects and computation perform art, rather than purely using computers to randomly generate shapes. The thought of learning from silkworms, adapting the methods to computational design, and re-using silkworms to complete the final pavilion is a really interesting approach to me. However, when I first read Nadia’s post, I wondered why the two “printing” methods were combined, because it seemed quite redundant. After reading the MIT Media Lab’s website on the Silk Pavilion and watching the video, I discovered that the process of having silkworms generating structure was also a research on how the environment would affect the mapping of silkworms, which could be manipulated to create an ideal pavilion structure:

“Affected by spatial and environmental conditions, including geometrical density as well as variation in natural light and heat, the silkworms were found to migrate to darker and denser areas. Desired light effects informed variations in material organization across the surface area of the structure. A season-specific sun path diagram mapping solar trajectories in space dictated the location, size, and density of apertures within the structure in order to lock in rays of natural light entering the pavilion from south and east elevations.”

Mediated Matter, MIT Media Lab

Xu Xu – Looking Outwards – 08

Artist Rachel Binx is a data visualizer, developer, and designer who works in Netflix in Los Angeles, and she had previous work experiences in Mapzen, NASA, as well as Stamen Design. As an only child from Mexico, her childhood dream was to become a world traveler, which is her source of inspiration for her works. Throughout the years she has co-founded Meshu, Gifpop, and monochōme: all small companies that explore creating one-off physical objects from the data that customers find meaningful. Meshu, a jewelry company that is based on geographic data of customers, was co-founded with Sha Hwang, another Stamen alumni. Gifpop is a kickstarted project that creates service prints from uploaded gif files. She also founded monochōme, a clothing company that allows customers to use maps to create a custom print on various clothing.

Her intent for these projects and startups was to connect people’s experiences (countries they visited, or even streets they walk every day) as data points and visualize them, creating a sense of summarizing one’s life and adding personal touches to each design.

She is also interested in data journaling, where she would program her laptop to take photos whenever she is in a new environment. She collects data from automated data or memory, and store those that are important and personal to people, then turn them into something visual and physical.

Binx talks about her projects by introducing her stories and personal experiences, which makes the project intent and outcome easier to follow. It is also more relatable for the audiences, and the idea of “customizing” and collecting personal data seems intriguing to most people since it adds a special touch to the project. I admire her creativity and her ability of turning data points into something artistic and acceptable by the general public, but I also admire her will to hold on to her childhood dream and focusing on things she truly loves. (Although the products are quite pricy: I’ve checked her websites)

https://rachelbinx.com/