Rachel Shin – Project 10 – Pokemon

reshin-10-pokemon

/* Rachel Shin
reshin@andrew.cmu.edu
15-104 Section B
Project 10 

*/

// sketch.js template for sound and DOM
//
// This is the 15104 Version 1 template for sound and Dom.
// This template prompts the user to click on the web page
// when it is first loaded.
// The function useSound() must be called in setup() if you
// use sound functions.
// The function soundSetup() is called when it is safe
// to call sound functions, so put sound initialization there.
// (But loadSound() should still be called in preload().)

var imageLinks = [
    "https://i.imgur.com/VyMU3A0.png", //charmander
    "https://i.imgur.com/qji2HbI.png", //pikachu
    "https://i.imgur.com/dHUobNP.png", //squirtle
    "https://i.imgur.com/bugsaaS.png", //bulbasaur
]

//image variables

var charmander;
var pikachu;
var squirtle;
var bulbasaur;

//sound variables;
var fire;
var thunder;
var water;
var grass;

function preload() {
    //loading images
    charmander = loadImage("https://i.imgur.com/VyMU3A0.png");
    pikachu = loadImage("https://i.imgur.com/qji2HbI.png");
    squirtle = loadImage("https://i.imgur.com/dHUobNP.png");
    bulbasaur = loadImage("https://i.imgur.com/bugsaaS.png");

    //loading sounds
    fire = loadSound("fire-2.wav");
    thunder = loadSound("thunder.wav");
    water = loadSound("water-4.wav");
    grass = loadSound("grass.wav");

    // call loadImage() and loadSound() for all media files here
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(480, 480);
    usesound();
}


function soundSetup() { // setup for audio generation
    fire.setVolume(3);
    thunder.setVolume(1);
    water.setVolume(1.5);
    grass.setVolume(1.2);
}


function draw() {
    background(196, 186, 118);;

    // images of the four elements
    image(charmander, 0, 0, width/2, height/2);
    image(pikachu, width/2, 0, width/2, height/2);
    image(squirtle, 0, height/2, width/2, height/2);
    image(bulbasaur, width/2, height/2, width/2, height/2);
}
  
function mousePressed() {

    if (mouseX >= 0 & mouseX < width/2 && mouseY >= 0 && mouseY < height/2) {
        fire.play();
    } 
    else { 
        fire.pause();
    }

    if (mouseX >= 0 & mouseX < width/2 && mouseY >= height/2 && mouseY < height) {
        water.play();
    } 
    else {
        water.pause();
    }

    if (mouseX >= width/2 & mouseX < width && mouseY >= 0 && mouseY < height/2) {
        thunder.play();
    } 
    else {
        thunder.pause(); 
    }

    if (mouseX >= width/2 & mouseX < width && mouseY >= height/2 && mouseY < height) {
        grass.play();
    } 
    else {
        grass.pause();
    }
}

After thinking of ways to incorporate 4 different sounds, I immediately thought of the 4 elements, and I decided to connect it to one of my childhood favorites- Pokemon. I decided to use the first four Pokemon that I loved and used their types and connected it to different sounds. I was inspired by the legendary Pokemon mural from the first season of Pokemon. It was fun to configure sound and visuals together especially when it came to designing my own version of the mural with 4 basic Pokemon that I loved as a kid.