You will want to Enable JavaScript while exploring this website.

Because most of the projects I create are interactive, JavaScript is essential for experiencing my work.

Children's Interactive 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.

Skills Demonstrated:

Interaction Design, Creative Coding, UX, Character Design, Storytelling

Technology Used:

p5.js, matter.js, HTML, CSS, Illustration, Illustrator, Photoshop

p5.js Code

var canvasWidth = 670; var canvasHeight = 458; var canvas; var apples = []; var myCount = 0; var applePosition; var applePositionX; var applePositionY; var howManyApples = 0; var lose = 0; var prevLose = lose; var force; // 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; var mouse; // Sounds var openSound; var testSound; var gameSound; var gameSoundTwo; var gameSoundThree; var getReadySound; var getReadySoundTwo; var getReadySoundThree; var getSetSound; var getSetSoundTwo; var getSetSoundThree; 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 clickRange = 30; var groceryList = { item1PosY: 100, item1PosX: 200, item2PosY: 300, item2PosX: 300, item3PosY: 200, item3PosX: 100, gravity: 0.5, speed: 2 } var item1Click = false; var item2Click = false; var item3Click = false; // init global objects for matter engine var Engine = Matter.Engine; var Render = Matter.Render; var World = Matter.World; var Bodies = Matter.Bodies; var Composite = Matter.Composite; var Mouse = Matter.Mouse; var MouseConstraint = Matter.MouseConstraint; var Events = Matter.Events; var Constraint = Matter.Constraint; var engine; // this is our physics engine var slingCounter = 4; var slingApples = []; var slingApplesCaught = false; // constants const FLOOR_HEIGHT = 60; const FLOOR_WIDTH = 60; const FLOOR_THICKNESS = 10; const BOX_SIZE = 30; var tower, launcherLocation, ground, bird, constraint, mouseConstraint, catapult, table, sugarBox, flourBox, cinnBox, mySimpleApple1, mySimpleApple2, mySimpleApple3, mySimpleApple4; var bird_texture, sugar_texture, flour_texture, cinn_texture, kodiSling, kodiSling2; var flourPhysicsX = 10; var flourPhysicsY = 30; var sugarPhysicsX = 10; var sugarPhysicsY = 27; var cinnPhysicsX = 10; var cinnPhysicsY = 10; var isChromium = window.chrome, winNav = window.navigator, vendorName = winNav.vendor, isOpera = winNav.userAgent.indexOf("OPR") > -1, isIEedge = winNav.userAgent.indexOf("Edge") > -1, isIOSChrome = winNav.userAgent.match("CriOS"); function preload(){ blank = loadImage("projects/kodi/KodiBear/images/blank.png"); if(isIOSChrome){ // is Google Chrome on IOS //Gifs mybearCover = loadGif("projects/kodi/KodiBear/images/cover.gif"); bearBasket = loadGif("projects/kodi/KodiBear/images/bearBasket.gif"); mybearOne = loadGif("projects/kodi/KodiBear/images/kodi_1.gif"); mybearTwo = loadGif("projects/kodi/KodiBear/images/kodiCookie.gif"); mybearThree = loadGif("projects/kodi/KodiBear/images/kodiRuns.gif"); mybearFour = loadGif("projects/kodi/KodiBear/images/kodiDoughToss.gif"); mybearFive = loadGif("projects/kodi/KodiBear/images/kodi_meal.gif"); mybearSix = loadGif("projects/kodi/KodiBear/images/kodi_pie.gif"); mybearSeven = loadGif("projects/kodi/KodiBear/images/kodiOven.gif"); mybearEight = loadGif("projects/kodi/KodiBear/images/kodiTimer.gif"); mybearNine = loadGif("projects/kodi/KodiBear/images/kodiPieFinished.gif"); mybearTen = loadGif("projects/kodi/KodiBear/images/kodiGoodbye.gif"); } else if(isChromium !== null && isChromium !== undefined && vendorName === "Google Inc." && isOpera == false && isIEedge == false) { // is Google Chrome //Gifs mybearCover = loadGif("projects/kodi/KodiBear/images/cover.gif"); bearBasket = loadGif("projects/kodi/KodiBear/images/bearBasket.gif"); mybearOne = loadGif("projects/kodi/KodiBear/images/kodi_1.gif"); mybearTwo = loadGif("projects/kodi/KodiBear/images/kodiCookie.gif"); mybearThree = loadGif("projects/kodi/KodiBear/images/kodiRuns.gif"); mybearFour = loadGif("projects/kodi/KodiBear/images/kodiDoughToss.gif"); mybearFive = loadGif("projects/kodi/KodiBear/images/kodi_meal.gif"); mybearSix = loadGif("projects/kodi/KodiBear/images/kodi_pie.gif"); mybearSeven = loadGif("projects/kodi/KodiBear/images/kodiOven.gif"); mybearEight = loadGif("projects/kodi/KodiBear/images/kodiTimer.gif"); mybearNine = loadGif("projects/kodi/KodiBear/images/kodiPieFinished.gif"); mybearTen = loadGif("projects/kodi/KodiBear/images/kodiGoodbye.gif"); } else { // not Google Chrome //Gifs for FireFox and Safari mybearCover = loadImage("projects/kodi/KodiBear/images/cover.gif"); bearBasket = loadImage("projects/kodi/KodiBear/images/bearBasket.gif"); mybearOne = loadImage("projects/kodi/KodiBear/images/kodi_1.gif"); mybearTwo = loadImage("projects/kodi/KodiBear/images/kodiCookie.gif"); mybearThree = loadImage("projects/kodi/KodiBear/images/kodiRuns.gif"); mybearFour = loadImage("projects/kodi/KodiBear/images/kodiDoughToss.gif"); mybearFive = loadImage("projects/kodi/KodiBear/images/kodi_meal.gif"); mybearSix = loadImage("projects/kodi/KodiBear/images/kodi_pie.gif"); mybearSeven = loadImage("projects/kodi/KodiBear/images/kodiOven.gif"); mybearEight = loadImage("projects/kodi/KodiBear/images/kodiTimer.gif"); mybearNine = loadImage("projects/kodi/KodiBear/images/kodiPieFinished.gif"); mybearTen = loadImage("projects/kodi/KodiBear/images/kodiGoodbye.gif"); } // Assest Images backgroundTree = loadImage("projects/kodi/KodiBear/images/treeBasketScene.png"); flour = loadImage("projects/kodi/KodiBear/images/flour.png"); sugar = loadImage("projects/kodi/KodiBear/images/sugar.png"); cinnamon = loadImage("projects/kodi/KodiBear/images/cinnamon.png"); kodiBag = loadImage("projects/kodi/KodiBear/images/kodiBag.png"); // Game 3 sugar_texture = loadImage('projects/kodi/KodiBear/images/sugar.png'); flour_texture = loadImage('projects/kodi/KodiBear/images/flour.png'); cinn_texture = loadImage('projects/kodi/KodiBear/images/cinnamon.png'); kodiSling = loadImage('projects/kodi/KodiBear/images/kodiBear_slingApple.png'); kodiSling2 = loadImage('projects/kodi/KodiBear/images/kodiBear_slingApple2.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, "getReadyThree" : blank, "getSetOne" : blank, "getSetTwo" : blank, "getSetThree" : blank, "page9" : blank, "creditPage" : blank, "startLoop" : mybearCover } } function setup() { canvas = createCanvas(canvasWidth, canvasHeight); canvas.parent('sketch-holder'); testSound = document.getElementById("testSound"); openSound = document.getElementById("openSound"); gameSound = document.getElementById("gameSound"); gameSoundTwo = document.getElementById("gameSound"); gameSoundThree = document.getElementById("gameSound"); getReadySound = document.getElementById("getReadySound"); getReadySoundTwo = document.getElementById("getReadySoundTwo"); getReadySoundThree = document.getElementById("getReadySoundThree"); getSetSound = document.getElementById("getSetSound"); getSetSoundTwo = document.getElementById("getSetSoundTwo"); getSetSoundThree = document.getElementById("getSetSoundThree"); 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.addClass('startKodiButton'); button.position((canvasWidth/2)-50, (canvasHeight/2)-60); pauseButton = createElement('i'); pauseButton.addClass('fa fa-pause-circle pauseButtonKodi'); pauseButton.position(canvasWidth, 0); playButton = createElement('i'); playButton.addClass('fa fa-play-circle playButtonKodi'); playButton.position(canvasWidth, 0); pauseButton.style("display", "none"); playButton.style("display", "none"); // Declare objects for game2 kodisCart = new GroceryCart(); groceryListItems = new GroceryItems(); // Declare game3 setup funciton //gameThreeSetup(); initMatterEngine(); launcherLocation = createVector(250, height - FLOOR_THICKNESS - 150); // let's create the floor // Matter automatically sets it's rectangles to the center ground = Bodies.rectangle(0-10, height - FLOOR_THICKNESS/2, width+20, FLOOR_THICKNESS, { isStatic: true }); World.add(engine.world, ground); table = Bodies.rectangle(550, 350, 300, 10, { isStatic: true }); World.add(engine.world, table); tower = new Tower(width/5, slingCounter); tower.init(); // create the bird bird = new Bird(); bird.init(launcherLocation); sugarBox = new Sugar_Box(600, 300, sugar_texture, 54, 56, sugarPhysicsX, sugarPhysicsY); sugarBox.init(); flourBox = new Sugar_Box(440, 300, flour_texture, 49, 73, flourPhysicsX, flourPhysicsY); flourBox.init(); cinnBox = new Sugar_Box(620, 300, cinn_texture, 52, 27, cinnPhysicsX, cinnPhysicsY); cinnBox.init(); // create the catapult catapult = Constraint.create({ pointA: launcherLocation, bodyB: bird.shape, stiffness: 0.1 }); World.add(engine.world, catapult); mySimpleApple1 = new simpleApple(510, 310); mySimpleApple2 = new simpleApple(490, 310); mySimpleApple3 = new simpleApple(480, 310); // run the engine Engine.run(engine); ///////////////////////// 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 = "getReadyThree"; } 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"; } getReadySoundThree.onended = function(){ getReadySoundThree.pause(); currentStatus = "getSetThree"; } getSetSound.onended = function(){ getSetSound.pause(); currentStatus = "pageGame"; } getSetSoundTwo.onended = function(){ getSetSoundTwo.pause(); currentStatus = "pageGameTwo"; } getSetSoundThree.onended = function(){ getSetSoundThree.pause(); currentStatus = "pageGameThree"; } //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() { if (windowWidth < 1200){ currentStatus = "smallScreen"; } 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(groceryList.item1PosX < 0 && groceryList.item2PosX < 0 && groceryList.item3PosX < 0){ currentStatus = "pageTen"; } if(gameSoundTwo.paused){ gameSoundTwo.currentTime = 0; gameSoundTwo.play(); } } else if (currentStatus == "pageGameThree"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); mixingGame(); if(gameSoundThree.paused){ gameSoundThree.currentTime = 0; gameSoundThree.play(); } } else if (currentStatus == "continuePage"){ console.log(currentStatus); trackStatus = currentStatus; removeElements(); // gameSoundTwo.pause(); // Manually turn off game sound background(250); fill(0); 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('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"); } 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]); } // Reset GameTwo groceryList.item1PosY = 100; groceryList.item1PosX = 200; groceryList.item2PosY = 300; groceryList.item2PosX = 300; groceryList.item3PosY = 200; groceryList.item3PosX = 100; groceryList.speed = 2; groceryList.gravity = 0.5; item1Click = false; item2Click = false; item3Click = false; if(page10Sound.paused){ page10Sound.currentTime = 0; page10Sound.play(); } } else if (currentStatus == "pageEleven"){ console.log(currentStatus); trackStatus = currentStatus; gameSoundThree.pause(); // Manually turn off game sound 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 == "getReadyThree"){ console.log(currentStatus); trackStatus = currentStatus; pauseButton.mousePressed(pauseGame); playButton.mousePressed(continueGame); gameSound.pause(); // Manually turn off game sound background(250); fill(0); text("Click and drag each apple to sling it\ninto the mixing bowl.", canvasWidth/2, canvasHeight/2); if(myKodi.currentStatus != currentStatus){ //console.log(imageLibrary[currentStatus]); } if(getReadySoundThree.paused){ getReadySoundThree.currentTime = 0; getReadySoundThree.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 == "getSetThree"){ 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(getSetSoundThree.paused){ getSetSoundThree.currentTime = 0; getSetSoundThree.play(); } } else if (currentStatus == "paused"){ pauseButton.style("display", "none"); playButton.style("display", "block"); openSound.pause(); 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(); getReadySoundThree.pause(); getSetSound.pause(); getSetSoundTwo.pause(); getSetSoundThree.pause(); gameSound.pause(); gameSoundTwo.pause(); gameSoundThree.pause(); gravity = -2; console.log("Paused!"); } else if (currentStatus == "play"){ pauseButton.style("display", "block"); playButton.style("display", "none"); if(trackStatus == 'start'){ if(openSound.paused){ openSound.play(); } currentStatus = "start"; } else 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 == 'getReadyThree'){ if(getReadySoundThree.paused){ getReadySoundThree.play(); } currentStatus = "getReadyThree"; } 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 == 'getSetThree'){ if(getSetSoundThree.paused){ getSetSoundThree.play(); } currentStatus = "getSetThree"; } 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"; } else if (trackStatus == 'pageGameThree'){ if(gameSoundThree.paused){ gameSoundThree.play(); } currentStatus = "pageGameThree"; } console.log("Resuming!"); } else if (currentStatus == "smallScreen"){ pauseButton.style("display", "none"); playButton.style("display", "none"); openSound.pause(); 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(); getReadySoundThree.pause(); getSetSound.pause(); getSetSoundTwo.pause(); getSetSoundThree.pause(); gameSound.pause(); gameSoundTwo.pause(); gameSoundThree.pause(); gravity = -2; console.log("Too Small Screen!"); noLoop(); } cursor(HAND); } function mouseClicked(){ if (currentStatus == "pageGameTwo"){ if (mouseX > 200 && mouseX < 200+72){ if (mouseY > 100 && mouseY < 100+47){ item1Click = true; } } if (mouseX > 300 && mouseX < 300+69){ if (mouseY > 300 && mouseY < 300+93){ item2Click = true; } } if (mouseX > 100 && mouseX < 100+64){ if (mouseY > 200 && mouseY < 400+66){ 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+1)+' 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 = 9; myKodi.caughtApples = 0; apples.length = 0; } } // Make the apples here function makeApples(){ if (myCount == 46) { apples.push(new Apple(random(0 + 15, canvasWidth - 15), 0)); myCount = 0; } myCount++; var wind = createVector(0, 0); var gravity = createVector(0, 0.3); // Adding apples to the array? for (var i = 0; i < apples.length; i++) { //apples[i].applyForce(force); apples[i].applyForce(wind); apples[i].applyForce(gravity); apples[i].move(); apples[i].drawApple(); apples[i].checkEdges(); if(apples[i].caught == false){ apples[i].drawApple(); } else{ apples.splice(i, 1); } if (apples.length > 30) { apples.splice(0, 1); } } } var Apple = function(positionX, positionY){ this.x = positionX; this.y = positionY; this.width = 17.5; this.height = 20; this.speed = 0.2; this.caught = false; this.mass = 1; //this.shape = Bodies.circle(x, y, width, height); this.pos = createVector(this.x, this.y); this.vel = createVector(0, 0); // Acceleration direction in the x and y direction this.acc = createVector(0, 0); this.ground = canvasHeight; this.myRadius = 14; this.maxspeed = 3; // Maximum speed this.maxforce = 0.2; // Maximum steering force this.drawApple = function(){ // red apple fill(255, 0, 0); noStroke(); ellipse(this.pos.x, this.pos.y, this.width, this.height); ellipse(this.pos.x+5, this.pos.y+9, this.width+4, this.height-8); ellipse(this.pos.x+10, this.pos.y, this.width, this.height); // Stem fill(102, 46, 0); beginShape(); vertex(this.pos.x + 5, this.pos.y- 15); vertex(this.pos.x + 8, this.pos.y- 15); vertex(this.pos.x + 8, this.pos.y- 10); vertex(this.pos.x + 5, this.pos.y- 10); endShape(); // Leaf fill(31, 226, 11); beginShape(); vertex(this.pos.x + 20, this.pos.y- 10); vertex(this.pos.x + 5, this.pos.y- 10); vertex(this.pos.x + 20, this.pos.y- 20); vertex(this.pos.x + 20, this.pos.y- 20); endShape(); }; this.applyForce = function(force) { var f = p5.Vector.div(force, this.mass); this.acc.add(f); }; this.checkEdges = function() { if (this.pos.x > width) { this.pos.x = width; this.vel.x *= 0; } else if (this.pos.x < 0) { this.vel.x *= 0; this.pos.x = 0; } if (this.pos.y > height-20) { this.vel.y *= -0.4; this.pos.y = height-20; } }; 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.vel.add(this.acc); this.pos.add(this.vel); this.acc.mult(0); if(this.pos.y > canvasHeight - 50 && this.pos.y < canvasHeight - 25 && this.caught == false){ if(this.pos.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.displayItems = function(){ if (currentStatus == "pageGameTwo"){ if ((groceryList.item1PosY >= height-20)){ if ((groceryList.item1PosX >= trackCart) && (groceryList.item1PosX <= trackCart+100)){ item1Click = true; //console.log('Caught and item1PosX:'+this.item1PosX); fill(0, 0, 255); groceryList.item1PosY++; groceryList.item1PosX = -999; } else { item1Click = false; //console.log('Not caught'); groceryList.speed = 2; groceryList.gravity = 0.5; fill(255, 255, 0); groceryList.item1PosY = 100; // reset the item position } } else if ((groceryList.item2PosY >= height-20)){ if ((groceryList.item2PosX >= trackCart) && (groceryList.item2PosX <= trackCart+100)){ item2Click = true; //console.log('Caught and item2PosX:'+this.item2PosX); fill(0, 0, 255); groceryList.item2PosY++; groceryList.item2PosX = -999; } else { item2Click = false; //console.log('Not caught'); groceryList.speed = 2; groceryList.gravity = 0.5; fill(255, 255, 0); groceryList.item2PosY = 300; // reset the item position } } else if ((groceryList.item3PosY >= height-20)){ if ((groceryList.item3PosX >= trackCart) && (groceryList.item3PosX <= trackCart+100)){ item3Click = true; //console.log('Caught and item3PosX:'+this.item3PosX); fill(0, 0, 255); groceryList.item3PosY++; groceryList.item3PosX = -999; } else { item3Click = false; //console.log('Not caught'); groceryList.speed = 2; groceryList.gravity = 0.5; fill(255, 255, 0); groceryList.item3PosY = 200; // reset the item position } } image(cinnamon, groceryList.item1PosX, groceryList.item1PosY); image(flour, groceryList.item2PosX, groceryList.item2PosY); image(sugar, groceryList.item3PosX, groceryList.item3PosY); } }; this.updateItems = function(){ if (item1Click === true){ groceryList.speed += groceryList.gravity; groceryList.item1PosY += groceryList.speed; } if (item2Click === true){ groceryList.speed += groceryList.gravity; groceryList.item2PosY += groceryList.speed; } if (item3Click === true){ groceryList.speed += groceryList.gravity; groceryList.item3PosY += groceryList.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-160){ this.movingBasket = width-161; this.forward = false; } else if (this.movingBasket < width-160 && 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-160 && this.forward === false){ this.movingBasket -= this.basketSpeed; } }; }; /******************************************** SlingShot Game *******************************************/ function gameThreeSetup(){ //imageMode(CENTER); } function mixingGame(){ background(250); imageMode(CENTER); fill(0); noStroke(); text("Click and drag the apple to sling it into the mixing bowl.", canvasWidth/2, (canvasHeight/2)-80); tower.render(); bird.render(); var vertices = table.vertices; noStroke(); fill(59, 30, 3); beginShape(); for (var i = 0; i < vertices.length; i++) { vertex(vertices[i].x, vertices[i].y); } endShape(); // table rect(420, 355, 310, 13); rect(440, 360, 20, 100); fill(25, 13, 1); rect(420, 355, 310, 5); rect(440, 368, 20, 8); // mixing bowl noStroke(); fill(195); ellipse(500, 313, 60, 7); if (slingCounter <= 3){ mySimpleApple1.display(); } if (slingCounter <= 2){ mySimpleApple2.display(); } if (slingCounter <= 1){ mySimpleApple3.display(); } fill(210); arc(500, 313, 60, 70, 0, PI, CHORD); sugarBox.render(); flourBox.render(); cinnBox.render(); image(kodiSling, mouseX-60, mouseY, 228/2, 273/2); fill(25, 13, 1); rect(251, 300, 8, 200); if (mouseIsPressed && mouseX < 300){ stroke(0); strokeWeight(3); line(253, 302, mouseX, mouseY); image(kodiSling2, mouseX-60, mouseY, 228/2, 273/2); } resetGameThree(); } function mouseReleased(){ if (mouseConstraint.body != null){ catapult.bodyB = null; var distX = launcherLocation.x - mouseConstraint.body.position.x; var distY = launcherLocation.y - mouseConstraint.body.position.y; var forceX = map(distX, 0, 200, 0, 0.2); var forceY = map(distY, 0, 200, 0, 0.2); mouseConstraint.body.force = { x: forceX, y: forceY } } } // ------------------ init matter engine ----------------- function initMatterEngine(){ // create the engine engine = Engine.create(); // setup the mouse constraints mouse = Mouse.create(canvas.elt); var mouseParams = { mouse: mouse, constraint: { stiffness: 2, } } mouseConstraint = MouseConstraint.create(engine, mouseParams); mouseConstraint.mouse.pixelRatio = pixelDensity(); World.add(engine.world, mouseConstraint); } // Reset game3 after winning function resetGameThree(){ // if off screen if(bird.shape.position.x <= 500+40 && bird.shape.position.x >= 500 && bird.shape.position.y <= 320+40 && bird.shape.position.y > 320 && slingApplesCaught == false){ slingApplesCaught = true; slingCounter--; //console.log(slingCounter); // resetGameThree if win but not 0 yet slingApples = [slingCounter]; //alert('at the floor'); // clear the physics World.clear(engine.world); // recreate the bird bird = new Bird(); bird.init(launcherLocation); sugarBox = new Sugar_Box(600, 200, sugar_texture, 54, 56, sugarPhysicsX, sugarPhysicsY); sugarBox.init(); flourBox = new Sugar_Box(440, 200, flour_texture, 49, 73, flourPhysicsX, flourPhysicsY); flourBox.init(); cinnBox = new Sugar_Box(620, 300, cinn_texture, 52, 27, cinnPhysicsX, cinnPhysicsY); cinnBox.init(); // recreate the catapult catapult.bodyB = bird.shape; catapult = Constraint.create({ pointA: launcherLocation, bodyB: bird.shape, stiffness: 0.1 }); World.add(engine.world, catapult); // recreate the tower tower = new Tower(width/4, slingCounter-1); tower.init(); // recreate the ground ground = Bodies.rectangle(width/2, height - FLOOR_THICKNESS/2, width, FLOOR_THICKNESS, { isStatic: true }); World.add(engine.world, ground); table = Bodies.rectangle(550, 350, 300, 10, { isStatic: true }); World.add(engine.world, table); World.add(engine.world, mouseConstraint); slingApplesCaught = false; // If game3 is won if (slingCounter == 0){ // Wins the Game3 currentStatus = "pageEleven"; slingCounter = 4; slingApples = [slingCounter]; //alert('at the floor'); // clear the physics World.clear(engine.world); // recreate the bird bird = new Bird(); bird.init(launcherLocation); sugarBox = new Sugar_Box(600, 300, sugar_texture, 54, 56, sugarPhysicsX, sugarPhysicsY); sugarBox.init(); flourBox = new Sugar_Box(440, 300, flour_texture, 49, 73, flourPhysicsX, flourPhysicsY); flourBox.init(); cinnBox = new Sugar_Box(620, 300, cinn_texture, 52, 27, cinnPhysicsX, cinnPhysicsY); cinnBox.init(); // recreate the catapult catapult.bodyB = bird.shape; catapult = Constraint.create({ pointA: launcherLocation, bodyB: bird.shape, stiffness: 0.1 }); World.add(engine.world, catapult); // recreate the tower tower = new Tower(width/4, slingCounter-1); tower.init(); // recreate the ground ground = Bodies.rectangle(width/2, height - FLOOR_THICKNESS/2, width, FLOOR_THICKNESS, { isStatic: true }); World.add(engine.world, ground); table = Bodies.rectangle(550, 350, 300, 10, { isStatic: true }); World.add(engine.world, table); World.add(engine.world, mouseConstraint); slingApplesCaught = false; } } if(bird.shape.position.x > width || bird.shape.position.x < 0 || bird.shape.position.y > height-30) { slingApples = [slingCounter]; //alert('at the floor'); // clear the physics World.clear(engine.world); // recreate the bird bird = new Bird(); bird.init(launcherLocation); sugarBox = new Sugar_Box(600, 300, sugar_texture, 54, 56, sugarPhysicsX, sugarPhysicsY); sugarBox.init(); flourBox = new Sugar_Box(440, 300, flour_texture, 49, 73, flourPhysicsX, flourPhysicsY); flourBox.init(); cinnBox = new Sugar_Box(620, 300, cinn_texture, 52, 27, cinnPhysicsX, cinnPhysicsY); cinnBox.init(); // recreate the catapult catapult.bodyB = bird.shape; catapult = Constraint.create({ pointA: launcherLocation, bodyB: bird.shape, stiffness: 0.1 }); World.add(engine.world, catapult); // recreate the tower tower = new Tower(width/4, slingCounter-1); tower.init(); // recreate the ground ground = Bodies.rectangle(width/2, height - FLOOR_THICKNESS/2, width, FLOOR_THICKNESS, { isStatic: true }); World.add(engine.world, ground); table = Bodies.rectangle(550, 350, 300, 10, { isStatic: true }); World.add(engine.world, table); World.add(engine.world, mouseConstraint); slingApplesCaught = false; } } var Sugar_Box = function(xpos, ypos, texture, imgSizeX, imgSizeY, physBoxSizeX, physBoxSizeY){ this.position = createVector (xpos, ypos); this.shape; // for the apple this.init = function(){ this.shape = Bodies.polygon(this.position.x, this.position.y, physBoxSizeX, physBoxSizeY, { density: 0.005 }); World.add(engine.world, this.shape); } this.render = function(){ var xAxis = createVector(this.shape.axes[0].x, this.shape.axes[0].y); var angle = xAxis.heading(); push(); translate(this.shape.position.x, this.shape.position.y); rotate(angle-3.7); image(texture, 0, 0, imgSizeX, imgSizeY); pop(); } } var Bird = function(){ this.position; this.shape; // for the apple this.width = 17.5; this.height = 20; this.init = function(launcherLoc){ this.position = launcherLoc; this.shape = Bodies.polygon(this.position.x, this.position.y, 3, 24, { density: 0.003 }); World.add(engine.world, this.shape); } this.render = function(){ var xAxis = createVector(this.shape.axes[0].x, this.shape.axes[0].y); var angle = xAxis.heading(); push(); translate(0, 0); // red apple fill(255, 0, 0); noStroke(); ellipse(this.shape.position.x, this.shape.position.y, this.width, this.height); ellipse(this.shape.position.x+5, this.shape.position.y+9, this.width+4, this.height-8); ellipse(this.shape.position.x+10, this.shape.position.y, this.width, this.height); // Stem fill(102, 46, 0); beginShape(); vertex(this.shape.position.x + 5, this.shape.position.y- 15); vertex(this.shape.position.x + 8, this.shape.position.y- 15); vertex(this.shape.position.x + 8, this.shape.position.y- 10); vertex(this.shape.position.x + 5, this.shape.position.y- 10); endShape(); // Leaf fill(31, 226, 11); beginShape(); vertex(this.shape.position.x + 20, this.shape.position.y- 10); vertex(this.shape.position.x + 5, this.shape.position.y- 10); vertex(this.shape.position.x + 20, this.shape.position.y- 20); vertex(this.shape.position.x + 20, this.shape.position.y- 20); endShape(); pop(); } } var simpleApple = function(posX, posY){ this.positionX = posX; this.positionY = posY; this.width = 17.5; this.height = 20; this.display = function(){ fill(255, 0, 0); noStroke(); ellipse(this.positionX, this.positionY, this.width, this.height); ellipse(this.positionX + 5, this.positionY+9, this.width+4, this.height-8); ellipse(this.positionX + 10, this.positionY, this.width, this.height); // Stem fill(102, 46, 0); beginShape(); vertex(this.positionX + 5, this.positionY- 15); vertex(this.positionX + 8, this.positionY- 15); vertex(this.positionX + 8, this.positionY- 10); vertex(this.positionX + 5, this.positionY- 10); endShape(); // Leaf fill(31, 226, 11); beginShape(); vertex(this.positionX + 20, this.positionY- 10); vertex(this.positionX + 5, this.positionY- 10); vertex(this.positionX + 20, this.positionY- 20); vertex(this.positionX + 20, this.positionY- 20); endShape(); }; } var Tower = function(xPosition, size){ this.size = size; this.position = xPosition; this.width = 17.5; this.height = 20; this.init = function(){ for (var i = 0; i < this.size; i++){ var stackApples = Bodies.rectangle( this.position + (BOX_SIZE / 2) + (i * BOX_SIZE), 430, this.width, this.height ); slingApples.push(stackApples); } World.add(engine.world, slingApples); // Pass into matter.js physics world } this.render = function(){ for (var i = 1; i < slingApples.length; i++){ var angle = slingApples[i].angle; push(); // red apple fill(255, 0, 0); noStroke(); ellipse(slingApples[i].position.x, slingApples[i].position.y, this.width, this.height); ellipse(slingApples[i].position.x+5, slingApples[i].position.y+9, this.width+4, this.height-8); ellipse(slingApples[i].position.x+10, slingApples[i].position.y, this.width, this.height); // Stem fill(102, 46, 0); beginShape(); vertex(slingApples[i].position.x + 5, slingApples[i].position.y- 15); vertex(slingApples[i].position.x + 8, slingApples[i].position.y- 15); vertex(slingApples[i].position.x + 8, slingApples[i].position.y- 10); vertex(slingApples[i].position.x + 5, slingApples[i].position.y- 10); endShape(); // Leaf fill(31, 226, 11); beginShape(); vertex(slingApples[i].position.x + 20, slingApples[i].position.y- 10); vertex(slingApples[i].position.x + 5, slingApples[i].position.y- 10); vertex(slingApples[i].position.x + 20, slingApples[i].position.y- 20); vertex(slingApples[i].position.x + 20, slingApples[i].position.y- 20); endShape(); pop(); }; } } //end of Tower /******************************************** 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 = 9; 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; } }

Process


At first, I had several decisions to make, and did a lot of planning. Some of the first tough decisions I made were artistic style decisions. How should the illustrations look? Should they be animated or interactive? I thought about different interactive books that exist, and I knew that I did not want to necessarily replicate an existing idea. The model I created is a video-styled storybook. I wondered about how giving interaction to the user might change the story. It was important to control the interaction in the story so that the interaction was meaningful overall. I decided to keep only the games interactive, rather than every page. The games, although very simple examples here, are designed to mimic the process of real life chores, and aim to make them fun. This is how children can see grocery shopping, or apple picking (for example) in a new light. Shown are some sketches from my process, and images of creating gif characters using Adobe Illustrator and Photoshop.

The programming of this storybook was difficult at first. The games in the book, and the framework for the book, were the most challenging parts. The programming for the storybook is based off of the concepts that I learned in Intro to Computational Media, and are used to practically tell a story. Something that was a challenge with the programming, but that I overcame, was figuring out how to navigate programmatically through the book. I ended up creating statuses for each page, and on the end of a sound-byte, I change the current status in the looping draw function of p5.js.

Designed and developed by Steven Simon 2017.