Week 4: Graphics Primitives and Hierarchical Modeling

Link to all source code (zipped)

• Example 1: Camera as the View component and Sub-classing
• Move the camera out of  Model (ClassExample)
• What if I want to have tow separate views of the Model?
• Camera is _NOT_ part the model
• Move Camera to MainController
• Camera: is a View-Controller pair, because, what if I want to select a object in a camera? The Camera must support mouse click! (later)
• SimpleShader fix:
• Accepts a new parameter: Buf (gl.bindBuffer())
• in activateShader(): binds to this buffer and describes the connection (gl.VertexArribute())
• Remember to pass in the buffer when calling activateShader() from Renderable
• Sub-classing: this is a JavaScript thing
• Define Renderable and SquareRenderable
• Renderable: draw() function is empty, this is subclass responsibility
• Need to know which butter to draw from, and the buffer size, GL-draw type.
• Notice:
• gEngineCore.inheriPrototye: all functions defined on "prototype" are visible by subclass!!
• Notice how SquareRenderable calls its super class!
• Organization: created a Renderable folder for the renderable hierarchy
• ClassExample:
• Instead of creating "Renderable", now creates SquareRenderable
• No more Camera (this is passed in during redraw)
• Notice:
• How we work with Renderable object is exactly the same (all relevant methods are defined)
• Lesson:
• JS: learn how to subclass, this is a syntax thing. Bid deal
• Camera: in general, is not a Model thing, it is outside of the model, we put it in the MainController for now
  
  
• Example 2: List of Objects
• ClassExample:
• The new mAllObjects variable (notice how arrays are initailized)
• defineCenter():
• now creates a new SquareRenderable, and pushes onto mAllObjects
• notice the how to call Math.random() <-- return a value between 0 to 1
• update/draw(), now loop over all defined objects
• update: remove objects that fall off the screen
• Notice: the last created object, when it is off the screen, UI-xform will still be connected to it, just not drawn (we only draw from mAllObjects, and once off the screen, its gone)
• Lesson:
• Notice, we can "automatically" remove objects in update()
• Or saying, removing based on application logic
• Or, generalize, we can change the application state in update based on requirements (the "dropping behavior" was such)
• e.g., create a few objects at the same time if something passes through the center of the screen (boring, but you get the idea?)
• This mainly to show how to work with JS Arrays. Lame.
  
  
• Example 3: Just for fun, a little behavior  
• Renderable:
• Velocity: gets a random velocity: notice what is done
• X gets a -10 to 10 velocity
• Y gets 10 to 20 velocity
• mayHaveCollided: what is done here?
• update(): with an acceleration [that changes the velocity]
• ClassExample
• Hacky way of bouncing
• Hacky way of stop from bouncing
• Wipe out newer squares :-)