p5.disableFriendlyErrors = true; let righteousFont; let logoLayer; let logoBounds; let currentLoopIndex = -1; let currentLoopSeed = 0; let loopStartFrame = 1; const CONFIG = { backgroundColor: 255, textColor: 15, fontSizePt: 152.68, kerning: { TAU: [-233, -248], IDD: [-85, -234] }, secondLineOffsetX: 31, lineAdvanceRatio: 0.72, columnDelay: 0.45, noiseScale: 0.012, stretchPhaseEnd: 0.58, offscreenMargin: 160, timeline: { logoHoldEnd: 45, disperseStart: 45, disperseEnd: 227, emptyHoldEnd: 270, restoreEnd: 450, finishFrame: 480 } }; function preload() { righteousFont = loadFont( "https://stat.neort.io/externalResource/d9l4f5fjl1sb0ob4jem0.ttf", () => { console.log("フォント読み込み成功"); }, (error) => { console.error("フォント読み込み失敗:", error); } ); } function setup() { createCanvas(windowWidth, windowHeight); pixelDensity(1); frameRate(60); createLogoLayer(); restartAnimation(); } function draw() { background(CONFIG.backgroundColor); if (!logoLayer) { return; } const timeline = CONFIG.timeline; const loopLength = timeline.finishFrame; const elapsedFrame = max( 1, frameCount - loopStartFrame + 1 ); const loopIndex = floor( (elapsedFrame - 1) / loopLength ); const loopFrame = ((elapsedFrame - 1) % loopLength) + 1; if (loopIndex !== currentLoopIndex) { beginNewLoop(loopIndex); } if (loopFrame < timeline.logoHoldEnd) { image(logoLayer, 0, 0); return; } let disperseAmount = 0; if ( loopFrame >= timeline.disperseStart && loopFrame < timeline.disperseEnd ) { const progress = map( loopFrame, timeline.disperseStart, timeline.disperseEnd, 0, 1, true ); disperseAmount = easeInOutCubic(progress); } else if ( loopFrame >= timeline.disperseEnd && loopFrame < timeline.emptyHoldEnd ) { disperseAmount = 1; } else if ( loopFrame >= timeline.emptyHoldEnd && loopFrame < timeline.restoreEnd ) { const progress = map( loopFrame, timeline.emptyHoldEnd, timeline.restoreEnd, 0, 1, true ); disperseAmount = 1 - easeInOutCubic(progress); } if (loopFrame >= timeline.restoreEnd) { image(logoLayer, 0, 0); return; } const frameImage = createDispersedLogo(disperseAmount); image(frameImage, 0, 0); } function beginNewLoop(loopIndex) { currentLoopIndex = loopIndex; currentLoopSeed = floor( Math.random() * 1000000000 ); noiseSeed(currentLoopSeed); } function createLogoLayer() { const fontSizePx = pointsToPixels( CONFIG.fontSizePt ); const tempLayer = createGraphics( width, height ); tempLayer.pixelDensity(1); tempLayer.background( CONFIG.backgroundColor ); tempLayer.fill(CONFIG.textColor); tempLayer.noStroke(); tempLayer.textFont(righteousFont); tempLayer.textSize(fontSizePx); tempLayer.textAlign(LEFT, BASELINE); drawStackedLogo( tempLayer, width / 2, height / 2, fontSizePx ); tempLayer.loadPixels(); const tempBounds = findLogoBounds(tempLayer); logoLayer = createGraphics( width, height ); logoLayer.pixelDensity(1); logoLayer.background( CONFIG.backgroundColor ); if (!tempBounds) { logoBounds = null; return; } const contentCenterX = ( tempBounds.left + tempBounds.right ) / 2; const contentCenterY = ( tempBounds.top + tempBounds.bottom ) / 2; const offsetX = width / 2 - contentCenterX; const offsetY = height / 2 - contentCenterY; logoLayer.image( tempLayer, offsetX, offsetY ); logoLayer.loadPixels(); logoBounds = findLogoBounds(logoLayer); } function drawStackedLogo( graphics, centerX, centerY, fontSize ) { const topText = "TAU"; const bottomText = "IDD"; const topWidth = measureKernedText( graphics, topText, CONFIG.kerning.TAU, fontSize ); const bottomWidth = measureKernedText( graphics, bottomText, CONFIG.kerning.IDD, fontSize ); const bottomOffset = CONFIG.secondLineOffsetX; const minimumX = min( 0, bottomOffset ); const maximumX = max( topWidth, bottomOffset + bottomWidth ); const blockWidth = maximumX - minimumX; const startX = centerX - blockWidth / 2 - minimumX; const lineAdvance = fontSize * CONFIG.lineAdvanceRatio; const firstBaselineY = centerY - lineAdvance / 2; const secondBaselineY = centerY + lineAdvance / 2; drawKernedText( graphics, topText, startX, firstBaselineY, CONFIG.kerning.TAU, fontSize ); drawKernedText( graphics, bottomText, startX + bottomOffset, secondBaselineY, CONFIG.kerning.IDD, fontSize ); } function drawKernedText( graphics, textString, startX, baselineY, kerningValues, fontSize ) { const characters = [...textString]; let currentX = startX; for ( let i = 0; i < characters.length; i++ ) { const currentCharacter = characters[i]; graphics.text( currentCharacter, currentX, baselineY ); currentX += graphics.textWidth( currentCharacter ); if ( i >= characters.length - 1 ) { continue; } currentX += kerningToPixels( kerningValues[i] ?? 0, fontSize ); } } function measureKernedText( graphics, textString, kerningValues, fontSize ) { const characters = [...textString]; let totalWidth = 0; for ( let i = 0; i < characters.length; i++ ) { totalWidth += graphics.textWidth( characters[i] ); if ( i >= characters.length - 1 ) { continue; } totalWidth += kerningToPixels( kerningValues[i] ?? 0, fontSize ); } return totalWidth; } function kerningToPixels( kerningValue, fontSize ) { return ( fontSize * (kerningValue / 1000) ); } function pointsToPixels(points) { return points * (96 / 72); } function createDispersedLogo(amount) { const output = logoLayer.get(); output.loadPixels(); logoLayer.loadPixels(); if ( !logoBounds || amount <= 0 ) { return output; } for ( let x = logoBounds.left; x <= logoBounds.right; x++ ) { const columnNoise = noise( x * CONFIG.noiseScale ); const startDelay = columnNoise * CONFIG.columnDelay; const columnAmount = map( amount, startDelay, 1, 0, 1, true ); if (columnAmount <= 0) { continue; } clearOutputColumn(output, x); stretchColumnOut( output, x, columnAmount ); } output.updatePixels(); return output; } function clearOutputColumn(output, x) { for ( let y = 0; y < height; y++ ) { const index = getPixelIndex(x, y); output.pixels[index] = CONFIG.backgroundColor; output.pixels[index + 1] = CONFIG.backgroundColor; output.pixels[index + 2] = CONFIG.backgroundColor; output.pixels[index + 3] = 255; } } function stretchColumnOut( output, x, amount ) { const darkPixels = []; for ( let y = logoBounds.top; y <= logoBounds.bottom; y++ ) { const index = getPixelIndex(x, y); const r = logoLayer.pixels[index]; const g = logoLayer.pixels[index + 1]; const b = logoLayer.pixels[index + 2]; const luminance = r * 0.299 + g * 0.587 + b * 0.114; const darkness = 255 - luminance; if (darkness > 5) { darkPixels.push({ y, darkness, r, g, b }); } } if (darkPixels.length === 0) { return; } const originalTop = darkPixels[0].y; const originalBottom = darkPixels[ darkPixels.length - 1 ].y; darkPixels.sort( (a, b) => b.darkness - a.darkness ); const directionNoise = noise( x * CONFIG.noiseScale, 200 ); const direction = directionNoise > 0.5 ? 1 : -1; const timingNoise = noise( x * CONFIG.noiseScale, 400 ); const adjustedAmount = pow( amount, lerp( 0.8, 1.35, timingNoise ) ); const stretchAmount = map( adjustedAmount, 0, CONFIG.stretchPhaseEnd, 0, 1, true ); const exitAmount = map( adjustedAmount, CONFIG.stretchPhaseEnd, 1, 0, 1, true ); const easedStretch = easeOutCubic(stretchAmount); const easedExit = easeInOutCubic(exitAmount); let destinationTop; let destinationBottom; if (direction > 0) { const stretchedBottom = lerp( originalBottom, height + CONFIG.offscreenMargin, easedStretch ); const exitDistance = ( height - originalTop + CONFIG.offscreenMargin ) * easedExit; destinationTop = originalTop + exitDistance; destinationBottom = stretchedBottom + exitDistance; } else { const stretchedTop = lerp( originalTop, -CONFIG.offscreenMargin, easedStretch ); const exitDistance = ( originalBottom + CONFIG.offscreenMargin ) * easedExit; destinationTop = stretchedTop - exitDistance; destinationBottom = originalBottom - exitDistance; } const visibleTop = max( 0, floor(destinationTop) ); const visibleBottom = min( height - 1, ceil(destinationBottom) ); if ( visibleTop > visibleBottom ) { return; } const fullHeight = max( 1, destinationBottom - destinationTop ); for ( let y = visibleTop; y <= visibleBottom; y++ ) { const normalizedPosition = constrain( ( y - destinationTop ) / fullHeight, 0, 1 ); const sourcePosition = normalizedPosition * ( darkPixels.length - 1 ); const firstIndex = constrain( floor(sourcePosition), 0, darkPixels.length - 1 ); const secondIndex = constrain( firstIndex + 1, 0, darkPixels.length - 1 ); const mixAmount = sourcePosition - firstIndex; const firstPixel = darkPixels[firstIndex]; const secondPixel = darkPixels[secondIndex]; if ( !firstPixel || !secondPixel ) { continue; } const pixelR = lerp( firstPixel.r, secondPixel.r, mixAmount ); const pixelG = lerp( firstPixel.g, secondPixel.g, mixAmount ); const pixelB = lerp( firstPixel.b, secondPixel.b, mixAmount ); const centerDistance = abs( normalizedPosition - 0.5 ) * 2; const edgeDensity = lerp( 1, 0.18, centerDistance * easedStretch ); const lineNoise = noise( x * CONFIG.noiseScale, y * 0.015, 700 ); const textureDensity = lerp( 0.72, 1, lineNoise ); const density = constrain( edgeDensity * textureDensity, 0, 1 ); const index = getPixelIndex(x, y); output.pixels[index] = lerp( CONFIG.backgroundColor, pixelR, density ); output.pixels[index + 1] = lerp( CONFIG.backgroundColor, pixelG, density ); output.pixels[index + 2] = lerp( CONFIG.backgroundColor, pixelB, density ); output.pixels[index + 3] = 255; } const originalOpacity = constrain( 1 - stretchAmount * 0.9 - exitAmount, 0, 1 ); if (originalOpacity <= 0) { return; } for ( const pixelData of darkPixels ) { const index = getPixelIndex( x, pixelData.y ); output.pixels[index] = lerp( output.pixels[index], pixelData.r, originalOpacity ); output.pixels[index + 1] = lerp( output.pixels[index + 1], pixelData.g, originalOpacity ); output.pixels[index + 2] = lerp( output.pixels[index + 2], pixelData.b, originalOpacity ); output.pixels[index + 3] = 255; } } function findLogoBounds(targetLayer) { let left = width; let right = -1; let top = height; let bottom = -1; targetLayer.loadPixels(); for ( let y = 0; y < height; y++ ) { for ( let x = 0; x < width; x++ ) { const index = getPixelIndex(x, y); const r = targetLayer.pixels[index]; const g = targetLayer.pixels[index + 1]; const b = targetLayer.pixels[index + 2]; const luminance = r * 0.299 + g * 0.587 + b * 0.114; const darkness = 255 - luminance; if (darkness <= 5) { continue; } left = min(left, x); right = max(right, x); top = min(top, y); bottom = max(bottom, y); } } if ( right < left || bottom < top ) { return null; } return { left, right, top, bottom }; } function getPixelIndex(x, y) { return 4 * (x + y * width); } function easeOutCubic(value) { return ( 1 - pow(1 - value, 3) ); } function easeInOutCubic(value) { return value < 0.5 ? 4 * value * value * value : 1 - pow( -2 * value + 2, 3 ) / 2; } function restartAnimation() { currentLoopIndex = -1; currentLoopSeed = 0; loopStartFrame = frameCount + 1; loop(); } function windowResized() { resizeCanvas( windowWidth, windowHeight ); pixelDensity(1); if (righteousFont) { createLogoLayer(); } restartAnimation(); } function keyPressed() { if ( key === "r" || key === "R" ) { restartAnimation(); return; } if ( key === "s" || key === "S" ) { saveCanvas( "tau-idd-effects", "png" ); } }

デザインの流動性