Computational Media

p5.js Code

var canvasWidth = 670; var canvasHeight = 458; var apples = []; var myCount = 0; var applePosition; var applePositionX; var applePositionY; var howManyApples = 0; var lose = 0; var prevLose = lose; // Buttons var button; var playButton; var pauseButton; // Images var bearBasket; var blank; var mybearCover; var mybearOne; var mybearTwo; var mybearThree; var mybearFour; var mybearFive; var mybearSix; var mybearSeven; var mybearEight; var mybearNine; var mybearTen; // Assest Images var backgroundTree; var flour; var sugar; var cinnamon; var kodiBag; // Sounds var openSound; var testSound; var gameSound; var gameSoundTwo; var getReadySound; var getReadySoundTwo; var getSetSound; var getSetSoundTwo; var page1Sound; var page2Sound; var page3Sound; var page4Sound; var page5Sound; var page6Sound; var page7Sound; var page8Sound; var page9Sound; var page10Sound; var page11Sound; var page12Sound; var page13Sound; var page14Sound; var creditSound; // Set currentStatus var currentStatus = "start"; var trackStatus = ''; var gravity = 0.5; var myKodi = null; var imageLibrary = null; // Game variables var numApplesToCatch = 10; var kodisCart; var groceryListItems; var trackCart = 0; var item1X; var item2X; var item3X; var clickRange = 30; var item1Click = false; var item2Click = false; var item3Click = false; function preload(){ mybearCover = loadGif("images/cover.gif"); blank = loadImage("images/blank.png"); bearBasket = loadGif("images/bearBasket.gif"); mybearOne = loadGif("images/kodi_1.gif"); mybearTwo = loadGif("images/kodiCookie.gif"); mybearThree = loadGif("images/kodiRuns.gif"); mybearFour = loadGif("images/kodiDoughToss.gif"); mybearFive = loadGif("images/kodi_meal.gif"); mybearSix = loadGif("images/kodi_pie.gif"); mybearSeven = loadGif("images/kodiOven.gif"); mybearEight = loadGif("images/kodiTimer.gif"); mybearNine = loadGif("images/kodiPieFinished.gif"); mybearTen = loadGif("images/kodiGoodbye.gif"); // Assest Images backgroundTree = loadImage("images/treeBasketScene.png"); flour = loadImage("images/flour.png"); sugar = loadImage("images/sugar.png"); cinnamon = loadImage("images/cinnamon.png"); kodiBag = loadImage("images/kodiBag.png"); imageLibrary = { "start" : mybearCover, "pageOne" : mybearOne, "pageTwo" : mybearTwo, "pageThree" : mybearThree, "pageFour" : mybearFour, "pageFive" : mybearFive, "pageSix" : mybearSix, "pageSeven" : blank, "pageEight" : blank, "pageNine" : blank, "pageTen" : blank, "pageEleven" : mybearSeven, "pageTwelve" : mybearEight, "pageThirteen" : mybearNine, "pageFourteen" : mybearTen, "pageGame" : bearBasket, "getReadyOne" : blank, "getReadyTwo" : blank, "getSetOne" : blank, "getReadyTwo" : blank, "page9" : blank, "creditPage" : blank, "startLoop" : mybearCover } } function setup() { createCanvas(canvasWidth, canvasHeight); testSound = document.getElementById("testSound"); openSound = document.getElementById("openSound"); gameSound = document.getElementById("gameSound"); gameSoundTwo = document.getElementById("gameSound"); getReadySound = document.getElementById("getReadySound"); getReadySoundTwo = document.getElementById("getReadySoundTwo"); getSetSound = document.getElementById("getSetSound"); getSetSoundTwo = document.getElementById("getSetSoundTwo"); page1Sound = document.getElementById("page1Sound"); page2Sound = document.getElementById("page2Sound"); page3Sound = document.getElementById("page3Sound"); page4Sound = document.getElementById("page4Sound"); page5Sound = document.getElementById("page5Sound"); page6Sound = document.getElementById("page6Sound"); page7Sound = document.getElementById("page7Sound"); page8Sound = document.getElementById("page8Sound"); page9Sound = document.getElementById("page9Sound"); page10Sound = document.getElementById("page10Sound"); page11Sound = document.getElementById("page11Sound"); page12Sound = document.getElementById("page12Sound"); page13Sound = document.getElementById("page13Sound"); page14Sound = document.getElementById("page14Sound"); creditSound = document.getElementById("creditSound"); textFont("Georgia"); textAlign(CENTER); textStyle(NORMAL); button = createButton('Start'); button.position(270, (canvasHeight/2)-60); pauseButton = createElement('i'); pauseButton.addClass('fa fa-pause-circle pauseButton'); pauseButton.position(canvasWidth-40, 10); playButton = createElement('i'); playButton.addClass('fa fa-play-circle playButton'); playButton.position(canvasWidth-40, 10); pauseButton.style("display", "none"); playButton.style("display", "none"); // Declare objects for game2 kodisCart = new GroceryCart(); groceryListItems = new GroceryItems(); page1Sound.onended = function() { page1Sound.pause(); currentStatus = "pageTwo"; } page2Sound.onended = function() { page2Sound.pause(); currentStatus = "pageThree"; } page3Sound.onended = function() { page3Sound.pause(); currentStatus = "pageFour"; } page4Sound.onended = function() { page4Sound.pause(); currentStatus = "pageFive"; } page5Sound.onended = function() { page5Sound.pause(); currentStatus = "pageSix"; } page6Sound.onended = function() { page6Sound.pause(); currentStatus = "pageSeven"; } page7Sound.onended = function() { page7Sound.pause(); currentStatus = "getReadyOne"; } page8Sound.onended = function() { page8Sound.pause(); currentStatus = "pageNine"; } page9Sound.onended = function() { page9Sound.pause(); currentStatus = "getReadyTwo"; } page10Sound.onended = function() { page10Sound.pause(); currentStatus = "pageEleven"; } page11Sound.onended = function() { page11Sound.pause(); currentStatus = "pageTwelve"; } page12Sound.onended = function() { page12Sound.pause(); currentStatus = "pageThirteen"; } page13Sound.onended = function() { page13Sound.pause(); currentStatus = "pageFourteen"; } page14Sound.onended = function() { page14Sound.pause(); currentStatus = "creditPage"; } creditSound.onended = function() { creditSound.pause(); currentStatus = "startLoop"; } getReadySound.onended = function(){ getReadySound.pause(); currentStatus = "getSetOne"; } getReadySoundTwo.onended = function(){ getReadySoundTwo.pause(); currentStatus = "getSetTwo"; } getSetSound.onended = function(){ getSetSound.pause(); currentStatus = "pageGame"; } getSetSoundTwo.onended = function(){ getSetSoundTwo.pause(); currentStatus = "pageGameTwo"; } //pauseButton.mousePressed(pauseGame); } function startStory() { openSound.pause(); currentStatus = "pageOne"; //removeElements(button); // this will remove the div and p, not canvas button.style("display", "none"); // pauseButton = createElement('i'); // pauseButton.addClass('fa fa-pause-circle pauseButton'); // pauseButton.position(canvasWidth-40, 10); // playButton = createElement('i'); // playButton.addClass('fa fa-play-circle playButton'); // playButton.position(canvasWidth-40, 10); pauseButton.style("display", "block"); } function pauseGame(){ currentStatus = "paused"; } function continueGame(){ currentStatus = "play"; } function draw() { button.mousePressed(startStory); if(currentStatus == "pageOne"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); textSize(20); text('Once upon a time, there was a bear named Kodi', canvasWidth/2, canvasHeight/2 - 130); if(myKodi.currentStatus != currentStatus){ myKodi.updateImage(imageLibrary[currentStatus]); } myKodi.drawBear(); if(page1Sound.paused){ page1Sound.currentTime = 0; page1Sound.play(); } } else if (currentStatus == "pageGame"){ console.log(currentStatus); gravity = 0.5; trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); playAppleGame(); if(gameSound.paused){ gameSound.currentTime = 0; gameSound.play(); } fill(250); noStroke(); ellipse(canvasWidth-27, 26, 40, 40); } else if (currentStatus == "pageGameTwo"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); playGroceryGame(); if(item1X < 0 && item2X < 0 && item3X < 0){ currentStatus = "pageTen"; } if(gameSoundTwo.paused){ gameSoundTwo.currentTime = 0; gameSoundTwo.play(); } } else if (currentStatus == "continuePage"){ console.log(currentStatus); trackStatus = currentStatus; removeElements(); // gameSoundTwo.pause(); // Manually turn off game sound background(250); fill(0); //text('Now that Kodi has apples, he still needs a few indgredients more', canvasWidth/2, canvasHeight/2); text('To Be Continued...', canvasWidth/2, canvasHeight/2); if(myKodi.currentStatus != currentStatus){ console.log(imageLibrary[currentStatus]); } if(openSound.paused){ openSound.currentTime = 0; openSound.play(); } } else if (currentStatus == "creditPage"){ console.log(currentStatus); trackStatus = currentStatus; //removeElements(); pauseButton.style("display", "none"); playButton.style("display", "none"); background(250); fill(0); //text('Now that Kodi has apples, he still needs a few indgredients more', canvasWidth/2, canvasHeight/2); text('Created By Steven Simon\nIntro to Computational Media\nInteractive Telecommunications 2016', canvasWidth/2, canvasHeight/2); if(myKodi.currentStatus != currentStatus){ console.log(imageLibrary[currentStatus]); } if(creditSound.paused){ creditSound.currentTime = 0; creditSound.play(); } } else if (currentStatus == "start"){ console.log(currentStatus); trackStatus = currentStatus; if(openSound.paused){ openSound.currentTime = 0; openSound.play(); } background(250); fill(0); textSize(40); text('Kodi Learns to Cook Dessert', canvasWidth/2, canvasHeight/2-100); if(!myKodi){ myKodi = new Kodi( canvasWidth/2, canvasHeight/2 ); if(myKodi.currentStatus != currentStatus){ myKodi.updateImage(imageLibrary[currentStatus]); } } myKodi.drawBear(); } else if (currentStatus == "startLoop"){ console.log(currentStatus); trackStatus = currentStatus; if(openSound.paused){ openSound.currentTime = 0; openSound.play(); } background(250); fill(0); textSize(40); text('Kodi Learns to Cook Dessert', canvasWidth/2, canvasHeight/2-100); if(myKodi.currentStatus != currentStatus){ myKodi.updateImage(imageLibrary[currentStatus]); } myKodi.drawBear(); button.style("display", "inline-block"); // Reset game2 variables item1Click = false; item2Click = false; item3Click = false; } else if (currentStatus == "pageTwo"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('who loved to eat.', canvasWidth/2, canvasHeight/2 -130); if(myKodi.currentStatus != currentStatus){ myKodi.updateImage(imageLibrary[currentStatus]); } myKodi.drawBear(); if(page2Sound.paused){ page2Sound.currentTime = 0; page2Sound.play(); } } else if (currentStatus == "pageThree"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('And Kodi had a weakness for, especially, anything sweet.', canvasWidth/2, canvasHeight/2 -130); if(myKodi.currentStatus != currentStatus){ myKodi.updateImage(imageLibrary[currentStatus]); } myKodi.drawBear(); if(page3Sound.paused){ page3Sound.currentTime = 0; page3Sound.play(); } } else if (currentStatus == "pageFour"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('Kodi loved to eat, but he was not a good cook.', canvasWidth/2, canvasHeight/2 -130); if(myKodi.currentStatus != currentStatus){ myKodi.updateImage(imageLibrary[currentStatus]); } myKodi.drawBear(); if(page4Sound.paused){ page4Sound.currentTime = 0; page4Sound.play(); } } else if (currentStatus == "pageFive"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('And often times gave the meals\nhe prepared for himself a hard second look.', canvasWidth/2, canvasHeight/2 -130); if(myKodi.currentStatus != currentStatus){ myKodi.updateImage(imageLibrary[currentStatus]); } myKodi.drawBear(); if(page5Sound.paused){ page5Sound.currentTime = 0; page5Sound.play(); } } else if (currentStatus == "pageSix"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('Today, Kodi has decided that he wants to learn how\nto cook his favorite dessert, an apple pie, for later and now.', canvasWidth/2, canvasHeight/2 -130); if(myKodi.currentStatus != currentStatus){ myKodi.updateImage(imageLibrary[currentStatus]); } myKodi.drawBear(); if(page6Sound.paused){ page6Sound.currentTime = 0; page6Sound.play(); } } else if (currentStatus == "pageSeven"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('The first thing to do is to gather enough apples for the pie.', canvasWidth/2, canvasHeight/2); if(myKodi.currentStatus != currentStatus){ console.log(imageLibrary[currentStatus]); } if(page7Sound.paused){ page7Sound.currentTime = 0; page7Sound.play(); } } else if (currentStatus == "pageEight"){ console.log(currentStatus); trackStatus = currentStatus; gameSound.pause(); // Manually turn off game sound pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('Now that Kodi has apples, he still needs a few ingredients more.', canvasWidth/2, canvasHeight/2); if(myKodi.currentStatus != currentStatus){ console.log(imageLibrary[currentStatus]); } if(page8Sound.paused){ page8Sound.currentTime = 0; page8Sound.play(); } } else if (currentStatus == "pageNine"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('Can you help Kodi get the ingredients on his list to his basket,\nfrom the shelf in the store?', canvasWidth/2, canvasHeight/2); if(myKodi.currentStatus != currentStatus){ console.log(imageLibrary[currentStatus]); } if(page9Sound.paused){ page9Sound.currentTime = 0; page9Sound.play(); } } else if (currentStatus == "pageTen"){ console.log(currentStatus); trackStatus = currentStatus; gameSoundTwo.pause(); // Manually turn off game sound pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('Kodi will mix the ingredients in order to make the pie.', canvasWidth/2, canvasHeight/2); if(myKodi.currentStatus != currentStatus){ console.log(imageLibrary[currentStatus]); } if(page10Sound.paused){ page10Sound.currentTime = 0; page10Sound.play(); } } else if (currentStatus == "pageEleven"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('Kodi preheats the oven and makes the pie crust.', canvasWidth/2, canvasHeight/2 -130); if(myKodi.currentStatus != currentStatus){ myKodi.updateImage(imageLibrary[currentStatus]); } myKodi.drawBear(); if(page11Sound.paused){ page11Sound.currentTime = 0; page11Sound.play(); } } else if (currentStatus == "pageTwelve"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('Into the oven the pie goes once ready, and setting the timer, a must.', canvasWidth/2, canvasHeight/2 -130); if(myKodi.currentStatus != currentStatus){ myKodi.updateImage(imageLibrary[currentStatus]); } myKodi.drawBear(); if(page12Sound.paused){ page12Sound.currentTime = 0; page12Sound.play(); } } else if (currentStatus == "pageThirteen"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('The pie is now finished, and Kodi is ready to eat!', canvasWidth/2, canvasHeight/2 -130); if(myKodi.currentStatus != currentStatus){ myKodi.updateImage(imageLibrary[currentStatus]); } myKodi.drawBear(); if(page13Sound.paused){ page13Sound.currentTime = 0; page13Sound.play(); } } else if (currentStatus == "pageFourteen"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('Kodi wants to thank you,\nand hopes that you learned that cooking can be fun,\nin fact, a real treat.', canvasWidth/2, canvasHeight/2 -130); if(myKodi.currentStatus != currentStatus){ myKodi.updateImage(imageLibrary[currentStatus]); } myKodi.drawBear(); if(page14Sound.paused){ page14Sound.currentTime = 0; page14Sound.play(); } } else if (currentStatus == "getReadyOne"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('Use the mouse to help\nKodi catch all of the apples.', canvasWidth/2, canvasHeight/2); if(myKodi.currentStatus != currentStatus){ console.log(imageLibrary[currentStatus]); } if(getReadySound.paused){ getReadySound.currentTime = 0; getReadySound.play(); } } else if (currentStatus == "getReadyTwo"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); gameSound.pause(); // Manually turn off game sound background(250); fill(0); text("Click the items to drop\nthem into Kodi's bag.", canvasWidth/2, canvasHeight/2); if(myKodi.currentStatus != currentStatus){ console.log(imageLibrary[currentStatus]); } if(getReadySoundTwo.paused){ getReadySoundTwo.currentTime = 0; getReadySoundTwo.play(); } } else if (currentStatus == "getSetOne"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('Get set!', canvasWidth/2, canvasHeight/2); if(myKodi.currentStatus != currentStatus){ console.log(imageLibrary[currentStatus]); } if(getSetSound.paused){ getSetSound.currentTime = 0; getSetSound.play(); } } else if (currentStatus == "getSetTwo"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); background(250); fill(0); text('Get set!', canvasWidth/2, canvasHeight/2); if(myKodi.currentStatus != currentStatus){ console.log(imageLibrary[currentStatus]); } if(getSetSoundTwo.paused){ getSetSoundTwo.currentTime = 0; getSetSoundTwo.play(); } } else if (currentStatus == "paused"){ pauseButton.style("display", "none"); playButton.style("display", "block"); page1Sound.pause(); page2Sound.pause(); page3Sound.pause(); page4Sound.pause(); page5Sound.pause(); page6Sound.pause(); page7Sound.pause(); page8Sound.pause(); page9Sound.pause(); page10Sound.pause(); page11Sound.pause(); page12Sound.pause(); page13Sound.pause(); page14Sound.pause(); getReadySound.pause(); getReadySoundTwo.pause(); getSetSound.pause(); getSetSoundTwo.pause(); gameSound.pause(); gameSoundTwo.pause(); gravity = -2; console.log("Paused!"); } else if (currentStatus == "play"){ pauseButton.style("display", "block"); playButton.style("display", "none"); if(trackStatus == 'pageOne'){ if(page1Sound.paused){ page1Sound.play(); } currentStatus = "pageOne"; } else if (trackStatus == 'pageTwo'){ if(page2Sound.paused){ page2Sound.play(); } currentStatus = "pageTwo"; } else if (trackStatus == 'pageThree'){ if(page3Sound.paused){ page3Sound.play(); } currentStatus = "pageThree"; } else if (trackStatus == 'pageFour'){ if(page4Sound.paused){ page4Sound.play(); } currentStatus = "pageFour"; } else if (trackStatus == 'pageFive'){ if(page5Sound.paused){ page5Sound.play(); } currentStatus = "pageFive"; } else if (trackStatus == 'pageSix'){ if(page6Sound.paused){ page6Sound.play(); } currentStatus = "pageSix"; } else if (trackStatus == 'pageSeven'){ if(page7Sound.paused){ page7Sound.play(); } currentStatus = "pageSeven"; } else if (trackStatus == 'pageEight'){ if(page8Sound.paused){ page8Sound.play(); } currentStatus = "pageEight"; } else if (trackStatus == 'pageNine'){ if(page9Sound.paused){ page9Sound.play(); } currentStatus = "pageNine"; } else if (trackStatus == 'pageTen'){ if(page10Sound.paused){ page10Sound.play(); } currentStatus = "pageTen"; } else if (trackStatus == 'pageEleven'){ if(page11Sound.paused){ page11Sound.play(); } currentStatus = "pageEleven"; } else if (trackStatus == 'pageTwelve'){ if(page12Sound.paused){ page12Sound.play(); } currentStatus = "pageTwelve"; } else if (trackStatus == 'pageThirteen'){ if(page13Sound.paused){ page13Sound.play(); } currentStatus = "pageThirteen"; } else if (trackStatus == 'pageFourteen'){ if(page14Sound.paused){ page14Sound.play(); } currentStatus = "pageFourteen"; } else if (trackStatus == 'getReadyOne'){ if(getReadySound.paused){ getReadySound.play(); } currentStatus = "getReadyOne"; } else if (trackStatus == 'getReadyTwo'){ if(getReadySoundTwo.paused){ getReadySoundTwo.play(); } currentStatus = "getReadyTwo"; } else if (trackStatus == 'getSetOne'){ if(getSetSound.paused){ getSetSound.play(); } currentStatus = "getSetOne"; } else if (trackStatus == 'getSetTwo'){ if(getSetSoundTwo.paused){ getSetSoundTwo.play(); } currentStatus = "getSetTwo"; } else if (trackStatus == 'pageGame'){ if(gameSound.paused){ gameSound.play(); } currentStatus = "pageGame"; gravity = 0.5; } else if (trackStatus == 'pageGameTwo'){ if(gameSoundTwo.paused){ gameSoundTwo.play(); } currentStatus = "pageGameTwo"; } console.log("Resuming!"); } cursor(HAND); } function mouseClicked(){ if (currentStatus == "pageGameTwo"){ if (mouseX > 200-clickRange && mouseX < 200+clickRange){ if (mouseY > 100-clickRange && mouseY < 100+clickRange){ item1Click = true; } } else if (mouseX > 300-clickRange && mouseX < 300+clickRange){ if (mouseY > 300-clickRange && mouseY < 300+clickRange){ item2Click = true; } } else if (mouseX > 100-clickRange && mouseX < 100+clickRange){ if (mouseY > 200-clickRange && mouseY < 200+clickRange){ item3Click = true; } } } } /******************************************** Apple Game *******************************************/ function playAppleGame(){ if(myKodi.currentStatus != currentStatus){ myKodi.updateImage(imageLibrary[currentStatus]); } // Start the game background(250); fill(0); text('Can you help Kodi catch\n'+myKodi.applesLeft+' apples falling from the sky?', canvasWidth/2, canvasHeight/2); console.log(myKodi.caughtApples); image(backgroundTree, canvasWidth -420, 0); makeApples(); // Make it rain apples myKodi.drawBear(mouseX, canvasHeight/2 ); if(myKodi.caughtApples > numApplesToCatch){ currentStatus = "pageEight"; myKodi.applesLeft = 10; myKodi.caughtApples = 0; } } function makeApples(){ if (myCount == 26) { console.log("newApple"); apples.push(new Apple(random(0 + 15, canvasWidth - 15), 0)); myCount = 0; } myCount++; // Adding apples to the array? for (var i = 0; i < apples.length; i++) { apples[i].move(); if(apples[i].caught == false){ apples[i].drawApple(); } if (apples.length > 15) { apples.splice(0, 1); } } } var Apple = function(positionX, positionY){ this.x = positionX; this.y = positionY; this.width = 17.5; this.height = 20; this.speed = 2; this.caught = false; this.drawApple = function(){ // red apple fill(255, 0, 0); noStroke(); ellipse(this.x, this.y, this.width, this.height); ellipse(this.x+5, this.y+9, this.width+4, this.height-8); ellipse(this.x+10, this.y, this.width, this.height); // Stem fill(102, 46, 0); beginShape(); vertex(this.x + 5, this.y- 15); vertex(this.x + 8, this.y- 15); vertex(this.x + 8, this.y- 10); vertex(this.x + 5, this.y- 10); endShape(); // Leaf fill(31, 226, 11); beginShape(); vertex(this.x + 20, this.y- 10); vertex(this.x + 5, this.y- 10); vertex(this.x + 20, this.y- 20); vertex(this.x + 20, this.y- 20); endShape(); }; this.move = function() { //this.y = this.y + this.moveDown; // this runs every second... ah ok so it's subtracting moveUp every second // Detect if the basket is under the apple this.speed += gravity; this.y += this.speed; if(this.y + this.speed + gravity > canvasHeight - 50 && this.caught == false){ if(this.x > mouseX && this.x < mouseX + 15){ this.caught = true; myKodi.caughtApples++; console.log("Caught Apple number "+myKodi.caughtApples); myKodi.applesLeft = myKodi.appleNum - myKodi.caughtApples; } } }; this.where = function(){ return [this.x, this.y]; }; }; /******************************************** Grocery Game *******************************************/ function playGroceryGame(){ // Start the game background(250); fill(0); text('Click each item to drop into the bag.', canvasWidth/2, canvasHeight/2); kodisCart.displayCart(); groceryListItems.displayItems(); groceryListItems.updateItems(); } var GroceryItems = function(){ this.item1PosY = 100; this.item1PosX = 200; this.item2PosY = 300; this.item2PosX = 300; this.item3PosY = 200; this.item3PosX = 100; this.speed = 2; this.gravity = 0.5; this.displayItems = function(){ if (currentStatus == "startLoop"){ this.item1PosY = 100; this.item1PosX = 200; this.item2PosY = 300; this.item2PosX = 300; this.item3PosY = 200; this.item3PosX = 100; } else if (currentStatus == "pageGameTwo"){ if ((this.item1PosY >= height-20)){ if ((this.item1PosX >= trackCart) && (this.item1PosX <= trackCart+100)){ item1Click = true; console.log('Caught and item1PosX:'+this.item1PosX); fill(0, 0, 255); this.item1PosY++; this.item1PosX = -999; item1X = this.item1PosX; } else { item1Click = false; console.log('Not caught'); this.speed = 2; this.gravity = 0.5; fill(255, 255, 0); this.item1PosY = 100; // reset the item position } } else if ((this.item2PosY >= height-20)){ if ((this.item2PosX >= trackCart) && (this.item2PosX <= trackCart+100)){ item2Click = true; console.log('Caught and item2PosX:'+this.item2PosX); fill(0, 0, 255); this.item2PosY++; this.item2PosX = -999; item2X = this.item2PosX; } else { item2Click = false; console.log('Not caught'); this.speed = 2; this.gravity = 0.5; fill(255, 255, 0); this.item2PosY = 300; // reset the item position } } else if ((this.item3PosY >= height-20)){ if ((this.item3PosX >= trackCart) && (this.item3PosX <= trackCart+100)){ item3Click = true; console.log('Caught and item3PosX:'+this.item3PosX); fill(0, 0, 255); this.item3PosY++; this.item3PosX = -999; item3X = this.item3PosX; } else { item3Click = false; console.log('Not caught'); this.speed = 2; this.gravity = 0.5; fill(255, 255, 0); this.item3PosY = 200; // reset the item position } } image(cinnamon, this.item1PosX, this.item1PosY); image(flour, this.item2PosX, this.item2PosY); image(sugar, this.item3PosX, this.item3PosY); } }; this.updateItems = function(){ if (item1Click === true){ this.speed += this.gravity; this.item1PosY += this.speed; } if (item2Click === true){ this.speed += this.gravity; this.item2PosY += this.speed; } if (item3Click === true){ this.speed += this.gravity; this.item3PosY += this.speed; } }; }; var GroceryCart = function(){ this.movingBasket = 0; this.forward = true; this.basketSpeed = 1; this.displayCart = function(){ trackCart = this.movingBasket; noStroke(); fill(255, 0, 0); image(kodiBag, this.movingBasket, height-50); if (this.movingBasket == width-90){ this.movingBasket = width-91; this.forward = false; } else if (this.movingBasket < width-90 && this.forward === true){ this.movingBasket += this.basketSpeed; } else if (this.movingBasket === 0 && this.forward === false){ this.forward = true; this.movingBasket += this.basketSpeed; } else if (this.movingBasket < width-90 && this.forward === false){ this.movingBasket -= this.basketSpeed; } }; }; /******************************************** Make Kodi *******************************************/ var Kodi = function(positionX, positionY){ this.x = positionX; this.y = positionY; this.currentImg = null; this.currentStatus = "init"; this.caughtApples = 0; this.appleNum = 10; this.applesLeft = 10; this.drawBear = function(x ,y){ imageMode(CENTER); if(x && y){ image(this.currentImg, x, y); } else{ image(this.currentImg, this.x, this.y); } imageMode(CORNER); }; this.updateImage = function(newImg){ this.currentImg = newImg; } }
Class 12: Kodi Learns to Cook storybook

