03 - Glitch Art
<!DOCTYPE html>
<html>
<head>
<title>Genuary 03 Glitch</title>
<script id="fxhash-snippet">
//---- do not edit the following code (you can indent as you wish)
let alphabet = "123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ"
var fxhash = "oo" + Array(49).fill(0).map(_ => alphabet[(Math.random() * alphabet.length) | 0]).join('')
// fxhash = 'oouAMQaskYYawHXpF3Gn97xkJMc98mmgJCxQ1NBENnvHBvmY6AF'
const urlHash = new URLSearchParams(window.location.search).get('fxhash')
if (urlHash) fxhash = urlHash
let b58dec = str => [...str].reduce((p, c) => p * alphabet.length + alphabet.indexOf(c) | 0, 0)
let fxhashTrunc = fxhash.slice(2)
let regex = new RegExp(".{" + ((fxhash.length / 4) | 0) + "}", 'g')
let hashes = fxhashTrunc.match(regex).map(h => b58dec(h))
let sfc32 = (a, b, c, d) => {
return () => {
a |= 0;
b |= 0;
c |= 0;
d |= 0
var t = (a + b | 0) + d | 0
d = d + 1 | 0
a = b ^ b >>> 9
b = c + (c << 3) | 0
c = c << 21 | c >>> 11
c = c + t | 0
return (t >>> 0) / 4294967296
}
}
var fxrand = sfc32(...hashes)
// true if preview mode active, false otherwise
// you can append preview=1 to the URL to simulate preview active
var isFxpreview = new URLSearchParams(window.location.search).get('preview') === "1"
// call this method to trigger the preview
function fxpreview() {
console.log("fxhash: TRIGGER PREVIEW")
}
//---- /do not edit the following code
</script>
<!-- if you need to import js scripts do it here -->
<style>
table {
width: 100%;
height: 100%;
border: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
}
td {
height: 100%;
text-align: center;
vertical-align: middle;
font-family: 'Courier New', Courier, monospace;
font-size: 4rem;
}
</style>
</head>
<body>
<!-- horizontially and vertically align some text -->
<table>
<tr>
<td>
Loading...<br />
<small style="font-size: 1.5rem">(this takes a while)</small>
</td>
</tr>
</table>
<canvas id="target"></canvas>
<script src="./index.js"></script>
<script>
let preloadImagesTmr = null
document.addEventListener('DOMContentLoaded', (event) => {
// stupid hack to make sure we have access to all the images
preloadImages()
preloadImagesTmr = setInterval(() => {
preloadImages()
}, 333);
})
</script>
</body>
</html>
Home
Changelog
Page created in: 2ms