feat: Change matrix
- Use blocks for now - Hold and clean for line - Only one line for now
This commit is contained in:
parent
8fe884aad6
commit
c1633e0bc9
1 changed files with 83 additions and 211 deletions
|
|
@ -7,255 +7,127 @@ tags:
|
|||
|
||||
{% block style %}
|
||||
<style>
|
||||
:root {
|
||||
--space: 16px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: calc(100vh - calc(var(--space) * 2));
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
margin: var(--space);
|
||||
/* background-color: grey; */
|
||||
border: 1px solid black;
|
||||
margin: 0;
|
||||
background-color: grey;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.glyph {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
#canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<canvas id="canvas">
|
||||
<div>Canvas element not supported.</div>
|
||||
</canvas>
|
||||
<div id="container">
|
||||
<span id="a" class="glyph">A</span>
|
||||
</div>
|
||||
<canvas id="canvas"></canvas>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script>
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
const glyphEls = document.getElementsByClassName('glyph');
|
||||
const glyphEl = document.getElementById('a');
|
||||
const cEl = document.getElementById('container');
|
||||
const canvas = document.getElementById("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
const observer = new ResizeObserver(() => {
|
||||
canvas.width = canvas.clientWidth;
|
||||
canvas.height = canvas.clientHeight;
|
||||
console.log("resize");
|
||||
});
|
||||
|
||||
let createId = undefined;
|
||||
let changeId = undefined;
|
||||
let newId = undefined;
|
||||
let holdId = undefined;
|
||||
let cleanId = undefined;
|
||||
let createInterval = 300;
|
||||
let changeInterval = 300;
|
||||
let newInterval = 300;
|
||||
let holdInterval = 1000;
|
||||
let cleanInterval = 1000;
|
||||
let bodyHeight = Math.max(document.body.offsetHeight, document.body.clientHeight, 0);
|
||||
let glyphY = parseInt(window.getComputedStyle(glyphEl).top);
|
||||
let glyphW = glyphEl.offsetWidth;
|
||||
let glyphH = glyphEl.offsetHeight;
|
||||
let maxHeight = bodyHeight - glyphY - 2 * 16;
|
||||
let cleanInterval = 3000;
|
||||
let index = 0;
|
||||
|
||||
cEl.style.display = 'none';
|
||||
ctx.font = "24px 'Courier New', Courier, monospace";
|
||||
|
||||
function canvasTrail() {
|
||||
const canvas = document.getElementById("canvas");
|
||||
const body = document.querySelector("body");
|
||||
canvas.width = body.clientWidth - 2;
|
||||
canvas.height = body.clientHeight - 2;
|
||||
|
||||
if (canvas.getContext) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
ctx.font = "24px 'Courier New', Courier, monospace";
|
||||
// ctx.textBaseline = "top";
|
||||
|
||||
let glyphText = "A";
|
||||
let glyphMeasure = ctx.measureText(glyphText);
|
||||
let glyphX = 0;
|
||||
let glyphY = 0;
|
||||
let glyphW = Math.max(glyphMeasure.actualBoundingBoxLeft + glyphMeasure.actualBoundingBoxRight, glyphMeasure.width);
|
||||
let glyphH = glyphMeasure.fontBoundingBoxDescent + glyphMeasure.fontBoundingBoxAscent;
|
||||
let glyph = {
|
||||
text: glyphText,
|
||||
measure: glyphMeasure,
|
||||
x: glyphX,
|
||||
y: glyphY,
|
||||
w: glyphW,
|
||||
h: glyphH
|
||||
}
|
||||
let lane = [];
|
||||
|
||||
ctx.fillStyle = "grey";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
// ctx.fillStyle = "black";
|
||||
// ctx.fillRect(glyphX, glyphY, glyphW, glyphH);
|
||||
// ctx.fillStyle = "red";
|
||||
// ctx.fillText(glyphText, glyphX, glyphY + glyphMeasure.fontBoundingBoxAscent);
|
||||
|
||||
ctx.fillStyle = "black";
|
||||
|
||||
createId = setInterval(createGlyph, createInterval, ctx, characters, glyph, lane);
|
||||
} else {
|
||||
console.log('Canvas element not supported.');
|
||||
}
|
||||
let char = characters.charAt(Math.floor(Math.random() * characters.length));
|
||||
let charMeasure = ctx.measureText(char);
|
||||
let glyph = {
|
||||
text: char,
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: Math.ceil(Math.max(charMeasure.actualBoundingBoxLeft + charMeasure.actualBoundingBoxRight, charMeasure.width)),
|
||||
h: charMeasure.fontBoundingBoxDescent + charMeasure.fontBoundingBoxAscent
|
||||
}
|
||||
let lane = [];
|
||||
|
||||
function createGlyph(ctx, chars, glyph, lane) {
|
||||
clearTimeout(cleanId);
|
||||
glyph.text = chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
console.log(glyph.text, glyph.y);
|
||||
console.log("init", newInterval);
|
||||
console.log(glyph);
|
||||
|
||||
lane.push([glyph.text, glyph.y]);
|
||||
observer.observe(canvas);
|
||||
|
||||
// ctx.fillStyle = "black";
|
||||
// ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
|
||||
ctx.fillStyle = "white";
|
||||
ctx.fillText(glyph.text, glyph.x, glyph.y + glyph.measure.fontBoundingBoxAscent);
|
||||
newId = setInterval(newTrail, newInterval);
|
||||
|
||||
if (glyph.y >= glyph.h) {
|
||||
let prevY = glyph.y - glyph.h;
|
||||
let bkg = "rgba(128, 128, 128, " + randomBetween(.1, 1) + ")";
|
||||
|
||||
ctx.clearRect(glyph.x, prevY, glyph.w, glyph.h);
|
||||
ctx.fillStyle = "grey";
|
||||
ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillText(glyph.text, glyph.x, prevY + glyph.measure.fontBoundingBoxAscent);
|
||||
ctx.fillStyle = bkg;
|
||||
ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
|
||||
}
|
||||
|
||||
glyph.y += glyph.h;
|
||||
|
||||
if (glyph.y > canvas.height) {
|
||||
// holdLane(ctx, chars, glyph, lane);
|
||||
clearInterval(createId);
|
||||
holdId = setTimeout(holdLane, holdInterval, ctx, chars, glyph, lane);
|
||||
}
|
||||
}
|
||||
|
||||
function holdLane(ctx, chars, glyph, lane) {
|
||||
console.log("hold");
|
||||
|
||||
glyph.y = 0;
|
||||
|
||||
// clearInterval(createId);
|
||||
|
||||
// Änderung der Transparenz (sehr selten)
|
||||
|
||||
// Änderung des Symbols (selten)
|
||||
|
||||
cleanId = setTimeout(cleanLane, cleanInterval, ctx, chars, glyph, lane);
|
||||
}
|
||||
|
||||
function cleanLane(ctx, chars, glyph, lane) {
|
||||
console.log("clean");
|
||||
|
||||
clearTimeout(holdId);
|
||||
|
||||
lane = [];
|
||||
|
||||
ctx.clearRect(glyph.x, glyph.y, glyph.w, canvas.height);
|
||||
ctx.fillStyle = "grey";
|
||||
ctx.fillRect(0, 0, glyph.w, canvas.height);
|
||||
|
||||
createId = setInterval(createGlyph, randomIntFrom(100, 1000), ctx, chars, glyph, lane);
|
||||
}
|
||||
|
||||
function containerTrail(position, container) {
|
||||
const laneEl = document.createElement('div');
|
||||
|
||||
laneEl.className = 'lane';
|
||||
container.appendChild(laneEl);
|
||||
|
||||
let changeGlyphId = setInterval(() => {
|
||||
let newEl = glyphEl.cloneNode();
|
||||
let glyphX = position;
|
||||
|
||||
glyphY += glyphEl.clientHeight;
|
||||
newEl.innerHTML = characters.charAt(Math.floor(Math.random() * characters.length));
|
||||
newEl.id = '';
|
||||
newEl.style.top = glyphY + 'px';
|
||||
newEl.style.left = glyphX + 'px';
|
||||
newEl.style.opacity = 1;
|
||||
|
||||
if (glyphY > maxHeight) {
|
||||
glyphY = 0;
|
||||
laneEl.textContent = '';
|
||||
}
|
||||
|
||||
laneEl.appendChild(newEl);
|
||||
let prevEl = newEl.previousElementSibling;
|
||||
|
||||
if (prevEl !== null) {
|
||||
prevEl.style.opacity = randomBetween(.5, 1);
|
||||
}
|
||||
}, createInterval);
|
||||
}
|
||||
|
||||
function addTrails(amount) {
|
||||
for (let index = 0; index <= amount; index++) {
|
||||
let position = index * glyphW;
|
||||
containerTrail(position);
|
||||
}
|
||||
}
|
||||
|
||||
function getGlyph(fontSize = 24, lineHeight = 1) {
|
||||
const glyphEl = document.createElement('span');
|
||||
|
||||
glyphEl.style = 'glyph';
|
||||
|
||||
return glyphEl;
|
||||
}
|
||||
|
||||
function createStyle() {
|
||||
const stylesheet = document.styleSheets[0];
|
||||
stylesheet.cssRules[0].style.backgroundColor = "aqua";
|
||||
}
|
||||
|
||||
// containerTrail(0, cEl);
|
||||
// window.addEventListener("load", canvasTrail);
|
||||
|
||||
/**
|
||||
* Change glyph
|
||||
*/
|
||||
console.log("init", changeInterval);
|
||||
changeId = setInterval(change, changeInterval);
|
||||
|
||||
function change() {
|
||||
function newTrail() {
|
||||
clearInterval(holdId);
|
||||
let char = characters.charAt(Math.floor(Math.random() * characters.length));
|
||||
console.log(index, char);
|
||||
|
||||
glyph.text = characters.charAt(Math.floor(Math.random() * characters.length));
|
||||
console.log(index, glyph.text);
|
||||
|
||||
lane.push([index, glyph.text, glyph.y]);
|
||||
|
||||
ctx.fillStyle = "white";
|
||||
ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
|
||||
// ctx.fillText(glyph.text, glyph.x, glyph.y + glyph.h);
|
||||
|
||||
if (index > 0) {
|
||||
let prevY = glyph.y - glyph.h;
|
||||
ctx.fillStyle = "rgba(0, 0, 0, " + randomBetween(.6, 1) + ")";
|
||||
ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
|
||||
}
|
||||
|
||||
index++;
|
||||
glyph.y += glyph.h;
|
||||
|
||||
if (index > 10) {
|
||||
clearInterval(changeId);
|
||||
index = 0;
|
||||
changeInterval = randomIntFrom(100, 1000, 2);
|
||||
console.clear();
|
||||
console.log("hold", holdInterval);
|
||||
|
||||
holdId = setTimeout(() => {
|
||||
holdInterval = randomIntFrom(1000, 10000, 3);
|
||||
clearInterval(newId);
|
||||
|
||||
console.log("change", changeInterval);
|
||||
changeId = setInterval(change, changeInterval);
|
||||
index = 0;
|
||||
glyph.y = 0;
|
||||
newInterval = randomIntFrom(100, 1000, 2);
|
||||
|
||||
holdId = setTimeout(() => {
|
||||
console.log("clean", cleanInterval);
|
||||
|
||||
holdInterval = randomIntFrom(1000, 10000, 3);
|
||||
cleanId = setInterval(cleanTrail, cleanInterval);
|
||||
}, holdInterval);
|
||||
}
|
||||
}
|
||||
|
||||
function cleanTrail() {
|
||||
clearInterval(holdId);
|
||||
|
||||
let pos = lane.shift();
|
||||
console.log(pos);
|
||||
|
||||
ctx.clearRect(0, pos[2], glyph.w, glyph.h);
|
||||
// ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
if (!lane.length) {
|
||||
console.log("hold", holdInterval);
|
||||
|
||||
clearInterval(cleanId);
|
||||
|
||||
holdId = setTimeout(() => {
|
||||
console.clear();
|
||||
console.log("new", newInterval);
|
||||
|
||||
cleanInterval = randomIntFrom(1000, 10000, 3);
|
||||
newId = setInterval(newTrail, newInterval);
|
||||
}, holdInterval);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue