fixed internal renderer to use independent instance

anuraghazra · Jul 4, 2019 · 1ba17f2 · 1ba17f2
1 parent 43452ec
commit 1ba17f2
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 45 deletions.
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/experiments/multiple_instance/index.html b/experiments/multiple_instance/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>Multiple Verly.js</title>
+
+ <style>
+ * {
+ box-sizing: border-box;
+ color: #ce072e;
+ }
+
+ html,
+ body {
+ margin: 0;
+ padding: 10px;
+ }
+
+ canvas {
+ outline: 1px solid black;
+ }
+ </style>
+</head>
+
+<body>
+
+
+ <script src="../../dist/verly.bundle.js"></script>
+
+ <script src="./index.js"></script>
+</body>
+
+</html>
diff --git a/experiments/multiple_instance/index.js b/experiments/multiple_instance/index.js
@@ -0,0 +1,54 @@
+window.onload = function () {
+ createInstance(800);
+ createInstance(300);
+}
+
+
+
+function createInstance(w) {
+ let canvas = document.createElement('canvas');
+ canvas.id = Math.random();
+ let ctx = canvas.getContext('2d');
+ let width = w;
+ let height = 400;
+ canvas.width = width;
+ canvas.height = height;
+ document.body.appendChild(canvas);
+
+ 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
+ box.renderSticks = () => {
+ for (let i = 0; i < box.sticks.length; i++) {
+ let stick = box.sticks[i];
+ ctx.beginPath();
+ ctx.strokeStyle = 'green'
+ ctx.moveTo(stick.startPoint.pos.x, stick.startPoint.pos.y);
+ ctx.lineTo(stick.endPoint.pos.x, stick.endPoint.pos.y);
+ ctx.stroke();
+ 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.interact();
+
+ // verly.renderPointIndex();
+
+ requestAnimationFrame(animate);
+ }
+ animate();
+}
diff --git a/src/Entity.js b/src/Entity.js
@@ -127,38 +127,50 @@ export default class Entity {
  this.sticks[i].update(stepCoef);
  }
  }
-
+ 
  /**
- * @method renderPoints
+ * @method updateContrains
  */
- renderPoints() {
+ updateContrains() {
  for (let i = 0; i < this.points.length; i++) {
- this.points[i].render();
+ this.points[i].constrain();
+ }
+ }
+
+ /**
+ * @method update
+ */
+ update() {
+ // var stepCoef = 1 / this.iterations;
+ this.updatePoints();
+ for (let j = 0; j < this.iterations; ++j) {
+ this.updateSticks();
+ this.updateContrains();
  }
  }
 
  /**
- * @method updateContrains
+ * @method renderPoints
  */
- updateContrains() {
+ renderPoints(ctx) {
  for (let i = 0; i < this.points.length; i++) {
- this.points[i].constrain();
+ this.points[i].render(ctx);
  }
  }
 
  /**
  * @method renderSticks
  */
- renderSticks() {
+ renderSticks(ctx) {
  for (let i = 0; i < this.sticks.length; i++) {
- this.sticks[i].render();
+ this.sticks[i].render(ctx);
  }
  }
 
  /**
- * @method renderPointsIndex
+ * @method renderPointIndex
  */
- renderPointsIndex() {
+ renderPointIndex(ctx) {
  for (let i = 0; i < this.points.length; i++) {
  ctx.beginPath();
  ctx.fillStyle = 'black';
@@ -167,22 +179,12 @@ export default class Entity {
  }
  }
 
- /**
- * @method update
- */
- update() {
- // var stepCoef = 1 / this.iterations;
- this.updatePoints();
- for (let j = 0; j < this.iterations; ++j) {
- this.updateSticks();
- this.updateContrains();
- }
- }
+
  /**
  * @method render
  */
- render() {
- this.renderPoints();
- this.renderSticks();
+ render(ctx) {
+ this.renderPoints(ctx);
+ this.renderSticks(ctx);
  }
 }
diff --git a/src/Mouse.js b/src/Mouse.js
@@ -1,5 +1,5 @@
 export default class Mouse {
- constructor(entities, canvas) {
+ constructor(entities, canvas, ctx) {
  this.entities = entities;
  // Drag Interaction
  this.draggedPoint = null;
@@ -8,6 +8,7 @@ export default class Mouse {
  this.offset = new Vector();
  this.offsetCoord = new Vector();
  this.canvas = canvas;
+ this.ctx = ctx;
 
  this.canvas.addEventListener('mousedown', (e) => {
  this.down = true;
@@ -68,11 +69,11 @@ export default class Mouse {
  }
 
  renderDraggedPoint(point) {
- ctx.beginPath();
- ctx.strokeStyle = 'black';
- ctx.arc(point.pos.x, point.pos.y, point.radius * 1.5, 0, Math.PI * 2);
- ctx.stroke();
- ctx.closePath();
+ this.ctx.beginPath();
+ this.ctx.strokeStyle = 'black';
+ this.ctx.arc(point.pos.x, point.pos.y, point.radius * 1.5, 0, Math.PI * 2);
+ this.ctx.stroke();
+ this.ctx.closePath();
  }
 
 

diff --git a/src/Point.js b/src/Point.js
@@ -110,7 +110,7 @@ export default class Point {
  this.pos.add(this.gravity);
  }
 
- render() {
+ render(ctx) {
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI * 2);

diff --git a/src/Stick.js b/src/Stick.js
@@ -74,7 +74,7 @@ export default class Stick {
  // }
  }
 
- render() {
+ render(ctx) {
  ctx.beginPath();
  ctx.strokeStyle = this.color;
  ctx.moveTo(this.startPoint.pos.x, this.startPoint.pos.y);

diff --git a/src/Verly.js b/src/Verly.js
@@ -13,8 +13,8 @@ class Verly {
  this.canvas = canvas;
  window.WIDTH = canvas.width;
  window.HEIGHT = canvas.height;
- window.ctx = ctx;
- this.mouse = new Mouse(this.entities, this.canvas);
+ this.ctx = ctx;
+ this.mouse = new Mouse(this.entities, this.canvas, this.ctx);
  }
 
  /**
@@ -54,13 +54,6 @@ class Verly {
  this.entities.push(e);
  }
 
- renderPointIndex() {
- for (let i = 0; i < this.entities.length; i++) {
- this.entities[i].renderPointsIndex();
- }
- }
-
-
  /**
  * @method interact
  * drags points
@@ -81,13 +74,19 @@ class Verly {
  this.currentFrame++;
  }
 
+ renderPointIndex() {
+ for (let i = 0; i < this.entities.length; i++) {
+ this.entities[i].renderPointIndex(this.ctx);
+ }
+ }
+
  /**
  * @method render
  * renders all the entity
  */
  render() {
  for (let i = 0; i < this.entities.length; i++) {
- this.entities[i].render();
+ this.entities[i].render(this.ctx);
  }
  }