From 6d2e5c907d5fbdebe064b493fb809864247dce59 Mon Sep 17 00:00:00 2001 From: felixaldam-gates <44896994+Felixim0@users.noreply.github.com> Date: Mon, 25 Jul 2022 06:54:52 +0100 Subject: [PATCH 1/6] Added a webserver for local development/viewing to comply with CORS. --- .DS_Store | Bin 0 -> 6148 bytes img-melt.js | 1 + package-lock.json | 10 +++++++++- 3 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..e75591ce44cf78c55a21f96303981d270a959334 GIT binary patch literal 6148 zcmeHK%Wl&^6upxeup5wq1X4Fhme{5t1w@M2xFKD1(M^qD0VvqDm6|%9D0T=^6v=D& z2Y!JqU&6nzYR^1UVV7TVQ1rf$2eWb6mNTNB)iQjoWw>3-a2@Yg zjpxuY9nd}v=?K`xTBGVrjd6`(VMj6LR8-@TgXr6D>RrZ#i+rk2$sge~P4c4G`^g$j z>&DGnwr#iU_x>qg_(f36^Fc6sD_XBOPs4RR2wx}hV${C(l4nJbWbsTAk|;*VyEjP| z@x_48vnZEbUk%ufw^}*&{fCcU9FNY@Nyfim z?J$NjUD_RuYY=K*?&p&~%Tk^RUDomIID?z5fd0Mg)@Co$tj;K46!-@Ui1WdP3-mOW z3gyv(LOub27P_UOF8}-kUC{ybG?og{17nH`R8*#)7)-w%n4)9c)A6N3MJFa_Mjkyg z(=QaJpB~JW;lwo~T0`xSN3ef{Ie*~lqrZ5WpRRt~pqgAJ! literal 0 HcmV?d00001 diff --git a/img-melt.js b/img-melt.js index d605754..2d51e6e 100644 --- a/img-melt.js +++ b/img-melt.js @@ -1,3 +1,4 @@ +console.log('RAH') class Melt extends HTMLElement { constructor() { super(); diff --git a/package-lock.json b/package-lock.json index 0cb721b..f2bd1ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,13 @@ { "name": "img-melt", "version": "1.0.0", - "lockfileVersion": 1 + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "img-melt", + "version": "1.0.0", + "license": "MIT" + } + } } From 83cb429096b16597c9a7e0a4dc56c81a57c430a9 Mon Sep 17 00:00:00 2001 From: felixaldam-gates <44896994+Felixim0@users.noreply.github.com> Date: Mon, 25 Jul 2022 06:57:22 +0100 Subject: [PATCH 2/6] Added gravity parameter to HTML element --- img-melt.js | 4 +++- index.html | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/img-melt.js b/img-melt.js index 2d51e6e..c23b2ab 100644 --- a/img-melt.js +++ b/img-melt.js @@ -1,4 +1,3 @@ -console.log('RAH') class Melt extends HTMLElement { constructor() { super(); @@ -10,6 +9,9 @@ class Melt extends HTMLElement { this.blend = this.hasAttribute('blend'); this.src = this.getAttribute('src') || false; this.await = this.getAttribute('await') || false; + this.gravity = this.getAttribute('gravity') || false; + console.log('GRAVITY IS'); + console.log(this.gravity); this.stepBound = this.step.bind(this); diff --git a/index.html b/index.html index 92fc588..bf49033 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,6 @@

Img-Melt Source

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).

For example, if you have a modern browser, click this image. -

University of Portsmouth +

University of Portsmouth

