Quadtree library

What is it ?

This is a live demo from this library.

Quadtrees are data structures with many usages. You can for example use them to reduce collisions tests, as shown by this demo.

Sprites ripped by Azu from Touhou Project : Mystical Chain

See it on GitHub for more informations.

It seems you're running this file from a local file system.
Cross origin requests may be supported only for protocol schemes on some browsers.

Particules number
Collisions tests
Node capacity
Maximum depth
Keyboard controls
Particles generation patterns
Circular
Linear
Linear (with inertie)
Directed
Random
                
        //Initialization
            let size = 400, particles = 0
            let quadtree = new Lowlight.Quadtree({max_items:4, max_depth:7, w:size, h:size})

        //Particles creation
            for (let i = 0; i < particles; i++) {
                quadtree.add({x:size*Math.random(), y:size*Math.random(), w:10, h:10, ax:0.5, ay:0.5})
            }

        //Add player
            let player = {x:size*Math.random(), y:size*Math.random(), collide:collide.bind(null, player), w:10, h:10, ax:0.5, ay:0.5}
            quadtree.add(player)

        //Update
            ;(function update() {
                //Collision test (return 0)
                    [...quadtree.retrieve(player)].filter(item => player.collide(item)).length

                //Update positions
                    quadtree.entries.forEach(particle => {
                        particle.x += Math.random()
                        particle.y += Math.random()
                    })

                //Rebuild and next frame
                    quadtree.rebuild()
                    requestAnimationFrame(update)
            })()

        //Collision test
            function collide(a, b) {
                return (a.x + a.w < b.x)||(b.x + b.w < a.x)||(a.y + a.h < b.y)||(b.y + b.h < a.y)
            }