Merge pull request #17 from evaristocuesta/dev.0.3.0

Dev.0.3.0

example/index.html

@@ -17,8 +17,11 @@ <h1>Pict2Pix.js example</h1>
         <img id="image-ay" src="images/angus-young.jpg">
     </div>
     <div class="content">Working when the mouse is over the picture</div>
+    <div class="content" id="div3">
+        <img id="image-jh2" src="images/jimi-hendrix.jpg">
+    </div>
 
-    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.2.0/dist/pict2pix.min.js"></script>
+    <script src="../dist/pict2pix.min.js"></script>
 
     <script src="js/app.js"></script>
 </body>

example/js/app.js

@@ -1,4 +1,5 @@
 const imagejh = document.getElementById('image-jh');
+const imagejh2 = document.getElementById('image-jh2');
 
 window.onload = function initialize() {
     pict2pix.animate({
@@ -8,6 +9,13 @@ window.onload = function initialize() {
         verticalSpeed: -1,
         particleType: 'twisted-particle'
     });
+    pict2pix.animate({
+        image: imagejh2,
+        particleType: 'led-matrix',
+        type: 'random',
+        speed: 6, 
+        transitionTime: 5000
+    });
 }
 
 const imageay = document.getElementById('image-ay');

src/effect-factory.js

@@ -0,0 +1,14 @@
+import ShootingStars from "./shooting-stars-effect/shooting-stars-effect";
+import LedMatrixEffect from "./led-matrix-effect/led-matrix-effect";
+
+export default class EffectFactory {
+    static #effects = {
+            'straight-particle': (config) => new ShootingStars(config),
+            'twisted-particle': (config) => new ShootingStars(config),
+            'led-matrix': (config) => new LedMatrixEffect(config)
+    }
+
+    static createParticle(config) {
+        return this.#effects[config.particleType]?.(config) ?? new ShootingStars(config);
+    }
+}

src/led-matrix-effect/default-led-particle.js

@@ -0,0 +1,87 @@
+export default class DefaultLedParticle {
+
+    #config;
+    #x;
+    #y;
+    #originalX;
+    #originalY;
+    #targetX;
+    #targetY;
+    #maxDistance;
+    #color;
+    #minForce;
+
+    constructor(config, props) {
+        this.#config = config;
+        this.#x = 0;
+        this.#y = 0;
+        this.#originalX = props.x;
+        this.#originalY = props.y;
+        this.setTargetToOrigin();
+        this.#color = props.color;
+        this.#minForce = ((Math.random() * this.#config.speed) + this.#config.speed / 2) * 0.001;
+    }
+
+    setTarget(x, y) {
+        this.#targetX = x;
+        this.#targetY = y;
+    }
+
+    setTargetToOrigin() {
+        this.#targetX = this.#originalX;
+        this.#targetY = this.#originalY;
+    }
+
+    setPos(x, y) {
+        this.#x = x;
+        this.#y = y;
+    }
+
+    getX() {
+        return this.#x;
+    }
+
+    getY() {
+        return this.#y;
+    }
+
+    getOriginalX() {
+        return this.#originalX;
+    }
+
+    getOriginalY() {
+        return this.#originalY;
+    }
+
+    getTargetX() {
+        return this.#targetX;
+    }
+
+    getTargetY() {
+        return this.#targetY;
+    }
+
+    update(deltaTime, speed) {
+        const dx = this.#targetX - this.#x;
+        const dy = this.#targetY - this.#y;
+        if (Math.abs(dx) > 1 || Math.abs(dy) > 1 ) {
+            this.#x += speed * dx * deltaTime * this.#minForce;
+            this.#y += speed * dy * deltaTime * this.#minForce;
+            return false;
+        }
+        else {
+            this.#x = this.#targetX;
+            this.#y = this.#targetY;
+            return true;
+        }
+    }
+
+    draw(ctx) {
+        ctx.beginPath();
+        ctx.arc(this.#x, this.#y, 2, 0, Math.PI*2);
+        ctx.closePath();
+        ctx.fillStyle = this.#color;
+        ctx.fill();
+    }
+
+}

src/led-matrix-effect/led-matrix-effect-base-state.js

@@ -0,0 +1,16 @@
+export default class LedMatrixEffectBaseState {
+
+    ledMatrixEffect;
+
+    setLedMatrixEffect(ledMatrixEffect) {
+        this.ledMatrixEffect = ledMatrixEffect;
+    }
+
+    update(deltaTime) {
+
+    }
+
+    setLedMatrixEffect(ledMatrixEffect) {
+        this.ledMatrixEffect = ledMatrixEffect;
+    }
+}

src/led-matrix-effect/led-matrix-effect-idle-state.js

@@ -0,0 +1,22 @@
+import LedMatrixStateFactory from "./led-matrix-state-factory";
+import LedMatrixEffectBaseState from "./led-matrix-effect-base-state";
+
+export default class LedMatrixEffectIdleState extends LedMatrixEffectBaseState {
+
+    #accumulatedTime = 0;
+    #config;
+    #particlesArray;
+
+    constructor(config, particles) {
+        super();
+        this.#config = config;
+        this.#particlesArray = particles;
+    }
+
+    update(deltaTime) {
+        this.#accumulatedTime += deltaTime;
+        if (this.#accumulatedTime > this.#config.transitionTime) {
+            this.ledMatrixEffect.setState(LedMatrixStateFactory.createLedMatrixState(this.#config.type, this.#config, this.#particlesArray));
+        }
+    }
+}

src/led-matrix-effect/led-matrix-effect-returning-state.js

@@ -0,0 +1,29 @@
+import LedMatrixEffectBaseState from "./led-matrix-effect-base-state";
+import LedMatrixStateFactory from "./led-matrix-state-factory";
+
+export default class LedMatrixEffectReturningState extends LedMatrixEffectBaseState {
+
+    #config;
+    #particlesArray;
+
+    constructor(config, particles) {
+        super();
+        this.#config = config;
+        this.#particlesArray = particles;
+        for (let i = 0; i < this.#particlesArray.length; i++){
+
+            this.#particlesArray[i].setTargetToOrigin();
+        }
+    }
+
+    update(deltaTime) {
+        let finished = true;
+        for (let i = 0; i < this.#particlesArray.length; i++){
+            let particleIdle = this.#particlesArray[i].update(deltaTime, 1);
+            finished = finished && particleIdle;
+        }
+        if (finished) {
+            this.ledMatrixEffect.setState(LedMatrixStateFactory.createLedMatrixState('idle', this.#config, this.#particlesArray));
+        }
+    }
+}