Landing : Athabascau University

Group members: this is the place for your learning diary. Use this to post your zipped-up site at least once each unit, and your reflections as often as you wish (at least once per unit). Please write your reflections directly in the post, not as attached files. Where you do need to attach documents, such as for unit 1 designs, use PDF, PNG or JPG formats. You can attach files using the 'Embed content' link in the editor.

QUICK COURSE LINKS:  Add blog post - Read latest group postsFAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : MiscPodcasts for each unit

Updated resource pages:  Unit 1 - Unit 2  - Unit 3Units 4 & 5 - Unit 6 - Unit 7

Unit Five Analysis and Design

  • Public
By Jesse McCarthy in the group COMP 266 December 15, 2016 - 6:52pm


Infinite Skies Banner

Create star at regular intervals at a random position on the canvas. When stars are created, they will fade in, increasing in size and opacity, and then fade out, decreasing in size and opacity. After fading out the stars will be deleted.



Contains main loop and objects that manipulate the canvas. The controller object was created to separate the main loop from the details of drawable objects and how they are manipulated. Personally, I find inner objects to be ideal for creating new levels of abstraction and maintaining a clean and workable base of objects. When objects contain too much functionality I find it difficult to read and navigate through the source code.



-          Controller



-          Set up canvas and context for drawing

-          Create Controller that will manipulate all objects

-          Set frame rate


Main Loop

-          Update Controller

-          Draw all objects contained within Controller



Contains and coordinates all objects.


-          BgStar

-          BgStarController



-          Create new ImgCache containing all images that will be used on the banner

  • *** When images have completed loading, the main loop begins ***

-          Create a list starTypes

-          Create associative array objects to store objects

-          Create BgStarController



UPDATE (Function is called in the main loop)

-          Update objects

-          Garbage Collection


Draw (Function is called in the main loop)

-          Draw Background

-          Draw all objects




ObjectInterface is and interface for all instances that will be drawn to the screen, and that will be stored in the objects associative array from Controller. All objects are given three attributes.

  1. 1.      Update – empty update function, this is called in controller.update
  2. 2.      Draw – empty draw function, called in controller.draw
  3. 3.      Delete – delete attribute (default is false), used in garbageCollection



Implements ObjectInterface, generates several different random attributes. Fades in and then sets it’s delete attribute to true once it’s fade cycle has completed.



-          Randomize several attributes:

  • Star image
  • Scale
  • Rotation speed

-          Create Fader object

-          Create Img to draw itself to screen



-          Fader.fade fade object that runs through a series of opacities from 0 to 1 then back down from 1 to 0

-          isDelible checks if objects fade cycle has completed, and if so sets delete equal to true



-          Draws itself with Img.draw passing in requires arguments such as scale, opacity, and rotation speed




Spawns new BgStars.


-          Create new Timer for spawning stars



-          Timer.tick, if timer fires spawn new star

Jesse McCarthy

Jesse McCarthy

About me

Aspiring software engineer and video game developer.


These comments are moderated. Your comment will not be visible unless accepted by the content owner.

Only simple HTML formatting is allowed and any hyperlinks will be stripped away. If you need to include a URL then please simply type it so that users can copy and paste it if needed.