Start with a neat lava lamp effect
This commit is contained in:
commit
3654ae61df
GPG key ID:
A12F2C2FFDC3D847
68
drift.js
Normal file
68
drift.js
Normal file
|
|
@ -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));
|
||||
47
index.html
Normal file
47
index.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!Doctype HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Emi Simpson - Nice to meet you!</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<svg id=goop-zone>
|
||||
<defs>
|
||||
<filter id="goop-full">
|
||||
<feGaussianBlur stdDeviation="30"/>
|
||||
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1000 -250"/>
|
||||
</filter>
|
||||
<path
|
||||
id="the-one-true-glob"
|
||||
d="M 24.0,158.5 0,67.2 48.1,0 189.7,36.6 146.5,87.4 185.2,135.3 84.8,134.1 Z" />
|
||||
</defs>
|
||||
<g style="filter:url(#goop-full);width:100%;height:100%">
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<use class="glob" xlink:href="#the-one-true-glob" />
|
||||
<rect width=2000 height=30 x=-60 y=400 /> <!-- base -->
|
||||
<rect width=600 height=130 x=100 y=135 id="header-box" />
|
||||
</g>
|
||||
</svg>
|
||||
<h1>Emi Simpson</h1>
|
||||
</header>
|
||||
<script src="drift.js"></script>
|
||||
<main>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
27
style.sass
Normal file
27
style.sass
Normal file
|
|
@ -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
|
||||
Loading…
Reference in a new issue