Week 3: Simple Graphics Drawing + Intro to XForm
Link to all source code (zipped)
NEW: link to
source code with update SimpleShader source file.
- Intro to working with Matrix and Transforms
Integrating AngularJS support!
- Project structure Four separate entities: Graphics + GUI + Model: +
- Engine folder: Graphics API
- GUI: GUI Lib
- App: The application folder
- lib: External lib (Matrix and AngularJS)
- Contains the entire application (ClassExample)
- Adoption of previous MyGame.js code
- Two main differences:
- draw() function, instead of create and draw, we separate out
- Camera() object:
- Instantiated: and setupViewProjection()
- This is something we will come back and look at!
- Drawing to screen size!
- Using xform to control location of objects
- Drawing from the exact same hardware memory location,
- Multiple Renderable objects, and thus user believes there are
multiple objects in the environment!!
- Observation: we are now seeing 800x600 pixel-space!!
- Example 5: GUI for Xform object
- Sldier: Expanded to support dynamic changing of range (min/max) and
active (for disabling)
- The "pink" xform controller
- Radio button: when clicked ...
- sets mOpType (Operation type)
- changes slider bar ranges
- re-initialize sldier bar values according to the
- Two slider bars: mX, mY
- mY Sldier: disabled when OpType == Rotation
- updates corresponding xform fields
- Logic changes UI!
- Enable timer
- Causes object to increase size
- Must cause UI to follow!
- Data binding, we have to do the binding between the GUI
controller to the actual object (Xform)
- Anything we have in the model, we can expose via GUI and
- Annoying lack of two way binding for Xform elements
- uiChangeObj vs. objChangeUI <-- explicity binding done by
- Notice: must call MyWorld.d.raw() when my model changes, this is
referred to as "redraw", as in "when the model is dirty a redraw
- Example 6: separate XForm directive
- New reusable directive: css-xform
- CSS450Xform.js file
- Almost straight copy/paste from the MainController from previous
- WATCH OUT FOR: Link at the bottom of the file
- Here we say: if the "mXform" variable should change, we want
- What we do is, we re-initialize the input states according
to the new xForm
- Support force redraw of GUI
- when the position/scale/rotation of xform is changed by
the timer (App logic)
- Select different objects
- CSS450Timer update with the new "link" and watch functionality
- Simple new GUI object
- AngularJS: can $watch on scope variables (cool?)
- We are maintaining data binding explicitly, when changing to a
new xform object, we sets the controller values
- Notice: inconsistency, when selected blue, there are now two
controls to the blue xform, and the results are not consistently
shown in the IO!!
- Example 7: Mouse Position
- Change zoom factor (control-mid mouse button, and do a F5: to
refresh the browser) to see canvas bound is not always exactly the same
size as pixel
- So consider the scale factor AND
- Remember to flip-Y
- Nothing much really, ok, canvas bounds may not be exactly on
- Oh, the translation from canvas position to pixel can be
probably support better?
- Example 8: Drag out a square
- New class GUI: CanvasMouseSupport
- Allow the creation/caching of Canvas information to support
transforming canvas mouse click position into Pixels.
- Keeping MainController clean of App information is nice!?
- App/ClassExample takes care of all detailed behavior.
- Have to constantly worry and think of redraw() <-- when
should we do this (as soon as anything is changed).
- mouse position is not correct when the square is rotated.
Why? How to fix this?
- Example 9: Timer for update and redraw, simple gravity simulation
- Support simple simulation ==> World is changing constantly, so,
might as well call draw constantly
- relief the programmer from remembering to call draw when
- Timer support for update and draw (so we don't have to worry
about remembering to call draw after changes)
- change to include update() and support dropping
- Xform: translation not updated!!
- This is because in we did not tell the Xform GUI to update
itself (mForceRedraw <-- need to be set to true)!
- update() function:: should not darw
- draw() function: DO NOT change anything!