https://github.com/dbabbs/geo-animating-lines
Performant animated lines in Three.js and Canvas on top of the HERE JavaScript API
https://github.com/dbabbs/geo-animating-lines
Last synced: over 1 year ago
JSON representation
Performant animated lines in Three.js and Canvas on top of the HERE JavaScript API
- Host: GitHub
- URL: https://github.com/dbabbs/geo-animating-lines
- Owner: dbabbs
- Created: 2019-10-28T09:29:17.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-01-19T14:24:33.000Z (over 6 years ago)
- Last Synced: 2025-03-25T15:21:22.004Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://dbabbs.github.io/geo-animating-lines/
- Size: 4.42 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Animated Geo Lines with Three.js and Canvas
Project originally posted on [Twitter](https://twitter.com/dbabbs/status/1187743537963646979).
Techniques and source code for animating lines with a custom [Canvas](https://www.w3schools.com/html/html5_canvas.asp) and [Three.js](https://threejs.org/) layer on top of the [HERE JavaScript API](https://developer.here.com/documentation/maps/topics/quick-start.html).
There are three types of route lines that can generated. This can be configured in the `STATE` variable. The options are:
- `circle`: lines start at center and head towards the circumference of the circle with each point being an equal distance from each other
- `random`: lines are generated with random start and end points.
- `randomSameStarting`: lines start at the same center but have random end points.
The routes are based off the real road network geometry and come from the [HERE Routing API](https://developer.here.com/documentation/routing/topics/what-is.html).
The animation code lives inside the `AnimationLayer.js` file.
**NOTE**: This app uses `Promise.allSettled()`, which is not yet implemented or supported by all browsers. The app will work fine with a recent version of Chrome.