drawcall / Proton

Javascript particle animation library
https://drawcall.github.io/Proton/
MIT License
2.41k stars 275 forks source link

Is there a way to get particles to respond to page resize? #18

Closed daviestar closed 4 years ago

daviestar commented 8 years ago

Hey,

I have a project based on this demo where you render an Image to Canvas then run Proton.ImageZone() to get particle zones.

Problem is, no matter what I try, I can't get the particles to respond to a window resize, and recenter in the canvas. What I'm trying is:

On window resize, I set an origin object with x and y values of half the window width and height.

function customToZoneBehaviour() {
    return {
        initialize : function(particle) {
            particle.old.origin = {
                x: origin.x,
                y: origin.y
            };

            particle.R = Math.random() * 10;
            particle.Angle = Math.random() * Math.PI * 2;
            particle.speed = Math.random() * (-2) + 1;
            particle.zones = zones.map(function(o) {
                return o.getPosition().clone();
            });
        },
        applyBehaviour : function(particle) {
            particle.v.clear();
            particle.Angle += particle.speed;
            zoneX = particle.zones[curZone % totalZones].x + particle.R * Math.cos(particle.Angle);
            zoneY = particle.zones[curZone % totalZones].y + particle.R * Math.sin(particle.Angle);
            particle.p.x += (zoneX - particle.p.x) * 0.15;
            particle.p.y += (zoneY - particle.p.y) * 0.15;

            //TODO: responsive to center
            particle.p.x = particle.p.x + ((origin.x - particle.old.origin.x) / 2);
        }
    };
}

This always moves too far in the correct direction. I suspect because it is transitioning and not simply moving to the desired coordinates.

So is there a way to move a particle to new coordinates without a transition?

Thanks