Demo updates

kobihcmomanyi · May 7, 2018 · 6377e14 · 6377e14
1 parent 83afd2b
commit 6377e14
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 125 deletions.
diff --git a/demo/physics.particles.js b/demo/physics.particles.js
@@ -1,62 +1,55 @@
 // Source code licensed under Apache License 2.0. 
 // Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)
 
-window.demoDescription = "...";
+window.demoDescription = "Particles colliding with each other in space. Move the pointer to hit them like billiard balls.";
 
 (function() {
 
   Pts.namespace( this );
 
-  var space = new CanvasSpace("#pt").setup({bgcolor: "#96bfed", resize: true, retina: true});
-  var form = space.getForm();
-
-
+  var space = new CanvasSpace("#pt").setup({bgcolor: "#123", resize: true, retina: true});
+  var form = space.getForm(); 
   var world;
 
   space.add( {
 
     start: (bound, space) => {
-      world = new World( space.innerBound, 1, 0 );
 
+      // Create world and 100 random points
+      world = new World( space.innerBound, 1, 0 );
       let pts = Create.distributeRandom( space.innerBound, 100 );
 
+      // Create particles and hit them with a random impulse
       for (let i=0, len=pts.length; i<len; i++) {
-        let p = new Particle( pts[i] ).size( 3 + Math.random()*20 );
-        p.hit( Num.randomRange(-50,50), Num.randomRange(-20, 20) );
+        let p = new Particle( pts[i] ).size( (i===0) ? 30 : 3+Math.random()*space.size.x/50 );
+        p.hit( Num.randomRange(-50,50), Num.randomRange(-25, 25) );
         world.add( p );
       }
 
-      world.particle( 0 ).lock = true;
+      world.particle( 0 ).lock = true; // lock it to move it by pointer later on
 
     },
 
-    animate: (time, ftime) => {
 
+    animate: (time, ftime) => {
       world.drawParticles( (p, i) => {
-        form.strokeOnly("#f00").point( p, p.radius, "circle" ) 
-
+        let color = (i===0) ? "#fff" : ["#ff2d5d", "#42dc8e", "#2e43eb", "#ffe359"][i%4];
+        form.fillOnly( color ).point( p, p.radius, "circle" ) 
       });
 
-
       world.update( ftime );
-
     },
 
+
     action:( type, px, py) => {
-      if (type=="move") {
+      if (type == "move") {
         world.particle( 0 ).position = new Pt(px, py);
       }
 
-    },
-
-    resize:( bound, evt) => {
-
     }
-
   });
 
   space.bindMouse().bindTouch();
   space.play();
-  // space.playOnce(10000);
 
 })();
diff --git a/demo/physics.shapes.js b/demo/physics.shapes.js
@@ -1,134 +1,65 @@
 // Source code licensed under Apache License 2.0. 
 // Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)
 
-window.demoDescription = "...";
+window.demoDescription = "Physics simulation with various polygons and circles. Move pointer to control the triangle.";
 
 (function() {
 
   Pts.namespace( this );
 
-  var space = new CanvasSpace("#pt").setup({bgcolor: "#96bfed", resize: true, retina: true});
+  var space = new CanvasSpace("#pt").setup({bgcolor: "#30a", resize: true, retina: true});
   var form = space.getForm();
-
-
   var world;
 
   space.add( {
 
     start: (bound, space) => {
       world = new World( space.innerBound, 0.99, new Pt(0, 500) );
-
-      // let body1 = Body.rectangle( Rectangle.fromCenter( space.center, 50 ) );
-      let body1 = Body.fromGroup( Polygon.fromCenter( space.center, 70, 6, 0.4 ), 0.5 );
-      let body2 = Body.fromGroup( Polygon.fromCenter( space.center.subtract(100,50), 40, 4 ), 1 );
-      let body3 = Body.fromGroup( Polygon.fromCenter( space.center.subtract(50,-150), 50, 3 ) );
-
-      // body2.mass = 1;
-      // body2[3].lock = true;
-
-      // let body2 = Body.rectangle( Rectangle.fromCenter( space.center.subtract(100,50), 100 ) );
-      // let body3 = Body.rectangle( Rectangle.fromCenter( space.center.subtract(50,-150), 80 ) );
-      world.add( body1 ).add( body2 ).add( body3, "triangle" );
-
-      let pk1 = new Particle( new Pt( space.center.x, 100 ) ).size( 30 );
-      world.add( pk1 );
-      pk1.hit( [-200, -50] );
-
-      // let mk = new Particle( new Pt( space.pointer ) ).size( 30 );
-      // mk.lock = true;
-      // world.add( mk, "mouse" );
-
-      body3[0].lock = true;
-
-
-      // for (let i=0, len=rect.length; i<len; i++) {
-      //   let p = new Particle( rect[i] );
-      //   p.mass = 5;
-      //   world.push( p );
-      // }
-
-      body1[0].hit( new Pt(120, -40));
-      body2[0].hit( new Pt(-300, -20));
-      body3[0].hit( new Pt(30, -30));
 
+      let unit = (space.size.x+space.size.y) / 150;
+
+      // Create bodies and particles
+      let hexagon = Body.fromGroup( Polygon.fromCenter( space.center.add(100, -100), unit*10, 6 ), 0.5 );
+      let square = Body.fromGroup( Polygon.fromCenter( space.center.subtract(100,50), unit*8, 4 ), 1 );
+      let triangle = Body.fromGroup( Polygon.fromCenter( space.center, unit*6, 3 ) );
+      let p1 = new Particle( new Pt( space.center.x, 100 ) ).size( unit*4 );
+      let p2 = new Particle( new Pt( space.center.x, 100 ) ).size( unit*2 );
+
+      // add to world
+      world.add( hexagon ).add( square ).add( triangle, "triangle" );
+      world.add( p1 ).add( p2 );
+
+      // hit them with impulse
+      p1.hit( 200, -20 );
+      p2.hit( 100, -50 );
+      hexagon[0].hit( 120, -40 );
+      square[0].hit( -300, -20 );
+
+      // lock triangle's first vertice so we can control it by pointer
+      triangle[0].lock = true;
     },
 
+
     animate: (time, ftime) => {
+      world.drawParticles( (p, i) => form.fillOnly("#09f").point( p, p.radius, "circle" ) );
 
-      world.drawParticles( (p, i) => form.fillOnly("#f00").point( p, p.radius, "circle" ) );
-      world.drawBodies( (b, i) => {
-        form.fillOnly("#0ab").polygon( b );
-        let lns = b.linksToLines();
-        form.strokeOnly("#fff");
-        lns.forEach( (l) => form.line(l) );
-        form.fillOnly("#9ff").point( b[0], 3 );
+      world.drawBodies( (b, i) => { 
+        form.fillOnly(["#0c9","#f03","#fe6"][i%3]).polygon( b ); 
+        form.strokeOnly("rgba(0,0,0,0.1");
+        b.linksToLines().forEach( (l) => form.line(l) ); // visualize the edge constraints
       });
 
       world.update( ftime );
-
-
-      // let diagonal = Math.sqrt( 20000 );
-      // Physics.constraintEdge( world[1], world[3], diagonal );
-      // Physics.constraintEdge( world[0], world[2], diagonal );
-
-      // let pk1 = world.particle(0);
-
-      // for (let i=0, len=world.bodyCount; i<len; i++) {
-      //   let b = world.body(i);  
-
-      //   form.fillOnly("#0ab").polygon( b );
-      //   // form.strokeOnly("#fff").line( [b[1], b[3]] );
-      //   // form.strokeOnly("#fff").line( [b[0], b[2]] );
-
-
-      //   let lns = b.linksToLines();
-      //   form.strokeOnly("#fff");
-      //   lns.forEach( (l) => form.line(l) );
-
-      //   form.fillOnly("#9ff").point( b[0], 3 );
-
-      //   for (let k=i+1, klen=world.bodyCount; k<len; k++) {
-      //     b.processBody( world.body(k) );
-      //   }
-
-      //   b.processParticle( pk1 );
-      //   form.fillOnly("#f00").point( pk1, pk1.radius, "circle" );
-      // }
-
-      // world.body(0).process( world.body(1) );
-      // world.body(1).process( world.body(0) );
-
-
-
-      // for (let i=0, len=world.length; i<len; i++) {
-      //   form.fillOnly("#f00").point( world[i], world[i].mass, "circle" );
-
-      //   // let k = (i<len-1) ? i+1 : 0;
-      //   // Physics.constraintEdge( world[i], world[k], 100 );
-      //   // Physics.constraintBound( world[i], space.innerBound );
-
-      //   form.strokeOnly("#9ab").lines( b );
-      // }
-
-      // world.constrainAll();
-      // world.integrateAll( ftime/1000 );
-
-
     },
 
+
     action:( type, px, py) => {
-      // world.particle("mouse").position = new Pt(px, py);
       world.body("triangle")[0].position = new Pt(px, py);
-    },
-
-    resize:( bound, evt) => {
-
     }
 
   });
 
   space.bindMouse().bindTouch();
   space.play();
-  // space.playOnce(10000);
 
 })();
diff --git a/demo/triangle.incircle.js b/demo/triangle.incircle.js
@@ -1,6 +1,8 @@
 // Source code licensed under Apache License 2.0. 
 // Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)
 
+window.demoDescription = "Fitting four circles inside and outside of four triangles, which are connected to the pointer.";
+
 (function() {
 
   Pts.namespace( this );

diff --git a/dist/pts.js b/dist/pts.js
diff --git a/src/Physics.ts b/src/Physics.ts
@@ -1,3 +1,6 @@
+// Source code licensed under Apache License 2.0.
+// Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)
+
 
 import {Pt, PtLike, Group, GroupLike} from "./Pt";
 import {Bound} from "./Bound";
@@ -392,8 +395,9 @@ export class Particle extends Pt {
    * @param args a list of numeric parameters, an array of numbers, or an object with {x,y,z,w} properties
    * @example `hit(10, 20)`, `hit( new Pt(5, 9) )`
    */
-  hit( ...args ) {
+  hit( ...args ):this {
     this._prev.subtract( new Pt(...args).$divide( Math.sqrt(this._mass) ) );
+    return this;
   }
 
 
@@ -402,7 +406,7 @@ export class Particle extends Pt {
    * @param p2 another particle
    * @param damp damping value between 0 to 1, where 1 means no damping.
    */
-  collide( p2:Particle, damp:number=1 ) {
+  collide( p2:Particle, damp:number=1 ):void {
     // reference: http://codeflow.org/entries/2010/nov/29/verlet-collision-with-impulse-preservation
     // simultaneous collision not yet resolved. Possible solutions in this paper: https://www2.msm.ctw.utwente.nl/sluding/PAPERS/dem07.pdf 
 
@@ -441,7 +445,7 @@ export class Particle extends Pt {
   }
 
 
-  toString() {
+  toString():string {
     return `Particle: ${this[0]} ${this[1]} | previous ${this._prev[0]} ${this._prev[1]} | mass ${this._mass}`;
   }
 
@@ -592,7 +596,7 @@ export class Body extends Group {
    * Check and respond to collisions between two bodies
    * @param b another body
    */
-  processBody( b:Body ) {
+  processBody( b:Body ):void {
 
     let b1 = this;
     let b2 = b;
@@ -630,7 +634,7 @@ export class Body extends Group {
    * Check and respond to collisions between this body and a particle
    * @param b a particle
    */
-  processParticle( b:Particle ) {
+  processParticle( b:Particle ):void {
 
     let b1 = this;
     let b2 = b;