fixed multi instance variable collision bug / improved internal renderer / v1.1.4

anuraghazra · anuraghazra · commit 26195abde389 · 2019-07-05T14:23:53.000+05:30
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,14 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.1.4] - 05-07-2019
+### Fixed
+- independent internal rendering engine
+- multiple instance of verly.js was causing global var collisions (WIDTH, HEIGHT, CTX)
+### Changed
+- Entity.js Class now expects two arguments (iteration, verlyInstance) because previously we used global variables to keep track of WIDTH, HEIGHT and ctx which was casing some problems
+- When extending Entity class we have to do super(iteration, verlyInstance)
+- Point.js Class's render, constrain, update methods now expects verlyInstance and ctx variables to be passed.
diff --git a/dist/verly.bundle.js b/dist/verly.bundle.js
diff --git a/dist/verly.bundle.js.map b/dist/verly.bundle.js.map
diff --git a/examples/behavior.html b/examples/behavior.html
@@ -45,32 +45,26 @@
       mouse.setForceAcc(-30);
       mouse.setRadius(100);
 
-      
+
       let mBehavior = 2;
       window.addEventListener('mousemove', (e) => {
-        if (e.altKey) {
-          addParticles(e.offsetX, e.offsetY);
-        }
-        mouse.pos.x = e.offsetX;
-        mouse.pos.y = e.offsetY;
+        if (e.altKey) addParticles(e.offsetX, e.offsetY);
+        mouse.pos.setXY(e.offsetX, e.offsetY)
       })
+      window.addEventListener('mousedown', () => mBehavior = -5)
+      window.addEventListener('mouseup', () => mBehavior = 5)
 
-      window.addEventListener('mousedown', () => {
-        mBehavior = -5;
-      })
-      window.addEventListener('mouseup', () => {
-        mBehavior = 5;
-      })
 
 
-      let particles = new Entity();
+      let particles = new Entity(16, verly);
       function addParticles(x, y) {
         let p = new Point(x, y);
         p.setRadius(3);
         p.setGravity(new Vector(0, 0));
         particles.addPoint(p);
       }
