Author: wsu1@andrew.cmu.edu

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Final Project

var timer = 0;

let x = 0; //person position x
let x1 = 0;
let ender = 0; //variable used to end a scene.
let years;  //calculate random years.
let miles; //calculate random miles.

function setup() {
    createCanvas(windowWidth, 750); //Full window
    textSize(14);
    frameRate(60);

    //preload images
    Store = loadImage('https://i.imgur.com/L4qngWN.png');

    walkin = loadImage('https://i.imgur.com/W2fK1A3.png');
    walkout = loadImage('https://i.imgur.com/C5LA4S1.png');
    broken = loadImage('https://i.imgur.com/aebY3Uk.png');

    iphone = loadImage('https://i.imgur.com/iI6LMAU.png');
    iphoneInside = loadImage('https://i.imgur.com/pL2oAbJ.png');
    battery = loadImage('https://i.imgur.com/9oZjkzY.png');

    numberGen(); //Generate random years and miles.
}

function draw() {
    background(255);

    //timer starts and 0 and increments every frame of draw. 
    if (timer > 0) {
        background(255);
        image(Store, 500, windowHeight/2 - 100, Store.width / 2, Store.height / 2);

        image(walkin, 800 - x, windowHeight/2 - 8, 20, 30);

        if(x <= 240) {
            x += 2;
        } else {
            x = 590;
        }
    }

    if (timer > 110) {
        push();
        strokeWeight(2);
        fill(255);
        beginShape();
        vertex(558, windowHeight/2 - 8);
        vertex(565, windowHeight/2 - 12);
        vertex(565, windowHeight/2 + 24);
        vertex(558, windowHeight/2 + 20);
        endShape(CLOSE);
        pop();
    }

    if (timer > 130) {
        background(255);
        image(Store, 500, windowHeight/2 - 100, Store.width / 2, Store.height / 2);
    }

    if (timer > 140) {
        background(255);
        image(Store, 500, windowHeight/2 - 100, Store.width / 2, Store.height / 2);
        push();
        fill(100);
        text("Billions of smartphones are sold every year...", windowWidth/2 - 150, windowHeight/2 + 50);
        pop();
    }

    if (timer > 340) {
        background(255);
        image(Store, 500, windowHeight/2 - 100, Store.width / 2, Store.height / 2);
        push();
        fill(100);
        text("But how far can one get...", windowWidth/2 - 150, windowHeight/2 + 50);
        pop();
    }

    if (timer > 480) {
        background(255);
        image(Store, 500, windowHeight/2 - 100, Store.width / 2, Store.height / 2);
        push();
        fill(100);
        text("before needing to get a new one?", windowWidth/2 - 150, windowHeight/2 + 50);
        pop();
    }

    if (timer > 620) {
        background(255);
        image(Store, 500, windowHeight/2 - 100, Store.width / 2, Store.height / 2);
        push();
        fill(100);
        text("Lets find out >\n(Right Arrow Key)", windowWidth/2 - 150, windowHeight/2 + 50);
        pop();
    }

    if (timer > 620 & x1 > 0) {
        background(255);
        image(Store, 500 - x1, windowHeight/2 - 100, Store.width / 2, Store.height / 2);
        push();
        fill(100);
        text(x1.toString(), windowWidth/2 - 35, windowHeight/2 + 50);
        pop();

        image(walkout, 590, windowHeight/2 - 8, 20, 30);
        if (keyIsDown(RIGHT_ARROW)) {
            x1 += 10;
        }
    }

    if (x1 >= totalMiles) {
        background(255);
        //image(Store, 500, windowHeight/2 - 100, Store.width / 2, Store.height / 2);
        image(broken, 590, windowHeight/2 - 11, 20, 30);
        push();
        fill(100);
        text("This person has traveled " + totalMiles.toString() + " miles.", windowWidth/2 - 150, windowHeight/2 + 50);
        text("Their phone lasted " + years.toString() + " years.", windowWidth/2 - 150, windowHeight/2 + 65);
        text("What makes them fail and\nwhy do companies design it that way?", windowWidth/2 - 150, windowHeight/2 + 95);
        pop();

        ender += 1;
    }

    //Landscape Line
    push();
    strokeWeight(3);
    line(0, windowHeight/2 + 20, windowWidth, windowHeight/2 + 20);
    pop();

    //Borders
    push();
    noStroke();
    fill(255);
    rect(0,0, windowWidth/2 - 200, windowHeight);
    pop();

    push();
    noStroke();
    fill(255);
    rect(windowWidth/2 + 200,0, windowWidth, windowHeight);
    pop();

    if (ender > 450) { //End scene and move to parts of a phone.
        background(255);
        //image(Store, 500, windowHeight/2 - 100, Store.width / 2, Store.height / 2);
        image(iphone, windowWidth/2 - 150, windowHeight/2 - 200, 300,400);
        image(iphoneInside, windowWidth/2 + 50, windowHeight/2 - 200, 300,400);
        image(battery, windowWidth/4, windowHeight/2 - 200, 300,400);


        push();
        noStroke();
        fill(255);
        rect(windowWidth/2 + 100, windowHeight/2 - 60, 110,250);
        pop();

        if (mouseX >= windowWidth/4 + 70 & mouseX <= windowWidth/4 + 70 + 115) {
            push();
            noFill();
            stroke(255,0,0);
            strokeWeight(4);
            rect(windowWidth/4 + 70, windowHeight/2 - 95, 115,270);
            pop();

            text("Lithium-Ion Battery | Lifespan: 3-5 years\nOne of the most common areas of failure.\nThese also contain many of toxic substances that make it difficult to recycle.", windowWidth/2 - 250, windowHeight/2 +200);
        }

        if (mouseX >= windowWidth/2 - 90 & mouseX <= windowWidth/2 + 90) {
            push();
            noFill();
            stroke(0,255,0);
            strokeWeight(4);
            rect(windowWidth/2 - 90, windowHeight/2 - 180, 180, 360);
            pop();

            text("Screen / Outer Hardware | Lifespan: Varies\nThe most common failure point.\nNowadays, if a screen is cracked, its often cheaper to buy a new phone.", windowWidth/2 - 250, windowHeight/2 +200);
        }

        if (mouseX >= windowWidth/2 + 120 & mouseX <= windowWidth/2 + 160 + 115) {
            push();
            noFill();
            stroke(0, 0, 255);
            strokeWeight(4);
            rect(windowWidth/2 + 120, windowHeight/2 - 180, 160, 360);
            pop();

            text("Circuitboard / Chips | Obsolete: 2 years\nNot common to fail, in fact chips are designed to work for 20-30 years.\nHowever, the technology quickly becomes obsolete due to newer, more powerful chipsets being developed.", windowWidth/2 - 250, windowHeight/2 +200);
        }
    }
    
    timer += 1; //increment timer per call of draw.
}

function keyPressed() { //Detect right arrow key press.
    if (keyCode === RIGHT_ARROW) {
        x1 += 1;
  }
}

function numberGen() { //Generate numbers.
    let years1 = random(1, 4);
    years = nf(years1, 1, 2);
    miles1 = int(random(1300, 1500));
    miles = nf(miles1, 4, 2);

    totalMile1 = (miles * years);
    totalMiles = nf(totalMile1, 4, 2);
}

function mousePressed() { //Detect mouse press. 
    return true;
}

For my project, I wanted to highlight the issue of planned obsolescence in our everyday electronics through a simple interactive “scene”. Basically I wanted to show the briefness with which our phones are usable relate it to approximately how many miles we could walk before they utterly fail or become obsolete. At the end, the scene changes and shows some of the places where a phone is designed to fail in 2-3 years.

This project was made to fit the full view width of a window so it might not be completely viewable on wp.

Final_Project copy

Video Link: https://youtu.be/2isZoRcILBk