fixed multi instance variable collision bug / improved internal rende…

…rer / v1.1.4
anuraghazra · Jul 5, 2019 · 26195ab · 26195ab
1 parent 1ba17f2
commit 26195ab
Show file tree

Hide file tree

Showing 21 changed files with 134 additions and 99 deletions.
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);