Javascript Particle!

Look at the particles with physics applied! it tracks your mouse

Supported Effects

• Water drop effect
• Parabola Effect
• Rainbow color

Create Particle Provider

import { ParticleProvider } from "./animation/animation.js";

// You need to pass the html cavans id to use to the provider.
let provider = new ParticleProvider('canvas');
provider.init();

Create Shape Example

import { Parabola, createParabolaEffect } from "./parabola.js";
import Circle from "./shapes/circle.js";

// Define a function that creates a particle. It takes x and y as arguments.
let circle = (x, y) => {
    let attribute = new ShapeAttribute(); // If you do not put a color in the constructor, it is automatically assigned as a rainbow color. You can enter the color as a string.
    let shape = new Circle(2, x ,y , attribute);
    shape.attachEffect(createParabolaEffect());

    return shape;
}

Enable Event listener

import { OnMouseTracingListener, OnMouseClickListener } from "./listener/animation-listner.js";
import { Parabola, createParabolaEffect } from "./parabola.js";

let provider = new ParticleProvider('canvas');
provider.init();

let circle = (x, y) => {
    let attribute = new ShapeAttribute(); // If you do not put a color in the constructor, it is automatically assigned as a rainbow color. You can enter the color as a string.
    let shape = new Circle(2, x ,y , attribute);
    shape.attachEffect(createParabolaEffect());

    return shape;
}

let mouseTrackingListener = new OnMouseTrackerListener(
    provider.defaultObserver, circle
);

let mouseClickListener = new OnMouseClickListener(
    provider.defaultObserver, circle
);

// listning
mouseTrackingListener.listen();
mouseClickListener.listen();

// dispose listener
mouseTrackingListener.dispose();
mouseClickListener.dispose();

Water drop effect

Parabola