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"); 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 newId = undefined;
let holdId = undefined; let holdId = undefined;
let cleanId = undefined; let cleanId = undefined;
let newInterval = 300; let newInterval = 300;
let holdInterval = 1000; let holdInterval = 1000;
let cleanInterval = 3000; let cleanInterval = 400;
let index = 0; let newIndex = 0;
let cleanIndex = randomIntFrom(1, max);
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 = [];
console.log("init", newInterval); console.log("init", newInterval);
console.log(glyph); console.log(glyph);
@ -73,49 +77,53 @@ tags:
clearInterval(holdId); clearInterval(holdId);
glyph.text = characters.charAt(Math.floor(Math.random() * characters.length)); 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.fillStyle = "white";
ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h); ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
// ctx.fillText(glyph.text, glyph.x, glyph.y + glyph.h); // ctx.fillText(glyph.text, glyph.x, glyph.y + glyph.h);
if (index > 0) { if (newIndex > 0) {
let prevY = glyph.y - glyph.h; let prevY = glyph.y - glyph.h;
ctx.fillStyle = "rgba(0, 0, 0, " + randomBetween(.6, 1) + ")"; ctx.fillStyle = "rgba(0, 0, 0, " + randomBetween(.6, 1) + ")";
ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h); 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; glyph.y += glyph.h;
if (index > 10) { if (newIndex > max) {
console.log("hold", holdInterval); // console.log("hold", holdInterval);
console.log("end");
clearInterval(newId); clearInterval(newId);
index = 0; newIndex = 0;
glyph.y = 0; glyph.y = 0;
newInterval = randomIntFrom(100, 1000, 2); newInterval = randomIntFrom(100, 1000, 2);
holdId = setTimeout(() => { // holdId = setTimeout(() => {
console.log("clean", cleanInterval); // console.log("clean", cleanInterval);
holdInterval = randomIntFrom(1000, 10000, 3); // holdInterval = randomIntFrom(1000, 10000, 3);
cleanId = setInterval(cleanTrail, cleanInterval); // cleanId = setInterval(cleanTrail, cleanInterval);
}, holdInterval); // }, holdInterval);
} }
} }
function cleanTrail() { function cleanTrail() {
clearInterval(holdId);
let pos = lane.shift(); let pos = lane.shift();
console.log(pos); console.log(pos);
ctx.clearRect(0, pos[2], glyph.w, glyph.h); ctx.clearRect(0, pos[2], glyph.w, glyph.h);
// ctx.clearRect(0, 0, canvas.width, canvas.height);
if (!lane.length) { if (!lane.length) {
console.log("hold", holdInterval); console.log("hold", holdInterval);
@ -126,7 +134,9 @@ tags:
console.clear(); console.clear();
console.log("new", newInterval); console.log("new", newInterval);
cleanIndex = randomIntFrom(1, max);
cleanInterval = randomIntFrom(1000, 10000, 3); cleanInterval = randomIntFrom(1000, 10000, 3);
holdInterval = randomIntFrom(1000, 10000, 3);
newId = setInterval(newTrail, newInterval); newId = setInterval(newTrail, newInterval);
}, holdInterval); }, holdInterval);
} }