A test page containing some well known logos. From fe67c834b9adf21b7535f2f11887705dfd3b8d86 Mon Sep 17 00:00:00 2001 From: felixaldam-gates <44896994+Felixim0@users.noreply.github.com> Date: Mon, 25 Jul 2022 09:37:21 +0100 Subject: [PATCH 3/6] Removed debugging code, added gravity effect to each x pixel --- img-melt.js | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/img-melt.js b/img-melt.js index c23b2ab..72a36a1 100644 --- a/img-melt.js +++ b/img-melt.js @@ -1,3 +1,5 @@ +const gravity = { x:0, y:0 }; + class Melt extends HTMLElement { constructor() { super(); @@ -9,9 +11,9 @@ class Melt extends HTMLElement { this.blend = this.hasAttribute('blend'); this.src = this.getAttribute('src') || false; this.await = this.getAttribute('await') || false; - this.gravity = this.getAttribute('gravity') || false; - console.log('GRAVITY IS'); - console.log(this.gravity); + this.gravityEnabled = this.getAttribute('gravity') || false; + + window.addEventListener('devicemotion', this.handleMotion, true); this.stepBound = this.step.bind(this); @@ -23,7 +25,6 @@ class Melt extends HTMLElement { }); this.shadow.appendChild(this.canvas); - if (this.src) { let img = new Image(); img.crossOrigin = "Anonymous"; @@ -31,7 +32,7 @@ class Melt extends HTMLElement { //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); @@ -54,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); @@ -81,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; } @@ -154,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); From fdd60bdf2e5fa2c6ba49d81559ebd86d6261074c Mon Sep 17 00:00:00 2001 From: felixaldam-gates <44896994+Felixim0@users.noreply.github.com> Date: Mon, 25 Jul 2022 09:52:58 +0100 Subject: [PATCH 4/6] Removed gravity from example --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index bf49033..4e86328 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,6 @@

Img-Melt Source

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).

For example, if you have a modern browser, click this image. -

University of Portsmouth +

University of Portsmouth

A test page containing some well known logos. From 088fba07ae724c4ed6eb79df25149db20c7730b7 Mon Sep 17 00:00:00 2001 From: felixaldam-gates <44896994+Felixim0@users.noreply.github.com> Date: Mon, 25 Jul 2022 09:54:19 +0100 Subject: [PATCH 5/6] Reset lockfile as inital server wasn't required --- package-lock.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index f2bd1ad..7f7c1dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,7 +1,7 @@ { "name": "img-melt", "version": "1.0.0", - "lockfileVersion": 2, + "lockfileVersion": 1, "requires": true, "packages": { "": { From 65ca6ec120d5a0081b2a4fe9edbe73bbfdb9238e Mon Sep 17 00:00:00 2001 From: felixaldam-gates <44896994+Felixim0@users.noreply.github.com> Date: Mon, 25 Jul 2022 09:58:43 +0100 Subject: [PATCH 6/6] Remove .DS_Store from everywhere --- .DS_Store | Bin 6148 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index e75591ce44cf78c55a21f96303981d270a959334..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHK%Wl&^6upxeup5wq1X4Fhme{5t1w@M2xFKD1(M^qD0VvqDm6|%9D0T=^6v=D& z2Y!JqU&6nzYR^1UVV7TVQ1rf$2eWb6mNTNB)iQjoWw>3-a2@Yg zjpxuY9nd}v=?K`xTBGVrjd6`(VMj6LR8-@TgXr6D>RrZ#i+rk2$sge~P4c4G`^g$j z>&DGnwr#iU_x>qg_(f36^Fc6sD_XBOPs4RR2wx}hV${C(l4nJbWbsTAk|;*VyEjP| z@x_48vnZEbUk%ufw^}*&{fCcU9FNY@Nyfim z?J$NjUD_RuYY=K*?&p&~%Tk^RUDomIID?z5fd0Mg)@Co$tj;K46!-@Ui1WdP3-mOW z3gyv(LOub27P_UOF8}-kUC{ybG?og{17nH`R8*#)7)-w%n4)9c)A6N3MJFa_Mjkyg z(=QaJpB~JW;lwo~T0`xSN3ef{Ie*~lqrZ5WpRRt~pqgAJ!