make canvas moving faster

hamidb80 commented 7 months ago

use custom collision detection library, use pixi-viewport for panning and zooming, it is so damn fast

replace stars.js with:

import * as random from './random'

export function stars(viewport, starSize, border) {
    for (let i = 0; i < 1000; i++) {
        const star = new PIXI.Sprite(PIXI.Texture.WHITE)
        let fz = (random.randomInt(10)+1) * 10
        console.log(fz)
        const text = new PIXI.Text('This is a PixiJS text', {
             fontSize: fz,
             fill: 0,
         });

        star.anchor.set(0.5)
        star.tint = random.randomInt(0xffffff)
        star.width = random.randomInt(100, 4000)
        star.height = random.randomInt(100, 4000)
        star.alpha = random.range(0.25, 1, true)
        let 
            x = random.range(starSize / 2 + border, viewport.worldWidth - starSize - border),
            y = random.range(border, viewport.worldHeight - border - starSize)

        text.position.set(x, y)    
        star.position.set(x, y)
        viewport.addChild(star, text)
    }
}

man the above code took 2.5 GB of RAM 😮‍💨

hamidb80 commented 7 months ago

the only thing that I can think that why Orgpad is smooth even with lots of nides is that it caches nodes as images, and updates them when you zoom in or zoom out after some periods of time.

hamidb80 commented 7 months ago

honestly the Pixi example is not faster than Konva in mobile ...

hamidb80 commented 6 months ago

https://felt.com/blog/from-svg-to-canvas-part-1-making-felt-faster

hamidb80 commented 6 months ago

https://discourse.wicg.io/t/why-is-canvas-2d-so-slow/2232

hamidb80 commented 6 months ago

honestly the Pixi example is not faster than Konva in mobile ...

I'm confused maybe this is a problem with the library provides scaling/scrolling?

https://pixijs.io/pixi-particles-editor/

hamidb80 commented 6 months ago

https://stackoverflow.com/questions/11639211/need-to-speed-up-my-svg-could-i-convert-to-webgl-or-canvas

hamidb80 commented 6 months ago

https://retejs.org/examples

hamidb80 commented 6 months ago

https://github.com/fabricjs/fabric.js/issues/5099

hamidb80 commented 6 months ago

hamidb80 commented 5 months ago

https://webglfundamentals.org/ https://webgl2fundamentals.org/

hamidb80 commented 5 months ago

https://blog.fastforwardlabs.com/2017/10/04/first-look-using-three.js-for-2d-data-visualization.html

hamidb80 commented 4 months ago

https://github.com/off-by-some/Whiteboard

hamidb80 commented 4 months ago

pixijs Zoom

Font

hamidb80 commented 4 months ago

Rendering Fast Graphics with PixiJS

hamidb80 commented 4 months ago

it does not gives you the correct answer

// find out for one
someCanvas.getContext("2d") // null ? "webgl" : "context2D"

// find out for all
Array.from(document.body.getElementsByTagName("canvas")).map(can => [can, can.getContext("2d")])

How to know if a canvas is a normal canvas or a webgl canvas

orgpad is 2d canvas
google maps is Webgl

hamidb80 commented 4 months ago

https://github.com/tomby42/orgpad -- older versions of OrgPad

hamidb80 commented 4 months ago

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas

hamidb80 commented 4 months ago

find out why is this so fast?

JavaScript Course: Lesson 10 / 11 [OpenStreetMap Tutorial]

demo