let chars = ["i", "d", "d"]; let charGraphics = []; let backLayers = []; let mistParticles = []; let clickSplashes = []; let effectTimer = 0; let effectDuration = 0; let normalTimer = 0; let nextEffectTime = 360; // 全体の通常状態 // normal / transform / violent let effectMode = "normal"; // 各文字の状態 // normal / puddle / mist / square / circle / triangle let charEffects = [ "normal", "normal", "normal" ]; let activeEffectIndices = []; let mistCreated = [ false, false, false ]; // 一文字が大きくなる処理 let bigWarpActive = false; let bigWarpIndex = -1; // 霧が戻る位置 let currentCharPositions = []; // クリック時、文字全部を液体に置き換える let fullLiquidActive = false; let fullLiquidTimer = 0; let fullLiquidDuration = 500; // -------------------------------------------------- // 初期設定 // -------------------------------------------------- function setup() { createCanvas( windowWidth, windowHeight ); colorMode( HSB, 360, 100, 100, 255 ); angleMode(RADIANS); textFont("Arial Black"); textAlign(CENTER, CENTER); createCharacterGraphics(); for (let i = 0; i < 3; i++) { backLayers.push({ offset: random(1000), speed: random(0.004, 0.009), alpha: random(25, 65), sizeOffset: random(-12, 8) }); } } // -------------------------------------------------- // i・d・dを画像として作る // -------------------------------------------------- function createCharacterGraphics() { charGraphics = []; for (let i = 0; i < chars.length; i++) { let pg = createGraphics( 300, 300 ); pg.pixelDensity(1); pg.clear(); pg.textFont("Arial Black"); pg.textAlign(CENTER, CENTER); pg.textSize(230); pg.noStroke(); pg.fill(255); pg.text( chars[i], 150, 145 ); charGraphics.push(pg); } } // -------------------------------------------------- // NEORTでも安定して色を付ける文字描画 // -------------------------------------------------- function drawColoredCharacter( index, baseSize, hue, saturation, brightness, alpha = 255 ) { push(); noStroke(); fill( hue, saturation, brightness, alpha ); textFont("Arial Black"); textAlign(CENTER, CENTER); // 元の300px画像・文字サイズ230pxとほぼ同じ比率 textSize(baseSize * 0.767); // 元画像内の文字位置に合わせる text( chars[index], 0, -baseSize * 0.017 ); pop(); } // -------------------------------------------------- // メイン描画 // -------------------------------------------------- function draw() { background( 0, 0, 96 ); // 全体液体中は、通常のランダム変形を止める if (!fullLiquidActive) { updateEffectState(); } let baseSize = min(width, height) * 0.36; let centerX = width / 2 + sin(frameCount * 0.009) * width * 0.13; let centerY = height / 2 + cos(frameCount * 0.012) * height * 0.08; if (effectMode === "violent") { centerX += random(-110, 110); centerY += random(-80, 80); } // クリック液体中は文字をすべて消す if (!fullLiquidActive) { drawBackText( centerX, centerY, baseSize ); drawMainCharacters( centerX, centerY, baseSize ); updateMistParticles(); } // 大きなクリック液体 updateClickSplashes(); updateFullLiquidState(); } // -------------------------------------------------- // 背景の文字 // -------------------------------------------------- function drawBackText( centerX, centerY, baseSize ) { let backSize = baseSize * 0.7; for ( let i = 0; i < backLayers.length; i++ ) { let layer = backLayers[i]; let t = frameCount * layer.speed + layer.offset; let x = centerX + sin(t * 2.2) * (18 + i * 13); let y = centerY + cos(t * 1.8) * (12 + i * 10); push(); translate(x, y); let rotation = sin(t * 1.4) * 0.15; if (effectMode === "violent") { rotation += random(-0.5, 0.5); } rotate(rotation); let scaleX = 1 + sin(t * 2.1) * 0.25; let scaleY = 1 + cos(t * 1.7) * 0.18; if (effectMode === "violent") { scaleX += random(-0.5, 0.5); scaleY += random(-0.4, 0.4); } scale( scaleX, scaleY ); let hue = getColorHue( x, y, i * 90 ); noFill(); stroke( hue, 65, 72, layer.alpha ); strokeWeight( 1.2 + i * 0.4 ); textSize( backSize + layer.sizeOffset ); text( "idd", 0, 0 ); pop(); } } // -------------------------------------------------- // i・d・dを別々に描く // -------------------------------------------------- function drawMainCharacters( centerX, centerY, baseSize ) { let spacing = baseSize * 0.5; let positions = [ centerX - spacing, centerX, centerX + spacing ]; currentCharPositions = []; for ( let i = 0; i < chars.length; i++ ) { let x = positions[i]; let individualY = centerY + sin( frameCount * 0.018 + i * 2 ) * 8; currentCharPositions[i] = { x: x, y: individualY, baseSize: baseSize }; let hue = getColorHue( x, individualY, i * 115 ); let saturation = 72 + sin( frameCount * 0.018 + i ) * 8; let brightness = 62 + cos( frameCount * 0.014 + i * 1.7 ) * 9; brightness = constrain( brightness, 48, 72 ); let mode = charEffects[i]; if (mode === "puddle") { drawPuddleCharacter( i, x, individualY, baseSize, hue, saturation, brightness ); } else if (mode === "mist") { drawMistCharacter( i, x, individualY, baseSize, hue, saturation, brightness ); } else if ( mode === "square" || mode === "circle" || mode === "triangle" ) { drawGeometricCharacter( mode, i, x, individualY, baseSize, hue, saturation, brightness ); } else { drawNormalCharacter( i, x, individualY, baseSize, hue, saturation, brightness ); } } } // -------------------------------------------------- // 拡大率 // -------------------------------------------------- function getBigWarpScale(index) { if ( !bigWarpActive || index !== bigWarpIndex || effectMode === "normal" ) { return 1; } let progress = constrain( effectTimer / effectDuration, 0, 1 ); let amount = sin(progress * PI); amount = smoothStep(amount); return ( 1 + amount * 0.48 ); } // -------------------------------------------------- // 通常の文字 // -------------------------------------------------- function drawNormalCharacter( index, x, y, baseSize, hue, saturation, brightness ) { push(); translate(x, y); let sx = 1 + sin( frameCount * 0.022 + index * 2 ) * 0.16; let sy = 1 + cos( frameCount * 0.018 + index ) * 0.13; let rotation = sin( frameCount * 0.011 + index * 2 ) * 0.07; if (effectMode === "violent") { sx += random(-0.8, 0.8); sy += random(-0.55, 0.55); rotation += random(-0.45, 0.45); translate( random(-45, 45), random(-35, 35) ); } let bigScale = getBigWarpScale(index); sx *= bigScale; sy *= bigScale; rotate(rotation); scale(sx, sy); // tint＋imageではなくtextで直接描く drawColoredCharacter( index, baseSize, hue, saturation, brightness, 255 ); pop(); } // -------------------------------------------------- // 水たまり // -------------------------------------------------- function drawPuddleCharacter( index, x, y, baseSize, hue, saturation, brightness ) { push(); translate(x, y); let bigScale = getBigWarpScale(index); scale(bigScale); let progress = constrain( effectTimer / effectDuration, 0, 1 ); let meltAmount; if (progress < 0.2) { meltAmount = smoothStep( map( progress, 0, 0.2, 0, 1 ) ); } else if (progress < 0.8) { meltAmount = 1; } else { meltAmount = smoothStep( map( progress, 0.8, 1, 1, 0 ) ); } imageMode(CENTER); let textScaleX = lerp( 1, 1.25, meltAmount ); let textScaleY = lerp( 1, 0.1, meltAmount ); let textAlpha = lerp( 255, 0, meltAmount ); push(); translate( 0, meltAmount * baseSize * 0.29 ); scale( textScaleX, textScaleY ); drawColoredCharacter( index, baseSize, hue, saturation, brightness, textAlpha ); pop(); noStroke(); fill( hue, saturation, brightness, 245 * meltAmount ); let puddleY = baseSize * 0.32; let puddleWidth = baseSize * lerp( 0.15, 1.02, meltAmount ); let puddleHeight = baseSize * lerp( 0.08, 0.27, meltAmount ); beginShape(); let pointCount = 90; for ( let i = 0; i <= pointCount; i++ ) { let angle = map( i, 0, pointCount, 0, TWO_PI ); let liquidNoise = noise( cos(angle) * 0.8 + 10, sin(angle) * 0.8 + 10, frameCount * 0.012 ); let wave = sin( angle * 3 + frameCount * 0.027 ) * 0.035; let radiusVariation = 0.9 + liquidNoise * 0.16 + wave; let px = cos(angle) * puddleWidth * 0.5 * radiusVariation; let py = sin(angle) * puddleHeight * 0.5 * radiusVariation; if (sin(angle) > 0) { py *= 1.1; } curveVertex( px, puddleY + py ); } endShape(CLOSE); fill( (hue + 18) % 360, saturation * 0.45, min( 82, brightness + 12 ), 55 * meltAmount ); ellipse( -puddleWidth * 0.1, puddleY - puddleHeight * 0.1, puddleWidth * 0.42, puddleHeight * 0.1 ); pop(); } // -------------------------------------------------- // 霧 // -------------------------------------------------- function drawMistCharacter( index, x, y, baseSize, hue, saturation, brightness ) { let progress = constrain( effectTimer / effectDuration, 0, 1 ); if (!mistCreated[index]) { createMistFromCharacter( index, x, y, baseSize, hue ); mistCreated[index] = true; } let characterAlpha = 0; let returnScale = 1; if (progress < 0.2) { characterAlpha = map( progress, 0, 0.2, 255, 0 ); } else if (progress > 0.72) { let returnProgress = map( progress, 0.72, 1, 0, 1 ); let easedReturn = smoothStep( returnProgress ); characterAlpha = easedReturn * 255; returnScale = lerp( 0.9, 1, easedReturn ); } if (characterAlpha > 0) { push(); translate(x, y); scale( returnScale * getBigWarpScale(index) ); drawColoredCharacter( index, baseSize, hue, saturation, brightness, characterAlpha ); pop(); } } // -------------------------------------------------- // 正方形・正円・正三角形 // -------------------------------------------------- function drawGeometricCharacter( shapeMode, index, x, y, baseSize, hue, saturation, brightness ) { push(); translate(x, y); let progress = constrain( effectTimer / effectDuration, 0, 1 ); let shapeAmount; if (progress < 0.22) { shapeAmount = smoothStep( map( progress, 0, 0.22, 0, 1 ) ); } else if (progress < 0.78) { shapeAmount = 1; } else { shapeAmount = smoothStep( map( progress, 0.78, 1, 1, 0 ) ); } scale( getBigWarpScale(index) ); let textScale = lerp( 1, 0.72, shapeAmount ); let textAlpha = lerp( 255, 0, shapeAmount ); push(); scale(textScale); drawColoredCharacter( index, baseSize, hue, saturation, brightness, textAlpha ); pop(); let shapeSize = baseSize * lerp( 0.1, 0.7, shapeAmount ); rotate( sin( frameCount * 0.016 ) * 0.04 * shapeAmount ); noStroke(); fill( hue, saturation, brightness, 245 * shapeAmount ); if (shapeMode === "square") { rectMode(CENTER); rect( 0, 0, shapeSize, shapeSize ); } else if (shapeMode === "circle") { ellipseMode(CENTER); ellipse( 0, 0, shapeSize, shapeSize ); } else if (shapeMode === "triangle") { let triangleHeight = shapeSize * sqrt(3) / 2; triangle( 0, -triangleHeight * 2 / 3, -shapeSize / 2, triangleHeight / 3, shapeSize / 2, triangleHeight / 3 ); } pop(); } // -------------------------------------------------- // 文字画像から霧を作る // -------------------------------------------------- function createMistFromCharacter( index, x, y, baseSize, baseHue ) { let pg = charGraphics[index]; pg.loadPixels(); let sampleStep = 7; let bigScale = getBigWarpScale(index); for ( let py = 0; py < pg.height; py += sampleStep ) { for ( let px = 0; px < pg.width; px += sampleStep ) { let pixelIndex = 4 * ( px + py * pg.width ); let alpha = pg.pixels[ pixelIndex + 3 ]; if ( alpha > 100 && random(1) < 0.55 ) { let offsetX = map( px, 0, pg.width, -baseSize / 2, baseSize / 2 ) * bigScale; let offsetY = map( py, 0, pg.height, -baseSize / 2, baseSize / 2 ) * bigScale; mistParticles.push({ charIndex: index, x: x + offsetX, y: y + offsetY, offsetX: offsetX, offsetY: offsetY, vx: random( -2.5, 2.5 ), vy: random( -2.8, 0.5 ), size: random( 2, 9 ), hue: ( baseHue + random( -20, 20 ) + 360 ) % 360 }); } } } } // -------------------------------------------------- // 霧を動かす // -------------------------------------------------- function updateMistParticles() { for ( let i = mistParticles.length - 1; i >= 0; i-- ) { let particle = mistParticles[i]; let particleIsMist = charEffects[ particle.charIndex ] === "mist"; let progress = 0; if (particleIsMist) { progress = constrain( effectTimer / effectDuration, 0, 1 ); } if ( particleIsMist && progress < 0.72 ) { particle.vx += sin( frameCount * 0.045 + particle.y * 0.015 ) * 0.035; particle.vx += random( -0.04, 0.04 ); particle.vy -= 0.004; particle.x += particle.vx; particle.y += particle.vy; } else if (particleIsMist) { let returnProgress = map( progress, 0.72, 1, 0, 1 ); let easedReturn = smoothStep( returnProgress ); let charPosition = currentCharPositions[ particle.charIndex ]; if (charPosition) { let targetX = charPosition.x + particle.offsetX; let targetY = charPosition.y + particle.offsetY; particle.x = lerp( particle.x, targetX, 0.035 + easedReturn * 0.22 ); particle.y = lerp( particle.y, targetY, 0.035 + easedReturn * 0.22 ); } } let currentHue = ( particle.hue + frameCount * 0.8 ) % 360; let particleScale = 1; if (progress > 0.72) { particleScale = map( progress, 0.72, 1, 1, 0.25 ); } let particleAlpha = map( progress, 0.84, 1, 190, 0, true ); noStroke(); fill( currentHue, 62, 72, particleAlpha ); ellipse( particle.x, particle.y, particle.size * 1.8 * particleScale, particle.size * particleScale ); if ( !particleIsMist || progress >= 1 ) { mistParticles.splice( i, 1 ); } } } // -------------------------------------------------- // 虹色 // -------------------------------------------------- function getColorHue( x, y, offset ) { let colorWave = x * 0.25 + y * 0.25 - frameCount * 1.5 + offset; return ( ( colorWave % 360 ) + 360 ) % 360; } // -------------------------------------------------- // 滑らかな変化 // -------------------------------------------------- function smoothStep(value) { value = constrain( value, 0, 1 ); return ( value * value * ( 3 - 2 * value ) ); } // -------------------------------------------------- // ランダムな形を選ぶ // -------------------------------------------------- function getRandomTransformMode() { let modes = [ "puddle", "mist", "square", "circle", "triangle" ]; return random(modes); } // -------------------------------------------------- // 一つ目と違う形を選ぶ // -------------------------------------------------- function getDifferentTransformMode( firstMode ) { let modes = [ "puddle", "mist", "square", "circle", "triangle" ]; let candidates = modes.filter( mode => mode !== firstMode ); return random(candidates); } // -------------------------------------------------- // 通常変形の状態更新 // -------------------------------------------------- function updateEffectState() { if (effectMode === "normal") { normalTimer++; if ( normalTimer > nextEffectTime ) { startRandomEffect(); } } else { effectTimer++; if ( effectTimer > effectDuration ) { resetNormalEffect(); nextEffectTime = random( 300, 650 ); } } } // -------------------------------------------------- // 通常状態へ戻す // -------------------------------------------------- function resetNormalEffect() { effectMode = "normal"; effectTimer = 0; normalTimer = 0; bigWarpActive = false; bigWarpIndex = -1; charEffects = [ "normal", "normal", "normal" ]; activeEffectIndices = []; mistCreated = [ false, false, false ]; mistParticles = []; } // -------------------------------------------------- // ランダム変形を開始 // -------------------------------------------------- function startRandomEffect() { resetNormalEffect(); let randomValue = random(1); if (randomValue > 0.93) { effectMode = "violent"; effectDuration = floor( random( 20, 45 ) ); return; } effectMode = "transform"; // 約35％で二文字同時 let effectCount = random(1) < 0.35 ? 2 : 1; let firstIndex = floor( random( chars.length ) ); activeEffectIndices.push( firstIndex ); if (effectCount === 2) { let secondIndex; do { secondIndex = floor( random( chars.length ) ); } while ( secondIndex === firstIndex ); activeEffectIndices.push( secondIndex ); } let firstMode = getRandomTransformMode(); charEffects[ activeEffectIndices[0] ] = firstMode; if (effectCount === 2) { // 半分は同じ形 if (random(1) < 0.5) { charEffects[ activeEffectIndices[1] ] = firstMode; } // 半分は違う形 else { charEffects[ activeEffectIndices[1] ] = getDifferentTransformMode( firstMode ); } } // 約3回に1回大きくなる bigWarpActive = random(3) < 1; if (bigWarpActive) { bigWarpIndex = random( activeEffectIndices ); } else { bigWarpIndex = -1; } if ( charEffects.includes( "mist" ) ) { effectDuration = floor( random( 480, 650 ) ); } else if ( charEffects.includes( "puddle" ) ) { effectDuration = floor( random( 420, 560 ) ); } else { effectDuration = floor( random( 380, 500 ) ); } } // -------------------------------------------------- // クリック // -------------------------------------------------- function mousePressed() { // 普段の文字変形を止める resetNormalEffect(); // 古いクリック液体を消す clickSplashes = []; // 全文字を液体に置換 fullLiquidActive = true; fullLiquidTimer = 0; fullLiquidDuration = 500; // 画面中央に大きな液体 createClickSplash( width / 2, height / 2 ); } // -------------------------------------------------- // クリック液体の状態更新 // -------------------------------------------------- function updateFullLiquidState() { if (!fullLiquidActive) { return; } fullLiquidTimer++; if ( fullLiquidTimer > fullLiquidDuration ) { fullLiquidActive = false; fullLiquidTimer = 0; clickSplashes = []; normalTimer = 0; nextEffectTime = random( 300, 650 ); } } // -------------------------------------------------- // 大きな2色液体を作る // -------------------------------------------------- function createClickSplash(x, y) { let hue1 = random(360); let hue2 = ( hue1 + random( 70, 170 ) ) % 360; let pointCount = floor( random( 34, 50 ) ); let radii = []; for ( let i = 0; i < pointCount; i++ ) { let radius = random( 0.72, 1.05 ); // 周囲に細長い突起を作る if (random(1) < 0.2) { radius *= random( 1.35, 2.3 ); } radii.push(radius); } let drops = []; let dropCount = floor( random( 10, 20 ) ); for ( let i = 0; i < dropCount; i++ ) { drops.push({ angle: random(TWO_PI), distance: random( 0.9, 1.85 ), size: random( 0.025, 0.12 ), stretch: random( 0.8, 2.5 ), rotation: random(TWO_PI) }); } clickSplashes.push({ x: x, y: y, // 以前よりかなり大きい radius: random( min(width, height) * 0.27, min(width, height) * 0.38 ), hue1: hue1, hue2: hue2, radii: radii, drops: drops, life: 0, duration: fullLiquidDuration, rotation: random( -0.18, 0.18 ), // 横に潰れた形 squashX: random( 1.2, 1.55 ), squashY: random( 0.58, 0.82 ) }); } // -------------------------------------------------- // クリック液体を更新 // -------------------------------------------------- function updateClickSplashes() { for ( let i = clickSplashes.length - 1; i >= 0; i-- ) { let splash = clickSplashes[i]; splash.life++; let progress = constrain( splash.life / splash.duration, 0, 1 ); drawClickSplash( splash, progress ); if (progress >= 1) { clickSplashes.splice( i, 1 ); } } } // -------------------------------------------------- // 大きな液体を描く // -------------------------------------------------- function drawClickSplash( splash, progress ) { let appearAmount; // 最初の18％で広がる if (progress < 0.18) { let p = map( progress, 0, 0.18, 0, 1 ); appearAmount = easeOutBack(p); } // 中央で液体の形を維持 else if (progress < 0.78) { appearAmount = 1; } // 最後に縮む else { let p = map( progress, 0.78, 1, 1, 0 ); appearAmount = smoothStep(p); } let alpha = 240; if (progress > 0.78) { alpha = map( progress, 0.78, 1, 240, 0 ); } push(); translate( splash.x, splash.y ); rotate( splash.rotation ); let liquidMove = sin( frameCount * 0.018 + splash.x * 0.01 ) * 0.025; scale( splash.squashX * appearAmount * ( 1 + liquidMove ), splash.squashY * appearAmount * ( 1 - liquidMove ) ); drawTwoColorSplashBody( splash, alpha ); drawSplashDrops( splash, alpha, appearAmount ); drawSplashHighlight( splash, alpha ); pop(); } // -------------------------------------------------- // 2色グラデーションの本体 // -------------------------------------------------- function drawTwoColorSplashBody( splash, alpha ) { let points = []; let count = splash.radii.length; for ( let i = 0; i < count; i++ ) { let angle = map( i, 0, count, 0, TWO_PI ); let wobble = sin( angle * 3 + frameCount * 0.025 ) * 0.035; let radius = splash.radius * ( splash.radii[i] + wobble ); points.push({ x: cos(angle) * radius, y: sin(angle) * radius }); } let ctx = drawingContext; ctx.save(); ctx.beginPath(); let first = points[0]; let last = points[ points.length - 1 ]; ctx.moveTo( ( first.x + last.x ) / 2, ( first.y + last.y ) / 2 ); for ( let i = 0; i < points.length; i++ ) { let current = points[i]; let next = points[ ( i + 1 ) % points.length ]; let middleX = ( current.x + next.x ) / 2; let middleY = ( current.y + next.y ) / 2; ctx.quadraticCurveTo( current.x, current.y, middleX, middleY ); } ctx.closePath(); let gradient = ctx.createLinearGradient( -splash.radius, 0, splash.radius, 0 ); let color1 = color( splash.hue1, 78, 66, alpha ); let color2 = color( splash.hue2, 78, 66, alpha ); gradient.addColorStop( 0, color1.toString() ); gradient.addColorStop( 0.45, color1.toString() ); gradient.addColorStop( 0.55, color2.toString() ); gradient.addColorStop( 1, color2.toString() ); ctx.fillStyle = gradient; ctx.fill(); ctx.restore(); } // -------------------------------------------------- // 周囲の小さい飛沫 // -------------------------------------------------- function drawSplashDrops( splash, alpha, appearAmount ) { noStroke(); for ( let i = 0; i < splash.drops.length; i++ ) { let drop = splash.drops[i]; let distance = splash.radius * drop.distance * appearAmount; let x = cos( drop.angle ) * distance; let y = sin( drop.angle ) * distance; let mixAmount = constrain( map( x, -splash.radius, splash.radius, 0, 1 ), 0, 1 ); let dropColor = lerpColor( color( splash.hue1, 78, 66, alpha ), color( splash.hue2, 78, 66, alpha ), mixAmount ); fill(dropColor); push(); translate(x, y); rotate(drop.rotation); let dropSize = splash.radius * drop.size; ellipse( 0, 0, dropSize * drop.stretch, dropSize ); pop(); } } // -------------------------------------------------- // 液体表面の光沢 // -------------------------------------------------- function drawSplashHighlight( splash, alpha ) { noStroke(); fill( 0, 0, 100, alpha * 0.09 ); ellipse( -splash.radius * 0.22, -splash.radius * 0.22, splash.radius * 0.75, splash.radius * 0.12 ); fill( 0, 0, 100, alpha * 0.05 ); ellipse( splash.radius * 0.2, splash.radius * 0.1, splash.radius * 0.46, splash.radius * 0.08 ); } // -------------------------------------------------- // 勢いよく広がる動き // -------------------------------------------------- function easeOutBack(value) { value = constrain( value, 0, 1 ); let c1 = 1.70158; let c3 = c1 + 1; return ( 1 + c3 * pow( value - 1, 3 ) + c1 * pow( value - 1, 2 ) ); } // -------------------------------------------------- // 画面サイズ変更 // -------------------------------------------------- function windowResized() { resizeCanvas( windowWidth, windowHeight ); }

#tau-p5-2026a