Global

Members

(constant) context :CanvasRenderingContext2D

The `CanvasRenderingContext2D` for `result`.
Source:
Type:
  • CanvasRenderingContext2D

cookieFalling :boolean

Whether to animate a new cookie falling.
Source:
Type:
  • boolean

(constant) ecgGraph :SVGSVGElement

The heartbeat graph.
Source:
Type:
  • SVGSVGElement

(constant) ecgHistory :Array.<number>

A queue of points (new elements added to the beginning) representing the ECG graph. Kept to a maximum of `ecgLength` items.
Source:
Type:
  • Array.<number>

(constant) ecgLength :number

The number of SVG units in width of the fake heartbeat graph.
Source:
Type:
  • number

(constant) ecgPath :SVGPathElement

The `` element that draws the ECG graph.
Source:
Type:
  • SVGPathElement

(constant) ecgPoints :Array.<Array.<number, number>>

Some points on an image of an ECG graph I found on Google Images that I manually marked out in MS Paint. Used to form the piecewise linear `ecg` polyline.
Source:
Type:
  • Array.<Array.<number, number>>

(constant) fates :Array.<string>

Possible outcomes for the fate line in a palm reading.
Source:
Type:
  • Array.<string>

flipCamera :boolean

Whether the camera should be horizontally flipped (for front-facing cameras).
Source:
Type:
  • boolean

(constant) fortunes :Array.<string>

Array of general, college, and collage-romance type fortunes
Source:
Type:
  • Array.<string>

(constant) FPS :number

The FPS of the animation. `paintEcg` will try to keep the animation at this rate, for displays that have slower or faster refresh rates.
Source:
Type:
  • number

frameId :number|null

The ID returned by `window.requestAnimationFrame`, used to cancel it or determine whether it is animating. `null` if `paintEcg` is not animating.
Source:
Type:
  • number | null

(constant) GRAVITY :number

The acceleration due to "gravity" applied on all falling objects in the animation, in px/ms^2.
Source:
Type:
  • number

(constant) heads :Array.<string>

Possible outcomes for the head line in a palm reading.
Source:
Type:
  • Array.<string>

(constant) hearts :Array.<string>

Possible outcomes for the heart line in a palm reading.
Source:
Type:
  • Array.<string>

lastInstructionElem :HTMLParagraphElement|null

The currently displayed `.instructions` element.
Source:
Type:
  • HTMLParagraphElement | null

lastTime :number

The timestamp of the last time `paint` was called.
Source:
Type:
  • number

(constant) leftWheel :Wheel

The left wheel.
Source:
Type:

(constant) lifes :Array.<string>

Possible outcomes for the life line in a palm reading.
Source:
Type:
  • Array.<string>
The list of entries in the navigation menu.
Source:
Type:
The menu icon, which is a focusable element to allow the menu contents to be tab accessible.
Source:
Type:
  • HTMLAnchorElement
The created `
Source:
Type:
  • HTMLElement

(constant) PERIOD

The period of the heartbeat shape, in whatever units `ecgPoints` is in. Increase to increase the spacing between heartbeats, but it's mostly a guessing game.
Source:

(constant) readAnother :HTMLButtonElement

The button for resetting the app and reading another hand.
Source:
Type:
  • HTMLButtonElement

(constant) requestBtn :HTMLButtonElement

The button that requests for camera access.
Source:
Type:
  • HTMLButtonElement

(constant) result :HTMLCanvasElement

A `` that stores a snapshot of the webcam video.
Source:
Type:
  • HTMLCanvasElement

(constant) rightWheel :Wheel

The right wheel.
Source:
Type:

(constant) romantic :Map.<string, string>

Mapping of zodiac pairs to their college romance analysis.
Source:
Type:
  • Map.<string, string>

(constant) shakeV :number

The decrease in shake intensity, in px/ms.
Source:
Type:
  • number

simTime :number

Tracks how much time has been "simulated" by `paintEcg`. This is used for refresh rate independence. For example, if there was a lag spike and real time passes more than usual by the next animation frame, then `paintEcg` might simulate two simulation "frames" in the same animation frame so the animation doesn't slow down.
Source:
Type:
  • number

startTime :number

The time when animation and simulation started.
Source:
Type:
  • number

(constant) suns :Array.<string>

Possible outcomes for the sun line in a palm reading.
Source:
Type:
  • Array.<string>

(constant) synth :SpeechSynthesis

A reference to `window.speechSynthesis`.
Source:
Type:
  • SpeechSynthesis

(constant) tabContents :ArrayLike.<HTMLDivElement>

Each tabs' tab content.
Source:
Type:
  • ArrayLike.<HTMLDivElement>

(constant) tabLabels :ArrayLike.<HTMLInputElement>

The tabs' `` elements.
Source:
Type:
  • ArrayLike.<HTMLInputElement>

timeoutId :number

Stores the ID of the last `setTimeout` call by `wait`, so it can be cancelled by `clearTimeout`.
Source:
Type:
  • number
Example
wait(1000);
clearTimeout(timeoutId);

(constant) video :HTMLVideoElement

The `
Source:
Type:
  • HTMLVideoElement

