const DURATION = 31974; const TIMELINE_DURATION = 23000; const BEAT_COUNT = 64; const RED = [210, 12, 28]; const FORMING_LOGO_SCALE = 0.3; const FINAL_LOGO_OFFSET_X = -0; const FINAL_LOGO_OFFSET_Y = -0; const BGM_PATH = "https://stat.neort.io/externalResource/d8gdgq13k37jh9v3l1eg.mp3"; const BGM_DEBUG = true; let startTime = 0; let octagons = []; let fragments = []; let scanSeed = 0; let formingLogoEl; let finalLogoEl; let bgm; let audioStarted = false; function setup() { const canvas = createCanvas(windowWidth, windowHeight); const container = select("#sketch-container"); if (container) { canvas.parent(container); } stylePage(); pixelDensity(min(window.devicePixelRatio || 1, 2)); textFont("Arial"); setupLogoLayers(); setupAudio(); initAnimation(); startExperience(); } function draw() { const elapsed = millis() - startTime; const t = (elapsed % DURATION) * (TIMELINE_DURATION / DURATION); background(0); syncAudioLoop(elapsed); drawAmbientTexture(t); drawBeatFlash(t); drawBackgroundSystem(t); if (between(t, 1800, 9600)) drawOctagonField(t); if (t >= 7600) drawCentralOctagon(t); if (t >= 12400) updateAndDrawFragments(t); between(t, 12400, 19000) ? drawFormingLogo(t) : hideFormingLogo(); t >= 17750 ? drawFinalLogo(t) : hideFinalLogo(); if (between(t, 22400, 23000)) drawGlitch(t); drawVignette(); } function initAnimation() { startTime = millis(); randomSeed(80); noiseSeed(808); scanSeed = random(1000); setupOctagons(); setupFragments(); } function setupLogoLayers() { formingLogoEl = select("#forming-logo"); finalLogoEl = select("#final-logo"); if (!formingLogoEl) formingLogoEl = createImg("https://stat.neort.io/externalResource/d8gd86p3k37jh9v3l03g.png", "ID:8 forming"); if (!finalLogoEl) finalLogoEl = createImg("https://stat.neort.io/externalResource/d8gd0mp3k37jh9v3kv20.png", "ID:8"); styleLogoLayer(formingLogoEl, 2); styleLogoLayer(finalLogoEl, 3); } function stylePage() { const body = select("body"); if (!body) return; body.style("margin", 0); body.style("overflow", "hidden"); body.style("background", "#000"); } function styleLogoLayer(layer, zIndex) { if (!layer) return; const styles = { position: "fixed", display: "block", "z-index": zIndex, top: "50%", left: "50%", width: "min(72vw, 72vmin)", height: "auto", margin: 0, opacity: 0, "pointer-events": "none", "clip-path": "inset(0 0 0 0)", filter: "drop-shadow(0 0 18px rgba(230, 0, 18, 0.42)) contrast(1.08)", transform: "translate(-50%, -50%)", "transform-origin": "center" }; for (const key in styles) layer.style(key, styles[key]); } function setupAudio() { bgm = document.createElement("audio"); bgm.src = BGM_PATH; bgm.preload = "auto"; bgm.loop = false; bgm.volume = 0.82; bgm.setAttribute("playsinline", "true"); if (BGM_DEBUG) { bgm.controls = true; bgm.style.position = "fixed"; bgm.style.left = "12px"; bgm.style.bottom = "12px"; bgm.style.zIndex = "9999"; bgm.style.width = "240px"; } else { bgm.style.display = "none"; } bgm.addEventListener("canplay", () => { console.log("BGM can play:", bgm.duration); }); bgm.addEventListener("error", () => { console.warn("BGM load error:", bgm.error, BGM_PATH); }); document.body.appendChild(bgm); bgm.load(); } function startExperience() { if (audioStarted && bgm && !bgm.paused) return; initAnimation(); if (!bgm) { audioStarted = true; return; } bgm.pause(); try { bgm.currentTime = 0; } catch (e) { console.warn("BGM currentTime reset failed:", e); } bgm.volume = 0.82; bgm.play() .then(() => { audioStarted = true; console.log("BGM started"); }) .catch((err) => { audioStarted = false; console.warn("BGM play failed:", err); }); } function syncAudioLoop(elapsed) { if (!audioStarted || !bgm) return; const t = (elapsed % DURATION) * (TIMELINE_DURATION / DURATION); const fadeOut = easeInOutCubic(constrain((t - 22100) / 900, 0, 1)); bgm.volume = 0.82 * (1 - fadeOut); if (elapsed >= DURATION && bgm.currentTime > 0.2) { startTime = millis(); bgm.currentTime = 0; bgm.volume = 0.82; bgm.play().catch(() => {}); initAnimation(); } } function mousePressed() { startExperience(); } function touchStarted() { startExperience(); return false; } function keyPressed() { startExperience(); } function setupOctagons() { octagons = []; const radius = max(24, getUnit() * 0.043); const pitch = radius * cos(PI / 8) * 2; const colsEachSide = ceil(width / pitch / 2) + 2; const rowsEachSide = ceil(height / pitch / 2) + 2; const totalCols = colsEachSide * 2 + 1; const appearStep = 7; for (let row = -rowsEachSide; row <= rowsEachSide; row++) { for (let col = -colsEachSide; col <= colsEachSide; col++) { const px = width / 2 + col * pitch; const py = height / 2 + row * pitch; const isCenter = col === 0 && row === 0; const columnPhase = abs(col) % 2; const rowPhase = abs(row) % 2; const colIndex = col + colsEachSide; const rowFromBottom = rowsEachSide - row; const rowFromTop = row + rowsEachSide; const bottomLeftColOrder = rowFromBottom % 2 === 0 ? colIndex : totalCols - 1 - colIndex; const topRightColOrder = rowFromTop % 2 === 0 ? totalCols - 1 - colIndex : colIndex; const bottomLeftOrder = rowFromBottom * totalCols + bottomLeftColOrder; const topRightOrder = rowFromTop * totalCols + topRightColOrder; const appearOrder = min(bottomLeftOrder, topRightOrder); octagons.push({ x: px, y: py, radius, squareSize: pitch, row, col, columnPhase, rowPhase, isCenter, delay: appearOrder * appearStep, rowVanishDelay: abs(col) * 16, columnVanishDelay: abs(row) * 18, weight: max(1, radius * 0.055) }); } } } function setupFragments() { fragments = []; const count = 70; const unit = getUnit(); for (let i = 0; i < count; i++) { const start = randomOffscreenPoint(unit); fragments.push({ startX: start.x, startY: start.y, targetX: 0, targetY: 0, size: random(unit * 0.012, unit * 0.045), sides: random([3, 4, 5]), rot: random(TWO_PI), spin: random(-1.2, 1.2), delay: random(0, 520), red: random(120, 230), alpha: random(120, 230) }); } } function drawBackgroundSystem(t) { const active = t > 1850 ? constrain((t - 1850) / 1200, 0, 1) : 0; if (active <= 0) return; const pulse = beatPulse(t, 1); const barPulse = beatPulse(t, 4); push(); stroke(70, 0, 12, (34 + 24 * pulse) * active); strokeWeight(1); const gap = max(44, getUnit() * 0.064); for (let x = (frameCount * 0.06) % gap; x < width; x += gap) line(x, 0, x, height); for (let y = 0; y < height; y += gap) line(0, y, width, y); stroke(180, 0, 24, (85 + 70 * pulse) * active); const scanY = (height * noise(scanSeed + frameCount * 0.012)) % height; line(0, scanY, width, scanY); stroke(230, 0, 28, (55 + 70 * barPulse) * active); strokeWeight(1); const m = min(width, height) * 0.06; const l = min(width, height) * 0.065; line(m, m, m + l, m); line(m, m, m, m + l); line(width - m, m, width - m - l, m); line(width - m, m, width - m, m + l); line(m, height - m, m + l, height - m); line(m, height - m, m, height - m - l); line(width - m, height - m, width - m - l, height - m); line(width - m, height - m, width - m, height - m - l); pop(); } function drawOctagonField(t) { const appearBase = t - 1800; const rowAlternateStart = 5600; const columnAlternateStartFirst = 7000; const columnAlternateStartSecond = 7900; const pulse = beatPulse(t, 1); for (const o of octagons) { const appear = easeOutCubic(constrain((appearBase - o.delay) / 420, 0, 1)); const rowVanish = o.columnPhase === 1 ? easeInOutCubic(constrain((t - rowAlternateStart - o.rowVanishDelay) / 620, 0, 1)) : 0; const columnStart = o.columnPhase === 1 ? columnAlternateStartFirst : columnAlternateStartSecond; const columnVanish = o.columnPhase === 0 ? easeInOutCubic(constrain((t - columnStart - o.columnVanishDelay) / 700, 0, 1)) : 0; const vanish = o.isCenter ? 0 : max(rowVanish, columnVanish); const keep = 1 - vanish; const alpha = 210 * appear * keep; if (alpha <= 1) continue; const centerGrow = o.isCenter ? easeOutCubic(constrain((t - 9000) / 1000, 0, 1)) : 0; const scale = appear * lerp(0.92, 1, keep) * lerp(1, 2.45, centerGrow); const spinProgress = easeInOutCubic(constrain((t - 2600 - o.delay * 0.2) / 2600, 0, 1)); const reverseSpinProgress = easeInOutCubic(constrain((t - 5600 - abs(o.col) * 18) / 4300, 0, 1)); const spin = TWO_PI * spinProgress - TWO_PI * reverseSpinProgress; const morph = spinProgress; push(); translate(o.x, o.y); rotate(spin); setGlow(RED[0], RED[1], RED[2], (12 + 16 * pulse) * appear * keep); stroke(255, 28, 44, alpha * 0.35); strokeWeight(o.weight * 2.2); noFill(); drawSquareToOctagon(0, 0, o.radius * scale, o.squareSize * scale, morph); clearGlow(); stroke(RED[0], RED[1], RED[2], min(255, alpha + 45 * pulse)); strokeWeight(o.weight); fill(95, 0, 12, alpha * 0.5); drawSquareToOctagon(0, 0, o.radius * scale, o.squareSize * scale, morph); pop(); } } function drawCentralOctagon(t) { const unit = getUnit(); const pulse = beatPulse(t, 1); const barPulse = beatPulse(t, 4); const intro = easeOutCubic(constrain((t - 7600) / 700, 0, 1)); const firstGrow = easeOutCubic(constrain((t - 9000) / 1000, 0, 1)); const completed = easeOutCubic(constrain((t - 10700) / 900, 0, 1)); const inner = easeOutCubic(constrain((t - 11100) / 700, 0, 1)); const glitch = t > 22400 && t < 23000 ? random(-3, 3) : 0; const waitingRadius = lerp(0.043, 0.105, firstGrow); const radius = unit * lerp(waitingRadius, 0.19, completed); const shake = sin(constrain((t - 10100) / 420, 0, 1) * PI); const jitter = sin(frameCount * 1.15) * unit * 0.013 * shake; push(); translate(width / 2 + glitch, height / 2 + jitter); rotate(0); setGlow(RED[0], RED[1], RED[2], (22 + 28 * pulse) * intro); stroke(255, 28, 44, (75 + 80 * barPulse) * intro); strokeWeight(max(4, unit * 0.01)); noFill(); drawRegularOctagon(0, 0, radius); clearGlow(); stroke(RED[0], RED[1], RED[2], min(255, (210 + 35 * pulse) * intro)); strokeWeight(max(2, unit * 0.005)); noFill(); drawRegularOctagon(0, 0, radius); stroke(RED[0], RED[1], RED[2], 185 * intro * inner); strokeWeight(max(1.5, unit * 0.0032)); drawRegularOctagon(0, 0, radius * 0.78); pop(); } function updateAndDrawFragments(t) { const base = t - 12400; const unit = getUnit(); const pulse = beatPulse(t, 1); const finalFade = 1 - easeInOutCubic(constrain((t - 15800) / 900, 0, 1)); for (const f of fragments) { const p = easeInOutCubic(constrain((base - f.delay) / 1900, 0, 1)); const z = 1 - p; const x = lerp(f.startX, width / 2 + f.targetX, p); const y = lerp(f.startY, height / 2 + f.targetY, p); const scale = lerp(2.4, 0.75, p) * (1 + z * z * 1.2); const move = constrain((base - f.delay) / 1900, 0, 1); const vanishNearCenter = 1 - easeOutCubic(constrain((move - 0.42) / 0.48, 0, 1)); const alpha = f.alpha * vanishNearCenter * finalFade; if (alpha <= 0.5) continue; push(); translate(x, y); rotate(f.rot + f.spin * p * TWO_PI); setGlow(f.red, 0, 18, (18 + 24 * pulse) * alpha / 255); stroke(f.red, 8, 22, min(255, alpha + 45 * pulse)); fill(f.red, 0, 16, alpha * (0.6 + 0.18 * pulse)); strokeWeight(max(1, unit * 0.002)); drawPolygon(0, 0, f.size * scale, f.sides); clearGlow(); pop(); if (p < 0.96) { stroke(230, 0, 26, alpha * 0.16); line(x, y, lerp(x, width / 2, 0.24), lerp(y, height / 2, 0.24)); } } } function drawFinalLogo(t) { const p = easeOutCubic(constrain((t - 17750) / 1300, 0, 1)); const endFade = 1 - easeInOutCubic(constrain((t - 22100) / 900, 0, 1)); const scale = lerp(0.72, 1, p); const pulse = beatPulse(t, 1); const barPulse = beatPulse(t, 4); const noise = t > 22400 && t < 23000 ? sin(constrain((t - 22400) / 600, 0, 1) * PI) : 0; const scratch = noise > 0 ? random(0, 18) * noise : 0; const glow = 18 + 32 * p + 28 * pulse + 22 * barPulse; if (!finalLogoEl) return; finalLogoEl.style("opacity", p * endFade * (1 - random(0, 0.28) * noise)); finalLogoEl.style("filter", `drop-shadow(0 0 ${glow}px rgba(230, 0, 18, ${0.3 + p * 0.28})) contrast(${1.08 + noise * 1.1}) brightness(${1 - noise * 0.22}) saturate(${1.05 - noise * 0.28})`); finalLogoEl.style("clip-path", `inset(${scratch}% 0 ${scratch * 0.45}% 0)`); finalLogoEl.style("transform", `translate(-50%, -50%) translate(${FINAL_LOGO_OFFSET_X}px, ${FINAL_LOGO_OFFSET_Y}px) scale(${scale + 0.012 * barPulse})`); } function hideFinalLogo() { if (!finalLogoEl) return; finalLogoEl.style("opacity", 0); finalLogoEl.style("filter", "none"); finalLogoEl.style("clip-path", "inset(0 0 0 0)"); finalLogoEl.style("transform", `translate(-50%, -50%) translate(${FINAL_LOGO_OFFSET_X}px, ${FINAL_LOGO_OFFSET_Y}px) scale(0.72)`); } function drawFormingLogo(t) { const appear = easeOutCubic(constrain((t - 12400) / 900, 0, 1)); const reveal = easeInOutCubic(constrain((t - 12400) / 1800, 0, 1)); const morph = easeInOutCubic(constrain((t - 17750) / 1000, 0, 1)); const pulse = beatPulse(t, 1); const scale = FORMING_LOGO_SCALE; const revealShake = sin(frameCount * 1.45) * 9 * (1 - reveal) * appear; const glitch = t > 22400 && t < 23000 ? random(-5, 5) : 0; if (!formingLogoEl) return; formingLogoEl.style("opacity", appear * (1 - morph)); formingLogoEl.style("clip-path", `inset(${(1 - reveal) * 100}% 0 0 0)`); formingLogoEl.style("filter", `drop-shadow(0 0 ${18 + reveal * 16 + pulse * 18}px rgba(230, 0, 18, ${0.32 + reveal * 0.22 + pulse * 0.12})) contrast(${1.05 + reveal * 0.1 + pulse * 0.06})`); formingLogoEl.style("transform", `translate(-50%, -50%) translateX(${glitch + revealShake}px) scale(${scale + 0.01 * pulse})`); } function hideFormingLogo() { if (!formingLogoEl) return; formingLogoEl.style("opacity", 0); formingLogoEl.style("clip-path", "inset(100% 0 0 0)"); formingLogoEl.style("filter", "drop-shadow(0 0 18px rgba(230, 0, 18, 0.42)) contrast(1.08)"); formingLogoEl.style("transform", `translate(-50%, -50%) scale(${FORMING_LOGO_SCALE})`); } function drawAmbientTexture(t) { const active = t > 1200 ? constrain((t - 1200) / 1600, 0, 1) : 0; if (active <= 0) return; push(); noStroke(); for (let i = 0; i < 70; i++) { const x = random(width); const y = random(height); const a = random(8, 30) * active; fill(random([255, 120, 80]), random(0, 24), random(20, 42), a); rect(x, y, random(1, 3), 1); } stroke(120, 0, 18, 18 * active); strokeWeight(1); const bandY = (frameCount * 0.45) % height; line(0, bandY, width, bandY); line(0, (bandY + height * 0.5) % height, width, (bandY + height * 0.5) % height); pop(); } function drawBeatFlash(t) { const pulse = beatPulse(t, 4); if (pulse <= 0.01) return; push(); noStroke(); fill(210, 0, 24, 12 * pulse); rect(0, 0, width, height); pop(); } function drawGlitch(t) { const intensity = sin(constrain((t - 22400) / 600, 0, 1) * PI); const slices = 34; noStroke(); for (let i = 0; i < slices; i++) { if (random() > 0.7) continue; const y = random(height); const h = random(1, 5) * intensity; fill(0, random(80, 210) * intensity); rect(width * 0.16, y, width * 0.68, h); } stroke(230, 230, 230, 75 * intensity); strokeWeight(1); for (let i = 0; i < 36; i++) { const y = random(height); line(random(width * 0.2, width * 0.8), y, random(width * 0.2, width * 0.8), y + random(-3, 3)); } } function drawVignette() { push(); noFill(); for (let i = 0; i < 32; i++) { const alpha = map(i, 0, 31, 0, 145); stroke(0, alpha); strokeWeight(max(width, height) / 28); rect(i * 10, i * 10, width - i * 20, height - i * 20); } pop(); } function drawPolygon(x, y, radius, sides) { beginShape(); for (let i = 0; i < sides; i++) { const angle = -HALF_PI + (TWO_PI * i) / sides; vertex(x + cos(angle) * radius, y + sin(angle) * radius); } endShape(CLOSE); } function drawRegularOctagon(x, y, radius) { beginShape(); for (let i = 0; i < 8; i++) { const angle = -HALF_PI + PI / 8 + (TWO_PI * i) / 8; vertex(x + cos(angle) * radius, y + sin(angle) * radius); } endShape(CLOSE); } function drawSquareToOctagon(x, y, radius, squareSize, amount) { const half = squareSize / 2; beginShape(); for (let i = 0; i < 8; i++) { const angle = -HALF_PI + PI / 8 + (TWO_PI * i) / 8; const dx = cos(angle); const dy = sin(angle); const squareScale = half / max(abs(dx), abs(dy)); const squareX = dx * squareScale; const squareY = dy * squareScale; const octX = dx * radius; const octY = dy * radius; vertex(x + lerp(squareX, octX, amount), y + lerp(squareY, octY, amount)); } endShape(CLOSE); } function setGlow(r, g, b, blur) { drawingContext.shadowColor = `rgba(${r}, ${g}, ${b}, 0.85)`; drawingContext.shadowBlur = blur; } function clearGlow() { drawingContext.shadowBlur = 0; } function randomOffscreenPoint(unit) { const margin = random(unit * 0.55, unit * 1.25); const side = floor(random(4)); if (side === 0) return { x: random(width), y: -margin }; if (side === 1) return { x: width + margin, y: random(height) }; if (side === 2) return { x: random(width), y: height + margin }; return { x: -margin, y: random(height) }; } function between(value, start, end) { return value >= start && value < end; } function beatPulse(t, every) { const beat = TIMELINE_DURATION / BEAT_COUNT; const phase = (t % (beat * every)) / (beat * every); return pow(1 - phase, 4); } function easeOutCubic(x) { return 1 - pow(1 - x, 3); } function easeInCubic(x) { return x * x * x; } function easeInOutCubic(x) { return x < 0.5 ? 4 * x * x * x : 1 - pow(-2 * x + 2, 3) / 2; } function getUnit() { return min(width, height); } function windowResized() { resizeCanvas(windowWidth, windowHeight); initAnimation(); }

IDD ロゴアニメーション

IDD　ロゴアニメーション