For my final Intro to Computational Media project, I created an interactive storybook for children. The book is designed to engage children with animation and user play, while introducing a topic, such as cooking, to children. Click here to see more.

Download the storybook here. Open the terminal application (Mac OS X) and change directories to the folder named KodiBear. Type in 'python -m SimpleHTTPServer 9999' in the terminal application. Open a web browser, and in the url, type 'localhost:9999'.

Class 9: Final Project Proposal

For my final Intro to Computational Media project, I would like to create a digital storybook with games inside the story. The web is a great medium for telling stories, and something that interests me is how to make stories online more engaging. My goal is to seamlessly involve interaction into the story, so that readers may better understand the characters, their dilemmas, and their lessons learned. As a reader navigates through the story, they must perform actions to help the character learn and evolve.

View my Presentation

Class 8: Interactive Animation

I wanted to make an interactive comic book this week, and so I created an interpretation of this. This piece is an interactive animation, where the user can use the mouse to scrub through the animation.


Class 7: Data Visualization

This week I created a sketch that imports a .cvs file from Google spreadsheets. The sketch represents my level of enthusiasm from 8am in the morning to 12am in the night. The sketch is located here.

Class 6: Custom Driver's License

I created a driver's license that you can customize by submiting the form on the right. I tried to create a drag and drop section within p5.js, but I had issues with this. I was able to create a drag and drop section eventually using p5.js, but I also needed to use jQuery, html, and css in order for everything to work.

