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
Linear (with inertie)
            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}

            ;(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

        //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)