Author: sammiek@andrew.cmu.edu

For this project, I wanted to create a recycling game that educates all age levels upon proper recycling, which is one of the basic ways that we can all contribute to protect our environment. Through the process, I learned a lot, especially how there are a lot of trash items that are not recyclable—this emphasized the importance of reusing items and reducing waste in general. The user can simply explore the environment, drag any waste item and drop it in any of the waste bins below. If the waste is thrown in the wrong bin, information will automatically show up on the top to guide the user, while also giving extra tips for reducing such trash. 

sketch

//Sammie Kim
//Section D
//sammiek@andrew.cmu.edu
//Final Project

//Global Variables
var FOOD = 0; //Index number within the waste bin type array
var PLASTIC = 1;
var PAPER = 2;
var TRASH = 3;
var score = 0;
var styrofoamBox = createStyrofoamBox();
var tissue = createTissue();
var hanger = createHanger();
var newspaper = createNewspaper();
var pizzaBox = createPizzaBox();
var plasticBag = createPlasticBag();
var plasticBottle = createPlasticBottle();
var paperBag = createPaperBag();
var appleCore = createApple();
var coffeeCup = createCoffee();
var fishbones = createFishbones();
var toothpaste = createToothpaste();
var mirror = createMirror();
var bubblewrap = createBubbleWrap();
var foodBin = createFoodBin();
var plasticBin = createPlasticBin();
var paperBin = createPaperBin();
var trashBin = createTrashBin();
var wastes = [styrofoamBox, tissue, hanger, newspaper, pizzaBox, plasticBag,
              plasticBottle, paperBag, appleCore, coffeeCup, fishbones,
              toothpaste, mirror, bubblewrap];
var wasteBins = [foodBin, plasticBin, paperBin, trashBin];
//Boolean Variables
var correct = false;
var selected = false;

//Use objects to create different wastes and wastebins with specific traits
function createStyrofoamBox() {
    var styrofoamBox = {
        url: "https://i.imgur.com/Lb1P88W.png",
        initX: 78,
        initY: 102,
        x: 78,
        y: 102,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: TRASH,
        note: "Styrofoam is a non-recyclable material because it contains "
              + "polysteryene, which is non-biodegradable."
        }
    return styrofoamBox;
}

function createTissue() {
    var tissue = {
        url: "https://i.imgur.com/s6rZAJu.png",
        initX: 145,
        initY: 95,
        x: 145,
        y: 95,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: TRASH,
        note: "Dirty tissues should be thrown in trash."
        }
    return tissue;
}

function createHanger() {
    var hanger = {
        url: "https://i.imgur.com/dE1sDsn.png",
        initX: 253,
        initY: 163,
        x: 253,
        y: 163,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: TRASH,
        note: "Plastic hangers are not purely plastic, and their curved ends "
              + "can be problematic in recycling equipment. "
        }
    return hanger;
}

function createNewspaper() {
    var newspaper = {
        url: "https://i.imgur.com/FkD5sJK.png",
        initX: 0,
        initY: 253,
        x: 0,
        y: 253,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: PAPER,
        note: "Newspapers should be recycled in paperbin."
        }
    return newspaper;
}

function createPizzaBox() {
    var pizzaBox = {
        url: "https://i.imgur.com/ZRjCbEW.png",
        initX: 172,
        initY: 102,
        x: 172,
        y: 102,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: TRASH,
        note: "Pizzabox cannot be recycled due to its wet and greasy cardboard "
              + "that cannot be processed in recycling equipment. "
              + "It can also attract insects and rodents."
        }
    return pizzaBox;
}

function createPlasticBag() {
    var platicBag = {
        url: "https://i.imgur.com/PDtsB6D.png",
        initX: 94,
        initY: 172,
        x: 94,
        y: 172,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: PLASTIC,
        note: "Most recycling facilities can only handle rigid materials that can "
              + "be separated, so plastic bags and wraps are generally not accepted. "
              + "But we can always reuse them for collecting trash."
        }
    return platicBag;
}