-      for (let i = 0; i < 1000; i++) {
+
+      for (let i = 0; i < 700; i++) {
         addParticles(random(width), random(height));
       }
 
@@ -83,15 +77,15 @@
         for (let i = 0; i < particles.points.length; i++) {
           for (let j = 0; j < particles.points.length; j++) {
             if (particles.points[i] !== particles.points[j]) {
-              particles.points[j].resolveBehaviors(particles.points[i], 20, 2)
+              particles.points[j].resolveBehaviors(particles.points[i], 20, 3)
             }
           }
           particles.points[i].resolveBehaviors(mouse, mouse.radius, mBehavior)
         }
 
         verly.update();
         verly.render();
-        verly.interact();
+        // verly.interact();
 
         // verly.renderPointIndex();
 
diff --git a/examples/behavior2.html b/examples/behavior2.html
@@ -44,7 +44,7 @@
 
       let verly = new Verly(16, canvas, ctx);
 
-      let particle = new Entity();
+      let particle = new Entity(16, verly);
       let p1 = new Point(0, 0);
       let p2 = new Point(0, 0);
       p1.setRadius(20);
diff --git a/examples/dynamicCustomMesh.html b/examples/dynamicCustomMesh.html
@@ -42,7 +42,7 @@
 
       let verly = new Verly(16, canvas, ctx);
 
-      let custom = new Entity(16);
+      let custom = new Entity(16, verly);
 
       window.addEventListener('contextmenu', (e) => {
         e.preventDefault();
@@ -62,6 +62,7 @@
 
       verly.createRagdoll(100, 100, 100, 100);
       verly.addEntity(custom);
+      
       function animate() {
         ctx.clearRect(0, 0, width, height);
 
diff --git a/examples/rotatingEntity.html b/examples/rotatingEntity.html
@@ -43,7 +43,7 @@
 
       let verly = new Verly(16, canvas, ctx);
 
-      let b1 = new Box(200, 110, 20, 100);
+      let b1 = new Box(200, 110, 20, 100, 16, verly);
       b1.setGravity(new Vector())
       verly.addEntity(b1);
 
@@ -55,7 +55,7 @@
         p.resetVelocity();
       }
 
-      let b2 = new Box(150, 125, 20, 100);
+      let b2 = new Box(150, 125, 20, 100, 16, verly);
       b2.setGravity(new Vector())
       verly.addEntity(b2);
 
diff --git a/examples/shadedCloth.html b/examples/shadedCloth.html
@@ -28,7 +28,7 @@
 <body>
 
   <canvas id="c"></canvas>
-  
+
   <script src="../dist/verly.bundle.js"></script>
 
   <script>
@@ -44,8 +44,8 @@
       let verly = new Verly(16, canvas, ctx);
 
       class Cloth extends Entity {
-        constructor(posx, posy, w, h, segments, pinOffset) {
-          super();
+        constructor(posx, posy, w, h, segments, pinOffset, itteration, verlyInstance) {
+          super(itteration, verlyInstance);
           verly.dontPush = true;
           let c = verly.createCloth(posx, posy, w, h, segments, pinOffset);
           this.points = c.points;
@@ -91,7 +91,7 @@
         }
       }
 
-      let cloth = new Cloth(300, 100, 500, 400, 25, 2);
+      let cloth = new Cloth(300, 100, 500, 400, 25, 2, 16, verly);
       verly.addEntity(cloth);
 
       function animate() {
diff --git a/examples/ship/index.js b/examples/ship/index.js
@@ -43,7 +43,7 @@ window.onload = function () {
   let word = new Text('SAK', 300, 300, 25);
 
   // let box = verly.createHexagon(200, 200, 15, 50);
-  let ent = new Entity(60);
+  let ent = new Entity(60, verly);
   ent.addPoint(ship);
   let boxtmp = verly.joinEntities(word.entity, ent);
   let BOX_POINTS = boxtmp.points.length;
diff --git a/examples/text/index.html b/examples/text/index.html
@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Verly.js Text</title>
-  <script src="../../src/Vector.js"></script>
 
   <style>
     * {
diff --git a/examples/typography/Text.js b/examples/typography/Text.js
@@ -1,6 +1,5 @@
 class Text {
-
-  constructor(alphabets, x, y, fontsize) {
+  constructor(alphabets, x, y, fontsize, verlyInstance) {
     this.alphabets = alphabets.toUpperCase().split('');
     this.x = x;
     this.y = y;
@@ -9,13 +8,13 @@ class Text {
     this.iterations = 50;
 
     this.gap = 0;
-    this.entity = new Entity(this.iterations);
+    this.entity = new Entity(this.iterations, verlyInstance);
     for (let i = 0; i < this.alphabets.length; i++) {
       let word = new TypoGraphy(this.x + (this.gap), this.y, this.fontsize, this.alphabets[i]);
       this.words.push(word);
       this.gap += 110;
     }
-
+    
     this.entity = this.join.apply(this.entity, this.words);
   }
 
diff --git a/examples/typography/index.js b/examples/typography/index.js
@@ -25,8 +25,8 @@ window.onload = function () {
     urlText2 = search_params.get('text2') || 'HOLI';
   }
 
-  let word = new Text(urlText, 50, 100, 25);
-  let word2 = new Text(urlText2, 700, 100, 25);
+  let word = new Text(urlText, 50, 100, 25, verly);
+  let word2 = new Text(urlText2, 700, 100, 25, verly);
 
   // let A = new TypoGraphy(offsetX, center, 20, 'A');
 
diff --git a/experiments/api_flexibility/index.js b/experiments/api_flexibility/index.js
@@ -17,14 +17,6 @@ window.onload = function () {
   mix.addStick(25, 26, 10);
   hexagon.setGravity(new Vector(0, -0.8))
 
-  // class Vox extends Entity.Rope {
-  //   constructor() {
-  //     super()
-
-
-  //   }
-  // }
-
 
   function animate() {
     ctx.clearRect(0, 0, width, height);
diff --git a/experiments/multiple_instance/index.js b/experiments/multiple_instance/index.js
@@ -18,9 +18,9 @@ function createInstance(w) {
   const verly = new Verly(16, canvas, ctx);
 
   let box = verly.createBox(100, 100, 100, 100);
-  let hexagon = verly.createHexagon(100, 100, 18, 50);
-  console.log(box)
-  // // rendering
+  let hexagon = verly.createHexagon(100, 100, 18, random(20, 100));
+
+  // rendering
   box.renderSticks = () => {
     for (let i = 0; i < box.sticks.length; i++) {
       let stick = box.sticks[i];
@@ -32,18 +32,14 @@ function createInstance(w) {
       ctx.closePath();
     }
   }
-  
+
+
   function animate() {
     ctx.clearRect(0, 0, width, height);
-
-    verly.update();
-    // verly.render();
     
-    box.render(ctx);
-    box.renderPointIndex(ctx);
-    hexagon.render(ctx);
-    hexagon.renderPointIndex(ctx);
 
+    verly.update();
+    verly.render();
     verly.interact();
 
     // verly.renderPointIndex();
diff --git a/experiments/web_components/Component.js b/experiments/web_components/Component.js
@@ -14,7 +14,7 @@ class VerlyCanvas extends HTMLCanvasElement {
 
     window.onload = () => {
       var entities = this.getElementsByTagName('verly-entity');
-      console.log(this['verly-box'])
+      // console.log(this['verly-box'])
       for (var i = 0; i < entities.length; i++) {
         let type = entities[i].attributes.type.value;
         let posx = parseFloat(entities[i].attributes.x.value);
diff --git a/index.js b/index.js
@@ -10,7 +10,7 @@ window.onload = function () {
 
   let cloth = verly.createCloth(200, 200, 300, 300, 20, 2);
   // let ragdoll = verly.createRagdoll(100, 100);
-  verly.createBox(100, 100, 100, 100);
+  let box = verly.createBox(100, 100, 100, 100);
   
   function animate() {
     ctx.clearRect(0, 0, width, height);
diff --git a/src/Entity.js b/src/Entity.js
diff --git a/src/Objects.js b/src/Objects.js
diff --git a/src/Point.js b/src/Point.js
diff --git a/src/TypoGraphy.js b/src/TypoGraphy.js
diff --git a/src/Verly.js b/src/Verly.js
