1 Manipulating the CameraChapter 7 Manipulating the Camera

2 This Chapter Make the camera easier to work withDefine default manipulation functionality Interpolate values to support smooth transitions Use of math in describing behaviors Program with multiple views Already know this Transform between Canvas (Device) Coordinate to World Coordinate Support mouse input

3 Review Encoded in ViewProjection matrix

4 Camera Manipulations Operations:Clamping Keeping hero in the view Panning Hero pushing camera view Zooming Implementations: mapped to parameters of a camera 𝑊 𝑤𝑐 × 𝐻 𝑤𝑐 WC Window (width and height)

5 7.1: Camera Manipulations Project

6 7.1: Goals Experience common camera manipulation operationsUnderstand the mapping from manipulation operations to camera parameters Implement the manipulation operations

7 Camera_Manipulation.js: operationsTranslate WC window Zoom with respect to center

8 Zoom towards a fix locationZoom wrt pos (Dye) Delta: from wcCenter towards pos If zoom > 1 wcCenter moves away from pos (see more world) If zoom < 1 wcCenter moves towards pos (see less world) After moved wcCenter, change wcWidth as usual delta: from wcCenter towards pos

9 Clamp Obj (xform) to Camera WC Bounds

10 Opposite of clamp: Pan Camera with ObjCamera_Manipulation.js

11 Testing: WASD: move hero to pan camera (90%)Arrow: move portal clamped (80%) L/R: Camera pan to Left/Right N/M: Zoom wrt center L/R/P/H: Select Left/Right/Portal/Hero J/K: zoom wrt to selected position Put finger over selected object and zoom Object does not change relative position

12 Powerful functionality, bad user experienceSudden changes resulting from manipulation (e.g., panTo()) May seem incoherent (whole world jumped) Gradual changes (in real life) would be nice

13 Need for interpolationGradual change of values: over time in this case Example: two types of interpolations Linear: change with fix rate Exponential: change based on ratio of current value (our turn towards function)

14 7.2: Camera Interpolation Project

15 7.2: Goals Understand and work with interpolated resultsImplement interpolation to support gradual camera parameter changes Understand keys to implementing interpolation Keeping track of and separating: current from final values Support access to current values Need update() to trigger interpolation computation to take current value closer to final value

16 Interpolate.js: A UtilityFrom: mCurrentValue, Change to: mFinalValue In: mCycles, changes at mRate mCyclesLeft: keeps track of how many left

17 Interpolate.js: get/set/configureGet current interpolated result setFinalValue() triggers new interpolation Stiffness: how quickly values change Duration: how long to change from initial to final

18 Interpolate.js: compute intermediate valueIf cycles left compute Each iteration: linearly changing from current to final Overall: exponential function from initial to final

19 InterpolateVec2.js Need to interpolate vec2 objects!Vec2.lerp() implements the same interpolate._interpolateValue() For each of the x/y components

20 CameraState.js: current and final valuesNotice the references to: Interpolate and InterpolateVec2 Configuration:

21 CameraState.js: set/get, trigger interpolationGet current values Set: sets final value for interpolation Triggers actual interpolation

22 Integrate CameraStateCamera only reference to CameraState All set/get to wcCenter and wcWidth now refers to CameraState

23 Camera manipulation: to CameraState

24 Camera_Manipulate: update + config

25 Use CameraState when compute VPMatrix

26 Testing interpolated manipulationNotice the much smoother transitions MyGame.update()  calls camera.update()!! Stiffness: Large values (e.g., 0.8, or 0.9): degenerates to sudden changes Very smaller values (e.g., 0.01): Slow motion effect Duration: Very large values (e.g., 500) Seems to never reach stable value (tiny movements towards the end) Very small values (e.g., 10) Unable to complete the function smoothly Degenerates to sudden jumps at the end

27 Shaking the camera Interesting way to convey “SOMETHING IMPORTANT” has occurred Boss appear/defeated Large object collision Parallel goal: examine another example of controlling with math Reflection of real-life example Aiming the camera and knocked off the target Retargeting: Return “quickly”, and adjust to stop at target

28 Damped Harmonic Motion

29 7.3: Camera Shake Project

30 7.3: Goals Additional insights into modeling displacements with simple mathematical functions Experience with the camera shake effect Implement camera shake as a pseudorandom damped simple harmonic motion

31 ShakePosition.js (Utility)mXMag/mYMag: initial displacement mCycles: how long to settle back mOmega: how much “back-and-forth”

32 Update shake position

33 Update shake position Why?: to avoid perfect oscillation!Try just returning the v value (without the sign flipping)!! (e.g., Large amplitude (10, 10), frequency of 5, over 600 cycles) [5 complete oscillation in 10 seconds)

34 Damp Harmonic fact: fact*fact: Result is a displacement!between 0 to 1 fact*fact: To decrease the sinusoidal more rapidly than a line Result is a displacement!

35 CameraShake.js: Integrate shake intoShaking the CameraState’s center Change the center by ShapePosition’s displacement (s) Adding the offset to the origin (without changing the origin) Offset becomes smaller over time

36 Modify the Camera

37 Set and update Shake (Camera_Manipulation)

