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

feat: Change matrix

Browse source 
- Show characters
- Stop using observer
This commit is contained in:
sthag 2026-03-28 19:53:49 +01:00
parent 87bea40776
commit a962046183
1 changed files with 21 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -35,13 +35,19 @@ tags:
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const canvas = document.getElementById("canvas"); const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const observer = new ResizeObserver(() => { // const observer = new ResizeObserver(() => {
canvas.width = canvas.clientWidth; // canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight; // canvas.height = canvas.clientHeight;
console.log("resize"); // console.log("resize");
}); // });
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
// observer.observe(canvas);
ctx.font = "24px 'Courier New', Courier, monospace"; ctx.font = "24px 'Courier New', Courier, monospace";
ctx.textBaseline = "top";
let char = characters.charAt(Math.floor(Math.random() * characters.length)); let char = characters.charAt(Math.floor(Math.random() * characters.length));
let charMeasure = ctx.measureText(char); let charMeasure = ctx.measureText(char);
@ -51,8 +57,8 @@ tags:
text: char, text: char,
x: 0, x: 0,
y: 0, y: 0,
w: 13, w: charH,
h: 24 h: charH
} }
let lane = []; let lane = [];
let max = Math.floor(canvas.clientHeight / glyph.h); let max = Math.floor(canvas.clientHeight / glyph.h);
@ -69,8 +75,6 @@ tags:
console.log("init", newInterval); console.log("init", newInterval);
console.log(glyph); console.log(glyph);
observer.observe(canvas);
newId = setInterval(newTrail, newInterval); newId = setInterval(newTrail, newInterval);
function newTrail() { function newTrail() {
@ -83,12 +87,18 @@ tags:
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.fillStyle = "black";
ctx.fillText(glyph.text, Math.floor((charH - charW) / 2), glyph.y);
if (newIndex > 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) + ")"; let alpha = randomBetween(.2, 1);
ctx.clearRect(glyph.x, prevY, glyph.w, glyph.h);
ctx.fillStyle = "rgba(0, 0, 0, " + alpha + ")";
ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h); ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
ctx.fillStyle = "rgba(255, 255, 255, " + alpha + ")";
// TODO: can not use array lane if it is changed by cleanTrail()
ctx.fillText(lane[newIndex - 1][1], Math.floor((charH - charW) / 2), prevY);
} }
if (newIndex === cleanIndex) { if (newIndex === cleanIndex) {