npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

spinning-ball

v0.5.0

Published

Simulate the position and motion of a camera above the Earth

Downloads

11

Readme

spinning ball

tests

Simulate the position and motion of a camera above the Earth

Camera position above a spherical Earth is represented as a 3-vector of longitude, latitude, altitude, with associated angular and vertical velocities.

Accelerations can be induced by user interaction with the HTML div where the sphere will be rendered. Handled interactions include:

  • Single-touch or mouse-click and drag motions (rotational acceleration)
  • Two-touch pinches or scroll wheel rotations (vertical acceleration)

Velocities are damped, with weak damping when there are no active touches or clicks, to allow coasting. With an active touch/click/zoom, the damping constant is chosen for critical damping of the relevant induced spring force, to avoid any oscillation.

Note that the camera and the spherical Earth as modeled by spinning-ball are both purely conceptual. To display what would be seen by the camera, a separate renderer is required. See the example for a demo with a simple D3 renderer.

Initialization

A spinning-ball instance can be initialized as follows:

import * as spinningBall from 'spinning-ball';

const ball = spinningBall.init(parameters);

The supplied parameters object has the following properties:

  • display (REQUIRED): An HTML element where the globe will be represented, and where the user's client will generate interaction events
  • units: Specify "degrees" or "radians" as the units of any supplied or returned longitude and latitude coordinates. Default: "degrees"
  • position: The initial position of the camera. Longitude and latitude must be in the specified units. Altitude must be in kilometers, and between minAltitude and maxAltitude. Default: [0.0, 0.0, 4 * earthRadius] where earthRadius == 6371.0
  • minAltitude: The minimum altitude of the camera, in kilometers. Default: 0.0001 * earthRadius
  • maxAltitude: The maximum altitude of the camera, in kilometers. Default: 8.0 * earthRadius
  • minLongitude: The minimum longitude of the camera, in the specified units. Default: -180 degrees (or -PI radians)
  • maxLongitude: The maximum longitude of the camera, in the specified units. Default: +180 degrees (or +PI radians). Note: if both minLongitude and maxLongitude are set to their defaults, the globe can be spun freely (it will not stop at the antimeridian)
  • minLatitude: The minimum latitude of the camera, in the specified units. Default: -90 degrees (or -PI / 2 radians)
  • maxLatitude: The maximum latitude of the camera, in the specified units. Default: +90 degrees (or +PI / 2 radians)

API

Initialization returns an object with the following properties and methods:

  • view: Pointer to a view object as generated by the initView method of yawgl. This can compute ray parameters at a point on the display
  • radius(): Returns the (floating point) radius of the sphere, in kilometers
  • project(xy, geodetic): Projects a given position to the [x,y] pair of display pixel coordinates where that position would be rendered
  • cameraPos(): Returns the current position of the camera
  • cursorPos(): Returns the position that would be rendered at the current screen position of the cursor
  • camMoving(): Returns a (Boolean) flag indicating whether the camera is moving
  • isOnScene(): Returns a (Boolean) flag indicating whether a ray shot from the current cursor position would intersect the globe
  • wasTapped(): Returns a (Boolean) flag indicating whether the globe has been tapped or clicked since the last update
  • cursorChanged(): Returns a (Boolean) flag indicating whether there has been any change in the position or status of the cursor relative to the globe
  • update(time): Updates the position and velocity of the camera, taking into account any current velocities, and computing new accelerations induced by mouse or touch interactions.
    • Input time (floating point) is the current time in seconds. If using requestAnimationFrame, its argument should be multiplied by 0.001
    • Return value is a flag indicating whether the display should be re-rendered, due to motion of the globe or resizing of the display
  • flyTo(position): Starts an animated flight that moves the camera to the provided position. The supplied position MUST be in the units specified on initialization, and within the specified bounds on longitude, latitude, and altitude. Note: the flight will be stepped through on subsequent calls to .update, and canceled by any subsequent click/touch action.

Coordinate convention for positions on the globe

spinning-ball represents positions on the globe as 3-element arrays, of [longitude, latitude, altitude]. Longitude and latitude are in the units specified on initialization. Altitude is in kilometers.

This convention is assumed for the initial camera position (on initialization) and for the second argument of the API .project method. It is also the format of the values returned by .cameraPos() and .cursorPos().

Notes about the code

Some functions include math for an ellipsoid, with different values for the polar and equatorial radius. However, the two radii MUST be kept equal for now, until the remaining functions are updated to handle a non-spherical Earth.