eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-15 21:09:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Replacing the symbol-use pattern in rendered SVG with groups with their contents set to the innerHTML of the asset SVG symbols. The background rectangle's size is now explicitly the size of the viewBox. Culling more glyphs that aren't visible to the eye (for now, at least).

Browse Source
This commit is contained in:
Rezmason
2025-05-14 05:33:56 -07:00
parent 3fef805c1f
commit 76e0311cfd
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
js/svg/rainPass.js
View File

@@ -62,7 +62,7 @@ export default ({ artboard, config }) => {
columnPos[0] = pos[0];
const columnTimeOffset = randomFloat(columnPos) * 1000;
columnPos[0] += 0.1;
const columnSpeedOffset = randomFloat(columnPos) * 0.5 + 0.5;
let columnSpeedOffset = randomFloat(columnPos) * 0.5 + 0.5;
if (config.loops) {
columnSpeedOffset = 0.5;
}
@@ -104,7 +104,7 @@ export default ({ artboard, config }) => {
const xml = xmlParser.parseFromString(glyphSVG.text(), "image/svg+xml");
const defs = xml.querySelector("defs");
const symbols = [...defs.querySelectorAll("symbol")];
const symbolsByID = new Map(symbols.map(symbol => (["#" + symbol.id, symbol])));
const symbolsByID = new Map(symbols.map(symbol => (["#" + symbol.id, symbol.innerHTML])));
const symbolSize = symbols[0].getAttribute("width") || 64;
const time = 1 * config.animationSpeed;
// TODO: effect
@@ -117,7 +117,8 @@ export default ({ artboard, config }) => {
const pos4 = vec4.create();
for (const {pos, brightness, isCursor, symbol} of glyphs) {
if (brightness < 0.1) {
// TODO: use actual thresholds
if (brightness < 0.6) {
continue;
}
@@ -179,14 +180,14 @@ export default ({ artboard, config }) => {
const group = [];
// group.push(`<rect fill="none" stroke="red" width="64" height="64" />`);
group.push(`<use fill="${isCursor ? cursorColor : baseColor}" href="${base}"></use>`);
group.push(`<g fill="${isCursor ? cursorColor : baseColor}">${symbolsByID.get(base)}</g>`);
const glintBrightness = brightness * 2 - 1;
const glint = `#sym_${symbol}_glint`;
if (glintBrightness > 0 && symbolsByID.has(glint)) {
const glintChannel = Math.floor(0xFF * glintBrightness);
const glintColor = "#" + (glintChannel << 16 | glintChannel << 8).toString(16).padStart(6, "0");
group.push(`<use fill="${glintColor}" href="${glint}"></use>`);
group.push(`<g fill="${glintColor}">${symbolsByID.get(glint)}</g>`);
}
glyphElements.push([depth, `<g transform="${glyphTransform}">${group.join(" ")}</g>`]);
@@ -196,8 +197,7 @@ export default ({ artboard, config }) => {
output.innerHTML = [
`<style>path { mix-blend-mode: screen; }</style>`,
defs.outerHTML,
`<rect width="100%" height="100%" />`,
`<rect width="${numColumns}" height="${numColumns}" />`,
glyphElements.map(([depth, tag]) => tag).join("\n")
].join("\n");