mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-16 21:39:29 -07:00
255 lines
8.1 KiB
JavaScript
255 lines
8.1 KiB
JavaScript
import { loadImage, loadText, makePassSVG, makePass } from "./utils.js";
|
|
|
|
const extractEntries = (src, keys) => Object.fromEntries(Array.from(Object.entries(src)).filter(([key]) => keys.includes(key)));
|
|
|
|
const rippleTypes = {
|
|
box: 0,
|
|
circle: 1,
|
|
};
|
|
|
|
export default ({ artboard, config }) => {
|
|
const { mat2, mat4, vec2, vec3, vec4 } = glMatrix;
|
|
|
|
// The volumetric mode multiplies the number of columns
|
|
// to reach the desired density, and then overlaps them
|
|
const volumetric = config.volumetric;
|
|
const numColumns = config.numColumns;
|
|
const density = volumetric && config.effect !== "none" ? config.density : 1;
|
|
const [numGridRows, numGridColumns] = [config.numColumns, Math.floor(config.numColumns * density)];
|
|
|
|
// Various effect-related values
|
|
const rippleType = config.rippleTypeName in rippleTypes ? rippleTypes[config.rippleTypeName] : -1;
|
|
const slantVec = [Math.cos(config.slant), Math.sin(config.slant)];
|
|
const slantScale = 1 / (Math.abs(Math.sin(2 * config.slant)) * (Math.sqrt(2) - 1) + 1);
|
|
const showDebugView = config.effect === "none";
|
|
|
|
const glyphTransform = mat2.fromScaling(mat2.create(), vec2.fromValues(config.glyphFlip ? -1 : 1, 1));
|
|
mat2.rotate(glyphTransform, glyphTransform, (config.glyphRotation * Math.PI) / 180);
|
|
|
|
const glyphPositions = Array(numGridRows)
|
|
.fill()
|
|
.map((_, y) =>
|
|
Array(numGridColumns)
|
|
.fill()
|
|
.map((_, x) => vec2.fromValues(x, y))
|
|
).flat();
|
|
|
|
const glyphs = Array(numGridRows * numGridColumns).fill(null);
|
|
|
|
// We render the code into an SVG using the imported symbols
|
|
const glyphSVG = loadText(config.glyphSVGURL);
|
|
const baseTexture = loadImage(config.baseTextureURL, true);
|
|
const glintTexture = loadImage(config.glintTextureURL, true);
|
|
const output = makePassSVG();
|
|
|
|
const randomAB = vec2.fromValues(12.9898, 78.233);
|
|
const randomFloat = (uv) => {
|
|
const dt = vec2.dot(uv, randomAB);
|
|
return (Math.sin(dt % Math.PI) * 43758.5453) % 1;
|
|
}
|
|
|
|
const raindrop = () => {
|
|
|
|
const SQRT_2 = Math.sqrt(2);
|
|
const SQRT_5 = Math.sqrt(5);
|
|
|
|
const wobble = (x) => {
|
|
return x + 0.3 * Math.sin(SQRT_2 * x) + 0.2 * Math.sin(SQRT_5 * x);
|
|
}
|
|
|
|
const columnPos = vec2.create();
|
|
const getRainBrightness = (time, pos) => {
|
|
columnPos[0] = pos[0];
|
|
const columnTimeOffset = randomFloat(columnPos) * 1000;
|
|
columnPos[0] += 0.1;
|
|
const columnSpeedOffset = randomFloat(columnPos) * 0.5 + 0.5;
|
|
if (config.loops) {
|
|
columnSpeedOffset = 0.5;
|
|
}
|
|
const columnTime = columnTimeOffset + time * config.fallSpeed * columnSpeedOffset;
|
|
let rainTime = (pos[1] * 0.01 + columnTime) / config.raindropLength;
|
|
if (!config.loops) {
|
|
rainTime = wobble(rainTime);
|
|
}
|
|
return 1.0 - (rainTime % 1);
|
|
}
|
|
|
|
const gridSize = vec2.fromValues(numGridColumns, numGridRows);
|
|
const posBelow = vec2.create();
|
|
const symbolCoord = vec2.create();
|
|
const time = 1 * config.animationSpeed;
|
|
for (let i = 0; i < glyphPositions.length; i++) {
|
|
const pos = glyphPositions[i];
|
|
vec2.set(posBelow, pos[0], pos[1] - 1);
|
|
const brightness = getRainBrightness(time, pos);
|
|
const brightnessBelow = getRainBrightness(time, posBelow);
|
|
const isCursor = brightness > brightnessBelow;
|
|
|
|
vec2.divide(symbolCoord, pos, gridSize);
|
|
const symbol = Math.floor(config.glyphSequenceLength * randomFloat(symbolCoord));
|
|
|
|
glyphs[i] = {
|
|
pos, brightness, isCursor, symbol
|
|
};
|
|
}
|
|
};
|
|
|
|
const glyphElements = [];
|
|
const xmlParser = new DOMParser();
|
|
|
|
const render = () => {
|
|
output.setAttribute("viewBox", `0 0 ${numColumns} ${numColumns}`);
|
|
output.setAttribute("preserveAspectRatio", "xMidYMid slice");
|
|
|
|
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 symbolSize = symbols[0].getAttribute("width") || 64;
|
|
const time = 1 * config.animationSpeed;
|
|
// TODO: effect
|
|
// TODO: rain pass frag
|
|
// TODO: move on to next pass
|
|
|
|
const randPos = vec2.create();
|
|
const glyphPos = vec2.create();
|
|
const glyphScale = vec2.create();
|
|
const pos4 = vec4.create();
|
|
for (const {pos, brightness, isCursor, symbol} of glyphs) {
|
|
|
|
if (brightness < 0.1) {
|
|
continue;
|
|
}
|
|
|
|
// Calculate the world space position
|
|
let depth = 0.0;
|
|
if (volumetric) {
|
|
vec2.set(randPos, pos[0], 0);
|
|
let startDepth = randomFloat(randPos);
|
|
depth = (startDepth + time * config.animationSpeed * config.forwardSpeed) % 1;
|
|
}
|
|
|
|
vec2.set(glyphPos,
|
|
pos[0] * 1 / (numColumns * density),
|
|
pos[1] * config.glyphVerticalSpacing / numColumns
|
|
);
|
|
vec2.set(glyphScale, 1, config.glyphVerticalSpacing);
|
|
|
|
if (volumetric) {
|
|
vec2.set(randPos, pos[0], 1);
|
|
glyphPos[1] += randomFloat(randPos);
|
|
|
|
|
|
vec4.set(pos4,
|
|
(glyphPos[0] - 0.5) * 2,
|
|
(glyphPos[1] - 0.5) * 2,
|
|
depth,
|
|
1
|
|
);
|
|
// pos.x /= glyphHeightToWidth;
|
|
// pos = camera * transform * pos;
|
|
vec4.transformMat4(pos4, pos4, transform);
|
|
vec4.transformMat4(pos4, pos4, camera);
|
|
vec2.set(glyphPos,
|
|
(pos4[0] / pos4[3] / 2) + 0.5,
|
|
(pos4[1] / pos4[3] / 2) + 0.5,
|
|
);
|
|
vec2.scale(glyphScale, glyphScale, 1 / pos4[3]);
|
|
depth = pos4[2];
|
|
}
|
|
|
|
glyphPos[0] *= numColumns;
|
|
glyphPos[1] *= numColumns;
|
|
|
|
const glyphTransform = `translate(${
|
|
[glyphPos[0], (numColumns - 1) - glyphPos[1]].join(",")
|
|
}) rotate(${
|
|
0
|
|
}) scale(${
|
|
[glyphScale[0] / symbolSize, glyphScale[1] / symbolSize].join(",")
|
|
})`;
|
|
|
|
const base = `#sym_${symbol}`;
|
|
const baseBrightness = brightness ** 5;
|
|
const baseChannel = Math.floor(0xFF * baseBrightness);
|
|
const baseColor = "#" + (baseChannel << 8).toString(16).padStart(6, "0");
|
|
const cursorChannel = Math.floor(0xFF * brightness * 0.8);
|
|
const cursorColor = "#" + ((cursorChannel) << 16 | 0xFF << 8 | cursorChannel).toString(16).padStart(6, "0");
|
|
|
|
const group = [];
|
|
|
|
// group.push(`<rect fill="none" stroke="red" width="64" height="64" />`);
|
|
group.push(`<use fill="${isCursor ? cursorColor : baseColor}" href="${base}"></use>`);
|
|
|
|
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>`);
|
|
}
|
|
|
|
glyphElements.push([depth, `<g transform="${glyphTransform}">${group.join(" ")}</g>`]);
|
|
}
|
|
|
|
glyphElements.sort((p, q) => q[0] - p[0])
|
|
|
|
output.innerHTML = [
|
|
`<style>path { mix-blend-mode: screen; }</style>`,
|
|
defs.outerHTML,
|
|
`<rect width="100%" height="100%" />`,
|
|
glyphElements.map(([depth, tag]) => tag).join("\n")
|
|
].join("\n");
|
|
|
|
artboard.appendChild(output);
|
|
};
|
|
|
|
// Camera and transform math for the volumetric mode
|
|
const screenSize = vec2.fromValues(1, 1);
|
|
const transform = mat4.create();
|
|
if (volumetric && config.isometric) {
|
|
mat4.rotateX(transform, transform, (Math.PI * 1) / 8);
|
|
mat4.rotateY(transform, transform, (Math.PI * 1) / 4);
|
|
mat4.translate(transform, transform, vec3.fromValues(0, 0, -1));
|
|
mat4.scale(transform, transform, vec3.fromValues(1, 1, 2));
|
|
} else {
|
|
mat4.translate(transform, transform, vec3.fromValues(0, 0, -1));
|
|
}
|
|
const camera = mat4.create();
|
|
|
|
return makePass(
|
|
{
|
|
primary: output,
|
|
},
|
|
Promise.all([
|
|
glyphSVG.loaded,
|
|
baseTexture.loaded,
|
|
glintTexture.loaded,
|
|
// rainPassRaindrop.loaded,
|
|
// rainPassSymbol.loaded,
|
|
// rainPassVert.loaded,
|
|
// rainPassFrag.loaded,
|
|
]),
|
|
(w, h) => {
|
|
output.setAttribute("width", w);
|
|
output.setAttribute("height", h);
|
|
const aspectRatio = w / h;
|
|
|
|
if (volumetric && config.isometric) {
|
|
if (aspectRatio > 1) {
|
|
mat4.ortho(camera, -1.5 * aspectRatio, 1.5 * aspectRatio, -1.5, 1.5, -1000, 1000);
|
|
} else {
|
|
mat4.ortho(camera, -1.5, 1.5, -1.5 / aspectRatio, 1.5 / aspectRatio, -1000, 1000);
|
|
}
|
|
} else {
|
|
mat4.perspective(camera, (Math.PI / 180) * 90, aspectRatio, 0.0001, 1000);
|
|
}
|
|
[screenSize[0], screenSize[1]] = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1];
|
|
},
|
|
(shouldRender) => {
|
|
raindrop();
|
|
render();
|
|
}
|
|
);
|
|
};
|