function createPlasticBottle() {
    var plasticBottle = {
        url: "https://i.imgur.com/6OEa9bA.png",
        initX: 393,
        initY: 95,
        x: 393,
        y: 95,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: PLASTIC,
        note: "Empty plastic bottles belong in the plastic bin. "
        + "The better option is to carry reusable waterbottles."
        }
    return plasticBottle;
}

function createPaperBag() {
    var paperBag = {
        url: "https://i.imgur.com/QsPO9ph.png",
        initX: 364,
        initY: 153,
        x: 364,
        y: 153,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: PAPER,
        note: "Clean paper bags belong in the paper bin. Still, the best "
        + "option would be to reuse them."
        }
    return paperBag;
}

function createApple() {
    var appleCore = {
        url: "https://i.imgur.com/QX98sKU.png",
        initX: 274,
        initY: 258,
        x: 274,
        y: 258,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: FOOD,
        note: "Any type of leftover food belong in the organic waste bin."
        }
    return appleCore;
}

function createCoffee() {
    var coffeeCup = {
        url: "https://i.imgur.com/sys0QnS.png",
        initX: 351,
        initY: 87,
        x: 351,
        y: 87,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: TRASH,
        note: "Unlike most paper items, paper cups are usually coated in platic "
              + "to hold liquid to prevent leaking. "
              + "Although many cafes are beginning to use compostable cups, "
              + "the best option is carrying coffee mugs or reusable bottles."
        }
    return coffeeCup;
}

function createFishbones() {
    var fishbones = {
        url: "https://i.imgur.com/wju8gLe.png",
        initX: 205,
        initY: 264,
        x: 205,
        y: 264,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: FOOD,
        note: "Any type of leftover food belong in the organic waste bin."
        }
    return fishbones;
}

function createToothpaste() {
    var toothpaste = {
        url: "https://i.imgur.com/na3BnTw.png",
        initX: 104,
        initY: 260,
        x: 104,
        y: 260,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: PLASTIC,
        note: "Toothpaste tubes should be properly cleaned out before "
              + "being placed in the plastic recycling bin."
        }
    return toothpaste;
}

function createMirror() {
    var mirror = {
        url: "https://i.imgur.com/NAh1S2x.png",
        initX: 142,
        initY: 130,
        x: 142,
        y: 130,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: TRASH,
        note: "Mirrors cannot be recycled due to the coating used on glass "
              + "to make it reflective. Be sure to wrap broken mirror pieces "
              + "before throwing them in the garbage."
        }
    return mirror;
}

function createBubbleWrap() {
    var bubblewrap = {
        url: "https://i.imgur.com/cvJ1Iou.png",
        initX: 336,
        initY: 245,
        x: 336,
        y: 245,
        selected: false,
        stay: true,
        dragging: false,
        informing: false,
        type: TRASH,
        note: "Although many plastics are recylable, bubble wraps and bags "
              + "cannot be recyled due to their thin films that can get tangled "
              + "in recycling machines."
        }
    return bubblewrap;
}

function createPaperBin() {
    var paperBin = {
        url: "https://i.imgur.com/AgJIG61.png",
        x: 229,
        y: 342,
      }
    return paperBin;
}

function createPlasticBin() {
    var plasticBin = {
        url: "https://i.imgur.com/6x6FPJW.png",
        x: 117,
        y: 342,
    }
    return plasticBin;
}

function createFoodBin() {
    var foodBin = {
        url: "https://i.imgur.com/sSve89v.png",
        x: 8,
        y: 342,
    }
    return foodBin;
}

function createTrashBin() {
    var trashBin = {
        url: "https://i.imgur.com/jm4NMB8.png",
        x: 343,
        y: 342,
    }
    return trashBin;
}

function setup() {
    createCanvas(450, 480);
}

