Bendik Aagaard Lynghaug
aa1a7fa572
Leptos/Axum app that renders a Question/Alternative/Feature schema loaded from a sibling content repo (portal-content). Kanidm OIDC login, content-driven authorization (Question.qualifies), a generic NATS KV-backed resource + state-transition mechanism (no bespoke "applicant" concept baked into the runtime - it's all content), a SHA-256 DAG chain tying submissions and decisions together, and the "YES - Rasterized Lines" piece (ported from the live uhhm.no site) as the landing hero.
439 lines
16 KiB
JavaScript
439 lines
16 KiB
JavaScript
// Ported from ~/repos/webpage/content/visualize/ah.html ("YES - Rasterized
|
|
// Lines"), the piece currently live at uhhm.no - kept as the actual asset,
|
|
// not reinvented. Two changes from the original: exported as a class (no
|
|
// auto-init on `window load`, since Leptos controls when this mounts) and
|
|
// a `stop()` method that actually breaks the requestAnimationFrame loop -
|
|
// the original ran forever once started, fine for a static page that's
|
|
// the whole document, not fine in an SPA where this hero mounts/unmounts
|
|
// as you navigate.
|
|
|
|
export class RasterizedYES {
|
|
constructor() {
|
|
this.rasterCanvas = document.getElementById('rasterCanvas');
|
|
this.lineCanvas = document.getElementById('lineCanvas');
|
|
this.rasterCtx = this.rasterCanvas.getContext('2d');
|
|
this.lineCtx = this.lineCanvas.getContext('2d');
|
|
|
|
this.lines = [];
|
|
this.rasterData = null;
|
|
this.isActive = true;
|
|
this.destroyed = false;
|
|
this.time = 0;
|
|
|
|
this.mouseX = 0.5;
|
|
this.mouseY = 0.5;
|
|
this.containmentStrength = 0.5;
|
|
this.wiggleAmount = 0.5;
|
|
|
|
this.setupCanvas();
|
|
this.setupMouseTracking();
|
|
this.setupClickHandler();
|
|
this.rasterizeText();
|
|
this.initializeLines();
|
|
this.animate();
|
|
}
|
|
|
|
stop() {
|
|
this.destroyed = true;
|
|
if (this._resizeHandler) {
|
|
window.removeEventListener('resize', this._resizeHandler);
|
|
}
|
|
}
|
|
|
|
setupCanvas() {
|
|
const pixelRatio = window.devicePixelRatio || 1;
|
|
const width = window.innerWidth;
|
|
const height = window.innerHeight;
|
|
|
|
this.rasterCanvas.style.width = width + 'px';
|
|
this.rasterCanvas.style.height = height + 'px';
|
|
this.lineCanvas.style.width = width + 'px';
|
|
this.lineCanvas.style.height = height + 'px';
|
|
|
|
this.rasterCanvas.width = width * pixelRatio;
|
|
this.rasterCanvas.height = height * pixelRatio;
|
|
this.lineCanvas.width = width * pixelRatio;
|
|
this.lineCanvas.height = height * pixelRatio;
|
|
|
|
this.rasterCtx.scale(pixelRatio, pixelRatio);
|
|
this.lineCtx.scale(pixelRatio, pixelRatio);
|
|
|
|
this.displayWidth = width;
|
|
this.displayHeight = height;
|
|
this.pixelRatio = pixelRatio;
|
|
|
|
if (!this._resizeHandler) {
|
|
this._resizeHandler = () => {
|
|
this.setupCanvas();
|
|
this.rasterizeText();
|
|
};
|
|
window.addEventListener('resize', this._resizeHandler);
|
|
}
|
|
}
|
|
|
|
setupMouseTracking() {
|
|
const updatePosition = (clientX, clientY) => {
|
|
this.mouseX = clientX / window.innerWidth;
|
|
this.mouseY = clientY / window.innerHeight;
|
|
this.containmentStrength = 0.1 + (this.mouseX * 0.9);
|
|
this.wiggleAmount = 0.1 + (this.mouseY * 1.9);
|
|
};
|
|
|
|
window.addEventListener('mousemove', (e) => {
|
|
updatePosition(e.clientX, e.clientY);
|
|
});
|
|
|
|
// Scoped to the canvas itself, not `window` - the original
|
|
// standalone page was the whole document, so preventDefault()ing
|
|
// touchmove globally was harmless (nothing else to scroll to).
|
|
// Embedded as a hero above a longer page, that same global
|
|
// handler silently blocks scrolling everywhere, not just over
|
|
// the canvas - this only intercepts touches that start there.
|
|
this.lineCanvas.addEventListener('touchmove', (e) => {
|
|
e.preventDefault();
|
|
if (e.touches.length > 0) {
|
|
const touch = e.touches[0];
|
|
updatePosition(touch.clientX, touch.clientY);
|
|
}
|
|
}, { passive: false });
|
|
|
|
this.lineCanvas.addEventListener('touchstart', (e) => {
|
|
e.preventDefault();
|
|
if (e.touches.length > 0) {
|
|
const touch = e.touches[0];
|
|
updatePosition(touch.clientX, touch.clientY);
|
|
}
|
|
}, { passive: false });
|
|
|
|
this.mouseX = 0.5;
|
|
this.mouseY = 0.5;
|
|
this.containmentStrength = 0.55;
|
|
this.wiggleAmount = 1.05;
|
|
}
|
|
|
|
setupClickHandler() {
|
|
this.lineCanvas.addEventListener('click', () => {
|
|
this.restartAnimation();
|
|
});
|
|
}
|
|
|
|
restartAnimation() {
|
|
this.time = 0;
|
|
this.lineCtx.fillStyle = '#0a0a0a';
|
|
this.lineCtx.fillRect(0, 0, this.displayWidth, this.displayHeight);
|
|
this.initializeLines();
|
|
this.isActive = true;
|
|
}
|
|
|
|
rasterizeText() {
|
|
const width = this.displayWidth;
|
|
const height = this.displayHeight;
|
|
|
|
const aspectRatio = width / height;
|
|
let fontSize;
|
|
if (aspectRatio < 1) {
|
|
fontSize = width * 0.4;
|
|
} else {
|
|
fontSize = height * 0.5;
|
|
}
|
|
|
|
this.fontSize = fontSize;
|
|
|
|
this.rasterCtx.font = `bold ${fontSize}px Arial, sans-serif`;
|
|
this.rasterCtx.textAlign = 'left';
|
|
this.rasterCtx.textBaseline = 'middle';
|
|
|
|
const fullTextMetrics = this.rasterCtx.measureText('YES');
|
|
const textWidth = fullTextMetrics.width;
|
|
const textStartX = (width - textWidth) / 2;
|
|
const textY = height / 2;
|
|
|
|
const letters = ['Y', 'E', 'S'];
|
|
this.letterPositions = [];
|
|
let currentX = textStartX;
|
|
|
|
for (let i = 0; i < letters.length; i++) {
|
|
const letterMetrics = this.rasterCtx.measureText(letters[i]);
|
|
this.letterPositions[i] = {
|
|
x: currentX,
|
|
y: textY,
|
|
width: letterMetrics.width,
|
|
centerX: currentX + letterMetrics.width / 2
|
|
};
|
|
currentX += letterMetrics.width;
|
|
}
|
|
|
|
this.letterRasters = [];
|
|
|
|
for (let i = 0; i < 3; i++) {
|
|
this.rasterCtx.fillStyle = '#111';
|
|
this.rasterCtx.fillRect(0, 0, width, height);
|
|
|
|
this.rasterCtx.fillStyle = '#ffffff';
|
|
this.rasterCtx.fillText(letters[i], this.letterPositions[i].x, this.letterPositions[i].y);
|
|
|
|
this.letterRasters[i] = this.rasterCtx.getImageData(0, 0, this.rasterCanvas.width, this.rasterCanvas.height);
|
|
}
|
|
|
|
this.rasterCtx.fillStyle = '#111';
|
|
this.rasterCtx.fillRect(0, 0, width, height);
|
|
this.rasterCtx.fillStyle = '#ffffff';
|
|
this.rasterCtx.fillText('YES', textStartX, textY);
|
|
|
|
this.rasterData = this.rasterCtx.getImageData(0, 0, this.rasterCanvas.width, this.rasterCanvas.height);
|
|
}
|
|
|
|
isInSpecificLetter(x, y, letterIndex) {
|
|
const canvasX = x * this.pixelRatio;
|
|
const canvasY = y * this.pixelRatio;
|
|
|
|
if (!this.letterRasters || !this.letterRasters[letterIndex] ||
|
|
canvasX < 0 || canvasY < 0 ||
|
|
canvasX >= this.rasterCanvas.width || canvasY >= this.rasterCanvas.height) {
|
|
return false;
|
|
}
|
|
|
|
const index = (Math.floor(canvasY) * this.rasterCanvas.width + Math.floor(canvasX)) * 4;
|
|
const red = this.letterRasters[letterIndex].data[index];
|
|
return red > 128;
|
|
}
|
|
|
|
initializeLines() {
|
|
this.lines = [];
|
|
const numLines = 60;
|
|
|
|
const letterCentroids = this.calculateLetterCentroids();
|
|
|
|
for (let i = 0; i < numLines; i++) {
|
|
const letterIndex = Math.floor(i / (numLines / 3));
|
|
let startX, startY, centerX, centerY;
|
|
|
|
if (letterCentroids[letterIndex]) {
|
|
centerX = letterCentroids[letterIndex].x;
|
|
centerY = letterCentroids[letterIndex].y;
|
|
|
|
const startVariation = this.fontSize * 0.1;
|
|
startX = centerX + (Math.random() - 0.5) * startVariation;
|
|
startY = centerY + (Math.random() - 0.5) * startVariation;
|
|
|
|
if (!this.isInSpecificLetter(startX, startY, letterIndex)) {
|
|
const nearestPoint = this.findNearestSpecificLetterPixel(startX, startY, letterIndex);
|
|
if (nearestPoint) {
|
|
startX = nearestPoint.x;
|
|
startY = nearestPoint.y;
|
|
} else {
|
|
startX = centerX;
|
|
startY = centerY;
|
|
}
|
|
}
|
|
} else {
|
|
const letterPos = this.letterPositions[letterIndex];
|
|
startX = letterPos.centerX;
|
|
startY = letterPos.y;
|
|
centerX = startX;
|
|
centerY = startY;
|
|
}
|
|
|
|
const colors = [
|
|
'hsl(180, 90%, 70%)',
|
|
'hsl(300, 90%, 70%)',
|
|
'hsl(60, 90%, 70%)'
|
|
];
|
|
|
|
this.lines.push({
|
|
relativeX: (startX - centerX) / this.fontSize,
|
|
relativeY: (startY - centerY) / this.fontSize,
|
|
prevRelativeX: (startX - centerX) / this.fontSize,
|
|
prevRelativeY: (startY - centerY) / this.fontSize,
|
|
angle: Math.random() * Math.PI * 2,
|
|
color: colors[letterIndex],
|
|
letterIndex: letterIndex,
|
|
lastSeenInside: { x: (startX - centerX) / this.fontSize, y: (startY - centerY) / this.fontSize },
|
|
outsideDuration: 0
|
|
});
|
|
}
|
|
}
|
|
|
|
calculateLetterCentroids() {
|
|
const centroids = [];
|
|
|
|
for (let letterIndex = 0; letterIndex < 3; letterIndex++) {
|
|
let sumX = 0, sumY = 0, count = 0;
|
|
|
|
const letterPos = this.letterPositions[letterIndex];
|
|
const searchStartX = Math.max(0, letterPos.x - this.fontSize * 0.1);
|
|
const searchEndX = Math.min(this.displayWidth, letterPos.x + letterPos.width + this.fontSize * 0.1);
|
|
const searchStartY = Math.max(0, letterPos.y - this.fontSize * 0.6);
|
|
const searchEndY = Math.min(this.displayHeight, letterPos.y + this.fontSize * 0.6);
|
|
|
|
const step = Math.max(1, Math.floor(this.fontSize * 0.02));
|
|
for (let y = searchStartY; y <= searchEndY; y += step) {
|
|
for (let x = searchStartX; x <= searchEndX; x += step) {
|
|
if (this.isInSpecificLetter(x, y, letterIndex)) {
|
|
sumX += x;
|
|
sumY += y;
|
|
count++;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (count > 0) {
|
|
centroids[letterIndex] = {
|
|
x: sumX / count,
|
|
y: sumY / count
|
|
};
|
|
} else {
|
|
centroids[letterIndex] = {
|
|
x: letterPos.centerX,
|
|
y: letterPos.y
|
|
};
|
|
}
|
|
}
|
|
|
|
return centroids;
|
|
}
|
|
|
|
updateLines() {
|
|
this.time += 0.016;
|
|
if (!this.isActive) return;
|
|
|
|
const letterCentroids = this.calculateLetterCentroids();
|
|
|
|
this.lines.forEach(line => {
|
|
line.prevRelativeX = line.relativeX;
|
|
line.prevRelativeY = line.relativeY;
|
|
|
|
const centroid = letterCentroids[line.letterIndex];
|
|
if (!centroid) return;
|
|
|
|
const currentX = centroid.x + line.relativeX * this.fontSize;
|
|
const currentY = centroid.y + line.relativeY * this.fontSize;
|
|
|
|
const currentlyInside = this.isInSpecificLetter(currentX, currentY, line.letterIndex);
|
|
|
|
if (currentlyInside) {
|
|
line.outsideDuration = 0;
|
|
line.lastSeenInside = { x: line.relativeX, y: line.relativeY };
|
|
} else {
|
|
line.outsideDuration++;
|
|
}
|
|
|
|
const visionDistance = 0.08 * this.fontSize;
|
|
const centerX = currentX + Math.cos(line.angle) * visionDistance;
|
|
const centerY = currentY + Math.sin(line.angle) * visionDistance;
|
|
const leftX = currentX + Math.cos(line.angle - 0.4) * visionDistance;
|
|
const leftY = currentY + Math.sin(line.angle - 0.4) * visionDistance;
|
|
const rightX = currentX + Math.cos(line.angle + 0.4) * visionDistance;
|
|
const rightY = currentY + Math.sin(line.angle + 0.4) * visionDistance;
|
|
|
|
const centerSees = this.isInSpecificLetter(centerX, centerY, line.letterIndex);
|
|
const leftSees = this.isInSpecificLetter(leftX, leftY, line.letterIndex);
|
|
const rightSees = this.isInSpecificLetter(rightX, rightY, line.letterIndex);
|
|
|
|
let speed = 0.02;
|
|
|
|
const attractionThreshold = Math.floor(15 + (1 - this.containmentStrength) * 45);
|
|
|
|
if (line.outsideDuration > attractionThreshold) {
|
|
const targetX = line.lastSeenInside.x;
|
|
const targetY = line.lastSeenInside.y;
|
|
const deltaX = targetX - line.relativeX;
|
|
const deltaY = targetY - line.relativeY;
|
|
const angleToTarget = Math.atan2(deltaY, deltaX);
|
|
|
|
let angleDiff = angleToTarget - line.angle;
|
|
while (angleDiff > Math.PI) angleDiff -= 2 * Math.PI;
|
|
while (angleDiff < -Math.PI) angleDiff += 2 * Math.PI;
|
|
|
|
const baseAttraction = Math.min(0.4, line.outsideDuration / 80);
|
|
const attractionStrength = baseAttraction * this.containmentStrength;
|
|
line.angle += angleDiff * attractionStrength;
|
|
}
|
|
|
|
if (centerSees) {
|
|
const baseWiggle = 0.15;
|
|
line.angle += (Math.random() - 0.5) * baseWiggle * this.wiggleAmount;
|
|
} else {
|
|
speed *= (0.3 + this.containmentStrength * 0.4);
|
|
|
|
const baseTurnStrength = 0.3 + (this.containmentStrength * 0.4);
|
|
const randomTurnAmount = 0.2 * this.wiggleAmount;
|
|
|
|
if (leftSees && !rightSees) {
|
|
line.angle -= baseTurnStrength + Math.random() * randomTurnAmount;
|
|
} else if (rightSees && !leftSees) {
|
|
line.angle += baseTurnStrength + Math.random() * randomTurnAmount;
|
|
} else {
|
|
const randomTurn = (Math.random() - 0.5) * (0.8 + this.wiggleAmount * 0.7);
|
|
line.angle += randomTurn;
|
|
}
|
|
}
|
|
|
|
line.relativeX += Math.cos(line.angle) * speed;
|
|
line.relativeY += Math.sin(line.angle) * speed;
|
|
|
|
line.relativeX = Math.max(-1.7, Math.min(1.7, line.relativeX));
|
|
line.relativeY = Math.max(-1.7, Math.min(1.7, line.relativeY));
|
|
});
|
|
}
|
|
|
|
findNearestSpecificLetterPixel(x, y, letterIndex) {
|
|
const searchRadius = this.fontSize * 0.08;
|
|
const step = Math.max(1, Math.floor(this.fontSize * 0.01));
|
|
let nearestPoint = null;
|
|
let nearestDistance = Infinity;
|
|
|
|
for (let dy = -searchRadius; dy <= searchRadius; dy += step) {
|
|
for (let dx = -searchRadius; dx <= searchRadius; dx += step) {
|
|
const testX = x + dx;
|
|
const testY = y + dy;
|
|
|
|
if (this.isInSpecificLetter(testX, testY, letterIndex)) {
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
if (distance < nearestDistance) {
|
|
nearestDistance = distance;
|
|
nearestPoint = { x: testX, y: testY };
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return nearestPoint;
|
|
}
|
|
|
|
draw() {
|
|
this.lineCtx.fillStyle = 'rgba(10, 10, 10, 0.03)';
|
|
this.lineCtx.fillRect(0, 0, this.displayWidth, this.displayHeight);
|
|
|
|
const letterCentroids = this.calculateLetterCentroids();
|
|
|
|
this.lines.forEach(line => {
|
|
const centroid = letterCentroids[line.letterIndex];
|
|
if (!centroid) return;
|
|
|
|
const currentX = centroid.x + line.relativeX * this.fontSize;
|
|
const currentY = centroid.y + line.relativeY * this.fontSize;
|
|
const prevX = centroid.x + line.prevRelativeX * this.fontSize;
|
|
const prevY = centroid.y + line.prevRelativeY * this.fontSize;
|
|
|
|
if (prevX === currentX && prevY === currentY) return;
|
|
|
|
this.lineCtx.strokeStyle = line.color.replace('70%)', '80%, 0.8)');
|
|
this.lineCtx.lineWidth = this.fontSize * 0.003;
|
|
this.lineCtx.lineCap = 'round';
|
|
|
|
this.lineCtx.beginPath();
|
|
this.lineCtx.moveTo(prevX, prevY);
|
|
this.lineCtx.lineTo(currentX, currentY);
|
|
this.lineCtx.stroke();
|
|
});
|
|
}
|
|
|
|
animate() {
|
|
if (this.destroyed) return;
|
|
this.updateLines();
|
|
this.draw();
|
|
requestAnimationFrame(() => this.animate());
|
|
}
|
|
}
|