interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Change matrix

Browse source 
Improvements to line trailing.
This commit is contained in:
sthag 2026-03-28 19:49:13 +01:00
parent c1633e0bc9
commit 87bea40776
1 changed files with 40 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

70
source/screens/demo/examples/matrix.liquid
View file

@ -41,26 +41,30 @@ tags:
console.log("resize");
});
ctx.font = "24px 'Courier New', Courier, monospace";
let char = characters.charAt(Math.floor(Math.random() * characters.length));
let charMeasure = ctx.measureText(char);
let charW = Math.ceil(Math.max(charMeasure.actualBoundingBoxLeft + charMeasure.actualBoundingBoxRight, charMeasure.width));
let charH = charMeasure.fontBoundingBoxDescent + charMeasure.fontBoundingBoxAscent;
let glyph = {
text: char,
x: 0,
y: 0,
w: 13,
h: 24
}
let lane = [];
let max = Math.floor(canvas.clientHeight / glyph.h);
let newId = undefined;
let holdId = undefined;
let cleanId = undefined;
let newInterval = 300;
let holdInterval = 1000;
let cleanInterval = 3000;
let index = 0;
ctx.font = "24px 'Courier New', Courier, monospace";
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 = [];
let cleanInterval = 400;
let newIndex = 0;
let cleanIndex = randomIntFrom(1, max);
console.log("init", newInterval);
console.log(glyph);
@ -73,49 +77,53 @@ tags:
clearInterval(holdId);
glyph.text = characters.charAt(Math.floor(Math.random() * characters.length));
console.log(index, glyph.text);
console.log(newIndex, glyph.text);
lane.push([index, glyph.text, glyph.y]);
lane.push([newIndex, 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) {
if (newIndex > 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++;
if (newIndex === cleanIndex) {
console.log("clean", cleanInterval, cleanIndex);
cleanId = setInterval(cleanTrail, cleanInterval);
}
newIndex++;
glyph.y += glyph.h;
if (index > 10) {
console.log("hold", holdInterval);
if (newIndex > max) {
// console.log("hold", holdInterval);
console.log("end");
clearInterval(newId);
index = 0;
newIndex = 0;
glyph.y = 0;
newInterval = randomIntFrom(100, 1000, 2);
holdId = setTimeout(() => {
console.log("clean", cleanInterval);
// holdId = setTimeout(() => {
// console.log("clean", cleanInterval);
holdInterval = randomIntFrom(1000, 10000, 3);
cleanId = setInterval(cleanTrail, cleanInterval);
}, holdInterval);
// 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);
@ -126,7 +134,9 @@ tags:
console.clear();
console.log("new", newInterval);
cleanIndex = randomIntFrom(1, max);
cleanInterval = randomIntFrom(1000, 10000, 3);
holdInterval = randomIntFrom(1000, 10000, 3);
newId = setInterval(newTrail, newInterval);
}, holdInterval);
}