// NEORT upload version. Paste this into the JavaScript editor. (async () => { try { const FONT_JSON_URL = "https://stat.neort.io/externalResource/d8tuel2l6of1nn566rm0.json"; const [THREE, { default: RAPIER }, { TextGeometry }, { FontLoader }, { RoomEnvironment }] = await Promise.all([ import("https://esm.sh/three@0.184.0"), import("https://esm.sh/@dimforge/rapier3d-compat@0.19.3"), import("https://esm.sh/three@0.184.0/examples/jsm/geometries/TextGeometry.js"), import("https://esm.sh/three@0.184.0/examples/jsm/loaders/FontLoader.js"), import("https://esm.sh/three@0.184.0/examples/jsm/environments/RoomEnvironment.js"), ]); const app = document.querySelector("#app"); const clockElement = document.querySelector("#clock"); const statsElement = document.querySelector("#stats"); const colorLabelElement = document.querySelector("#color-label"); const textFont = await new FontLoader().loadAsync(FONT_JSON_URL); const textGeometryCache = new Map(); const materialCache = new Map(); const CONFIG = { showStats: false, maxDevicePixelRatio: 0.5, maxDroppedPieces: 30, performance: { shadows: false, dynamicNormals: false, normalUpdateInterval: 4, deformEpsilon: 0.08, maxDeformingPieces: 0, fontVertexDeform: false, }, camera: { fov: 45, position: [0, 18, 30], lookAt: [0, 9, 0], }, physics: { gravity: { x: 0, y: -18, z: 0 }, timestep: 1 / 18, boundaryThickness: 0.7, boundaryDepth: 0.75, bottomPaddingRatio: 0.04, bottomPaddingMin: 0.45, horizontalPaddingRatio: 0.022, horizontalPaddingMin: 0.02, topPaddingRatio: 0.08, topPaddingMin: 1.0, boundaryFriction: 0.08, boundaryRestitution: 0.42, cellColliderHalfSize: 0.5, cellColliderDepth: 0.82, fontColliderPaddingX: 0.04, fontColliderPaddingY: 0.02, fontColliderDepthRatio: 0.58, unitMass: 1.4, cellFriction: 0.08, cellRestitution: 0.62, linearDamping: 0.14, angularDamping: 0.22, initialVelocityX: 1.6, initialVelocityY: -1.5, initialVelocityZ: 0, initialAngularVelocityZ: 0.7, clockRepelRadiusX: 1.15, clockRepelRadiusY: 1.65, clockRepelDownImpulse: -5.5, clockRepelSideImpulse: 1.4, shakeDurationMs: 100, shakeImpulseX: 20, shakeImpulseY: 40, }, clock: { displayScale: 0.86, dropScale: 0.7, yOffset: 0, yRatioFromTop: 0.18, spanRatio: 0.82, groupGapRatio: 0.34, digitGapRatio: 0.072, digitGapMin: 0.95, colonOffsetRatio: 0.18, appearDurationMs: 380, initialScale: 0.18, appearPulse: 0.1, appearSquash: 0.1, }, geometry: { useFontDigits: true, fontSize: 4.0, depth: 1.8, bevelSize: 0.12, bevelThickness: 0.3, bevelSegments: 2, curveSegments: 2, colonRadius: 0.32, colonSegments: 4, }, material: { roughness: 0.2, clearcoat: 0.82, clearcoatRoughness: 0.08, sheen: 0.48, opacity: 0.82, envMapIntensity: 1.35, fresnelStrength: 0.5, fresnelWhiteMix: 0.0, emissiveIntensity: 0.5, }, softBounce: { impactThreshold: 2.2, squishAmount: 0.13, springStiffness: 58, springDamping: 6.8, stretchX: 1.1, squashY: 1.18, stretchZ: 0.72, wobble: 0.58, maxSquish: 1.05, cellInfluenceRadius: 1.28, cellSpread: 0.5, cellOffset: 0.34, cellTwist: 0.12, depthStretch: 0.28, }, lights: { keyIntensity: 1, keyShadowMapSize: 512, rimIntensity: 18, rimDistance: 24, glowIntensity: 3.2, }, effects: { bloom: { enabled: false, preferWebGPU: false, strength: 0.22, radius: 0.2, threshold: 0.82, resolutionScale: 0.42, }, }, }; const backgroundColors = [ { kanji: "桜", romaji: "SAKURA", value: "#FEDFE1" }, { kanji: "今様", romaji: "IMAYOH", value: "#D05A6E" }, { kanji: "山吹", romaji: "YAMABUKI", value: "#FFB11B" }, { kanji: "萌黄", romaji: "MOEGI", value: "#7BA23F" }, { kanji: "白群", romaji: "BYAKUGUN", value: "#78C2C4" }, { kanji: "空", romaji: "SORA", value: "#58B2DC" }, { kanji: "藤", romaji: "FUJI", value: "#8B81C3" }, { kanji: "菖蒲", romaji: "AYAME", value: "#6F3381" }, { kanji: "銀鼠", romaji: "GINNEZUMI", value: "#91989F" }, { kanji: "檜皮", romaji: "HIWADA", value: "#854836" }, ]; const digitColors = { 0: "#F596AA", 1: "#E16B8C", 2: "#F75C2F", 3: "#F6C555", 4: "#A8D8B9", 5: "#81C7D4", 6: "#7DB9DE", 7: "#8B81C3", 8: "#B28FCE", 9: "#D05A6E", ":": "#B5CAA0", }; const state = { pieces: [], clockUnits: [], previousTime: "", previousSecondTens: "", lastClockCheck: 0, world: null, boundaryBodies: [], bounds: { left: -8, right: 8, top: 18, bottom: 0 }, view: { width: 16, height: 18, centerY: 9 }, stats: { frames: 0, lastTime: performance.now(), fps: 0 }, frame: 0, shake: { endTime: 0 }, background: { from: new THREE.Color(backgroundColors[0].value), to: new THREE.Color(backgroundColors[1].value), current: new THREE.Color(backgroundColors[0].value), index: 0, minute: -1, lastUpdate: 0, }, physicsAccumulator: 0, }; await RAPIER.init(); const scene = new THREE.Scene(); scene.background = state.background.from.clone(); const camera = new THREE.PerspectiveCamera(CONFIG.camera.fov, window.innerWidth / window.innerHeight, 0.1, 120); camera.position.set(...CONFIG.camera.position); camera.lookAt(...CONFIG.camera.lookAt); const renderer = await createRenderer(); app.appendChild(renderer.domElement); setupEnvironment(); state.world = new RAPIER.World(CONFIG.physics.gravity); state.world.timestep = CONFIG.physics.timestep; const colonGeometry = new THREE.SphereGeometry( CONFIG.geometry.colonRadius, CONFIG.geometry.colonSegments, CONFIG.geometry.colonSegments, ); setupLights(); setupStage(); statsElement.hidden = !CONFIG.showStats; updateBackgroundLabel(backgroundColors[state.background.index]); updateClock(true); const clock = new THREE.Clock(); renderer.setAnimationLoop(() => { const dt = Math.min(clock.getDelta(), 1 / 30); const now = performance.now(); state.frame += 1; updateClock(false, now); updateClockUnitTweens(); updateStats(); updateBackgroundFade(now); updateFieldShake(); stepPhysics(dt); updatePieces(dt); renderer.render(scene, camera); }); window.addEventListener("resize", resize); async function createRenderer() { const rendererOptions = { antialias: true, alpha: false, powerPreference: "high-performance" }; const webglRenderer = new THREE.WebGLRenderer(rendererOptions); webglRenderer.setPixelRatio(Math.min(window.devicePixelRatio, CONFIG.maxDevicePixelRatio)); webglRenderer.setSize(window.innerWidth, window.innerHeight); webglRenderer.outputColorSpace = THREE.SRGBColorSpace; webglRenderer.toneMapping = THREE.ACESFilmicToneMapping; webglRenderer.toneMappingExposure = 0.72; webglRenderer.shadowMap.enabled = CONFIG.performance.shadows; webglRenderer.shadowMap.type = THREE.PCFSoftShadowMap; return webglRenderer; } function setupEnvironment() { const environment = new RoomEnvironment(); const pmremGenerator = new THREE.PMREMGenerator(renderer); scene.environment = pmremGenerator.fromScene(environment, 0.04).texture; environment.dispose(); pmremGenerator.dispose(); } function setupLights() { const hemi = new THREE.HemisphereLight("#fff8ee", "#3b4150", 2.4); scene.add(hemi); const key = new THREE.DirectionalLight("#fff2d7", CONFIG.lights.keyIntensity * 1.45); key.position.set(-7, 20, 15); key.castShadow = false; scene.add(key); const fill = new THREE.DirectionalLight("#b8e9ff", 0.85); fill.position.set(8, 10, 10); scene.add(fill); const rim = new THREE.PointLight("#66d8ff", CONFIG.lights.rimIntensity, CONFIG.lights.rimDistance); rim.position.set(9, 10, -10); scene.add(rim); const glassGlow = new THREE.PointLight("#ffffff", CONFIG.lights.glowIntensity, 16); glassGlow.position.set(-2, 18, 7); scene.add(glassGlow); } function updateStats() { if (!CONFIG.showStats) return; const now = performance.now(); state.stats.frames += 1; if (now - state.stats.lastTime < 1000) return; state.stats.fps = Math.round((state.stats.frames * 1000) / (now - state.stats.lastTime)); state.stats.frames = 0; state.stats.lastTime = now; statsElement.textContent = `${state.stats.fps} FPS`; } function stepPhysics(dt) { state.physicsAccumulator += dt; if (state.physicsAccumulator < CONFIG.physics.timestep) return; state.world.step(); state.physicsAccumulator %= CONFIG.physics.timestep; } function updateFieldShake() { const now = performance.now(); if (now > state.shake.endTime) return; const elapsed = 1 - (state.shake.endTime - now) / CONFIG.physics.shakeDurationMs; const strength = Math.sin(elapsed * Math.PI) * 0.55; for (const piece of state.pieces) { const position = piece.body.translation(); if (position.y > clockY() - 2) continue; piece.body.applyImpulse( { x: -CONFIG.physics.shakeImpulseX * strength, y: CONFIG.physics.shakeImpulseY * strength, z: 0, }, true, ); } } function updateBackgroundFade(nowMs = performance.now()) { if (nowMs - state.background.lastUpdate < 250) return; state.background.lastUpdate = nowMs; const date = new Date(); const minute = date.getHours() * 60 + date.getMinutes(); if (minute !== state.background.minute) { state.background.minute = minute; state.background.index = minute % backgroundColors.length; state.background.from.copy(scene.background || new THREE.Color(backgroundColors[state.background.index].value)); state.background.to.set(backgroundColors[(state.background.index + 1) % backgroundColors.length].value); updateBackgroundLabel(backgroundColors[state.background.index]); } const progress = (date.getSeconds() + date.getMilliseconds() / 1000) / 60; scene.background = state.background.current.copy(state.background.from).lerp(state.background.to, smoothstep(progress)); } function updateBackgroundLabel(color) { if (!colorLabelElement) return; colorLabelElement.querySelector(".kanji").textContent = color.kanji; colorLabelElement.querySelector(".romaji").textContent = color.romaji; } function smoothstep(value) { return value * value * (3 - 2 * value); } function setupStage() { updateScreenBounds(); rebuildBoundaries(); } function createBoundary(x, y, z, hx, hy, hz) { const body = state.world.createRigidBody(RAPIER.RigidBodyDesc.fixed().setTranslation(x, y, z)); const collider = RAPIER.ColliderDesc.cuboid(hx, hy, hz) .setFriction(CONFIG.physics.boundaryFriction) .setRestitution(CONFIG.physics.boundaryRestitution); state.world.createCollider(collider, body); state.boundaryBodies.push(body); } function rebuildBoundaries() { for (const body of state.boundaryBodies) state.world.removeRigidBody(body); state.boundaryBodies = []; const { left, right, top, bottom } = state.bounds; const width = right - left; const height = top - bottom; const centerX = (left + right) * 0.5; const centerY = (top + bottom) * 0.5; const thickness = CONFIG.physics.boundaryThickness; createBoundary(centerX, bottom - thickness, 0, width * 0.5 + thickness, thickness, CONFIG.physics.boundaryDepth); createBoundary(left - thickness, centerY, 0, thickness, height * 0.5 + thickness, CONFIG.physics.boundaryDepth); createBoundary(right + thickness, centerY, 0, thickness, height * 0.5 + thickness, CONFIG.physics.boundaryDepth); createBoundary(centerX, centerY, -1.45, width * 0.5 + thickness, height * 0.5 + thickness, thickness); createBoundary(centerX, centerY, 1.45, width * 0.5 + thickness, height * 0.5 + thickness, thickness); } function updateClock(forceSpawn, nowMs = performance.now()) { if (!forceSpawn && nowMs - state.lastClockCheck < 120) return; state.lastClockCheck = nowMs; const time = formatTime(new Date()); if (time === state.previousTime) return; clockElement.setAttribute("aria-label", time); [...time].forEach((char, index) => updateClockUnit(char, index, forceSpawn)); updateShakeTrigger(time, forceSpawn); state.previousTime = time; } function updateShakeTrigger(time, forceSpawn) { const secondTens = time[6]; if (!forceSpawn && state.previousSecondTens && secondTens !== state.previousSecondTens) { state.shake.endTime = performance.now() + CONFIG.physics.shakeDurationMs; } state.previousSecondTens = secondTens; } function updateClockUnit(char, index, forceSpawn) { if (char === ":") { if (!state.clockUnits[index]) state.clockUnits[index] = createDisplayedUnit(char, index); return; } const current = state.clockUnits[index]; if (!current) { state.clockUnits[index] = createDisplayedUnit(char, index); return; } if (!forceSpawn && current.label === char) return; dropDisplayedUnit(current, index); state.clockUnits[index] = createDisplayedUnit(char, index); } function formatTime(date) { return [date.getHours(), date.getMinutes(), date.getSeconds()] .map((value) => String(value).padStart(2, "0")) .join(":"); } function createDisplayedUnit(label, timeIndex) { const unit = createVisualUnit(label); unit.baseScale = CONFIG.clock.displayScale; unit.appearTime = performance.now(); unit.group.position.set(timeIndexToWorldX(timeIndex), clockY(), 0); unit.group.scale.setScalar(unit.baseScale * CONFIG.clock.initialScale); scene.add(unit.group); return unit; } function dropDisplayedUnit(unit, timeIndex) { scene.remove(unit.group); unit.baseScale = CONFIG.clock.dropScale; unit.group.scale.setScalar(unit.baseScale); unit.group.position.set(timeIndexToWorldX(timeIndex), clockY(), 0); spawnPiece(unit.label, timeIndex, unit); } function spawnPiece(label, timeIndex, visualUnit = null) { if (state.pieces.length >= CONFIG.maxDroppedPieces) removeOldestPiece(); const unit = visualUnit || createVisualUnit(label); const { cells, bounds, group, material, mesh } = unit; const baseScale = unit.baseScale || 1; const x = visualUnit ? unit.group.position.x : timeIndexToWorldX(timeIndex); const y = visualUnit ? unit.group.position.y : state.bounds.top + 2; const body = state.world.createRigidBody( RAPIER.RigidBodyDesc.dynamic() .setTranslation(x, y, 0) .setRotation({ x: 0, y: 0, z: 0, w: 1 }) .setLinvel( (Math.random() - 0.5) * CONFIG.physics.initialVelocityX, CONFIG.physics.initialVelocityY, (Math.random() - 0.5) * CONFIG.physics.initialVelocityZ, ) .setAngvel({ x: 0, y: 0, z: (Math.random() - 0.5) * CONFIG.physics.initialAngularVelocityZ }) .setLinearDamping(CONFIG.physics.linearDamping) .setAngularDamping(CONFIG.physics.angularDamping) .setCanSleep(true), ); if (CONFIG.geometry.useFontDigits && mesh) { createFontCollider(mesh, baseScale, body); } else { const cellDensity = CONFIG.physics.unitMass / Math.max(cells.length, 1); for (const [gridX, gridY] of cells) { const local = cellLocalPosition(gridX, gridY, bounds).multiplyScalar(baseScale); const collider = RAPIER.ColliderDesc.cuboid( CONFIG.physics.cellColliderHalfSize * baseScale, CONFIG.physics.cellColliderHalfSize * baseScale, CONFIG.physics.cellColliderDepth * baseScale, ) .setTranslation(local.x, local.y, local.z) .setDensity(cellDensity) .setFriction(CONFIG.physics.cellFriction) .setRestitution(CONFIG.physics.cellRestitution); state.world.createCollider(collider, body); } } scene.add(group); state.pieces.push({ body, group, mesh, cells, bounds, material, baseScale, squish: 0, cellSoftness: createCellSoftness(cells, bounds), isDeformed: false, previousVelocityY: 0, seed: Math.random() * Math.PI * 2, }); } function createVisualUnit(label) { const color = digitColors[label] || "#f4f0de"; const material = createPieceMaterial(color); const group = new THREE.Group(); if (label === ":") { const top = new THREE.Mesh(colonGeometry, material); const bottom = new THREE.Mesh(colonGeometry, material); top.position.y = 0.55; bottom.position.y = -0.55; top.castShadow = false; bottom.castShadow = false; group.add(top, bottom); return { label, cells: [], bounds: { width: 1, height: 1 }, group, material }; } const cells = getUnitShape(label); const bounds = getBounds(cells); const mesh = new THREE.Mesh(createDigitGeometry(label, cells, bounds), material); mesh.castShadow = false; mesh.receiveShadow = false; group.add(mesh); return { label, cells, bounds, group, mesh, material, baseScale: 1 }; } function createFontCollider(mesh, baseScale, body) { mesh.geometry.computeBoundingBox(); const box = mesh.geometry.boundingBox; const width = Math.max(0.35, box.max.x - box.min.x); const height = Math.max(0.35, box.max.y - box.min.y); const depth = Math.max(0.35, box.max.z - box.min.z); const center = new THREE.Vector3(); box.getCenter(center); const collider = RAPIER.ColliderDesc.cuboid( width * 0.5 * (1 + CONFIG.physics.fontColliderPaddingX) * baseScale, height * 0.5 * (1 + CONFIG.physics.fontColliderPaddingY) * baseScale, depth * 0.5 * CONFIG.physics.fontColliderDepthRatio * baseScale, ) .setTranslation(center.x * baseScale, center.y * baseScale, center.z * baseScale) .setDensity(CONFIG.physics.unitMass) .setFriction(CONFIG.physics.cellFriction) .setRestitution(CONFIG.physics.cellRestitution); state.world.createCollider(collider, body); } function removeOldestPiece() { const piece = state.pieces.shift(); if (!piece) return; scene.remove(piece.group); state.world.removeRigidBody(piece.body); } function createPieceMaterial(color) { const cached = materialCache.get(color); if (cached) return cached; const material = new THREE.MeshPhysicalMaterial({ color, roughness: CONFIG.material.roughness, metalness: 0, clearcoat: CONFIG.material.clearcoat, clearcoatRoughness: CONFIG.material.clearcoatRoughness, sheen: CONFIG.material.sheen, sheenColor: new THREE.Color("#ffffff"), transmission: 0, thickness: 0.58, ior: 1.36, attenuationColor: new THREE.Color(color), attenuationDistance: 0.82, transparent: true, opacity: CONFIG.material.opacity, depthWrite: true, envMapIntensity: CONFIG.material.envMapIntensity, specularIntensity: 1, specularColor: new THREE.Color("#ffffff"), emissive: new THREE.Color(color), emissiveIntensity: CONFIG.material.emissiveIntensity, }); material.onBeforeCompile = (shader) => { shader.fragmentShader = shader.fragmentShader.replace( "#include ", ` float liquidFresnel = pow(1.0 - clamp(dot(normalize(normal), normalize(vViewPosition)), 0.0, 1.0), 2.15); gl_FragColor.rgb += vec3(0.74, 0.95, 1.0) * liquidFresnel * ${CONFIG.material.fresnelStrength.toFixed(3)}; gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(1.0), liquidFresnel * ${CONFIG.material.fresnelWhiteMix.toFixed(3)}); #include `, ); }; material.customProgramCacheKey = () => "liquid-number-material"; materialCache.set(color, material); return material; } function createCellSoftness(cells, bounds) { return cells.map(([gridX, gridY]) => ({ gridX, gridY, center: cellLocalPosition(gridX, gridY, bounds), value: 0, velocity: 0, phase: Math.random() * Math.PI * 2, })); } function applyCellImpact(piece, impact, direction = "bottom") { if (!piece.cellSoftness?.length) return; const amount = Math.min(CONFIG.softBounce.maxSquish, impact * CONFIG.softBounce.squishAmount); for (const cell of piece.cellSoftness) { const verticalRatio = piece.bounds.height <= 1 ? 1 : cell.gridY / (piece.bounds.height - 1); const directionalWeight = direction === "top" ? 1 - verticalRatio : verticalRatio; const spread = CONFIG.softBounce.cellSpread; const randomWeight = 0.86 + Math.sin(piece.seed + cell.phase) * 0.14; const impulse = amount * (spread + (1 - spread) * directionalWeight) * randomWeight; cell.value = Math.max(cell.value, impulse * 0.38); cell.velocity += impulse * 6.4; } } function updateCellSoftness(piece, dt) { if (!piece.cellSoftness?.length) return; piece.squish = 0; for (const cell of piece.cellSoftness) { const springForce = -CONFIG.softBounce.springStiffness * cell.value; const dampingForce = -CONFIG.softBounce.springDamping * cell.velocity; cell.velocity += (springForce + dampingForce) * dt; cell.value += cell.velocity * dt; cell.value = THREE.MathUtils.clamp(cell.value, -CONFIG.softBounce.maxSquish * 0.34, CONFIG.softBounce.maxSquish); piece.squish = Math.max(piece.squish, Math.abs(cell.value)); } } function deformPieceMesh(piece) { if (!piece.mesh || !piece.cellSoftness?.length) return; const geometry = piece.mesh.geometry; const position = geometry.attributes.position; const original = geometry.userData.originalPositions; if (piece.squish < CONFIG.performance.deformEpsilon) { if (piece.isDeformed) resetPieceMesh(piece); return; } const radius = CONFIG.softBounce.cellInfluenceRadius; const time = performance.now() * 0.006; const depthStretch = 1 + piece.squish * CONFIG.softBounce.depthStretch; for (let i = 0; i < position.count; i += 1) { const index = i * 3; const ox = original[index]; const oy = original[index + 1]; const oz = original[index + 2]; let totalWeight = 0; let squish = 0; let centerX = 0; let centerY = 0; let shiftX = 0; let shiftY = 0; for (const cell of piece.cellSoftness) { const dx = ox - cell.center.x; const dy = oy - cell.center.y; const distance = Math.hypot(dx, dy); if (distance > radius) continue; const weight = Math.pow(1 - distance / radius, 2); const value = cell.value * weight; totalWeight += weight; squish += value; centerX += cell.center.x * weight; centerY += cell.center.y * weight; shiftX += Math.sin(time + cell.phase) * value; shiftY += Math.cos(time * 1.17 + cell.phase) * value; } if (totalWeight > 0) { centerX /= totalWeight; centerY /= totalWeight; squish = Math.min(CONFIG.softBounce.maxSquish, squish / totalWeight); } const localX = ox - centerX; const localY = oy - centerY; const stretchX = 1 + squish * CONFIG.softBounce.stretchX * 0.34; const squashY = 1 - squish * CONFIG.softBounce.squashY * 0.42; const twist = Math.sin(oy * 1.8 + time + piece.seed) * squish * CONFIG.softBounce.cellTwist; position.setXYZ( i, centerX + localX * stretchX + shiftX * CONFIG.softBounce.cellOffset + localY * twist, centerY + localY * squashY + shiftY * CONFIG.softBounce.cellOffset * 0.45, oz * depthStretch, ); } position.needsUpdate = true; piece.isDeformed = true; if (CONFIG.performance.dynamicNormals && state.frame % CONFIG.performance.normalUpdateInterval === 0) { geometry.computeVertexNormals(); } } function resetPieceMesh(piece) { const geometry = piece.mesh.geometry; const position = geometry.attributes.position; const original = geometry.userData.originalPositions; position.array.set(original); position.needsUpdate = true; piece.isDeformed = false; } function updatePieces(dt) { const deformQueue = [...state.pieces] .filter((piece) => piece.squish >= CONFIG.performance.deformEpsilon || piece.isDeformed) .sort((a, b) => b.squish - a.squish); const canDeform = new Set(deformQueue.slice(0, CONFIG.performance.maxDeformingPieces)); for (const piece of state.pieces) { const position = piece.body.translation(); const rotation = piece.body.rotation(); const velocity = piece.body.linvel(); if (Math.abs(position.z) > 0.08 || Math.abs(velocity.z) > 0.02) { piece.body.setTranslation({ x: position.x, y: position.y, z: 0 }, true); piece.body.setLinvel({ x: velocity.x, y: velocity.y, z: 0 }, true); position.z = 0; } repelFromClockUnits(piece, position, velocity); const impact = Math.max(0, piece.previousVelocityY - velocity.y - CONFIG.softBounce.impactThreshold); piece.previousVelocityY = velocity.y; if (impact > 0) applyCellImpact(piece, impact, "bottom"); updateCellSoftness(piece, dt); piece.group.position.set(position.x, position.y, position.z); piece.group.quaternion.set(rotation.x, rotation.y, rotation.z, rotation.w); piece.group.scale.setScalar(piece.baseScale); if (CONFIG.geometry.useFontDigits && !CONFIG.performance.fontVertexDeform) { applyFontSoftScale(piece); } else if (canDeform.has(piece)) { deformPieceMesh(piece); } else if (piece.isDeformed) { resetPieceMesh(piece); } if (position.y < -8) { scene.remove(piece.group); state.world.removeRigidBody(piece.body); piece.dead = true; } } state.pieces = state.pieces.filter((piece) => !piece.dead); } function applyFontSoftScale(piece) { const wobble = Math.sin(performance.now() * 0.008 + piece.seed) * piece.squish * 0.06; piece.group.scale.set( piece.baseScale * (1 + piece.squish * 0.18 + wobble), piece.baseScale * (1 - piece.squish * 0.14), piece.baseScale * (1 + piece.squish * 0.12), ); } function repelFromClockUnits(piece, position, velocity) { for (const unit of state.clockUnits) { if (!unit || !unit.group || state.pieces.some((dropped) => dropped.group === unit.group)) continue; const dx = position.x - unit.group.position.x; const dy = position.y - unit.group.position.y; const isNearX = Math.abs(dx) < CONFIG.physics.clockRepelRadiusX; const isNearY = Math.abs(dy) < CONFIG.physics.clockRepelRadiusY; if (!isNearX || !isNearY || dy < -0.35) continue; const side = dx >= 0 ? 1 : -1; piece.body.setLinvel( { x: velocity.x + side * CONFIG.physics.clockRepelSideImpulse, y: Math.min(velocity.y, CONFIG.physics.clockRepelDownImpulse), z: 0, }, true, ); piece.body.setAngvel({ x: 0, y: 0, z: side * 1.2 }, true); applyCellImpact(piece, CONFIG.softBounce.maxSquish / CONFIG.softBounce.squishAmount, "top"); break; } } function updateClockUnitTweens() { const now = performance.now(); for (const unit of state.clockUnits) { if (!unit || unit.appearDone) continue; const t = Math.min(1, (now - unit.appearTime) / CONFIG.clock.appearDurationMs); const eased = easeOutBack(t); const pulse = 1 + Math.sin(Math.PI * t) * CONFIG.clock.appearPulse; unit.group.scale.set( unit.baseScale * eased * pulse, unit.baseScale * eased * (1 - Math.sin(Math.PI * t) * CONFIG.clock.appearSquash), unit.baseScale * eased * pulse, ); if (t >= 1) { unit.appearDone = true; unit.group.scale.setScalar(unit.baseScale); } } } function easeOutBack(t) { const c1 = 1.70158; const c3 = c1 + 1; return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2); } function getBounds(cells) { let maxX = 0; let maxY = 0; for (const [x, y] of cells) { maxX = Math.max(maxX, x); maxY = Math.max(maxY, y); } return { width: maxX + 1, height: maxY + 1 }; } function cellLocalPosition(gridX, gridY, bounds) { return new THREE.Vector3(gridX - (bounds.width - 1) * 0.5, (bounds.height - 1) * 0.5 - gridY, 0); } function createDigitGeometry(label, cells, bounds) { if (!CONFIG.geometry.useFontDigits) return createFusedDigitGeometry(cells, bounds); const cacheKey = `${label}:${CONFIG.geometry.fontSize}:${CONFIG.geometry.depth}:${CONFIG.geometry.bevelSize}`; const cached = textGeometryCache.get(cacheKey); if (cached) return CONFIG.performance.fontVertexDeform ? clonePreparedGeometry(cached) : cached; const geometry = new TextGeometry(label, { font: textFont, size: CONFIG.geometry.fontSize, depth: CONFIG.geometry.depth, bevelEnabled: true, bevelSize: CONFIG.geometry.bevelSize, bevelThickness: CONFIG.geometry.bevelThickness, bevelSegments: CONFIG.geometry.bevelSegments, curveSegments: CONFIG.geometry.curveSegments, }); geometry.computeBoundingBox(); const box = geometry.boundingBox; const width = box.max.x - box.min.x; const height = box.max.y - box.min.y; const targetHeight = bounds.height; const scale = targetHeight / height; geometry.translate(-box.min.x - width * 0.5, -box.min.y - height * 0.5, -CONFIG.geometry.depth * 0.5); geometry.scale(scale, scale, 1); prepareDynamicGeometry(geometry); textGeometryCache.set(cacheKey, geometry); return CONFIG.performance.fontVertexDeform ? clonePreparedGeometry(geometry) : geometry; } function createFusedDigitGeometry(cells, bounds) { const loops = traceBoundaryLoops(cells, bounds); const outer = loops.reduce((largest, loop) => (Math.abs(loop.area) > Math.abs(largest.area) ? loop : largest)); const shape = pathFromLoop(outer.points); for (const loop of loops) { if (loop === outer) continue; const points = Math.sign(loop.area) === Math.sign(outer.area) ? [...loop.points].reverse() : loop.points; shape.holes.push(pathFromLoop(points)); } const geometry = new THREE.ExtrudeGeometry(shape, { depth: CONFIG.geometry.depth, bevelEnabled: true, bevelSize: CONFIG.geometry.bevelSize, bevelThickness: CONFIG.geometry.bevelThickness, bevelSegments: CONFIG.geometry.bevelSegments, curveSegments: CONFIG.geometry.curveSegments, }); geometry.center(); prepareDynamicGeometry(geometry); return geometry; } function prepareDynamicGeometry(geometry) { geometry.computeVertexNormals(); if (!CONFIG.performance.fontVertexDeform) return; geometry.userData.originalPositions = geometry.attributes.position.array.slice(); geometry.attributes.position.setUsage(THREE.DynamicDrawUsage); } function clonePreparedGeometry(geometry) { const clone = geometry.clone(); clone.userData.originalPositions = clone.attributes.position.array.slice(); clone.attributes.position.setUsage(THREE.DynamicDrawUsage); return clone; } function traceBoundaryLoops(cells, bounds) { const cellSet = new Set(cells.map(([x, y]) => `${x},${y}`)); const edges = []; for (const [x, y] of cells) { if (!cellSet.has(`${x},${y - 1}`)) edges.push([[x, y], [x + 1, y]]); if (!cellSet.has(`${x + 1},${y}`)) edges.push([[x + 1, y], [x + 1, y + 1]]); if (!cellSet.has(`${x},${y + 1}`)) edges.push([[x + 1, y + 1], [x, y + 1]]); if (!cellSet.has(`${x - 1},${y}`)) edges.push([[x, y + 1], [x, y]]); } const nextByStart = new Map(edges.map(([start, end]) => [pointKey(start), end])); const unused = new Set(edges.map(([start]) => pointKey(start))); const loops = []; while (unused.size > 0) { const startKey = unused.values().next().value; const start = startKey.split(",").map(Number); const points = [toShapePoint(start, bounds)]; let current = start; for (let i = 0; i < edges.length; i += 1) { unused.delete(pointKey(current)); const next = nextByStart.get(pointKey(current)); if (!next || pointKey(next) === startKey) break; points.push(toShapePoint(next, bounds)); current = next; } loops.push({ points, area: polygonArea(points) }); } return loops; } function toShapePoint([x, y], bounds) { return new THREE.Vector2(x - bounds.width * 0.5, bounds.height * 0.5 - y); } function pathFromLoop(points) { const path = new THREE.Shape(); path.moveTo(points[0].x, points[0].y); for (let i = 1; i < points.length; i += 1) path.lineTo(points[i].x, points[i].y); path.closePath(); return path; } function polygonArea(points) { let area = 0; for (let i = 0; i < points.length; i += 1) { const current = points[i]; const next = points[(i + 1) % points.length]; area += current.x * next.y - next.x * current.y; } return area * 0.5; } function pointKey(point) { return `${point[0]},${point[1]}`; } function timeIndexToWorldX(index) { const safeWidth = state.bounds.right - state.bounds.left; const span = safeWidth * CONFIG.clock.spanRatio; const groupGap = span * CONFIG.clock.groupGapRatio; const digitGap = Math.max(CONFIG.clock.digitGapMin, span * CONFIG.clock.digitGapRatio); const colonOffset = span * CONFIG.clock.colonOffsetRatio; const positions = [ -groupGap - digitGap, -groupGap + digitGap, -colonOffset, -digitGap, digitGap, colonOffset, groupGap - digitGap, groupGap + digitGap, ]; return positions[index] || 0; } function clockY() { return state.bounds.top - state.view.height * CONFIG.clock.yRatioFromTop - CONFIG.clock.yOffset; } function getUnitShape(digit) { const maps = { 0: ["111", "101", "101", "101", "111"], 1: ["010", "110", "010", "010", "111"], 2: ["111", "001", "111", "100", "111"], 3: ["111", "001", "111", "001", "111"], 4: ["101", "101", "111", "001", "001"], 5: ["111", "100", "111", "001", "111"], 6: ["111", "100", "111", "101", "111"], 7: ["111", "001", "001", "001", "001"], 8: ["111", "101", "111", "101", "111"], 9: ["111", "101", "111", "001", "111"], }; const rows = maps[digit] || maps[0]; const cells = []; rows.forEach((row, y) => { [...row].forEach((value, x) => { if (value === "1") cells.push([x, y]); }); }); return cells; } function resize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setPixelRatio(Math.min(window.devicePixelRatio, CONFIG.maxDevicePixelRatio)); renderer.setSize(window.innerWidth, window.innerHeight); updateScreenBounds(); rebuildBoundaries(); } function updateScreenBounds() { const viewBounds = getVisibleBoundsAtZ(0); const visibleWidth = viewBounds.right - viewBounds.left; const visibleHeight = viewBounds.top - viewBounds.bottom; const horizontalPadding = Math.max(CONFIG.physics.horizontalPaddingMin, visibleWidth * CONFIG.physics.horizontalPaddingRatio); const bottomPadding = Math.max(CONFIG.physics.bottomPaddingMin, visibleHeight * CONFIG.physics.bottomPaddingRatio); const topPadding = Math.max(CONFIG.physics.topPaddingMin, visibleHeight * CONFIG.physics.topPaddingRatio); state.view.width = visibleWidth; state.view.height = visibleHeight; state.view.centerY = (viewBounds.top + viewBounds.bottom) * 0.5; state.bounds.left = viewBounds.left + horizontalPadding; state.bounds.right = viewBounds.right - horizontalPadding; state.bounds.bottom = viewBounds.bottom + bottomPadding; state.bounds.top = viewBounds.top - topPadding; } function getVisibleBoundsAtZ(z) { camera.updateMatrixWorld(); const corners = [ new THREE.Vector3(-1, -1, 0.5), new THREE.Vector3(1, -1, 0.5), new THREE.Vector3(-1, 1, 0.5), new THREE.Vector3(1, 1, 0.5), ].map((corner) => { const worldPoint = corner.unproject(camera); const direction = worldPoint.sub(camera.position).normalize(); const distance = (z - camera.position.z) / direction.z; return camera.position.clone().add(direction.multiplyScalar(distance)); }); return { left: Math.min(...corners.map((point) => point.x)), right: Math.max(...corners.map((point) => point.x)), bottom: Math.min(...corners.map((point) => point.y)), top: Math.max(...corners.map((point) => point.y)), }; } } catch (error) { console.error(error); const stats = document.querySelector("#stats"); if (stats) stats.textContent = `ERROR: ${error.message}`; } })();

#Softbody