Class 5: Pop the Balloons

This week I decided to make a game with arrays and objects, where the user has a needle and tries to pop as many balloons as possible. This game is not quite finished because for some reason, when one balloon is popped, all of the other balloons on the screen are popped also. This should work where only one balloon is popped at a time, and the score increments by one each time a balloon is popped. Before I can detect whether the balloons have reached the top before being popped, I would like to figure out how to make it so that one balloon is popped at a time.

Class 4: iPod

Shown is an iPod that listens for a mouseX and a mouseY postion. When you hover over the white controls, the iPod screen flashes. I also wanted to add sound that would play when hovering over the controls, but I was not able to figure this out completely. All I could get was a loading page for the sound file.

I started this project with the intention to use functions and object literals, but after doing some research, I realized that a constructor funciton is what I needed for functionality if I wanted to use objects. Object literals seemed to be a simple grouping of related variables, and constructor functions were meant for more functionality and interaction.

Class 3: New York Windows

This week I was able to work with Michelle to create New York City style windows that are repeated with a for loop. Michelle and I worked on different sketches during the week and came together to combine our sketches and our ideas. We boh agreed that we liked the idea of CSS3 styled windows, and we worked side by side to understand how for loops worked with objects. Our sketch was a bit more challenging since we used objects, but by doing this, we ended up creating code that will be more efficient for future usage. We found inspiration from the Windows of New York website.

