https://github.com/topaz1008/canvas-node-garden

Javascript node garden effect using a uniform grid for space partitioning
https://github.com/topaz1008/canvas-node-garden

canvas collision-detection graphics-programming javascript particles space-partitioning

Last synced: 2 days ago
JSON representation

Javascript node garden effect using a uniform grid for space partitioning

• Host: GitHub
• URL: https://github.com/topaz1008/canvas-node-garden
• Owner: topaz1008
• License: mit
• Created: 2023-01-12T12:38:51.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-02-19T07:49:02.000Z (8 months ago)
• Last Synced: 2024-03-15T19:33:14.288Z (7 months ago)
• Topics: canvas, collision-detection, graphics-programming, javascript, particles, space-partitioning
• Language: JavaScript
• Homepage:
• Size: 21.5 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
HTML5 Canvas Node Garden

==========================

A live demo can be found [here](https://topaz1008.github.io/canvas-node-garden/).

A demo for testing `ObjectGrid` performance can be seen [here](https://topaz1008.github.io/canvas-node-garden/gridtest.html).

The demo uses a uniform grid for space partitioning in order to do a faster neighbour lookup (basically collision detection) with a lot of objects.

We basically just draw a line between two particles if they are within a certain distance from each other.

Particles also have a simple spring acceleration towards one another, which can make for some complex looking shapes.

The grid algorithm and basic idea is presented in [AdvancED ActionScript Animation](https://www.amazon.com/AdvancED-ActionScript-Animation-Friends-Learning/dp/1430216085) by Keith Peters.

We use a uniform grid with the cell size being as large as our largest object in the scene, then we only need to check each cell and its surrounding neighbours for possible collisions,

and not loop through all objects and check all of them.

It does have a lot of overhead of keeping track of all the objects in the scene, but by balancing the choice of cell size, and the number of objects in the scene, we can usually get a few times faster than the naive O(n^2) algorithm.

Running

---------

Just open `index.html` in your browser.

`gridtest.html` is a demo app for testing the `ObjectsGrid` class.