// ============================================================================= // 設定・定数 // ============================================================================= // キャンバス設定 const ASPECT_RATIO = 1408 / 448; const MAX_CANVAS_WIDTH = 1920; const MAX_CANVAS_HEIGHT = 1080; // レイヤー設定 const LAYERS = { BACKGROUND: 0, MIDDLE: 1, FOREGROUND: 2 }; // レイヤー別設定 const LAYER_CONFIG = [ // BACKGROUND { spawnRate: 50, maxObjects: 15, minSize: 15, maxSize: 40, minSpeed: 0.8, maxSpeed: 1.2, opacity: 0.3, parallaxFactor: 0.3 }, // MIDDLE { spawnRate: 35, maxObjects: 20, minSize: 25, maxSize: 70, minSpeed: 1.3, maxSpeed: 2.0, opacity: 0.6, parallaxFactor: 0.7 }, // FOREGROUND { spawnRate: 25, maxObjects: 12, minSize: 40, maxSize: 120, minSpeed: 2.0, maxSpeed: 3.5, opacity: 0.9, parallaxFactor: 1.2 } ]; // グリッド設定 const GRID_SIZE = 20; // 文字設定 const CHARACTERS = ['U', 'N', 'O', ':']; const COLOR_CHANGE_COOLDOWN = 120; // ============================================================================= // グローバル変数 // ============================================================================= let gradientBg; let layeredTextObjects = [[], [], []]; // 3つのレイヤー let layerSpawnTimers = [0, 0, 0]; let COLOR_PALETTE = []; let selectedGradientColors = []; let selectedTextColors = []; let colorChangeNeeded = false; let lastColorChangeTime = 0; function setup() { let w = min(windowWidth, MAX_CANVAS_WIDTH); let h = min(windowHeight, MAX_CANVAS_HEIGHT); if (w / h > ASPECT_RATIO) { w = h * ASPECT_RATIO; } else { h = w / ASPECT_RATIO; } createCanvas(w, h); pixelDensity(1); initializeColorPalette(); selectColors(); gradientBg = createGraphics(width, height); createGradientBackground(); } function draw() { // 色変更処理 if (colorChangeNeeded && (frameCount - lastColorChangeTime) > COLOR_CHANGE_COOLDOWN) { selectColors(); createGradientBackground(); colorChangeNeeded = false; lastColorChangeTime = frameCount; } // 背景描画 image(gradientBg, 0, 0); // 各レイヤーの処理（背景から前景へ） for (let layer = 0; layer < 3; layer++) { spawnNewTextObjects(layer); updateTextObjects(layer); displayTextObjects(layer); } } function windowResized() { let w = min(windowWidth, MAX_CANVAS_WIDTH); let h = min(windowHeight, MAX_CANVAS_HEIGHT); if (w / h > ASPECT_RATIO) { w = h * ASPECT_RATIO; } else { h = w / ASPECT_RATIO; } resizeCanvas(w, h); gradientBg = createGraphics(width, height); createGradientBackground(); } // ============================================================================= // レイヤー対応テキストオブジェクトクラス // ============================================================================= class LayeredTextObject { constructor(x, y, character, size, layer) { this.layer = layer; this.config = LAYER_CONFIG[layer]; this.pos = createVector(x, y); this.vel = createVector( random(this.config.minSpeed, this.config.maxSpeed), random(-0.5, 0.5) ); this.character = character; this.size = size; this.life = 255; this.id = Date.now() + Math.random(); this.rotation = random(TWO_PI); this.rotationSpeed = random(-0.02, 0.02); // レイヤー特有のプロパティ this.opacity = this.config.opacity; this.baseY = y; // 波動効果の基準位置 // 背景レイヤーには波動効果を追加 if (layer === LAYERS.BACKGROUND) { this.waveOffset = random(TWO_PI); this.waveAmplitude = random(5, 15); } } update() { // 基本的な移動 this.pos.add(this.vel); this.rotation += this.rotationSpeed; // レイヤー別の特殊効果 if (this.layer === LAYERS.BACKGROUND) { // 背景：波動効果 this.pos.y = this.baseY + sin(frameCount * 0.02 + this.waveOffset) * this.waveAmplitude; } // 壁での反発 if (this.pos.y < this.size/2 || this.pos.y > height - this.size/2) { this.vel.y *= -1; } // 右端を超えたら削除フラグ if (this.pos.x > width + this.size/2) { this.life = 0; return true; } return false; } display(colorIndex) { push(); translate(this.pos.x, this.pos.y); rotate(this.rotation); // 透明度を設定した色を作成 let baseColor = selectedTextColors[colorIndex]; let alpha = 255 * this.opacity; // レイヤー別の視覚効果（ぼかしの代わりに複数描画で疑似ぼかし） if (this.layer === LAYERS.BACKGROUND) { // 背景：複数回描画で疑似ぼかし効果 for (let i = 0; i < 3; i++) { fill(red(baseColor), green(baseColor), blue(baseColor), alpha * 0.3); noStroke(); textAlign(CENTER, CENTER); textSize(this.size); textStyle(BOLD); text(this.character, random(-2, 2), random(-2, 2)); } } else if (this.layer === LAYERS.MIDDLE) { // 中景：軽い疑似ぼかし for (let i = 0; i < 2; i++) { fill(red(baseColor), green(baseColor), blue(baseColor), alpha * 0.5); noStroke(); textAlign(CENTER, CENTER); textSize(this.size); textStyle(BOLD); text(this.character, random(-1, 1), random(-1, 1)); } } else { // 前景：クリアな描画 fill(red(baseColor), green(baseColor), blue(baseColor), alpha); noStroke(); textAlign(CENTER, CENTER); textSize(this.size); textStyle(BOLD); text(this.character, 0, 0); } pop(); } isDead() { return this.life <= 0; } } // ============================================================================= // レイヤー別メイン処理関数 // ============================================================================= function spawnNewTextObjects(layer) { const config = LAYER_CONFIG[layer]; layerSpawnTimers[layer]++; if (layerSpawnTimers[layer] >= config.spawnRate && layeredTextObjects[layer].length < config.maxObjects) { // レイヤーに応じたサイズ分布 let size1 = random(config.minSize, config.maxSize); let size2 = random(config.minSize, config.maxSize); // 前景レイヤーはより大きなサイズを優先 if (layer === LAYERS.FOREGROUND) { size1 = random() < 0.7 ? random(config.maxSize * 0.7, config.maxSize) : size1; size2 = random() < 0.7 ? random(config.maxSize * 0.7, config.maxSize) : size2; } let y1 = random(size1, height/2 - size1/2); let y2 = random(height/2 + size2/2, height - size2); let char1 = CHARACTERS[Math.floor(random(CHARACTERS.length))]; let char2 = CHARACTERS[Math.floor(random(CHARACTERS.length))]; layeredTextObjects[layer].push(new LayeredTextObject(-size1, y1, char1, size1, layer)); layeredTextObjects[layer].push(new LayeredTextObject(-size2, y2, char2, size2, layer)); layerSpawnTimers[layer] = 0; } } function updateTextObjects(layer) { for (let i = layeredTextObjects[layer].length - 1; i >= 0; i--) { let textObj = layeredTextObjects[layer][i]; let reachedRightEdge = textObj.update(); if (textObj.isDead()) { if (reachedRightEdge && layer === LAYERS.FOREGROUND && (frameCount - lastColorChangeTime) > COLOR_CHANGE_COOLDOWN) { colorChangeNeeded = true; } layeredTextObjects[layer].splice(i, 1); } } } function displayTextObjects(layer) { for (let textObj of layeredTextObjects[layer]) { let stripeWidth = width / 3; let colorIndex; if (textObj.pos.x < stripeWidth) { colorIndex = 0; } else if (textObj.pos.x < stripeWidth * 2) { colorIndex = 1; } else { colorIndex = 2; } textObj.display(colorIndex); } } // ============================================================================= // 色彩関連関数 // ============================================================================= function initializeColorPalette() { COLOR_PALETTE = [ color(220, 160, 170), color(40, 48, 100), color(200, 155, 15), color(45, 170, 45), color(100, 70, 150), color(210, 180, 10), color(185, 135, 160), color(10, 160, 210), color(20, 110, 105), color(30, 150, 140), color(140, 75, 155), color(15, 170, 165), color(130, 120, 100), color(185, 160, 100), color(75, 190, 75), color(30, 115, 30), color(25, 25, 95), color(55, 35, 165), color(10, 115, 115), color(190, 115, 150), color(175, 180, 175) ]; } function selectColors() { let gradientIndices = []; while (gradientIndices.length < 2) { let randomIndex = Math.floor(random(COLOR_PALETTE.length)); if (!gradientIndices.includes(randomIndex)) { gradientIndices.push(randomIndex); } } selectedGradientColors = [ COLOR_PALETTE[gradientIndices[0]], COLOR_PALETTE[gradientIndices[1]] ]; selectedTextColors = [ COLOR_PALETTE[Math.floor(random(COLOR_PALETTE.length))], COLOR_PALETTE[Math.floor(random(COLOR_PALETTE.length))], COLOR_PALETTE[Math.floor(random(COLOR_PALETTE.length))] ]; } // ============================================================================= // 背景描画関数 // ============================================================================= function createGradientBackground() { gradientBg.noFill(); let stripeWidth = width / 3; for (let col = 0; col < 3; col++) { let x = col * stripeWidth; let isReversed = (col === 1); for (let y = 0; y < height; y++) { let inter = map(y, 0, height, 0, 1); let c; if (isReversed) { c = lerpColor(selectedGradientColors[1], selectedGradientColors[0], inter); } else { c = lerpColor(selectedGradientColors[0], selectedGradientColors[1], inter); } gradientBg.stroke(c); gradientBg.line(x, y, x + stripeWidth, y); } } // グリッド描画 let centerStart = stripeWidth; let centerEnd = stripeWidth * 2; gradientBg.stroke(255, 255, 255, 80); gradientBg.strokeWeight(1); for (let x = centerStart; x <= centerEnd; x += GRID_SIZE) { gradientBg.line(x, 0, x, height); } for (let y = 0; y <= height; y += GRID_SIZE) { gradientBg.line(centerStart, y, centerEnd, y); } }

Gradient of Changes