function draw() {
    //load images for background, wastes, and waste bins
    background(220);
    image(backgroundPic, 0, 0);
    for (var i = 0; i < wasteBins.length; i++) {
        image(wasteBinsPics[i], wasteBins[i].x, wasteBins[i].y);
    }
    //Show explanation on top of the canvas if informing is true
    for (var i = 0; i < wastes.length; i++) {
        if (wastes[i].informing) {
            fill(220);
            noStroke();
            rect(0, 0, 450, 60);
            fill(0);
            text(wastes[i].note, 10, 10, 440, 480);//wrapping text within canvas
        }
        if (wastes[i].stay) { //if stay is true, images are all shown on canvas
            image(wastePics[i], wastes[i].x, wastes[i].y);
            if (wastes[i].dragging) {
                //update waste with current mouse locations
                wastes[i].x = mouseX - wastePics[i].width / 2;//offset amount
                wastes[i].y = mouseY - wastePics[i].height / 2;
        }
      }
    }
    if (correct) {
        text("Correct!", 10, 20); //shows up when answer is correct
    }
    fill(255);
    text("Score: " + score, 10, 90); //show scoreboard
}

function preload() {
    //Preload all the images by pushing the objects' URL into new array
    var backgroundURL = "https://i.imgur.com/4jWCbcI.png"
    backgroundPic = loadImage(backgroundURL);
    wastePics = [];
    for (var i = 0; i < wastes.length; i++) {
        wastePics.push(loadImage(wastes[i].url));
    }
    wasteBinsPics = []
    for (var i = 0; i < wasteBins.length; i++) {
        wasteBinsPics.push(loadImage(wasteBins[i].url));
    }
}

function mousePressed() {
    //Use mousePressed to drag each trash item within the canvas
    //I created parameters for each trash image, so that the mouse can click
    //within the area of each trash image.
    for (var i = 0; i < wastes.length; i++) {
        wastes[i].informing = false; //Clear information when mouse is pressed.
        var x0 = wastes[i].x; //top left X coordinate
        var y0 = wastes[i].y; //top right Y coordinate
        var x1 = wastes[i].x + wastePics[i].width; //top right X coordinate
        var y1 = wastes[i].y + wastePics[i].height; //bottom y coordinate
        if (!selected & x0 < mouseX && mouseX < x1 && y0 < mouseY && mouseY < y1) {
            selected = true; //trash is selected within the image boundaries
            wastes[i].dragging = true;
        }
    }
}

function mouseReleased() {
    //Use mouseReleased to evaluate whether the chosen trash is
    //dropped into the correct bin.
    //Like previously, I created specific parameters for trashbin images.
    selected = false;
    for (var i = 0; i < wastes.length; i++) {
        if (wastes[i].dragging) {
            wastes[i].dragging = false;
            var corrBin = wasteBins[wastes[i].type];
            var corrBinPic = wasteBinsPics[wastes[i].type];
            var x0 = corrBin.x;
            var y0 = corrBin.y;
            var x1 = corrBin.x + corrBinPic.width;
            var y1 = corrBin.y + corrBinPic.height;
            if (y0 < mouseY & mouseY < y1) {
                //Since all trashbins have the same Y height, I differentiated
                //the correct bin by determining the X locations
                if (x0 < mouseX && mouseX < x1) { //Correct Bin
                    correct = true;
                    wastes[i].stay = false; //waste will disappear
                    wastes[i].informing = false; //information will not show
                    score += 1; //score is updated by one when answer is correct
                } else {
                    //if incorrect, information will show up, and
                    //the waste image will go back to its initial location
                    correct = false;
                    wastes[i].informing = true;
                    wastes[i].x = wastes[i].initX; //initial X coordinate
                    wastes[i].y = wastes[i].initY; //initial Y coordinate
                }
            } else {
                correct = false; //the default status
            }
        }
    }
}