TheGamePlan_Overview.rtf

{\rtf1\ansi\ansicpg1252\cocoartf2513
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset0 HelveticaNeue;}
{\colortbl;\red255\green255\blue255;\red46\green45\blue42;\red255\green255\blue255;}
{\*\expandedcolortbl;;\cssrgb\c23529\c23137\c21569;\cssrgb\c100000\c100000\c100000;}
{\*\listtable{\list\listtemplateid1\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid1\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid1}}
{\*\listoverridetable{\listoverride\listid1\listoverridecount0\ls1}}
{\info
{\author Elisabeth Robson}}\margl1440\margr1440\vieww19520\viewh25200\viewkind0
\deftab720
\pard\pardeftab720\sl920\partightenfactor0

\f0\fs72 \cf2 \cb3 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 The Game Plan: Overview\
\pard\pardeftab720\sa400\partightenfactor0

\fs36 \cf2 You have an introduction to what we're going to build, and you've thought through some of the features, so you have a pretty good idea of the goal. Let's get a game plan together for how we're going to tackle the task of building it.\cb1 \
\pard\pardeftab720\sl520\partightenfactor0

\fs48 \cf2 \cb3 Organizing the files\cb1 \
\pard\pardeftab720\sa400\partightenfactor0

\fs36 \cf2 \cb3 We're going to split the JavaScript code over multiple code files to try to keep it organized by function. So, we're going to have the following files:\cb1 \
\pard\tx220\tx720\pardeftab720\li720\fi-720\sa400\partightenfactor0
\ls1\ilvl0\cf2 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext	\uc0\u8226 	}\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 musicbox.js: This file will contain the window.onload function, as well as some simple controller code. The controller code is what helps direct things to happen when you interact with the interface.\cb1 \uc0\u8232 
\fs40 \
\ls1\ilvl0
\fs36 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext	\uc0\u8226 	}\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 View.js: This file will contain all the code related to the view. That means all the code to handle clicks on the canvas, drawing on the canvas, and animating the circles.\cb1 \uc0\u8232 
\fs40 \
\ls1\ilvl0
\fs36 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext	\uc0\u8226 	}\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 BufferLoader.js: This file will contain the code to load the audio samples. We won't go into a huge amount of detail on this code, but just enough so you know how it works.\cb1 \uc0\u8232 
\fs40 \
\ls1\ilvl0
\fs36 \cb3 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 {\listtext	\uc0\u8226 	}\expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 Audio.js: And finally, this file will contain the code to play the audio samples. We'll coordinate playing a sample with animating a circle from the view code.\cb1 \uc0\u8232 
\fs40 \
\pard\pardeftab720\sa400\partightenfactor0

\fs36 \cf2 \cb3 Notice that conceptual structure similar to a well-known design pattern: the model-view-controller (MVC for short). In this project, our model is an array holding audio samples, which is created and loaded by the code in BufferLoader.js, and then used by the code in Audio.js. The view is our HTML, CSS, and canvas, and primarily it's the canvas. All the code to manage the view is in View.js. Our controller is a bit more spread out: we'll have some code in musicbox.js to define how we'll handle clicks, but the rest of the controller code will be in a method in the View. We'll point out these components as we get to them.\cb1 \
\pard\pardeftab720\sl520\partightenfactor0

\fs48 \cf2 \cb3 Techniques for keeping code modular\cb1 \
\pard\pardeftab720\sa400\partightenfactor0

\fs36 \cf2 \cb3 We're going to use a couple of different techniques in this project for "modularizing" code. That just means we're going to build the code so that all the related functions are grouped together into objects. So, all the view code is grouped into a View object, all the sample loading code is grouped together into a BufferLoader object, and all the audio playing code is grouped together into an Audio object. As you can see these modules also correspond to the files we're creating.\cb1 \
\cb3 We'll use two techniques to do this: one is to create an object using an object literal, with properties and methods in the object all related to a particular function of the code. The second technique is to use a constructor function that will create an object, again, with properties and methods related to a particular function of the code. We'll dig into the details of why we choose one or the other as we get to each object.\cb1 \
\cb3 Okay, that's the plan! Let's get going.\cb1 \
}