// --- Global configuration --- const bgColor = 'lightgray'; let startLineColor; let endLineColor; let slider; let stringAmount = 40; let phase = 0; let zoff = 0; let G_basePathPoints = []; let meraMeraTexts = []; let kiraKiraTexts = []; // ▼▼▼ 文字サイズ動的調整用の定数 (文字サイズを大きく) ▼▼▼ const REFERENCE_SCREEN_HEIGHT = 720; const BASE_MERA_TEXT_SIZE = 23; // 以前は 20 const BASE_KIRA_TEXT_SIZE = 23; // 以前は 18 // ▲▲▲ ▲▲▲ ▲▲▲ // --- 「メラメラ」テキストアニメーション用定数 --- const MERA_TEXT_CONTENT = "メラメラ"; const MERA_SPAWN_RATE = 0.015; const MERA_MIN_RADIUS_FACTOR = 0.35; const MERA_MAX_RADIUS_FACTOR = 0.50; const MERA_INITIAL_SPEED = 0.8; const MERA_LIFESPAN_FRAMES = 120; const MERA_APPEAR_FRAMES = 30; const MERA_FADE_FRAMES = 40; const MERA_DAMPING = 0.97; // --- 「キラキラ」テキストアニメーション用定数 --- const KIRA_TEXT_CONTENT = "キラキラ"; const KIRA_SPAWN_RATE = 0.06; const KIRA_MIN_RADIUS_FACTOR = 0.30; const KIRA_MAX_RADIUS_FACTOR = 0.55; const KIRA_LIFESPAN_FRAMES = 70; const KIRA_APPEAR_FRAMES = 10; const KIRA_FADE_FRAMES = 30; let kiraTextColor; // --- MeraMeraText Class --- class MeraMeraText { constructor(x, y) { this.text = MERA_TEXT_CONTENT; this.x = x; this.y = y; this.vx = 0; this.vy = -random(MERA_INITIAL_SPEED * 0.7, MERA_INITIAL_SPEED * 1.3); this.sizeMultiplier = random(0.8, 1.2); this.opacity = 0; this.age = 0; this.lifespan = MERA_LIFESPAN_FRAMES * random(0.8, 1.2); this.state = 'appearing'; } update() { this.age++; if (this.state === 'appearing') { this.opacity = map(this.age, 0, MERA_APPEAR_FRAMES, 0, 255); if (this.age >= MERA_APPEAR_FRAMES) { this.state = 'visible'; this.opacity = 255; } } else if (this.state === 'visible') { if (this.age >= this.lifespan - MERA_FADE_FRAMES) { this.state = 'fading'; } } else if (this.state === 'fading') { this.opacity = map(this.age, this.lifespan - MERA_FADE_FRAMES, this.lifespan, 255, 0); } this.x += this.vx; this.y += this.vy; this.vx *= MERA_DAMPING; this.vy *= MERA_DAMPING; return this.opacity > 5; } display() { push(); fill(red(startLineColor), green(startLineColor), blue(startLineColor), this.opacity); textStyle(BOLD); noStroke(); let dynamicSize = BASE_MERA_TEXT_SIZE * (height / REFERENCE_SCREEN_HEIGHT); textSize(dynamicSize * this.sizeMultiplier); textAlign(CENTER, CENTER); text(this.text, this.x, this.y); pop(); } } // --- KiraKiraText Class --- class KiraKiraText { constructor(x, y) { this.text = KIRA_TEXT_CONTENT; this.x = x; this.y = y; this.sizeMultiplier = random(0.9, 1.1); this.opacity = 0; this.age = 0; this.lifespan = KIRA_LIFESPAN_FRAMES * random(0.8, 1.2); this.state = 'appearing'; } update() { this.age++; if (this.state === 'appearing') { this.opacity = map(this.age, 0, KIRA_APPEAR_FRAMES, 0, 255); if (this.age >= KIRA_APPEAR_FRAMES) { this.state = 'visible'; this.opacity = 255; } } else if (this.state === 'visible') { if (this.age >= this.lifespan - KIRA_FADE_FRAMES) { this.state = 'fading'; } } if (this.state === 'fading') { const fadeActualStartAge = this.lifespan - KIRA_FADE_FRAMES; if (this.age < fadeActualStartAge && this.state === 'visible') { this.opacity = 255; } else { this.opacity = map(this.age, fadeActualStartAge, this.lifespan, 255, 0); } } this.opacity = constrain(this.opacity, 0, 255); return this.opacity > 5; } display() { push(); fill(red(kiraTextColor), green(kiraTextColor), blue(kiraTextColor), this.opacity); noStroke(); let dynamicSize = BASE_KIRA_TEXT_SIZE * (height / REFERENCE_SCREEN_HEIGHT); textSize(dynamicSize * this.sizeMultiplier); textAlign(CENTER, CENTER); text(this.text, this.x, this.y); pop(); } } // --- Setup Function --- function setup() { createCanvas(windowWidth, windowHeight); startLineColor = color(255, 0, 0); endLineColor = color(65, 105, 225); kiraTextColor = color(255, 255, 180); slider = createSlider(0, 10, 0, 0.1); slider.position((width - slider.width) / 2, height - (slider.height * 2) - 20); calculateAndSetBasePath(); } // --- Window Resized Function --- function windowResized() { resizeCanvas(windowWidth, windowHeight); slider.position((width - slider.width) / 2, height - (slider.height * 2) - 20); calculateAndSetBasePath(); } function calculateAndSetBasePath() { const dentAmount_static = 20; const originalShapeWidth = 470 - 130; const targetBaseShapeWidth = width / 3; const scaleForBasePath = targetBaseShapeWidth / originalShapeWidth; G_basePathPoints = getBasePath(dentAmount_static, scaleForBasePath, 20, 7); } // --- KeyPressed Function --- function keyPressed() { if (keyCode === UP_ARROW) { stringAmount = stringAmount >= 100 ? 100 : stringAmount + 10; } else if (keyCode === DOWN_ARROW) { stringAmount = stringAmount <= 10 ? 10 : stringAmount - 10; } } // --- Function to generate the base path --- function getBasePath(dentAmount, scaleFactor = 1.0, samplesPerCurve = 20, samplesPerStraight = 5) { let points_orig = [ {s: 130, y: 95}, {s: 130, y: 145}, {s: 250, y: 160}, {s: 130, y: 160}, {s: 130, y: 350}, {s: 250, y: 350}, {s: 130, y: 365}, {s: 130, y: 415}, {s: 470, y: 415}, {s: 470, y: 365}, {s: 350, y: 350}, {s: 470, y: 350}, {s: 470, y: 160}, {s: 350, y: 160}, {s: 470, y: 145}, {s: 470, y: 95} ]; let scaled_points = points_orig.map(p => ({x: p.s * scaleFactor, y: p.y * scaleFactor})); dentAmount *= scaleFactor; let path = []; const lerpPoint = (p_start, p_end, t) => ({ x: lerp(p_start.x, p_end.x, t), y: lerp(p_start.y, p_end.y, t) }); path.push(scaled_points[0]); for (let i = 0; i < 6; i++) { for (let s = 1; s <= samplesPerStraight; s++) path.push(lerpPoint(scaled_points[i], scaled_points[i+1], s / samplesPerStraight)); } for (let s = 1; s <= samplesPerStraight; s++) path.push(lerpPoint(scaled_points[6], scaled_points[7], s / samplesPerStraight)); let p_bottom_start = scaled_points[7]; let p_bottom_end = scaled_points[8]; let cp_bottom1_x = p_bottom_start.x + (p_bottom_end.x - p_bottom_start.x) / 3; let cp_bottom1_y = p_bottom_start.y - dentAmount; let cp_bottom2_x = p_bottom_end.x - (p_bottom_end.x - p_bottom_start.x) / 3; let cp_bottom2_y = p_bottom_end.y - dentAmount; for (let t_idx = 1; t_idx <= samplesPerCurve; t_idx++) { let t = t_idx / samplesPerCurve; path.push({ x: bezierPoint(p_bottom_start.x, cp_bottom1_x, cp_bottom2_x, p_bottom_end.x, t), y: bezierPoint(p_bottom_start.y, cp_bottom1_y, cp_bottom2_y, p_bottom_end.y, t) }); } for (let i = 8; i < 14; i++) { for (let s = 1; s <= samplesPerStraight; s++) path.push(lerpPoint(scaled_points[i], scaled_points[i+1], s / samplesPerStraight)); } for (let s = 1; s <= samplesPerStraight; s++) path.push(lerpPoint(scaled_points[14], scaled_points[15], s / samplesPerStraight)); let p_top_start = scaled_points[15]; let p_top_end = scaled_points[0]; let cp_top1_x = p_top_start.x - (p_top_start.x - p_top_end.x) / 3; let cp_top1_y = p_top_start.y + dentAmount; let cp_top2_x = p_top_end.x + (p_top_start.x - p_top_end.x) / 3; let cp_top2_y = p_top_end.y + dentAmount; for (let t_idx = 1; t_idx < samplesPerCurve; t_idx++) { let t = t_idx / samplesPerCurve; path.push({ x: bezierPoint(p_top_start.x, cp_top1_x, cp_top2_x, p_top_end.x, t), y: bezierPoint(p_top_start.y, cp_top1_y, cp_top2_y, p_top_end.y, t) }); } if (path.length > 1) { let firstP = path[0]; let lastP = path[path.length - 1]; if (abs(lastP.x - firstP.x) < 0.001 && abs(lastP.y - firstP.y) < 0.001) path.pop(); } if (path.length === 0) return []; let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity; for (const p of path) { minX = min(minX, p.x); maxX = max(maxX, p.x); minY = min(minY, p.y); maxY = max(maxY, p.y); } const pathCenterX = (minX + maxX) / 2; const pathCenterY = (minY + maxY) / 2; return path.map(p => ({ x: p.x - pathCenterX, y: p.y - pathCenterY })); } // --- Function to create animated outline --- function createAnimatedOutline(basePathPoints) { if (!basePathPoints || basePathPoints.length < 2) return; beginShape(); const sliderRawValue = slider.value(); const stretch_factor = sliderRawValue / 10.0; const minWobbleAmplitude_atSlider0 = 0.5; const maxWobbleAmplitude_atSlider0 = 30.0; const maxAdditionalWobble = 85; for (let j = 0; j < stringAmount; j++) { const increaseSize = (0.1 * j); let layerNormalizedPosition = (stringAmount > 1) ? (j / (stringAmount - 1)) : 0.5; let baseSymmetricalAmplitude = lerp(minWobbleAmplitude_atSlider0, maxWobbleAmplitude_atSlider0, layerNormalizedPosition); let currentAdditionalSymmetricalAmplitude = maxAdditionalWobble * stretch_factor; let currentEffectiveAmplitude = baseSymmetricalAmplitude + currentAdditionalSymmetricalAmplitude; let currentTargetMaxWobble = currentEffectiveAmplitude; let currentTargetMinWobble = -currentEffectiveAmplitude; for (let k = 0; k < basePathPoints.length; k++) { const P_orig = basePathPoints[k]; let N_x = P_orig.x; let N_y = P_orig.y; const dist_to_P_orig = sqrt(N_x * N_x + N_y * N_y); if (dist_to_P_orig > 0) { N_x /= dist_to_P_orig; N_y /= dist_to_P_orig; } else { if (k > 0 && basePathPoints.length > 1) { let prev_idx = (k - 1 + basePathPoints.length) % basePathPoints.length; let next_idx = (k + 1) % basePathPoints.length; let dx_seg = basePathPoints[next_idx].x - basePathPoints[prev_idx].x; let dy_seg = basePathPoints[next_idx].y - basePathPoints[prev_idx].y; N_x = -dy_seg; N_y = dx_seg; const temp_dist_norm = sqrt(N_x*N_x + N_y*N_y); if(temp_dist_norm > 0) {N_x /= temp_dist_norm; N_y /= temp_dist_norm;} else {N_x = 1; N_y = 0;} } else {N_x = 1; N_y = 0;} } const P_layer_base_x = P_orig.x + N_x * increaseSize; const P_layer_base_y = P_orig.y + N_y * increaseSize; const angle_for_noise = atan2(P_orig.y, P_orig.x); const xoff = map(cos(angle_for_noise + phase), -1, 1, 0, 5); const yoff = map(sin(angle_for_noise + phase), -1, 1, 0, 2); const noise_val = noise(xoff, yoff, zoff); const noisy_addition = map(noise_val, 0, 1, currentTargetMinWobble, currentTargetMaxWobble); const final_x = P_layer_base_x + N_x * noisy_addition; const final_y = P_layer_base_y + N_y * noisy_addition; vertex(final_x, final_y); } } endShape(CLOSE); } // --- Draw Function --- function draw() { background(bgColor); const sliderRawValue = slider.value(); const colorLerpFactor = sliderRawValue / 10.0; let currentLineColor = lerpColor(startLineColor, endLineColor, colorLerpFactor); translate(width / 2, height / 2); if (G_basePathPoints.length > 0) { stroke(currentLineColor); strokeWeight(1); noFill(); createAnimatedOutline(G_basePathPoints); } if (sliderRawValue < 5 && random(1) < MERA_SPAWN_RATE) { let angle = random(TWO_PI); let baseSpawnDist = min(width, height) / 2; let radius = random( baseSpawnDist * MERA_MIN_RADIUS_FACTOR, baseSpawnDist * MERA_MAX_RADIUS_FACTOR ); let x = radius * cos(angle); let y = radius * sin(angle); meraMeraTexts.push(new MeraMeraText(x, y)); } for (let i = meraMeraTexts.length - 1; i >= 0; i--) { let mt = meraMeraTexts[i]; if (mt.update()) { mt.display(); } else { meraMeraTexts.splice(i, 1); } } if (sliderRawValue >= 5 && random(1) < KIRA_SPAWN_RATE) { let angle = random(TWO_PI); let baseSpawnDist = min(width, height) / 2; let radius = random( baseSpawnDist * KIRA_MIN_RADIUS_FACTOR, baseSpawnDist * KIRA_MAX_RADIUS_FACTOR ); let x = radius * cos(angle); let y = radius * sin(angle); kiraKiraTexts.push(new KiraKiraText(x, y)); } for (let i = kiraKiraTexts.length - 1; i >= 0; i--) { let kt = kiraKiraTexts[i]; if (kt.update()) { kt.display(); } else { kiraKiraTexts.splice(i, 1); } } zoff += 0.01; phase += 0.005; }