HTML5 Game - Canvas Animation Partical Class

Description

Partical Class
Demo

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Particle example</title>
</head>/*  w ww  .  j ava  2s.c o m*/
<body>
<p>Check console for result</p>
<script>
class Vector2D {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    // PUBLIC METHODS  
    lengthSquared() {
        return this.x * this.x + this.y * this.y;
    }

    length() {
        return Math.sqrt(this.lengthSquared());
    }

    clone() {
        return new Vector2D(this.x, this.y);
    }

    negate() {
        this.x = -this.x;
        this.y = -this.y;
    }

    normalize() {
        const length = this.length();
        if (length > 0) {
            this.x /= length;
            this.y /= length;
        }
        return this.length();
    }

    add({
        x,
        y
    }) {
        return new Vector2D(this.x + x, this.y + y);
    }

    incrementBy({
        x,
        y
    }) {
        this.x += x;
        this.y += y;
    }

    subtract({
        x,
        y
    }) {
        return new Vector2D(this.x - x, this.y - y);
    }

    decrementBy({
        x,
        y
    }) {
        this.x -= x;
        this.y -= y;
    }

    multiply(k) {
        return new Vector2D(k * this.x, k * this.y);
    }

    addScaled({
        x,
        y
    }, k) {
        return new Vector2D(this.x + k * x, this.y + k * y);
    }

    scaleBy(k) {
        this.x *= k;
        this.y *= k;
    }

    dotProduct({
        x,
        y
    }) {
        return this.x * x + this.y * y;
    }
}

// STATIC METHODS
Vector2D.distance = (vec1, vec2) => (vec1.subtract(vec2)).length()
Vector2D.angleBetween = (vec1, vec2) => Math.acos(vec1.dotProduct(vec2) / (vec1.length() * vec2.length()))

class Particle {
    constructor(mass, charge) {
        if (typeof(mass) === 'undefined') mass = 1;
        if (typeof(charge) === 'undefined') charge = 0;
        this.mass = mass;
        this.charge = charge;
        this.x = 0;
        this.y = 0;
        this.vx = 0;
        this.vy = 0;
    }

    get pos2D() {
        return new Vector2D(this.x, this.y);
    }

    set pos2D({
        x,
        y
    }) {
        this.x = x;
        this.y = y;
    }

    get velo2D() {
        return new Vector2D(this.vx, this.vy);
    }

    set velo2D({
        x,
        y
    }) {
        this.vx = x;
        this.vy = y;
    }
}

const particle = new Particle();
particle.x = 22;
particle.y = 31;

// tests
console.log(particle.mass, particle.charge);
particle.mass = 20;
particle.charge = -1;
console.log(particle.mass, particle.charge);

//console.log(particle.getPos2D().x, particle.getPos2D().y);
console.log(particle.pos2D.x, particle.pos2D.y);
console.log(particle.velo2D.x, particle.velo2D.y);
particle.velo2D = new Vector2D(2.5, 4.7);
console.log(particle.velo2D.x, particle.velo2D.y);

const dt = 0.1;
particle.pos2D = particle.pos2D.addScaled(particle.velo2D, dt);
console.log(particle.pos2D.x, particle.pos2D.y);
</script>
</body>
</html>
HTML5 Game - Canvas Animation Partical Class

Description

Demo

Related Topic
