From 3654ae61df72c3c34e62293672921c1f077e5d8d Mon Sep 17 00:00:00 2001 From: Emi Simpson Date: Sat, 28 Oct 2023 12:09:52 -0400 Subject: [PATCH] Start with a neat lava lamp effect --- drift.js | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 47 +++++++++++++++++++++++++++++++++++++ style.sass | 27 ++++++++++++++++++++++ 3 files changed, 142 insertions(+) create mode 100644 drift.js create mode 100644 index.html create mode 100644 style.sass diff --git a/drift.js b/drift.js new file mode 100644 index 0000000..2f9b647 --- /dev/null +++ b/drift.js @@ -0,0 +1,68 @@ +const m = 76667 * 78887; +const nextRandom = x => x ** 2 % m + +const generateRandomArray = (initialSeed, count) => ( + count <= 0 + ? [] + : [initialSeed].concat(generateRandomArray(nextRandom(initialSeed), count - 1))) + +const zip = (f, ...lists) => ( + lists.some(l => l.length == 0) + ? [] + : [f(...lists.map(l => l[0]))].concat(zip(f, ...lists.map(l => l.slice(1))))) + +const goopZoneElem = document.getElementById("goop-zone"); +const goopHeader = document.getElementById("header-box"); + +const nextState = (state, width, height) => document.hidden ? state : state.map(orig => { + const projectedNewX = orig.x + orig.vx; + const projectedNewY = orig.y + orig.vy; + const [newX, newVX] = + projectedNewX < 0 || projectedNewX > width + ? [orig.x - orig.vx, -orig.vx] + : [projectedNewX, orig.vx]; + const [newY, newVY] = + projectedNewY < -50 || projectedNewY > height - 20 + ? [orig.y - orig.vy, -orig.vy] + : [projectedNewY, orig.vy]; + return ({ + elem: orig.elem, + x: newX, + y: newY, + vx: newVX, + vy: newVY + }) +}); + +const mkInitialState = (drifters, width, height) => zip( + (elem, random1, random2, random3) => (direction => + ({ elem: elem + , x: random1 % width + , y: random2 % height + , vx: 20 * Math.cos(direction) + , vy: 20 * Math.sin(direction) + }) + )(random3 % 2000 / 1000 * Math.PI), + drifters, + generateRandomArray(5737051, drifters.length), + generateRandomArray(5457297, drifters.length), + generateRandomArray(3631413, drifters.length)) + +const applyState = states => states.map(s => { + s.elem.setAttribute('style', `transform: translate(${s.x}px, ${s.y}px)`) +}); + +loop = (state) => { + setInterval(() => { + const goopZoneWidth = goopZoneElem.width.baseVal.value; + const goopZoneHeight = goopZoneElem.height.baseVal.value; + + goopHeader.setAttribute("x", goopZoneWidth/2-300); + + state = nextState(state, goopZoneWidth, goopZoneHeight); + applyState(state) + }, 500) +} + +const drifters = Array.from(document.getElementsByClassName("glob")); +loop(mkInitialState(drifters, goopZoneElem.width.baseVal.value, goopZoneElem.height.baseVal.value)); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..295d2db --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ + + + + Emi Simpson - Nice to meet you! + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Emi Simpson

+
+ +
+
+ + \ No newline at end of file diff --git a/style.sass b/style.sass new file mode 100644 index 0000000..7ada494 --- /dev/null +++ b/style.sass @@ -0,0 +1,27 @@ +body, html + margin: 0 + padding: 0 + display: grid + grid-template-rows: 400px 1fr + height: 100vh + +h1 + position: absolute + top: 140px + text-align: center + width: 100vw + color: white + font-family: Atkinson Hyperlegible + font-size: 3em + +#goop-zone + position: relative + width: 100vw + height: 400px + fill: #b50931 + +.glob + transition: transform 0.485s linear + +main + background-color: #b50931 \ No newline at end of file