voices :Array.<SpeechSynthesisVoice>

A list of voices available by the browser.
Source:
Type:
  • Array.<SpeechSynthesisVoice>

(constant) voiceSelect :HTMLSelectElement

The voice selection dropdown.
Source:
Type:
  • HTMLSelectElement

(constant) webcamWrapper :HTMLDivElement

The wrapper element that holds all the element anchored around the middle of the screen, where the circle with the webcam video is.
Source:
Type:
  • HTMLDivElement

(constant) XSHIFT :number

Horizontal shift factor to be added to each point in `ecgPoints`. This is because the image I got wasn't centered at the origin.
Source:
Type:
  • number

(constant) YSHIFT :number

Vertical shift factor to be added to each point in `ecgPoints`.
Source:
Type:
  • number

(constant) zodiacDateRanges :Record.<string, string>

Mapping of zodiacs to their date range.
Source:
Type:
  • Record.<string, string>

(constant) zodiacOrder :Array.<string>

The order of the zodiacs along a wheel.
Source:
Type:
  • Array.<string>

Methods

angleDiff(angle, base) → {number}

Finds the smaller difference between two angles. For example, the difference -170° - 170° should be 20°, because -170° is equivalent to 190°.
Source:
Parameters:
Name Type Description
angle number The angle to subtract the base from.
base number The base angle that is subtracted from the angle.
Returns:
Type:
number
`angle - base`, but it's guaranteed to be between -180° and 180°.

determineDateRangeLeft(angle) → {string}

Determines the zodiac sign date range based on the given angle on the left wheel.
Source:
Parameters:
Name Type Description
angle number The angle of the left wheel.
Returns:
Type:
string
The zodiac sign associated with the angle.

determineDateRangeRight(angle) → {string}

Determines the zodiac sign date range based on the given angle on the right wheel.
Source:
Parameters:
Name Type Description
angle number The angle of the right wheel.
Returns:
Type:
string
The zodiac sign associated with the angle.

determinePairing(angleLeft, angleRight) → {Array}

Gets the zodiac sign pair based on the angles of the left and right wheels.
Source:
Parameters:
Name Type Description
angleLeft number The angle of the left wheel.
angleRight number The angle of the right wheel.
Returns:
Type:
Array
An array containing the zodiac sign pair.

disableButton()

Disables button so user cannot click it
Source:

(async) displayResults()

Displays the results of the pairing and animates the UI elements.
Source:

ecg(time) → {number}

A periodic, piecewiese linear function that draws out the shape of an ECG. The units used in this function are kind of weird, so some guesswork is required to shape it into a nice-looking form for the heartbeat graph.
Source:
Parameters:
Name Type Description
time number The x-value of the ECG graph.
Returns:
Type:
number
The resulting y-value of the graph.

fallFortune()

Sets the animation to make the fortune paper fall.
Source:

fallLeft()

Sets the animation to make the left half of the cookie fall.
Source:

fallNewCookie()

Sets the animation to make a new, full fortune cookie fall.
Source:

fallRight()

Sets the animation to make the right half of the cookie fall.
Source:

getMappingLeft(roundedAngle) → {string}

Retrieves the zodiac sign mapping for the given angle on the left wheel.
Source:
Parameters:
Name Type Description
roundedAngle number The angle on the left wheel pre-rounded to the nearest 30 degree increment
Returns:
Type:
string
The corresponding zodiac sign, or `'unknown'` if the angle does not correspond to a zodiac.

getMappingRight(roundedAngle) → {string}

Retrieves the zodiac sign mapping for the given angle on the right wheel.
Source:
Parameters:
Name Type Description
roundedAngle number The angle on the right wheel pre-rounded to the nearest 30 degree increment
Returns:
Type:
string
The corresponding zodiac sign, or `'unknown'` if the angle does not correspond to a zodiac.

