Add gravity option

img-melt.js

@@ -1,3 +1,5 @@
+const gravity = { x:0, y:0 };
+
 class Melt extends HTMLElement {
   constructor() {
     super();
@@ -9,6 +11,9 @@ class Melt extends HTMLElement {
     this.blend = this.hasAttribute('blend');
     this.src = this.getAttribute('src') || false;
     this.await = this.getAttribute('await') || false;
+    this.gravityEnabled = this.getAttribute('gravity') || false;
+
+    window.addEventListener('devicemotion', this.handleMotion, true);
 
     this.stepBound = this.step.bind(this);
 
@@ -20,15 +25,14 @@ class Melt extends HTMLElement {
     });
     this.shadow.appendChild(this.canvas);
 
-
     if (this.src) {
       let img = new Image();
       img.crossOrigin = "Anonymous";
       let obj = this;
 
       //drawing of the test image - img1
       img.onload = function() {
-        // nb 'this' here is the image, so we need obj bounf to this previously
+        // nb 'this' here is the image, so we need obj bound to this previously
         obj.canvas.setAttribute("width", this.width);
         obj.canvas.setAttribute("height", this.height);
         obj.ctx.drawImage(this, 0, 0, this.width, this.height);
@@ -51,6 +55,10 @@ class Melt extends HTMLElement {
     }
   }
 
+  handleMotion(e) {
+    gravity.x = e.accelerationIncludingGravity.x;
+  }
+
   drawBalls() {
     this.ctx.globalAlpha = 1;
     this.canvas.setAttribute("width", this.w);
@@ -78,6 +86,17 @@ class Melt extends HTMLElement {
     return x;
   }
 
+  gravityEffect(x) {
+    // Gravity manually throttled for better effect
+    if (gravity.x > 1) {
+      return x - 1 ;
+    } else if (gravity.x < -1) {
+      return x + 1 ;
+    } 
+    return x;
+  }
+
+
   noJiggle(x) {
     return x;
   }
@@ -151,7 +170,7 @@ class Melt extends HTMLElement {
     for (let y = this.h-2; y >= 0; y--) {
       for (let x = this.w-1; x >= 0; x--) {
         const above = this.xyToArr(x, y);
-        const below = this.xyToArr(this.jiggle(x), y+1);
+        const below = this.xyToArr(this.gravityEffect(this.jiggle(x)), y+1);
         if (img.data[below + 3] == 0 && img.data[above + 3] != 0) {
           moved++;
           this.swapPixels(img.data, above, below);

index.html

@@ -7,6 +7,6 @@ <h1>Img-Melt Source</h1>
 <p>An image that melts when loaded.  Each pixel is compared with the pixel below it, if the supporting (lower) pixel is transparent the upper pixel will fall into its place (their positions are swapped).</p>
 
 <p>For example, if you have a modern browser, click this image.
-<p><img-melt src=img/portsmouth.png jiggle blend await=click><img src=img/portsmouth.png alt="University of Portsmouth"></img-melt>
+<p><img-melt src=img/portsmouth.png jiggle blend await=click ><img src=img/portsmouth.png alt="University of Portsmouth"></img-melt>
 
 <p><a href="test/logos.html">A test page containing some well known logos.</a>