Skip to content

Commit

Permalink
Refone interaction
Browse files Browse the repository at this point in the history
  • Loading branch information
@keeffEoghan
keeffEoghan committed Dec 21, 2023
1 parent 2c3b954 commit 1715c70
Show file tree
Hide file tree
Showing 11 changed files with 30 additions and 23 deletions.
Binary file added .yarn/cache/lodash-npm-4.17.21-6382451519-eb835a2e51.zip
View file
Binary file not shown.
3 changes: 0 additions & 3 deletions docs/index.2739dc34.js
View file

This file was deleted.

2 changes: 1 addition & 1 deletion docs/index.2a92c035.css → docs/index.6b1e6853.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions docs/index.91835887.js
View file

Large diffs are not rendered by default.

3 changes: 0 additions & 3 deletions docs/index.abbc5823.js
View file

This file was deleted.

3 changes: 3 additions & 0 deletions docs/index.e7945706.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html><head><title>Locus @ epok.tech</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="index.2a92c035.css"></head><body> <main> <header> <section> <h1>Locus</h1> <h3><span inline> Upcoming artwork @ <a href="https://epok.tech" target="_blank">epok.tech</a> ~ </span><span inline> Crowdfunding @ <a href="https://artizen.fund/project/locus" target="_blank">Artizen</a></span></h3> <p>A digital kinetic artwork evoking meditation, fluid particles trace layers in a translucent human form, as art and audience interact by natural motion.</p> <p>Exhibited as interactive digital installation, online, and <code>NFT</code> series.</p> </section> <figure class="intro-concept-art"> <img class="intro-concept-art-main" alt="Locus concept art" title="Locus concept art" src="artifact.c3d985e7.png" srcset="artifact.fccbcdb8.png 2x"> <img class="intro-concept-art-layer intro-concept-art-layer-fill" src="bust-3-alpha.a4abf995.png" srcset="bust-3-alpha.58d5917b.png 2x"> <img class="intro-concept-art-layer" src="bust.a5447b24.png" srcset="bust.0aede716.png 2x" style="filter:brightness(1.4)"> <img class="intro-concept-art-layer" src="bust-over-flow.b13f4f75.png" srcset="bust-over-flow.6140c49c.png 2x" style="filter:brightness(1.2)"> <img class="intro-concept-art-layer" src="flow.fcccb9b0.png" srcset="flow.cf0d1a6e.png 2x"> <img class="intro-concept-art-layer" src="ai-0.5319afdd.png" srcset="ai-0.6af6835b.png 2x"> <img class="intro-concept-art-layer" src="ai-1.f3685d8e.png" srcset="ai-1.d6340128.png 2x"> </figure> <article> </article> </header></main> <script src="index.2739dc34.js" type="module"></script><script src="index.abbc5823.js" nomodule defer></script> </body></html>
<!doctype html><html><head><title>Locus @ epok.tech</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="index.6b1e6853.css"></head><body> <main> <header> <section> <h1>Locus</h1> <h3><span inline> Upcoming artwork @ <a href="https://epok.tech" target="_blank">epok.tech</a> ~ </span><span inline> Crowdfunding @ <a href="https://artizen.fund/project/locus" target="_blank">Artizen</a></span></h3> <p>A digital kinetic artwork evoking meditation, fluid particles trace layers in a translucent human form, as art and audience interact by natural motion.</p> <p>Exhibited as interactive digital installation, online, and <code>NFT</code> series.</p> </section> <figure class="intro-concept-art"> <img class="intro-concept-art-main" alt="Locus concept art" title="Locus concept art" src="artifact.c3d985e7.png" srcset="artifact.fccbcdb8.png 2x"> <img class="intro-concept-art-layer intro-concept-art-layer-fill" src="bust-3-alpha.a4abf995.png" srcset="bust-3-alpha.58d5917b.png 2x"> <img class="intro-concept-art-layer" src="bust.a5447b24.png" srcset="bust.0aede716.png 2x" style="filter:brightness(1.4)"> <img class="intro-concept-art-layer" src="bust-over-flow.b13f4f75.png" srcset="bust-over-flow.6140c49c.png 2x" style="filter:brightness(1.2)"> <img class="intro-concept-art-layer" src="flow.fcccb9b0.png" srcset="flow.cf0d1a6e.png 2x"> <img class="intro-concept-art-layer" src="ai-0.5319afdd.png" srcset="ai-0.6af6835b.png 2x"> <img class="intro-concept-art-layer" src="ai-1.f3685d8e.png" srcset="ai-1.d6340128.png 2x"> </figure> <article> </article> </header></main> <script src="index.91835887.js" type="module"></script><script src="index.e7945706.js" nomodule defer></script> </body></html>
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@
"dependencies": {
"@epok.tech/fn-lists": "^0.1.4",
"@thi.ng/math": "^5.7.7",
"@thi.ng/vectors": "^7.8.13"
"@thi.ng/vectors": "^7.8.13",
"lodash": "^4.17.21"
},
"devDependencies": {
"@parcel/core": "^2.10.3",
Expand Down
6 changes: 4 additions & 2 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,16 +187,18 @@ p {
.intro-concept-art-layer {
position: absolute;
inset: 0;
pointer-events: none;
background-color: #999;
clip-path: polygon(-150% 0%, -50% 0%, -50% 100%, -150% 100%);
clip-path: polygon(-180% 0%, -100% 0%, -200% 100%, -280% 100%);
transition: clip-path 900ms ease-in;

.intro-concept-art:hover & { transition: clip-path 200ms ease-out; }
}

.intro-concept-art-layer-fill {
background-color: inherit;
transition: clip-path 900ms ease-in 1200ms;
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
transition: clip-path 1900ms cubic-bezier(0.2, 0.5, 0.75, 0.25) 800ms;

.intro-concept-art:hover & { transition: clip-path 200ms ease-out; }
}
20 changes: 8 additions & 12 deletions src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,18 @@
import { each } from '@epok.tech/fn-lists';
import { fit } from '@thi.ng/math/fit';
import { mix } from '@thi.ng/math/mix';
import { setC2 } from '@thi.ng/vectors/setc';
import { range } from '@epok.tech/fn-lists/range';
import throttle from 'lodash/fp/throttle';

const { min, max, abs } = Math;
const eps = 1e-5;

const $art = document.querySelector('.intro-concept-art');
const $layers = document.querySelectorAll('.intro-concept-art-layer');
const at = range(2, Infinity);

$art.addEventListener('pointermove', ({ clientX: cx, clientY: cy }) => {
const [x0, y0] = at;
const move = throttle(1e2, (e) => {
const { clientX: cx, clientY: cy } = e;
const { y: bt, right: br, bottom: bb, x: bl } = $art.getBoundingClientRect();
const y = fit(cy, bb, bt, 0, 1);
const x = fit(cx, br, bl, 0, $layers.length+1);

if((abs(x-x0) < eps) && (abs(y-y0) < eps)) { return; }
else { setC2(at, x, y); }

const w = mix(3e-2, 1.1, y);

each(($l, i) => {
Expand All @@ -34,7 +28,9 @@ $art.addEventListener('pointermove', ({ clientX: cx, clientY: cy }) => {
$layers);
});

$art.addEventListener('pointermove', move);

$art.addEventListener('pointerout', () => {
each(($l) => $l.style.clipPath = '', $layers);
range(at, Infinity);
move.cancel();
each(($l) => $l.style.clipPath = '', $layers);
});
8 changes: 8 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2543,6 +2543,7 @@ __metadata:
"@parcel/core": ^2.10.3
"@thi.ng/math": ^5.7.7
"@thi.ng/vectors": ^7.8.13
lodash: ^4.17.21
markdown-it-attrs: ^4.1.6
parcel: ^2.10.3
postcss: ^8.0.0
Expand All @@ -2555,6 +2556,13 @@ __metadata:
languageName: unknown
linkType: soft

"lodash@npm:^4.17.21":
version: 4.17.21
resolution: "lodash@npm:4.17.21"
checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
languageName: node
linkType: hard

"lru-cache@npm:^10.0.1, lru-cache@npm:^9.1.1 || ^10.0.0":
version: 10.1.0
resolution: "lru-cache@npm:10.1.0"
Expand Down

0 comments on commit 1715c70

Please sign in to comment.