getRandomFortune() → {string}

This function will get a random fortune from the fortune array and make sure it does not match the previous one
Source:
Returns:
Type:
string
a random fortune

handleCookieReady()

A handler called whenever the animation for dropping a new fortune cookie ends.
Source:

handleFortune()

Generates random fortunes. Called when the app finishes analyzing the palm.
Source:

handleFortuneEnd()

A handler called whenever the animation for opening the fortune cookie ends.
Source:

mod(a, b) → {number}

Calculates the modulus. JavaScript's `%` operator is the remainder operator, which works differently for negative numbers. For example, `-10 % 360` in JavaScript, but `-10 mod 360` is 350.
Source:
Parameters:
Name Type Description
a number Dividend
b number Div-sor
Returns:
Type:
number
The modulus of `a` and `b`

paint()

Draws the next frame of the cookie falling animation.
Source:

paintEcg()

Draws the next frame of the fake heartbeat ECG graph animation. Once `frameId` is set to `null`, the animation stops. This should be display refresh rate independent.
Source:

pick(options) → {T}

Randomly selects an item in the given list.
Source:
Parameters:
Name Type Description
options ArrayLike.<T> List of options to choose from.
Returns:
Type:
T
The randomly chosen option

populateVoiceList()

Speech synthesis API, adds options for different voices to read out fortune using voice synthesis
Source:

prefersReducedMotion() → {boolean}

Determines whether the user has `prefers-reduced-motion` enabled.
Source:
Returns:
Type:
boolean
Whether to reduce motion.

randomize()

Event handler for the "Randomize" button. Clicks a random card to navigate to the corresponding page.
Source:

reset(state)

Stops the current animation and resets all animatable parts of the app to the specified view (`state`).
Source:
Parameters:
Name Type Description
state 'fortune' | 'cookie' Whether to set the view to showing the fortune (`'fortune'`) or the cookie (`'cookie'`).

roundAngle(angle) → {number}

Rounds the given angle to the nearest multiple of 30.
Source:
Parameters:
Name Type Description
angle number The angle to round.
Returns:
Type:
number
The rounded angle.

setInstructions(instruction)

Sets the message that appears under the webcam while it is analyzing the palm. There will be a fade transition between the previous and new instruction message.
Source:
Parameters:
Name Type Description
instruction string The message to display. If an empty string, it'll hide the instructions.

speakFortune(fortune)

Reads out the fortune using speech synthesis
Source:
Parameters:
Name Type Description
fortune string What the fortune to be read out is

(async) startCamera()

Handler for the "Begin" button that requests for camera access and turns on the webcam.
Source:

textGenerator(leftSign, rightSign) → {string}

Generates the text describing the romantic compatibility between two zodiac signs.
Source:
Parameters:
Name Type Description
leftSign string The left wheel's zodiac sign.
rightSign string The right wheel's zodiac sign.
Returns:
Type:
string
The generated text.

wait(delay) → {Promise.<void>}

A promise-ified version of `setTimeout`: returns a new `Promise` that resolves after `delay` milliseconds. If the timeout is cancelled, the `Promise` will never resolve.
Source:
Parameters:
Name Type Description
delay number The time to wait for in milliseconds.
Returns:
Type:
Promise.<void>
A new `Promise` that resolves in `delay` milliseconds.

Type Definitions

Defines an entry in the navigation menu.
Properties:
Name Type Description
label string The text to show for the link.
url string The URL of the page to link to.
imageUrl string The URL of the image icon to show next to the link text.
Source:
Type:
  • object

MomentumInfo

Stores information about the wheel momentum animation.
Properties:
Name Type Description
frameId number The ID of the requested frame, returned by `window.requestAnimationFrame`, used to cancel it.
lastTime number The timestamp of the last animation frame.
angleVel number The angular velocity of the wheel, in degrees/ms.
Source:
Type:
  • object

PointerInfo

Stores information about the pointer dragging the wheel around.
Properties:
Name Type Description
pointerId number The ID of the pointer.
initWheelAngle number The angle of the wheel when dragging started.
initMouseAngle number The polar coordinate angle of the mouse when dragging started.
lastMouseAngle2 number The second-to-last recorded mouse angle.
lastTime2 number The timestamp of the second-to-last `pointermove` event.
lastMouseAngle1 number The last recorded mouse angle.
lastTime1 number The timestamp of the last `pointermove` event.
Source:
Type:
  • object