let bands = []; let phase = 0; // 0：爆炸停留 // 1：展开成校徽 // 2：校徽停留 // 3：返回爆炸 let phaseStart = 0; const TRANSITION_TIME = 75; const WAIT_BURST = 70; const WAIT_LOGO = 180; const cx = 300; const cy = 285; const bgColor = "#F2F0EB"; const blackColor = "#111111"; const pinkColor = "#ED217C"; let smallStarX = 300; let smallStarY = 285; let smallStarSize = 0; let starStart = 0; let starActive = false; const STAR_INTERVAL = 55; const STAR_DURATION = 34; function setup() { createCanvas(600, 600); angleMode(RADIANS); strokeJoin(MITER); createLogoBands(); phaseStart = frameCount; } function draw() { background(bgColor); updatePhase(); let progress = getLogoProgress(); for (let band of bands) { band.display(progress); } drawMainBurst(progress); updateSmallStar(progress); if (smallStarSize > 1) { drawBurst( smallStarX, smallStarY, smallStarSize, 10, 5 ); } drawCaption(); } function updatePhase() { let elapsed = frameCount - phaseStart; if (phase === 0 && elapsed >= WAIT_BURST) { phase = 1; phaseStart = frameCount; } else if ( phase === 1 && elapsed >= TRANSITION_TIME ) { phase = 2; phaseStart = frameCount; starActive = false; smallStarSize = 0; } else if ( phase === 2 && elapsed >= WAIT_LOGO ) { phase = 3; phaseStart = frameCount; starActive = false; smallStarSize = 0; } else if ( phase === 3 && elapsed >= TRANSITION_TIME ) { phase = 0; phaseStart = frameCount; } } function getLogoProgress() { let elapsed = frameCount - phaseStart; if (phase === 0) { return 0; } if (phase === 1) { let t = constrain( elapsed / TRANSITION_TIME, 0, 1 ); return easeInOutCubic(t); } if (phase === 2) { return 1; } let t = constrain( elapsed / TRANSITION_TIME, 0, 1 ); return 1 - easeInOutCubic(t); } function createLogoBands() { bands = []; const left = 155; const right = 445; const gapLeft = 286; const gapRight = 314; bands.push( new Band( makeArcPoints( left, right, 140, 153, 40 ), 30, 0 ) ); let rows = [205, 250, 295]; for (let y of rows) { bands.push( new Band( makeLinePoints( left, gapLeft, y, 18 ), 30, random(0.02, 0.08) ) ); bands.push( new Band( makeLinePoints( gapRight, right, y, 18 ), 30, random(0.02, 0.08) ) ); } bands.push( new Band( makeLinePoints( left, right, 340, 38 ), 30, 0.05 ) ); bands.push( new Band( makeArcPoints( left, right, 397, 384, 40 ), 30, 0.08 ) ); } function makeLinePoints( x1, x2, y, count ) { let points = []; for (let i = 0; i < count; i++) { let t = i / (count - 1); points.push({ x: lerp(x1, x2, t), y: y }); } return points; } function makeArcPoints( x1, x2, edgeY, middleY, count ) { let points = []; for (let i = 0; i < count; i++) { let t = i / (count - 1); let x = lerp(x1, x2, t); let y = edgeY + (middleY - edgeY) * sin(PI * t); points.push({ x: x, y: y }); } return points; } class Band { constructor( targetPoints, thickness, delay ) { this.targetPoints = targetPoints; this.thickness = thickness; this.delay = delay; this.seed = random(1000); this.startAngle = random(TWO_PI); this.startRadius = random(5, 22); this.startX = cx + cos(this.startAngle) * this.startRadius; this.startY = cy + sin(this.startAngle) * this.startRadius; this.curveAngle = this.startAngle + random(-0.8, 0.8); this.curveAmount = random(28, 55); } display(globalProgress) { let localProgress = constrain( (globalProgress - this.delay) / (1 - this.delay), 0, 1 ); localProgress = easeInOutCubic(localProgress); let currentPoints = []; for ( let i = 0; i < this.targetPoints.length; i++ ) { let target = this.targetPoints[i]; let pointT = i / (this.targetPoints.length - 1); let pointDelay = pointT * 0.06; let p = constrain( (localProgress - pointDelay) / 0.94, 0, 1 ); p = easeInOutCubic(p); let x = lerp( this.startX, target.x, p ); let y = lerp( this.startY, target.y, p ); let flowStrength = sin(PI * p); let wave = sin( pointT * PI + this.seed ); x += cos(this.curveAngle) * this.curveAmount * flowStrength * wave; y += sin(this.curveAngle) * this.curveAmount * flowStrength * wave; currentPoints.push({ x: x, y: y }); } let currentThickness = lerp( 9, this.thickness, localProgress ); drawBandShape( currentPoints, currentThickness ); } } function drawBandShape( points, thickness ) { let normals = []; for ( let i = 0; i < points.length; i++ ) { normals.push( getNormal(points, i) ); } fill(blackColor); noStroke(); beginShape(); // 上侧 for ( let i = 0; i < points.length; i++ ) { vertex( points[i].x + normals[i].x * thickness / 2, points[i].y + normals[i].y * thickness / 2 ); } // 下侧 for ( let i = points.length - 1; i >= 0; i-- ) { vertex( points[i].x - normals[i].x * thickness / 2, points[i].y - normals[i].y * thickness / 2 ); } endShape(CLOSE); } function getNormal( points, index ) { let previous = points[max(0, index - 1)]; let next = points[min( points.length - 1, index + 1 )]; let dx = next.x - previous.x; let dy = next.y - previous.y; let len = sqrt(dx * dx + dy * dy); if (len < 0.001) { return { x: 0, y: 1 }; } return { x: -dy / len, y: dx / len }; } function drawMainBurst( logoProgress ) { let disappear = constrain( logoProgress / 0.75, 0, 1 ); disappear = easeInOutCubic(disappear); let size = lerp( 112, 0, disappear ); if (size < 1) { return; } size += sin(frameCount * 0.035) * 1.2 * (1 - logoProgress); drawBurst( cx, cy, size, 13, 7 ); } function updateSmallStar( logoProgress ) { if ( phase !== 2 || logoProgress < 0.99 ) { smallStarSize = lerp( smallStarSize, 0, 0.2 ); starActive = false; return; } let elapsed = frameCount - phaseStart; if ( !starActive && elapsed > 20 && elapsed % STAR_INTERVAL === 0 ) { let band = random(bands); let point = random( band.targetPoints ); smallStarX = point.x; smallStarY = point.y; starActive = true; starStart = frameCount; } if (starActive) { let t = (frameCount - starStart) / STAR_DURATION; if (t >= 1) { starActive = false; smallStarSize = 0; } else { smallStarSize = 34 * sin(PI * t); } } } function drawBurst( x, y, radius, pointCount, strokeSize ) { push(); translate(x, y); fill(pinkColor); stroke(blackColor); strokeWeight(strokeSize); strokeJoin(MITER); beginShape(); for ( let i = 0; i < pointCount * 2; i++ ) { let angle = TWO_PI * i / (pointCount * 2) - HALF_PI; let r; if (i % 2 === 0) { r = radius; } else { r = radius * 0.56; } vertex( cos(angle) * r, sin(angle) * r ); } endShape(CLOSE); pop(); } function drawCaption() { noStroke(); fill(65); textAlign(CENTER); textSize(12); if (phase === 0) { text( "自由な発想が生まれる", width / 2, 510 ); } else if ( phase === 1 || phase === 3 ) { text( "発想が流れ、形へ変化する", width / 2, 510 ); } else { text( "形の中にも、新しい発想が生まれ続ける", width / 2, 510 ); } } function easeInOutCubic(t) { if (t < 0.5) { return 4 * t * t * t; } return ( 1 - pow(-2 * t + 2, 3) / 2 ); }

形から、自由へ