Skip to content

Instantly share code, notes, and snippets.

@kissge

kissge/loop.html

Last active September 20, 2022 07:52
Show Gist options
  • Save kissge/c7ad56abced5eb252858f376db2554ba to your computer and use it in GitHub Desktop.
Save kissge/c7ad56abced5eb252858f376db2554ba to your computer and use it in GitHub Desktop.
Download ZIP
Raw
loop.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Loop Background with BGM</title>
<style>
html,
body {
margin: 0;
padding: 0;
background: white;
font-family: Helvetica, 'Hiragino Sans W2', sans-serif;
font-weight: lighter;
}
div {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
canvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: max(100vw, (16 / 9) * 100vh) !important;
height: max(100vh, (9 / 16) * 100vw) !important;
opacity: 0.8;
}
section {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-shadow: 0 0 1.5em #000;
width: auto;
}
section * {
margin: 0;
white-space: nowrap;
}
section h1 {
font-family: Helvetica, 'Hiragino Sans W5', sans-serif;
font-size: 8vw;
font-weight: bold;
margin-left: -0.09em;
}
section h2 {
font-family: Helvetica, 'Hiragino Sans W5', sans-serif;
font-size: 3vw;
font-weight: bold;
display: inline-block;
margin-right: 0.6em;
}
section p {
font-size: 3vw;
display: inline-block;
}
section p::before {
content: '|';
font-weight: bold;
font-size: 2em;
vertical-align: middle;
padding-right: 0.2em;
}
iframe {
width: 0;
height: 0;
border: 0;
position: absolute;
}
</style>
</head>
<body style="display: none">
<div id="p5-container"></div>
<section>
<h1 contenteditable spellcheck="false">Header Text</h1>
<h2 contenteditable spellcheck="false">Subheader Text</h2>
<p contenteditable spellcheck="false">17:00&hairsp;&hairsp;–17:30</p>
</section>
<iframe src="https://www.youtube.com/embed/FXmU9DQuILA?autoplay=1" allow="autoplay"></iframe>
<script type="module">
// @ts-check
// @ts-expect-error
import p5 from 'https://cdn.skypack.dev/p5';
for (const [key, value] of new URLSearchParams(window.location.search)) {
const element = document.querySelector(key);
if (element) {
element.textContent = value;
}
}
new p5((/** @type {import('p5')} */ p) => {
const grid = 360;
const gf = 0.9;
const icons = [
'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNzkuNTEgNTMuNjkiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojNDM1MzhmO3N0cm9rZTojZmZmO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS13aWR0aDo0cHg7fTwvc3R5bGU+PHN5bWJvbCBpZD0iTmV3X1N5bWJvbF81IiBkYXRhLW5hbWU9Ik5ldyBTeW1ib2wgNSIgdmlld0JveD0iMCAwIDE0MS4zNCA5NS4zMyI+PHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjIuODYgOTIuNzQgMi44NiAxMi45OSA4LjYgMiA0My4wOSAyIDQ4Ljg0IDEyLjE1IDExMy4wMyAxMi4xNSAxMTMuMDMgOTIuNzQgMi44NiA5Mi43NCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIxMTMuMDMgOTMuMzMgMi44NiA5My4zMyAyOC4zMSAyMy40IDEzOC40OSAyMy40IDExMy4wMyA5My4zMyIvPjwvc3ltYm9sPjwvZGVmcz48ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIj48ZyBpZD0iTGF5ZXJfMS0yIiBkYXRhLW5hbWU9IkxheWVyIDEiPjx1c2Ugd2lkdGg9IjE0MS4zNCIgaGVpZ2h0PSI5NS4zMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS4zIDAuOTEpIHNjYWxlKDAuNTQpIiB4bGluazpocmVmPSIjTmV3X1N5bWJvbF81Ii8+PC9nPjwvZz48L3N2Zz4=',
'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjEuNDkgNzYuMTUiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojNDM1MzhmO30uY2xzLTEsLmNscy0ye3N0cm9rZTojZmZmO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS13aWR0aDo0cHg7fS5jbHMtMntmaWxsOm5vbmU7fTwvc3R5bGU+PHN5bWJvbCBpZD0iTmV3X1N5bWJvbF82IiBkYXRhLW5hbWU9Ik5ldyBTeW1ib2wgNiIgdmlld0JveD0iMCAwIDEwOS42NyAxMzYuNjEiPjxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIxMDcuNjcgMTguMTkgMTA3LjY3IDEzNC42MSAyIDEzNC42MSAyIDIgODkuNDMgMiAxMDcuNjcgMTguMTkiLz48cG9seWxpbmUgY2xhc3M9ImNscy0yIiBwb2ludHM9IjEwNy42NyAxOC4xOSA4OS40MyAxOC4xOSA4OS40MyAyIi8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iMTguNjUiIHkxPSIyOC41NCIgeDI9IjU5LjgiIHkyPSIyOC41NCIvPjxsaW5lIGNsYXNzPSJjbHMtMiIgeDE9IjE4LjY1IiB5MT0iNDMuMzMiIHgyPSI5MS4wMiIgeTI9IjQzLjMzIi8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iMTguNjUiIHkxPSI1OC4xMyIgeDI9IjkxLjAyIiB5Mj0iNTguMTMiLz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSIxOC42NSIgeTE9IjcyLjkyIiB4Mj0iOTEuMDIiIHkyPSI3Mi45MiIvPjxsaW5lIGNsYXNzPSJjbHMtMiIgeDE9IjE4LjY1IiB5MT0iODcuNzEiIHgyPSI5MS4wMiIgeTI9Ijg3LjcxIi8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iMTguNjUiIHkxPSIxMDIuNTEiIHgyPSI5MS4wMiIgeTI9IjEwMi41MSIvPjxsaW5lIGNsYXNzPSJjbHMtMiIgeDE9IjE4LjY1IiB5MT0iMTE3LjMiIHgyPSI5MS4wMiIgeTI9IjExNy4zIi8+PC9zeW1ib2w+PC9kZWZzPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHVzZSB3aWR0aD0iMTA5LjY3IiBoZWlnaHQ9IjEzNi42MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC45MSAwLjkxKSBzY2FsZSgwLjU0KSIgeGxpbms6aHJlZj0iI05ld19TeW1ib2xfNiIvPjwvZz48L2c+PC9zdmc+',
'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjMuMTEgNzYuNDYiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojNDM1MzhmO30uY2xzLTEsLmNscy0yLC5jbHMtM3tzdHJva2U6I2ZmZjtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6NHB4O30uY2xzLTJ7ZmlsbDpub25lO30uY2xzLTN7ZmlsbDojZmZmO308L3N0eWxlPjxzeW1ib2wgaWQ9Ik5ld19TeW1ib2xfNyIgZGF0YS1uYW1lPSJOZXcgU3ltYm9sIDciIHZpZXdCb3g9IjAgMCAxMTIuNjUgMTM3LjE4Ij48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMiAxMzUuMTggMiAyIDExMC42NSAyIDExMC42NSAxMzUuMTggMiAxMzUuMTgiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik04OC42OSw0NS43NCIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTg4LjY5LDEwLjQ4Ii8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iNzkuNDUiIHkxPSIxMy40NiIgeDI9Ijc5LjQ1IiB5Mj0iNDUuNzQiLz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSI3MC4yIiB5MT0iMTAuNDgiIHgyPSI3MC4yIiB5Mj0iNDUuNzQiLz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSI2MC45NSIgeTE9IjEwLjQ4IiB4Mj0iNjAuOTUiIHkyPSI0NS43NCIvPjxsaW5lIGNsYXNzPSJjbHMtMiIgeDE9IjUxLjciIHkxPSIxMC40OCIgeDI9IjUxLjciIHkyPSIzMy45MSIvPjxsaW5lIGNsYXNzPSJjbHMtMiIgeDE9IjQyLjQ1IiB5MT0iMTMuNDYiIHgyPSI0Mi40NSIgeTI9IjQ1Ljc0Ii8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iMzMuMjEiIHkxPSIxMC40OCIgeDI9IjMzLjIxIiB5Mj0iNDUuNzQiLz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSIyMy45NiIgeTE9IjEwLjQ4IiB4Mj0iMjMuOTYiIHkyPSI0NS43NCIvPjxsaW5lIGNsYXNzPSJjbHMtMiIgeDE9Ijk3Ljk0IiB5MT0iMTAuNDgiIHgyPSI5Ny45NCIgeTI9IjQ1Ljc0Ii8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iMTQuNzEiIHkxPSIxMC40OCIgeDI9IjE0LjcxIiB5Mj0iNDUuNzQiLz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSI4OC42OSIgeTE9IjUxLjM5IiB4Mj0iODguNjkiIHkyPSI4Ni42NCIvPjxsaW5lIGNsYXNzPSJjbHMtMiIgeDE9Ijc5LjQ1IiB5MT0iNTEuMzkiIHgyPSI3OS40NSIgeTI9Ijg2LjY0Ii8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iNzAuMiIgeTE9IjUxLjM5IiB4Mj0iNzAuMiIgeTI9IjY5LjAyIi8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iNjAuOTUiIHkxPSI1MS4zOSIgeDI9IjYwLjk1IiB5Mj0iNjkuMDIiLz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSI1MS43IiB5MT0iNTEuMzkiIHgyPSI1MS43IiB5Mj0iNjkuMDIiLz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSI0Mi40NSIgeTE9IjUxLjM5IiB4Mj0iNDIuNDUiIHkyPSI2OS4wMiIvPjxsaW5lIGNsYXNzPSJjbHMtMiIgeDE9IjMzLjIxIiB5MT0iNTEuMzkiIHgyPSIzMy4yMSIgeTI9Ijg2LjY0Ii8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iMjMuOTYiIHkxPSI1MS4zOSIgeDI9IjIzLjk2IiB5Mj0iODYuNjQiLz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSI5Ny45NCIgeTE9IjUxLjM5IiB4Mj0iOTcuOTQiIHkyPSI4Ni42NCIvPjxsaW5lIGNsYXNzPSJjbHMtMiIgeDE9IjE0LjcxIiB5MT0iNTEuMzkiIHgyPSIxNC43MSIgeTI9Ijg2LjY0Ii8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iODguNjkiIHkxPSI5Mi4yOSIgeDI9Ijg4LjY5IiB5Mj0iMTI3LjU1Ii8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iNzkuNDUiIHkxPSI5Mi4yOSIgeDI9Ijc5LjQ1IiB5Mj0iMTI3LjU1Ii8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iNzAuMiIgeTE9IjkyLjI5IiB4Mj0iNzAuMiIgeTI9IjExNS44NSIvPjxsaW5lIGNsYXNzPSJjbHMtMiIgeDE9IjYwLjk1IiB5MT0iOTUuNTMiIHgyPSI2MC45NSIgeTI9IjEyNy41NSIvPjxsaW5lIGNsYXNzPSJjbHMtMiIgeDE9IjUxLjciIHkxPSI5Mi4yOSIgeDI9IjUxLjciIHkyPSIxMjcuNTUiLz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSI0Mi40NSIgeTE9IjkyLjI5IiB4Mj0iNDIuNDUiIHkyPSIxMjcuNTUiLz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSIzMy4yMSIgeTE9IjkyLjI5IiB4Mj0iMzMuMjEiIHkyPSIxMjcuNTUiLz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSIyMy45NiIgeTE9IjkyLjI5IiB4Mj0iMjMuOTYiIHkyPSIxMjcuNTUiLz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSI5Ny45NCIgeTE9IjkyLjI5IiB4Mj0iOTcuOTQiIHkyPSIxMjcuNTUiLz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSIxNC43MSIgeTE9IjkyLjI5IiB4Mj0iMTQuNzEiIHkyPSIxMjcuNTUiLz48cmVjdCBjbGFzcz0iY2xzLTMiIHg9IjQyLjQ1IiB5PSI3NS42MiIgd2lkdGg9IjI3Ljc0IiBoZWlnaHQ9IjguODIiLz48L3N5bWJvbD48L2RlZnM+PGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj48dXNlIHdpZHRoPSIxMTIuNjUiIGhlaWdodD0iMTM3LjE4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjkxIDAuOTEpIHNjYWxlKDAuNTQpIiB4bGluazpocmVmPSIjTmV3X1N5bWJvbF83Ii8+PC9nPjwvZz48L3N2Zz4=',
'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjUuNTYgNzQuMjUiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojNDM1MzhmO3N0cm9rZTojZmZmO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS13aWR0aDo0cHg7fS5jbHMtMntmaWxsOiNmZmY7fTwvc3R5bGU+PHN5bWJvbCBpZD0iTmV3X1N5bWJvbF84IiBkYXRhLW5hbWU9Ik5ldyBTeW1ib2wgOCIgdmlld0JveD0iMCAwIDExNy4xNSAxMzIuMDkiPjxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNy4xNSAxMTMuOSAyNy4xNSAyIDExNS4xNSAyIDExNS4xNSAxMTMuOSAyNy4xNSAxMTMuOSIvPjxwb2x5bGluZSBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMTA1LjM1IDkuNTggMzMuMjUgOS41OCAxNC4zMyAyMi4xMSA3Ni4xOCAyMi4xMSIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSI5MCAxOC4xOSAyIDE4LjE5IDIgMTMwLjA5IDkwIDEzMC4wOSAxMTUuMTUgMTE1LjU3IDExNS4xNSAzLjY3IDkwIDE4LjE5Ii8+PHJlY3QgY2xhc3M9ImNscy0yIiB4PSIxMi4yMyIgeT0iMzQuOTMiIHdpZHRoPSIxMS43NiIgaGVpZ2h0PSIxMS43NiIvPjxyZWN0IGNsYXNzPSJjbHMtMiIgeD0iMjUuNzIiIHk9IjM0LjkzIiB3aWR0aD0iMTEuNzYiIGhlaWdodD0iMTEuNzYiLz48cmVjdCBjbGFzcz0iY2xzLTIiIHg9IjM5LjIxIiB5PSIzNC45MyIgd2lkdGg9IjExLjc2IiBoZWlnaHQ9IjExLjc2Ii8+PHJlY3QgY2xhc3M9ImNscy0yIiB4PSIxMi4yMyIgeT0iNDguNTIiIHdpZHRoPSIxMS43NiIgaGVpZ2h0PSIxMS43NiIvPjxyZWN0IGNsYXNzPSJjbHMtMiIgeD0iMjUuNzIiIHk9IjQ4LjUyIiB3aWR0aD0iMTEuNzYiIGhlaWdodD0iMTEuNzYiLz48cmVjdCBjbGFzcz0iY2xzLTIiIHg9IjM5LjIxIiB5PSI0OC41MiIgd2lkdGg9IjExLjc2IiBoZWlnaHQ9IjExLjc2Ii8+PHJlY3QgY2xhc3M9ImNscy0yIiB4PSI2NC40NSIgeT0iNTQuNCIgd2lkdGg9IjExLjc2IiBoZWlnaHQ9IjUuODgiLz48cmVjdCBjbGFzcz0iY2xzLTIiIHg9IjUyLjciIHk9IjM0LjkzIiB3aWR0aD0iMTEuNzYiIGhlaWdodD0iMTEuNzYiLz48L3N5bWJvbD48L2RlZnM+PGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj48dXNlIHdpZHRoPSIxMTcuMTUiIGhlaWdodD0iMTMyLjA5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjkxIDEuNDcpIHNjYWxlKDAuNTQpIiB4bGluazpocmVmPSIjTmV3X1N5bWJvbF84Ii8+PC9nPjwvZz48L3N2Zz4=',
'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3Ni4wOCA1OS41MiI+PGRlZnM+PHN0eWxlPi5jbHMtMSwuY2xzLTN7ZmlsbDojNDM1MzhmO30uY2xzLTEsLmNscy0yLC5jbHMtM3tzdHJva2U6I2ZmZjtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LmNscy0xLC5jbHMtMntzdHJva2Utd2lkdGg6NHB4O30uY2xzLTIsLmNscy00e2ZpbGw6I2ZmZjt9LmNscy00e2ZvbnQtc2l6ZToxOS41NHB4O2ZvbnQtZmFtaWx5OkNvdXJpZXI7bGV0dGVyLXNwYWNpbmc6LTAuMTZlbTt9LmNscy01e2xldHRlci1zcGFjaW5nOi0wLjAyZW07fS5jbHMtNntsZXR0ZXItc3BhY2luZzotMC4xNGVtO30uY2xzLTd7bGV0dGVyLXNwYWNpbmc6LTAuMjJlbTt9LmNscy04e2xldHRlci1zcGFjaW5nOi0wLjA0ZW07fTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIyIiB5PSIyLjM1IiB3aWR0aD0iNzIuMDgiIGhlaWdodD0iNTUuMTciLz48cmVjdCBjbGFzcz0iY2xzLTIiIHg9IjIiIHk9IjIiIHdpZHRoPSI3Mi4wOCIgaGVpZ2h0PSI5LjE2Ii8+PGNpcmNsZSBjbGFzcz0iY2xzLTMiIGN4PSI4LjIxIiBjeT0iNi41OCIgcj0iMi45NSIvPjxjaXJjbGUgY2xhc3M9ImNscy0zIiBjeD0iMTYuMDIiIGN5PSI2LjU4IiByPSIyLjk1Ii8+PGNpcmNsZSBjbGFzcz0iY2xzLTMiIGN4PSIyMy44NCIgY3k9IjYuNTgiIHI9IjIuOTUiLz48dGV4dCBjbGFzcz0iY2xzLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEuOTQgMzkuNzMpIj4uPHRzcGFuIGNsYXNzPSJjbHMtNSIgeD0iOC42MiIgeT0iMCI+ZzwvdHNwYW4+PHRzcGFuIGNsYXNzPSJjbHMtNiIgeD0iMTkuOTciIHk9IjAiPm88L3RzcGFuPjx0c3BhbiBjbGFzcz0iY2xzLTciIHg9IjI4Ljk4IiB5PSIwIj4uPC90c3Bhbj48dHNwYW4gY2xhc3M9ImNscy01IiB4PSIzNi40MyIgeT0iMCI+ajwvdHNwYW4+PHRzcGFuIGNsYXNzPSJjbHMtOCIgeD0iNDcuNzgiIHk9IjAiPnAvPC90c3Bhbj48L3RleHQ+PC9nPjwvZz48L3N2Zz4=',
].map((str) => p.loadImage('data:image/svg+xml;base64,' + str));
const iconRatios = [
Math.sqrt(150 / 222),
Math.sqrt(150 / 121),
Math.sqrt(150 / 124),
Math.sqrt(150 / 132),
Math.sqrt(150 / 192),
];
p.setup = () => {
p.createCanvas(5000, (5000 * 9) / 16);
};
p.draw = () => {
p.background(67, 83, 143);
p.stroke(255);
const d = p.frameCount;
const dg = Math.floor(d / grid);
p.translate(-d, -d);
p.strokeWeight(5);
for (let x = dg - 1; x < dg + 2 + p.width / grid; ++x) {
for (let y = dg - 1; y < dg + 2 + p.height / grid; ++y) {
const ox = p.noise(x, y, 1) * grid * gf;
const oy = p.noise(x, y, 2) * grid * gf;
const connectLeft = p.noise(x, y, 4) > 0.35;
const connectTop = p.noise(x, y, 5) > 0.35;
const connectLT = y % 2 === 0 && p.noise(x, y, 6) > 0.5;
const connectRT = y % 2 === 1 && p.noise(x, y, 6) > 0.5;
if (connectLeft) {
const lox = p.noise(x - 1, y, 1) * grid * gf;
const loy = p.noise(x - 1, y, 2) * grid * gf;
p.line(
x * grid + ox + (y % 2 ? grid / 2 : 0),
y * grid + oy,
(x - 1) * grid + lox + (y % 2 ? grid / 2 : 0),
y * grid + loy,
);
}
if (connectTop) {
const tox = p.noise(x, y - 1, 1) * grid * gf;
const toy = p.noise(x, y - 1, 2) * grid * gf;
p.line(
x * grid + ox + (y % 2 ? grid / 2 : 0),
y * grid + oy,
x * grid + tox + ((y - 1) % 2 ? grid / 2 : 0),
(y - 1) * grid + toy,
);
}
if (connectLT) {
const ltox = p.noise(x - 1, y - 1, 1) * grid * gf;
const ltoy = p.noise(x - 1, y - 1, 2) * grid * gf;
p.line(
x * grid + ox + (y % 2 ? grid / 2 : 0),
y * grid + oy,
(x - 1) * grid + ltox + ((y - 1) % 2 ? grid / 2 : 0),
(y - 1) * grid + ltoy,
);
}
if (connectRT) {
const rtox = p.noise(x + 1, y - 1, 1) * grid * gf;
const rtoy = p.noise(x + 1, y - 1, 2) * grid * gf;
p.line(
x * grid + ox + (y % 2 ? grid / 2 : 0),
y * grid + oy,
(x + 1) * grid + rtox + ((y - 1) % 2 ? grid / 2 : 0),
(y - 1) * grid + rtoy,
);
}
}
}
for (let x = dg - 1; x < dg + 2 + p.width / grid; ++x) {
for (let y = dg - 1; y < dg + 2 + p.height / grid; ++y) {
const ox = p.noise(x, y, 1) * grid * gf;
const oy = p.noise(x, y, 2) * grid * gf;
const i = Math.floor(p.noise(x, y, 3) * icons.length * icons.length) % icons.length;
p.image(
icons[i],
x * grid + ox + (y % 2 ? grid / 2 : 0) - 80,
y * grid + oy - 80,
160 / iconRatios[i],
160 * iconRatios[i],
);
}
}
};
}, 'p5-container');
document.body.style.display = '';
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment