Shannon Case – Final Project

sketch

//Shannon Case
//Section D
//scase@andrew.cmu.edu
//final project

var eye = [];
var eyeframes = [];

var jar = [];
var jarframes = [];

var fish = [];
var fishframes = [];

var fl = [];
var flframes = [];

var tummy = [];
var tummyframes = [];

var bubbles = [];
var bubblesframes = [];

var pows = [];
var powsframes = [];

var cigs = [];
var cigsframes = [];

var lips = [];
var lipsframes = [];

var swirl = [];
var swirlframes = [];

var word = [];
var wordframes = [];

//global variables for the arrays to store all of my images 

var index;
var index2;
var index3;
var index4;
var index5;
var index6;
var index7;
var index8;
var index9;
var index10;
var index11;

//create index to display images

var s1;
var s2;
var s3;
var s4;
var s5;
var s6;
var s7;
var s8;
var s9;
var s10;
var s11;

//variables for each sound

function preload(){
   s1 = loadSound("audio/sound1.ogg");
   s2 = loadSound("audio/sound2.ogg");
   s3 = loadSound("audio/sound3.ogg");
   s4 = loadSound("audio/poppopPOP.ogg");
   s5 = loadSound("audio/sound4.wav");
   s6 = loadSound("audio/sound6.wav");
   s7 = loadSound("audio/sound7.wav");
   s8 = loadSound("audio/sound8.wav");
   s9 = loadSound("audio/sound9.wav");
   s10 = loadSound("audio/sound10.wav");
   s11 = loadSound("audio/sound11.wav");

  myLoop = loadSound("audio/bgsound.ogg");

//load sounds
  
  eye[0]="images/eye1.png";
  eye[1]="images/eye2.png";
  eye[2]="images/eye3.png";
  eye[3]="images/eye4.png";
  eye[4]="images/eye5.png";
  eye[5]="images/eye6.png";
  eye[6]="images/eye7.png";
  eye[7]="images/eye8.png";
  
  jar[0]="images/jar1.png";
  jar[1]="images/jar2.png";
  jar[2]="images/jar1 2.png";
  jar[3]="images/jar2 2.png";
  jar[4]="images/jar1 3.png";
  jar[5]="images/jar2 3.png";
  jar[6]="images/jar1 4.png";
  jar[7]="images/jar1 4.png";
  
  fish[0]="images/fish1.png";
  fish[1]="images/fish2.png";
  fish[2]="images/fish3.png";
  fish[3]="images/fish4.png";
  fish[4]="images/fish5.png";
  fish[5]="images/fish3.png";
  fish[6]="images/fish7.png";
  fish[7]="images/fish8.png";
  
  fl[0]="images/f1.png";
  fl[1]="images/f2.png";
  fl[2]="images/f3.png";
  fl[3]="images/f4.png";
  fl[4]="images/f5.png";
  fl[5]="images/f6.png";
  fl[6]="images/f7.png";
  fl[7]="images/f8.png";
  
  tummy[0]="images/tummy1.png";
  tummy[1]="images/tummy2.png";
  tummy[2]="images/tummy3.png";
  tummy[3]="images/tummy4.png";
  tummy[4]="images/tummy5.png";
  tummy[5]="images/tummy6.png";
  tummy[6]="images/tummy7.png";
  tummy[7]="images/tummy8.png";
  
  bubbles[0]="images/bubbles1.png";
  bubbles[1]="images/bubbles2.png";
  bubbles[2]="images/bubbles3.png";
  bubbles[3]="images/bubbles4.png";
  bubbles[4]="images/bubbles5.png";
  bubbles[5]="images/bubbles6.png";
  bubbles[6]="images/bubbles7.png";
  bubbles[7]="images/bubbles8.png";
  
  pows[0]="images/pow1.png";
  pows[1]="images/pow2.png";
  pows[2]="images/pow3.png";
  pows[3]="images/pow4.png";
  pows[4]="images/pow5.png";
  pows[5]="images/pow6.png";
  pows[6]="images/pow7.png";
  pows[7]="images/pow8.png";
  
  cigs[0]="images/cig1.png";
  cigs[1]="images/cig2.png";
  cigs[2]="images/cig3.png";
  cigs[3]="images/cig4.png";
  cigs[4]="images/cig5.png";
  cigs[5]="images/cig6.png";
  cigs[6]="images/cig7.png";
  cigs[7]="images/cig8.png";
  
  lips[0]="images/lips1.png";
  lips[1]="images/lips2.png";
  lips[2]="images/lips3.png";
  lips[3]="images/lips4.png";
  lips[4]="images/lips5.png";
  lips[5]="images/lips6.png";
  lips[6]="images/lips7.png";
  lips[7]="images/lips8.png";
  
  swirl[0]="images/swirl1.png";
  swirl[1]="images/swirl2.png";
  swirl[2]="images/swirl3.png";
  swirl[3]="images/swirl4.png";
  swirl[4]="images/swirl5.png";
  swirl[5]="images/swirl6.png";
  swirl[6]="images/swirl7.png";
  swirl[7]="images/swirl8.png";
  
  word[0]="images/word1.png";
  word[1]="images/word2.png";
  word[2]="images/word3.png";
  word[3]="images/word4.png";
  word[4]="images/word5.png";
  word[5]="images/word6.png";
  word[6]="images/word7.png";
  word[7]="images/word8.png";
  
//load all the images
  
  for(var a = 0; a<8; a++){
    eyeframes[a] = loadImage(eye[a]);
    }
    
  for(var b = 0; b<8; b++){
    jarframes[b] = loadImage(jar[b]);
    }
    
  for(var c = 0; c<8; c++){
    fishframes[c] = loadImage(fish[c]);
    }
    
  for(var d = 0; d<8; d++){
    flframes[d] = loadImage(fl[d]);
    }
  
  for(var e = 0; e<8; e++){
    tummyframes[e] = loadImage(tummy[e]);
    }
    
  for(var f = 0; f<8; f++){
    bubblesframes[f] = loadImage(bubbles[f]);
    }
    
  for(var g = 0; g<8; g++){
    powsframes[g] = loadImage(pows[g]);
    }
    
  for(var h = 0; h<8; h++){
    cigsframes[h] = loadImage(cigs[h]);
    }
    
  for(var i = 0; i<8; i++){
    lipsframes[i] = loadImage(lips[i]);
    }
    
  for(var j = 0; j<8; j++){
    swirlframes[j] = loadImage(swirl[j]);
    }
    
  for(var k = 0; k<8; k++){
    wordframes[k] = loadImage(word[k]);
    }
    
  //put all the images into arrays
}

