einundzwanzig/einundzwanzig-portal
1
0
Fork 0
mirror of https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git synced 2025-12-11 06:46:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

heatmap animation

Browse Source
This commit is contained in:
HolgerHatGarKeineNode
2023-02-08 19:22:32 +01:00
parent be07a4b577
commit 0501dc57a1
1 changed files with 0 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
resources/views/livewire/book-case/heatmap.blade.php
View File

@@ -1,7 +1,6 @@
<div <div
id="matrix" id="matrix"
class="h-screen justify-between relative"> class="h-screen justify-between relative">
<canvas id="canvas" class="absolute top-0 left-0 z-[-1] h-full"></canvas>
{{-- HEADER --}} {{-- HEADER --}}
<livewire:frontend.header :country="$country" bgColor="bg-transparent"/> <livewire:frontend.header :country="$country" bgColor="bg-transparent"/>
{{-- MAIN --}} {{-- MAIN --}}
@@ -65,41 +64,4 @@
</section> </section>
{{-- FOOTER --}} {{-- FOOTER --}}
<livewire:frontend.footer/> <livewire:frontend.footer/>
<script>
document.addEventListener('livewire:load', function () {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const w = canvas.width = document.getElementById('matrix').offsetWidth;
const h = canvas.height = document.getElementById('matrix').offsetHeight;
const cols = Math.floor(w / 20) + 1;
const ypos = Array(cols).fill(0);
const characters = 'Markus Turm';
const charactersLength = characters.length;
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, w, h);
function matrix () {
ctx.fillStyle = '#0001';
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = '#F7931A';
ctx.font = '12pt monospace';
ypos.forEach((y, ind) => {
const text = characters.charAt(Math.floor(Math.random() * charactersLength));
const x = ind * 20;
ctx.fillText(text, x, y);
if (y > 10 + Math.random() * 10000) ypos[ind] = 0;
else ypos[ind] = y + 20;
});
document.getElementById('matrix').style.background = "url(" + canvas.toDataURL() + ")";
}
setInterval(matrix, 75);
});
</script>
</div> </div>