HW1 · The loop, input, and orientation

What you build

Four small functions behind the first things every interactive graphics program does: move something every frame at a speed that does not depend on the frame rate, decide which shape on the screen a pointer is over, tell a click from a drag, and aim an object at a target. The runner draws a circle, a segment and a triangle that your hit test lights up and your click-or-drag rule selects or moves (the shapes' positions are the model, the pointer is the controller, the canvas and the readout are two views), next to an arrow aimed by your basis at a ball your loop moves.

• Screen pixels: x to the right, y down. WebGL: a point is an array [x, y]; a shape is { kind: 'circle', center, r }, { kind: 'segment', a, b, tol } or { kind: 'triangle', a, b, c }; the pointer positions are { x, y }. Unity: Vector2 points and the Shape2D struct in Checks.cs.
• A point exactly on a boundary is a hit: distance r from a circle's center, distance tol from a segment, or on a triangle's edge. A triangle may come in either winding, so test that the three signs do not disagree rather than that they are all positive.
• The drag threshold is 4 pixels, as in the drag state machine of Interactive Systems §8: a release exactly 4 pixels away is a click. With only the press and the release, the distance is from one to the other.
• The course library's dot, cross and sub take 3-vectors (a 2-array gives NaN); write the 2D dot and cross products out by components.
• The hit-test and pointer checks list one true or false per test point, in the order of the published inputs, and must match exactly.
• The two advance checks call your function 60 times with dt = 1/60 and 20 times with dt = 1/20; both must land at the same place.

The numbers a correct build reproduces

Each row is one check, run on your functions with the published inputs below. The same table appears under the scene in the runner and in the Unity Console.

{
 "speed": 3,
 "circle": {
  "center": [ 200, 150 ],
  "r": 12,
  "pts": [
   [ 205, 154 ],
   [ 208, 159 ],
   [ 212, 150 ] ]
 },
 "segment": {
  "a": [ 100, 100 ],
  "b": [ 180, 160 ],
  "tol": 5,
  "pts": [
   [ 140, 130 ],
   [ 137, 134 ],
   [ 134, 138 ],
   [ 188, 160 ] ]
 },
 "dot": {
  "a": [ 300, 80 ],
  "b": [ 300, 80 ],
  "tol": 5,
  "pts": [
   [ 303, 84 ],
   [ 304, 84 ] ]
 },
 "triangle": {
  "a": [ 50, 50 ],
  "b": [ 150, 60 ],
  "c": [ 90, 140 ],
  "pts": [
   [ 95, 80 ],
   [ 150, 120 ],
   [ 100, 55 ],
   [ 200, 65 ] ]
 },
 "pointer": {
  "down": [ 400, 300 ],
  "ups": [
   [ 404, 300 ],
   [ 403, 302 ],
   [ 397, 302 ],
   [ 403, 303 ],
   [ 405, 301 ] ]
 },
 "aim": {
  "pos": [ 1, 0.5, 2 ],
  "target": [ -2, 1.5, -2 ],
  "up": [ 0, 1, 0 ]
 }
}

Implement and replace

Build each function from primitives (dot, cross, normalize, subtraction, component access, + − × ÷, square root, min and max.) and use the engine's own helper, where one exists, only to check your result. These are off limits in your submission:

Getting started

Submitting and grading

• WebGL: the one file hw01.js.
• Unity: the project folder, zipped, without Library/, Temp/, Logs/ and obj/.

Grading runs your functions twice: on the published inputs above and on a second set of inputs that is not published. A check earns its points only when your value is within its tolerance on both, so the numbers have to come from the math. The rubric score is the sum of the points earned, out of 100; it counts as 25 course points (the rubric score divided by 4). A submission that does not load or compile earns no check points. Name any collaborators and tools in the submission comment.