38 Testing camera shake xyDelta: Frequency: Duration: WATCH OUT!Large (200): earth quake! Small (0.1): can’t see anything! Frequency: Only observable with large xyDelta, larger values tend to “softens” the shake Duration: Large duration (300): annoying? Short duration (3): subtle, seem like error! WATCH OUT! Shake is an offset (to the original value) Always keep/restore the original value

39 7.4: Multiple Camera and ViewportWe have done this in MPs!

40 Working with Mouse Input (Selection!)Mouse positions: Canvas coordinate! GameObjects are in WC! Canvas to Viewport

41 Viewport (device) to World Coordinate!

42 Questions My canvas is 1000x800My camera1: Center(50, 50), Width=100, Viewport:[100, 200, 400, 600] My camera2: Center(100, 100), Width=10, Viewport: [50, 100, 100, 100] Sketch my viewports in the canvas HTML5 reports that a mouse click occurs at: (mouseX, mouseY) (50, 100): should I care about this? (300, 400): how about now? What are the point in DCx, DCy for my two viewports? What are the points in WCx, WCy for my two cameras?

43 Questions My canvas is 1000x800My camera1: Center(50, 50), Width=100, Viewport:[100, 200, 400, 600] My camera2: Center(100, 100), Width=10, Viewport: [50, 100, 100, 100] Sketch my viewports in the canvas

44 Questions My camera1: Viewport:[100, 200, 400, 600]HTML5 reports mouse click occurs at: (mouseX, mouseY) (50, 100): should I care about this? (300, 400): how about now?

45 Questions [100, 200, 400, 600] [50, 100, 100, 100] (50, 100): should I care about this? With respect to Orange: DCx = -50, DCy=-100 Orange does not care about this point With respect to Red: DCx = 0, DCy= 0  Red cares about this point (inside Red viewport) (300, 400): how about now? With respect to Orange: DCx = 200, DCy=200  Orange cares about this point (in Orange viewport) With respect to Red: X = 250, Y= 300  Red does not care (outside of Red viewport)

46 Questions Viewport: [50, 100, 100, 100]We know … HTML reports: (50, 100) In Red DC: DCx = 0, DCy= 0 Now for: WCx, WCy (over the Red DC) Center(100, 100), Width=10 Lower-left = (100-10/2, /2) = (95, 95) So, the following are the same point Canvas-(50, 100) DC-(0, 0) WC-(95, 95) (100, 100) 10

47 Questions Center(50, 50), Width=100 [100, 200, 400, 600] 100Canvas (300, 400): Orange: DCx = 200, DCy=200 Percent coverage in DC X = 200 / 400 = 50% Y = 200 / 600 = 33.33% Amount in WC X = 50% * Width = 50% * 100 = 50 Y = 33.3% * Height = 33.33% * 150 = 50 WC: Lower-left = (50-100/2, /2) = (0, -25) WCx, WCy = (50, 25) (50, 50) 150 100

48 Summary DCx = mouseX – ViewportOrgXCenter(50, 50), Width=100 [100, 200, 400, 600] Canvas (300, 400): Orange: DCx = 200, DCy=200 Percent coverage in DC X = 200 / 400 = 50% Y = 200 / 600 = 33.33% Amount in WC X = 50% * Width = 50% * 100 = 50 Y = 33.3% * Height = 33.33% * 150 = 50 WC: Lower-left = (50-100/2, /2) = (0, -25) WCx, WCy = (50, 25) DCx = mouseX – ViewportOrgX WCx = LLx + WC-Width * DCx / ViewportWidth LLx = lower-left-x = Camera-X – (WC-Width / 2)

49 7.5: Mouse Input Project LMB in main view: MMB the HeroCam view:Drags the Portal object MMB the HeroCam view: Drags the Hero object RMB or MMB in any view: Hides/shows the Portal

50 7.5: Goals To understand the Canvas Coordinate space to WC space transform To appreciate mouse clicks are specific to individual viewports To implement transformation between coordinate spaces and support mouse input

51 Implementation: Input needs access to canvasEngine_Core.js

52 Engine_Input.js Arrays: to support left/mid/right mMousePosX/YPress/Click (just like keyboard) mMousePosX/Y In canvas coordinate

53 Engine_Input:: event handlersTransform from web-page to canvas

54 Engine_Input:: mouse clicksevent.button: 0, 1, or 2

55 Engine_Input: init and update

56 Engine_Input:: query mousPos X/Y: in canvas coordinateMust transform to WC before can be used for selection!! DC is Viewport coordinate

57 Camera_Input.js: Canvas to DCDC is Viewport’s coordinate If mouse click is in the viewport of a camera

58 Camera_Input.js:: DC to WC

59 MyGame.update(): Testing Mouse InputExamine dcXY: Test button clicks:

60 MyGame.update(): Testing Mouse InputTest WC coordinate value and Button pressed (draggin) Note: isMouseInViewport() function call!

61 Mouse input: notice Can differentiate mouse click by viewport (camera)The actual interaction code should be hidden from MyGame Define a MyCamera to subclass from Camera Implement mouse events in MyCamera.update() Right-mouse-click Browser hijacked this event!

62 Chapter 7: Learned Camera manipulation: Math operation/expressionManipulation of wcCenter, wcWidth Either change GameObject, or change camera values Math operation/expression For controlling smoothness For controlling movement Positional input device (mouse) Ability to support multiple views Coordinates: Canvas, Viewport (DC), World Image (pixels), UV (texture), NDC

63 7.6: You can draw lines! 