Git Product home page Git Product logo

canvas-node-garden's Introduction

HTML5 Canvas Node Garden

A live demo can be found here. A demo for testing ObjectGrid performance can be seen here.

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 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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.