fixed bug in clamp function / added better landing page

Author: anuraghazra

CHANGELOG.md

@@ -5,9 +5,21 @@ 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).
 
+## v1.2.1 - 11-07-2019
+
+### Added
+
+- better landing page
+- improved examples
+
+### Fixed
+
+- bug in clamp function
+
 ## v1.2.0 - 08-07-2019
 
 ### Added
+
 - Hidden Sticks with hidden parameter to Stick class
 - Setters API for easy use of Point and Stick constructors
 - Method chaining for Point and Stick

dist/verly.bundle.js

@@ -16,12 +16,10 @@
     html,
     body {
       margin: 0;
-      padding: 10px;
+      padding: 0;
+      overflow: hidden;
     }
 
-    canvas {
-      outline: 1px solid black;
-    }
   </style>
 </head>
 
@@ -34,10 +32,13 @@
     window.onload = function () {
       let canvas = document.getElementById('c');
       let ctx = canvas.getContext('2d');
-      let width = 600;
-      let height = 500;
+      let width = window.innerWidth;
+      let height = window.innerHeight;
       canvas.width = width;
       canvas.height = height;
+      
+      let PARTICLE_COUNT = 700;
+      if (width < 400) PARTICLE_COUNT = 400;
 
       let verly = new Verly(16, canvas, ctx);
 
@@ -58,7 +59,7 @@
         particles.addPoint(x, y).setRadius(3).setGravity(new Vector(0, 0));
       }
 
-      for (let i = 0; i < 700; i++) {
+      for (let i = 0; i < PARTICLE_COUNT; i++) {
         addParticles(random(width), random(height));
       }
 

dist/verly.bundle.js.map

@@ -16,12 +16,10 @@
     html,
     body {
       margin: 0;
-      padding: 10px;
+      padding: 0;
+      overflow: hidden;
     }
 
-    canvas {
-      outline: 1px solid black;
-    }
   </style>
 </head>
 
@@ -37,19 +35,20 @@
     window.onload = function () {
       let canvas = document.getElementById('c');
       let ctx = canvas.getContext('2d');
-      let width = 600;
-      let height = 600;
+      let width = window.innerWidth;
+      let height = window.innerHeight;
       canvas.width = width;
       canvas.height = height;
 
+      let PARTICLE_COUNT = 400;
       let verly = new Verly(16, canvas, ctx);
 
       let particle = new Entity(16, verly);
       let p1 = particle.addPoint(0, 0).setRadius(20);
       let p2 = particle.addPoint(0, 0).setRadius(20);
 
-      for (let i = 0; i < 400; i++) {
-        particle.addPoint(random(width), random(height));
+      for (let i = 0; i < PARTICLE_COUNT; i++) {
+        particle.addPoint(random(width), random(height)).setRadius(4);
       }
       particle.setGravity(new Vector(0, 0));
       verly.addEntity(particle);

examples/behavior.html

@@ -16,12 +16,10 @@
     html,
     body {
       margin: 0;
-      padding: 10px;
+      padding: 0;
+      overflow: hidden;
     }
 
-    canvas {
-      outline: 1px solid black;
-    }
   </style>
 </head>
 
@@ -31,12 +29,12 @@
   <script src="../dist/verly.bundle.js"></script>
 
   <script>
-    
+
     window.onload = function () {
       let canvas = document.getElementById('c');
       let ctx = canvas.getContext('2d');
-      let width = 600;
-      let height = 500;
+      let width = window.innerWidth;
+      let height = window.innerHeight;
       canvas.width = width;
       canvas.height = height;
 
@@ -60,7 +58,7 @@
 
       verly.createRagdoll(100, 100, 100, 100);
       verly.addEntity(custom);
-      
+
       function animate() {
         ctx.clearRect(0, 0, width, height);
 

examples/behavior2.html

@@ -16,12 +16,10 @@
     html,
     body {
       margin: 0;
-      padding: 10px;
+      padding: 0;
+      overflow: hidden;
     }
 
-    canvas {
-      outline: 1px solid black;
-    }
   </style>
 </head>
 
@@ -34,8 +32,8 @@
     window.onload = function () {
       let canvas = document.getElementById('c');
       let ctx = canvas.getContext('2d');
-      let width = 600;
-      let height = 500;
+      let width = window.innerWidth;
+      let height = window.innerHeight;
       canvas.width = width;
       canvas.height = height;
 

examples/dynamicCustomMesh.html

@@ -16,12 +16,10 @@
     html,
     body {
       margin: 0;
-      padding: 10px;
+      padding: 0;
+      overflow: hidden;
     }
 
-    canvas {
-      outline: 1px solid black;
-    }
   </style>
 </head>
 
@@ -34,8 +32,8 @@
     window.onload = function () {
       let canvas = document.getElementById('c');
       let ctx = canvas.getContext('2d');
-      let width = 600;
-      let height = 500;
+      let width = window.innerWidth;
+      let height = window.innerHeight;
       canvas.width = width;
       canvas.height = height;
 

examples/fluidGyroscope.html

@@ -16,12 +16,10 @@
     html,
     body {
       margin: 0;
-      padding: 10px;
+      padding: 0;
+      overflow: hidden;
     }
 
-    canvas {
-      outline: 1px solid black;
-    }
   </style>
 </head>
 
@@ -36,8 +34,8 @@
     window.onload = function () {
       let canvas = document.getElementById('c');
       let ctx = canvas.getContext('2d');
-      let width = 600;
-      let height = 500;
+      let width = window.innerWidth;
+      let height = window.innerHeight;
       canvas.width = width;
       canvas.height = height;
 

examples/joinEntities.html

@@ -16,12 +16,10 @@
     html,
     body {
       margin: 0;
-      padding: 10px;
+      padding: 0;
+      overflow: hidden;
     }
 
-    canvas {
-      outline: 1px solid black;
-    }
   </style>
 </head>
 
@@ -36,8 +34,8 @@
     window.onload = function () {
       let canvas = document.getElementById('c');
       let ctx = canvas.getContext('2d');
-      let width = 600;
-      let height = 600;
+      let width = window.innerWidth;
+      let height = window.innerHeight;
       canvas.width = width;
       canvas.height = height;
 

examples/ragdoll.html

@@ -16,12 +16,10 @@
     html,
     body {
       margin: 0;
-      padding: 10px;
+      padding: 0;
+      overflow: hidden;
     }
 
-    canvas {
-      outline: 1px solid black;
-    }
   </style>
 </head>
 
@@ -36,8 +34,8 @@
     window.onload = function () {
       let canvas = document.getElementById('c');
       let ctx = canvas.getContext('2d');
-      let width = 600;
-      let height = 500;
+      let width = clamp(window.innerWidth, 600, Infinity);
+      let height = window.innerHeight;
       canvas.width = width;
       canvas.height = height;
 

examples/rotatingEntity.html

@@ -16,11 +16,12 @@
     html,
     body {
       margin: 0;
-      padding: 6px;
+      padding: 0px;
+      overflow-y: hidden;
     }
 
     canvas {
-      outline: 1px solid black;
+      /* outline: 1px solid black; */
     }
   </style>
 </head>

examples/shadedCloth.html

@@ -6,8 +6,8 @@
 window.onload = function () {
   let canvas = document.getElementById('c');
   let ctx = canvas.getContext('2d');
-  let width = 1200;
-  let height = 500;
+  let width = clamp(window.innerWidth, 1200, Infinity);
+  let height = window.innerHeight;
   canvas.width = width;
   canvas.height = height;
   let verly = new Verly(50, canvas, ctx);