function setup() {
  createCanvas(windowWidth,windowHeight);
  myLoop.loop(); //play background sound
   background(0,0,80);
   imageMode(CENTER); 
   frameRate(10); //set frame rate for the animations
}

function draw() {
  background(0,0,80); //refresh background to play through animations
  

index++;

    if(index < eyeframes.length)
      image(eyeframes[index], width/2, height/2, eyeframes[index].width/2, eyeframes[index].height/2);
      
index2++;

    if(index2 < jarframes.length)
      image(jarframes[index2], width/2, height/2, jarframes[index2].width/2, jarframes[index2].height/2);
      
index3++;

    if(index3 < fishframes.length)
      image(fishframes[index3], width/2, height/2, fishframes[index3].width/5, fishframes[index3].height/5);
      
index4++;

    if(index4 < flframes.length)
      image(flframes[index4], width/2, height/2, flframes[index4].width/3, flframes[index4].height/3);
      
index5++;

    if(index5 < tummyframes.length)
      image(tummyframes[index5], width/2, height/2, tummyframes[index5].width/3, tummyframes[index5].height/3);
      
index6++;

    if(index6 < bubblesframes.length)
      image(bubblesframes[index6], width/2, height/2, bubblesframes[index6].width/3, bubblesframes[index6].height/3);
      
index7++;

    if(index7 < powsframes.length)
      image(powsframes[index7], width/2, height/2, powsframes[index7].width/3, powsframes[index7].height/3);
      
index8++;

    if(index8 < cigsframes.length)
      image(cigsframes[index8], width/2, height/2, cigsframes[index8].width/3, cigsframes[index8].height/3);
     
index9++;

    if(index9 < lipsframes.length)
      image(lipsframes[index9], width/2, height/2, lipsframes[index9].width/2, lipsframes[index9].height/2);
      
index10++;

    if(index10 < swirlframes.length)
      image(swirlframes[index10], width/2, height/2, swirlframes[index10].width/2, swirlframes[index10].height/2);
      
index11++;

    if(index11 < swirlframes.length)
      image(wordframes[index11], width/2, height/2, wordframes[index11].width/2, wordframes[index11].height/2);
 
 //plays each image if its index is set to 0     
} 


function keyPressed(){
  if(key==="A"){
    s2.pause();
    s3.pause();
    s4.pause();
    s1.play();
    index=0;
  }
  if(key==="B"){
    s1.pause();
    s3.pause();
    s4.pause();
    s2.play();
    index2 = 0;
  }

  if(key==="C"){
    s1.pause();
    s2.pause();
    s4.pause();
    s3.play();
    index3 = 0;
  }
  
  if(key==="D"){
    s1.pause();
    s2.pause();
    s3.pause();
    s4.play();
    index4 = 0;
  }
  
  if(key==="E"){
    s1.pause();
    s2.pause();
    s3.pause();
    s5.play();
    index5 = 0;
  }
  
  if(key==="F"){
    s1.pause();
    s2.pause();
    s3.pause();
    s6.play();
    index6 = 0;
  }
  
  if(key==="G"){
    s1.pause();
    s2.pause();
    s3.pause();
    s7.play();
    index7 = 0;
  }
  
if(key==="H"){
    s1.pause();
    s2.pause();
    s3.pause();
    s8.play();
    index8 = 0;
  }
  
if(key==="I"){
    s1.pause();
    s2.pause();
    s3.pause();
    s10.play();
    index9 = 0;
  }
  
if(key==="J"){
    s1.pause();
    s2.pause();
    s3.pause();
    s9.play();
    index10 = 0;
  }
  
if(key==="K"){
    s1.pause();
    s2.pause();
    s3.pause();
    s11.play();
    index11 = 0;
  }
  // if the key is pressed for a certain image, this sets the image index to 0, and plays the animation
 }

For my final project I chose to do a series of short animations and sounds. I wanted to hand draw each of these animations to contrast with the digital way that they are presented. I spend a lot of time drawing each frame for these animations, and then I edited the frames in photoshop so that they would fit into my code. If you press on any keyboard letter A-K, an animation and sound will play. I really struggled to get the animations to play at first, but once I figured out how to play each one separately as related to a key I spent the most amount of time drawing each animation and editing them in photoshop, and recording/editing sounds .

All of the images in my project were created by me. Most of the sounds were things that I recorded using my iPhone, and a few were dowloaded from Freesound.org. I used Audacity to edit all the sounds so that they matched with my animations.

I have to include a link to download my file, as I have over 100 files in my assets folders and they exceed the maximum file size for a wordpress post. It takes a few seconds for all these assets to load. Also my project needs a local server to run.

Here is an example of one of the animations, but it’s really hard to screenshot these short animations so I would definitely recommend downloading it and trying it yourself 🙂