Class 2: Mickey Mouse Looking at his random background color

This is a sketch of Mickey Mouse looking around at his, occasionally light blue, but more often green background color. It was actually very difficult to achieve a static, random background color. This is because the draw function continously tries to change the background every second, for every time the function runs. I tried using several different methods to acheive this, and all of them failed. I ended up using a randomSeed function, sort of, that picks a random selection of a random selection. If that line is erased, the program goes back to an acid trip. View my sketch in the p5 editor.

Class 1: MIckey Mouse Sketch

Shown is a drawing of Mickey Mouse made in p5.js. Creating and assembling the shapes was no problem, however, I did struggle a bit with drawing an arc. I used an arc to outline Mickey's nose, and it was really confusing as to where the arc was starting and stopping exactly. I figured it out through trial and error. Another problem I struggled with was rotating ovals for Mickey's cheeks. What I did here was just create circles, but I would have liked to push, translate the grid, rotate the oval, and then pop to go back to the old coordinate system. This didn't work for me. I drew the shapes based off of variables so that the location of Mickey can be changed in the future. The online p5.js web editor works great, but how do I make a p5.js sketch responsive so that the sketch fits a mobile phone?

You can view this Mickey Mouse sketch in the p5.js online web editor.


Class 1: Why Computational Media applies to me

Computational Media is very important to me because it allows me to have precise control over my artwork and worldwide exposure. When I was an undergraduate student at Texas A&M University, I really loved graphic design. I was required to take a course in C++ and to use OpenGL as an undergraduate, and I did not understand why a designer would ever need to learn programming. When I needed to create an online portfolio for myself, however, I suddenly understood how programming could be useful. I learned that I could make graphic design interactive, and that was really cool. Computational media allows me to be a graphic designer for the future. I want to be a visual designer, a creative coder, an interaction designer, and use code as my tool to create the designs of the future.

I really love Nicholas Felton's portfolio from the Visualization section from the ITP inspiration page. I love projects where design becomes interactive, and after looking at the ITP inspiration page, I hope that I can learn how to make cool visualizations that use design and data to serve people. Also, check out this cool visualization of U.S. Gun Deaths in 2013.

Designed and developed by Steven Simon 2016.