// ============================================================ // OpenCodeとGitHub Copilotに手伝ってもらったけど、 // 結局、動きのバリエーションは自分で考えることになったため、 // AI時代もこんな感じで創作していくんだろうな〜と思った次第です // とはいえコードを読むとボリュームはすごいしめんどくさいこといっぱいやってくれてるし、 // ありがたいっすね〜 // ============================================================ // ---- 定数 ---- const MAX_TRACKERS = 60; const SPAWN_INTERVAL = 5; const TRAIL_LEN = 16; const SPAWN_RADIUS = 700; const TARGET_SPEED = 10.0; const CAM_LAG = 0.1; // ---- グローバル ---- let target; let trackers = []; let collisions = []; let cam; let cleanMode = false; // ============================================================ // セットアップ // ============================================================ function setup() { createCanvas(windowWidth, windowHeight); colorMode(RGB, 255, 255, 255, 255); target = new Target(); cam = target.pos.copy(); } function windowResized() { resizeCanvas(windowWidth, windowHeight); } function keyPressed() { if (key === 'c' || key === 'C') cleanMode = !cleanMode; } // ============================================================ // メインループ // ============================================================ function draw() { background(cleanMode ? 255 : color(8, 8, 20)); // カメラ：ターゲットをなめらかに追尾 cam.x += (target.pos.x - cam.x) * CAM_LAG; cam.y += (target.pos.y - cam.y) * CAM_LAG; let ox = width / 2 - cam.x; let oy = height / 2 - cam.y; push(); translate(ox, oy); // ---- Target ---- target.update(trackers); target.draw(); // ---- Tracker 生成 ---- if (frameCount % SPAWN_INTERVAL === 0 && trackers.length < MAX_TRACKERS) { trackers.push(new Tracker(target)); } // ---- Tracker 更新・描画 ---- for (let i = trackers.length - 1; i >= 0; i--) { trackers[i].update(target, trackers); if (trackers[i].dead) { if (!trackers[i].silent) spawnCollision(trackers[i].pos.copy(), trackers[i].col); trackers.splice(i, 1); } else { trackers[i].draw(); } } // ---- Tracker 同士の衝突判定 ---- for (let i = trackers.length - 1; i >= 1; i--) { for (let j = i - 1; j >= 0; j--) { if (trackers[i].dead || trackers[j].dead) continue; if (p5.Vector.dist(trackers[i].pos, trackers[j].pos) < 24) { let mid = p5.Vector.add(trackers[i].pos, trackers[j].pos).mult(0.5); // 衝突地点が画面内のときのみ Collision を生成 let mx = mid.x - (cam.x - width / 2); let my = mid.y - (cam.y - height / 2); if (mx >= 0 && mx <= width && my >= 0 && my <= height) { // 2つの Tracker の色を平均して渡す let col = trackers[i].col.map((v, k) => (v + trackers[j].col[k]) / 2); spawnCollision(mid, col); } trackers[i].dead = true; trackers[j].dead = true; } } } for (let i = trackers.length - 1; i >= 0; i--) { if (trackers[i].dead) trackers.splice(i, 1); } // ---- Collision 更新・描画 ---- for (let i = collisions.length - 1; i >= 0; i--) { collisions[i].update(); if (collisions[i].dead) { collisions.splice(i, 1); } else { collisions[i].draw(); } } pop(); } // ============================================================ // Collision 生成 // ============================================================ function spawnCollision(pos, col) { collisions.push(new Collision(pos, col)); } // ============================================================ // Target クラス // ============================================================ class Target { constructor() { this.pos = createVector(width / 2, height / 2); this.vel = p5.Vector.random2D().mult(TARGET_SPEED); this.acc = createVector(0, 0); this.waypoint = this._newWaypoint(); this.size = 42; } _newWaypoint() { return createVector( random(width * 0.1, width * 0.9), random(height * 0.1, height * 0.9) ); } update(trackers) { // ---- Tracker からの逃避力 ---- let flee = createVector(0, 0); let nearest = null; let nearestDist = Infinity; for (let m of trackers) { let d = p5.Vector.dist(this.pos, m.pos); if (d < nearestDist) { nearestDist = d; nearest = m; } if (d < 280) { let away = p5.Vector.sub(this.pos, m.pos).normalize().mult(280 / (d + 1)); flee.add(away); } } // 最接近 Tracker が近づいたらその逆方向にウェイポイントを更新 if (nearest && nearestDist < 200) { let awayDir = p5.Vector.sub(this.pos, nearest.pos).normalize(); this.waypoint = p5.Vector.add( this.pos, awayDir.mult(random(180, 350)) ); } // ---- ウェイポイント追尾 ---- let toWay = p5.Vector.sub(this.waypoint, this.pos); if (toWay.mag() < 60) { this.waypoint = this._newWaypoint(); toWay = p5.Vector.sub(this.waypoint, this.pos); } let desired = toWay.normalize().mult(TARGET_SPEED); this.acc = p5.Vector.sub(desired, this.vel).limit(0.5); this.acc.add(flee.limit(TARGET_SPEED * 1.2)); this.vel.add(this.acc); this.vel.limit(TARGET_SPEED * 2.0); if (this.vel.mag() < TARGET_SPEED * 0.5) this.vel.setMag(TARGET_SPEED * 0.5); this.pos.add(this.vel); } draw() { push(); translate(this.pos.x, this.pos.y); rotate(this.vel.heading()); let s = this.size; let barrierR = s * 1.2; if (cleanMode) { // ---- cleanMode：黒塗り三角形のみ ---- noStroke(); fill(0); triangle( s, 0, -s * 0.6, -s * 0.55, -s * 0.6, s * 0.55 ); } else { // ---- 通常：白線・塗りつぶしなし ---- stroke(255); strokeWeight(2.5); noFill(); triangle( s, 0, -s * 0.6, -s * 0.55, -s * 0.6, s * 0.55 ); } pop(); } } // ============================================================ // Tracker クラス // ============================================================ const TRACKER_TYPES = ['fast', 'spiral', 'overshoot', 'drunk', 'intercept']; class Tracker { constructor(target) { this.type = random(TRACKER_TYPES); this.dead = false; this.life = 0; // 画面外4辺のいずれかからランダムに出現（カメラ基準） let margin = random(50, 150); let side = floor(random(4)); // 0:上 1:下 2:左 3:右 let sx, sy; if (side === 0) { sx = cam.x - width / 2 + random(width); sy = cam.y - height / 2 - margin; } else if (side === 1) { sx = cam.x - width / 2 + random(width); sy = cam.y + height / 2 + margin; } else if (side === 2) { sx = cam.x - width / 2 - margin; sy = cam.y - height / 2 + random(height); } else { sx = cam.x + width / 2 + margin; sy = cam.y - height / 2 + random(height); } this.pos = createVector(sx, sy); this.vel = p5.Vector.sub(target.pos, this.pos).normalize().mult(this._initSpeed()); this.acc = createVector(0, 0); this.trail = []; this.spiralAngle = random(TWO_PI); this.spiralSpeed = random(0.10, 0.18) * (random() > 0.5 ? 1 : -1); this.spiralRadius = random(100, 220); this.overshootDone = false; this.drunkSeedX = random(1000); this.drunkSeedY = random(1000); this.drunkT = random(100); this.col = this._pickColor(); } _initSpeed() { return { fast: random(12, 18), spiral: random(6, 10), overshoot: random(8, 13), drunk: random(6, 12), intercept: random(10, 16) }[this.type]; } _pickColor() { return { fast: [255, 80, 40], spiral: [60, 255, 160], overshoot: [255, 200, 50], drunk: [220, 80, 255], intercept: [255, 160, 220] }[this.type]; } update(target, trackers) { if (this.dead) return; this.life++; let toTarget = p5.Vector.sub(target.pos, this.pos); let toTargetDist = toTarget.mag(); if (toTargetDist < 18) { this.dead = true; return; } // 画面外450px以上に出たら静かに消滅（Collision なし） let screenX = this.pos.x - (cam.x - width / 2); let screenY = this.pos.y - (cam.y - height / 2); if (screenX < -450 || screenX > width + 450 || screenY < -450 || screenY > height + 450) { this.dead = true; this.silent = true; return; } this._steer(target, toTarget, toTargetDist, trackers); this.vel.add(this.acc); this._limitSpeed(); this.pos.add(this.vel); this.acc.mult(0); this.trail.push(this.pos.copy()); if (this.trail.length > TRAIL_LEN) this.trail.shift(); } _steer(target, toTarget, toTargetDist, trackers) { switch (this.type) { case 'fast': { let desired = toTarget.copy().normalize().mult(18); let steer = p5.Vector.sub(desired, this.vel).limit(0.9); this.acc.add(steer); break; } case 'spiral': { this.spiralAngle += this.spiralSpeed; let toTargetNorm = toTarget.copy().normalize(); let perp = createVector(-toTargetNorm.y, toTargetNorm.x); let offset = p5.Vector.add( target.pos, perp.copy().mult(sin(this.spiralAngle) * this.spiralRadius) ); let toOff = p5.Vector.sub(offset, this.pos).normalize().mult(14); let steer = p5.Vector.sub(toOff, this.vel).limit(0.7); this.acc.add(steer); break; } case 'overshoot': { if (!this.overshootDone && toTargetDist < 100) this.overshootDone = true; let aimPos = this.overshootDone ? target.pos : p5.Vector.add(target.pos, this.vel.copy().normalize().mult(-150)); let desired = p5.Vector.sub(aimPos, this.pos).normalize().mult(14); let steer = p5.Vector.sub(desired, this.vel).limit(0.6); this.acc.add(steer); break; } case 'drunk': { this.drunkT += 0.018; let nx = (noise(this.drunkSeedX + this.drunkT) - 0.5) * 2; let ny = (noise(this.drunkSeedY + this.drunkT + 100) - 0.5) * 2; let noiseVec = createVector(nx, ny).mult(0.55); let homingStr = constrain(map(toTargetDist, 60, 500, 0, 0.18), 0, 0.18); let homing = toTarget.copy().normalize().mult(homingStr); let steer = p5.Vector.add(noiseVec, homing).limit(0.5); this.acc.add(steer); break; } case 'intercept': { let leadTime = constrain(toTargetDist / 18, 5, 60); let predicted = p5.Vector.add(target.pos, target.vel.copy().mult(leadTime)); let desired = p5.Vector.sub(predicted, this.pos).normalize().mult(16); let steer = p5.Vector.sub(desired, this.vel).limit(0.7); this.acc.add(steer); // 他の Tracker から距離80px以内なら反発 if (trackers) { for (let other of trackers) { if (other === this || other.dead) continue; let d = p5.Vector.dist(this.pos, other.pos); if (d < 80 && d > 0) { let repel = p5.Vector.sub(this.pos, other.pos).normalize().mult((80 - d) / 80 * 0.6); this.acc.add(repel); } } } break; } } } _limitSpeed() { let maxS = { fast: 22, spiral: 16, overshoot: 17, drunk: 15, intercept: 20 }[this.type]; let minS = { fast: 8, spiral: 7, overshoot: 6, drunk: 5, intercept: 7 }[this.type]; let s = this.vel.mag(); if (s > maxS) this.vel.setMag(maxS); if (s < minS) this.vel.setMag(minS); } draw() { if (this.trail.length < 2) return; let [r, g, b] = this.col; // トレイル noFill(); for (let i = 1; i < this.trail.length; i++) { let t = i / this.trail.length; let p0 = this.trail[i - 1]; let p1 = this.trail[i]; if (cleanMode) { stroke(0); } else { stroke(r, g, b); } strokeWeight(t * 3.5); line(p0.x, p0.y, p1.x, p1.y); } let tip = this.pos; let tail = this.trail[this.trail.length - 2]; let ang = p5.Vector.sub(tip, tail).heading(); push(); translate(tip.x, tip.y); rotate(ang); // 機体：二等辺三角形（先端が右＝進行方向） noStroke(); fill(cleanMode ? color(0) : color(r, g, b)); triangle(34, 0, -19, -13, -19, 13); pop(); } } // ============================================================ // Collision クラス（波紋エフェクト） // ============================================================ class Collision { constructor(pos, col) { this.pos = pos; this.col = col || [255, 220, 100]; this.dead = false; // 時間差で広がる波紋を複数枚生成 this.ripples = [ { delay: 0, maxR: 80, maxLife: 40 }, { delay: 6, maxR: 120, maxLife: 45 }, { delay: 12, maxR: 60, maxLife: 35 }, ].map(r => ({ ...r, life: -r.delay })); } update() { for (let r of this.ripples) r.life++; // 全波紋が寿命を終えたら消滅 if (this.ripples.every(r => r.life >= r.maxLife)) this.dead = true; } draw() { noFill(); for (let r of this.ripples) { if (r.life < 0) continue; // delay 中はスキップ let t = r.life / r.maxLife; // 0→1 で進行 let radius = r.maxR * t; // 外側に広がる let colorAlpha = (1 - t) * (cleanMode ? 200 : 180); // フェードアウト let weight = (1 - t) * 3 + 0.5; // 細くなる if (cleanMode) { stroke(0, colorAlpha); } else { let [r, g, b] = this.col; stroke(r, g, b, colorAlpha); } strokeWeight(weight); ellipse(this.pos.x, this.pos.y, radius * 2, radius * 2); } } }

Target & Tracker