Merge pull request #7 from evaristocuesta/dev.0.1.2

Dev.0.1.2
Issue #2 and Issue #3 fixed

README.md

@@ -21,7 +21,7 @@ Pict2Pix.js is a library to add pixels animation to an image
     <div id="div1">
         <img id="image-jh" src="images/jimi-hendrix.jpg">
     </div>
-    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.1.1/dist/pict2pix.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.1.2/dist/pict2pix.min.js"></script>
     <script src="js/app.js"></script>
 </body>
 </html>

example/css/style.css

@@ -6,10 +6,4 @@
 }
 body {
   overflow: hidden;
-}
-#div1 {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
 }

example/index.html

@@ -11,7 +11,10 @@
     <div id="div1">
         <img id="image-jh" src="images/jimi-hendrix.jpg">
     </div>
-    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.1.1/dist/pict2pix.min.js"></script>
+    <div id="div2">
+        <img id="image-ay" src="images/angus-young.jpg">
+    </div>
+    <script src="https://cdn.jsdelivr.net/gh/evaristocuesta/pict2pix@0.1.2/dist/pict2pix.min.js"></script>
     <script src="js/app.js"></script>
 </body>
 </html>

example/js/app.js

@@ -1,10 +1,20 @@
-const image = document.getElementById('image-jh');
+const imagejh = document.getElementById('image-jh');
+const imageay = document.getElementById('image-ay');
 window.onload = function initialize() {
+
     pict2pix.animate({
-        image: image,
-        numberOfParticles: 3000,
+        image: imagejh,
+        numberOfParticles: 1500,
         horizontalSpeed: -1,
         verticalSpeed: -1,
+        particleType: 'straight-particle'
+    });
+
+    pict2pix.animate({
+        image: imageay,
+        numberOfParticles: 800,
+        horizontalSpeed: 1,
+        verticalSpeed: 1,
         particleType: 'twisted-particle'
     });
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pict-2-pix",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Pict2Pix",
   "private": true,
   "scripts": {

src/particle-factory.js

@@ -7,12 +7,12 @@ export default class ParticleFactory {
     constructor()
     {
         this.#particles = {
-            'straight-particle': (props) => new StraightParticle(),
-            'twisted-particle': (props) => new TwistedParticle()
+            'straight-particle': (config) => new StraightParticle(config),
+            'twisted-particle': (config) => new TwistedParticle(config)
         }
     }
 
-    createParticle(type, props) {
-        return this.#particles[type]?.(props) ?? new StraightParticle();
+    createParticle(config) {
+        return this.#particles[config.particleType]?.(config) ?? new StraightParticle();
     }
 }

src/particle.js

@@ -1,12 +1,8 @@
 export default class Particle {
-    static mappedImage;
-    static maxWidth;
-    static maxHeight;
-    static horizontalSpeed;
-    static verticalSpeed;
+    config;
 
-    constructor(){
-
+    constructor(config){
+        this.config = config;
     }
 
     update(deltaTime){

src/pict2pix.js

@@ -7,59 +7,54 @@ export default class Pict2Pix {
     #lastTime = 0;
     #deltaTime = 0;
     #particlesArray = [];
-    #numberOfParticles = 3000;
-    #mappedImage = [];
+    #config;
 
-    constructor(configPic2Pix) {
-        this.#numberOfParticles = configPic2Pix.numberOfParticles || 3000;
+    constructor(config) {
+        this.#config = config;
+
         this.#canvas = document.createElement('canvas');
-        this.#canvas.width = configPic2Pix.image.width || configPic2Pix.image.naturalWidth;
-        this.#canvas.height = configPic2Pix.image.height || configPic2Pix.image.naturalHeight;
-        configPic2Pix.image.replaceWith(this.#canvas);
+        this.#canvas.width = this.#config.image.width || this.#config.image.naturalWidth;
+        this.#canvas.height = this.#config.image.height || this.#config.image.naturalHeight;
+        this.#config.image.replaceWith(this.#canvas);
         this.#ctx = this.#canvas.getContext('2d');
 
-        this.#ctx.drawImage(configPic2Pix.image, 0, 0, this.#canvas.width, this.#canvas.height);
+        this.#ctx.drawImage(this.#config.image, 0, 0, this.#canvas.width, this.#canvas.height);
         const pixels = this.#ctx.getImageData(0, 0, this.#canvas.width, this.#canvas.height);
         this.#ctx.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
 
-        this.mapImage(pixels);
+        this.#config.numberOfParticles = this.#config.numberOfParticles || 3000;
+        this.#config.mappedImage = this.mapImage(pixels);
+        this.#config.maxWidth = this.#canvas.width;
+        this.#config.maxHeight = this.#canvas.height;
+        this.#config.verticalSpeed = config.verticalSpeed ?? 1;
+        this.#config.horizontalSpeed = config.horizontalSpeed ?? 1;
 
-        requestAnimationFrame(this.loop.bind(this));
-        Particle.mappedImage = this.#mappedImage;
-        Particle.maxWidth = this.#canvas.width;
-        Particle.maxHeight = this.#canvas.height;
-        Particle.verticalSpeed = configPic2Pix.verticalSpeed ?? 1;
-        Particle.horizontalSpeed = configPic2Pix.horizontalSpeed ?? 1;
         const factory = new ParticleFactory();
-        for (let i = 0; i < this.#numberOfParticles; i++){
-            this.#particlesArray.push(factory.createParticle(configPic2Pix.particleType ?? 'straight-particle'));
+        for (let i = 0; i < this.#config.numberOfParticles; i++){
+            this.#particlesArray.push(factory.createParticle(config));
         }
+
+        requestAnimationFrame(this.loop.bind(this));
     }
 
     mapImage(pixels) {
-        let min = 654654;
-        let max = -654654;
+        let mappedImage = [];
         for (let y = 0; y < this.#canvas.height; y++){
             let row = [];
             for (let x = 0; x < this.#canvas.width; x++){
                 const red = pixels.data[(y * 4 * pixels.width) + (x * 4)];
                 const green = pixels.data[(y * 4 * pixels.width) + (x * 4 + 1)];
                 const blue = pixels.data[(y * 4 * pixels.width) + (x * 4 + 2)];
                 const brightness = this.calculateRelativeBrightness(red, green, blue);
-                if (brightness < min) {
-                    min = brightness;
-                }
-                if (brightness > max) {
-                    max = brightness;
-                }
                 const cell = [
                     brightness,
                     'rgb(' + red + ',' + green + ',' + blue + ')'
                 ];
                 row.push(cell);
             }
-            this.#mappedImage.push(row);
+            mappedImage.push(row);
         }
+        return mappedImage;
     }
 
     calculateRelativeBrightness(red, green, blue){

src/straight-particle.js

@@ -1,39 +1,39 @@
 import Particle from "./particle";
 
 export default class StraightParticle extends Particle {
-    constructor(){
-        super();
-        this.x = Math.random() * Particle.maxWidth;
-        this.y = Math.random() * Particle.maxHeight;
+    constructor(config){
+        super(config);
+        this.x = Math.random() * this.config.maxWidth;
+        this.y = Math.random() * this.config.maxHeight;
         this.speed = 0;
         this.size = Math.random() * 2 + 0.2;
         this.color;
     }
     update(deltaTime){
-        let yInt = Math.floor(this.y);
-        let xInt = Math.floor(this.x);
-        if (yInt >= 0 && yInt < Particle.maxHeight 
-            && xInt >= 0 && xInt < Particle.maxWidth){
-            this.speed = Particle.mappedImage[yInt][xInt][0];
-            this.color = Particle.mappedImage[yInt][xInt][1];
-        }
-        this.y += (3 - this.speed) * deltaTime * 0.03 * Particle.verticalSpeed;
-        this.x += (3 - this.speed) * deltaTime * 0.03 * Particle.horizontalSpeed;
-        if (this.y >= Particle.maxHeight && Particle.verticalSpeed > 0){
+        this.y += (3 - this.speed) * deltaTime * 0.03 * this.config.verticalSpeed;
+        this.x += (3 - this.speed) * deltaTime * 0.03 * this.config.horizontalSpeed;
+        if (this.y >= this.config.maxHeight && this.config.verticalSpeed > 0){
             this.y = 0;
-            this.x = Math.random() * Particle.maxWidth;
+            this.x = Math.random() * this.config.maxWidth;
         }
-        if (this.y < 0 && Particle.verticalSpeed < 0){
-            this.y = Particle.maxHeight - 1;
-            this.x = Math.random() * Particle.maxWidth;
+        if (this.y < 0 && this.config.verticalSpeed < 0){
+            this.y = this.config.maxHeight - 1;
+            this.x = Math.random() * this.config.maxWidth;
         }
-        if (this.x >= Particle.maxWidth && Particle.horizontalSpeed > 0){
+        if (this.x >= this.config.maxWidth && this.config.horizontalSpeed > 0){
             this.x = 0;
-            this.y = Math.random() * Particle.maxHeight;
+            this.y = Math.random() * this.config.maxHeight;
         }
-        if (this.x < 0 && Particle.horizontalSpeed < 0){
-            this.x = Particle.maxWidth - 1;
-            this.y = Math.random() * Particle.maxHeight;
+        if (this.x < 0 && this.config.horizontalSpeed < 0){
+            this.x = this.config.maxWidth - 1;
+            this.y = Math.random() * this.config.maxHeight;
+        }
+        let yInt = Math.floor(this.y);
+        let xInt = Math.floor(this.x);
+        if (yInt >= 0 && yInt < this.config.maxHeight 
+            && xInt >= 0 && xInt < this.config.maxWidth){
+            this.speed = this.config.mappedImage[yInt][xInt][0];
+            this.color = this.config.mappedImage[yInt][xInt][1];
         }
     }
     draw(ctx){

src/twisted-particle.js

@@ -3,6 +3,10 @@ import StraightParticle from "./straight-particle";
 export default class TwistedParticle extends StraightParticle {
     #angle = 0;
 
+    constructor(config) {
+        super(config);
+    }
+
     update(deltaTime) {
         super.update(deltaTime);
         this.#angle += this.speed / 20;