// https://qiita.com/hp0me/items/7d6483e0a34297005938 let objs = []; let targetObjs = []; const objsNum = 100; const targetNum = 1; let isMove = false; // const palette = [ "#ffffff", "#6882C7", "#4B459D", "#251551"]; const palette = [ "#ffffff", "#E8EDEA", "#89889E", "#F1EEDF","#B2C2C9", "#E5E5E6"]; const LIMIT_DIST = 20; function setup() { createCanvas(windowWidth, windowHeight); background("#E5E5E6") colorMode(HSB, 360, 100, 100, 255); for (let i = 0; i < targetNum; i++) { targetObjs.push(new TargetObj()); } for (let i = 0; i < objsNum; i++) { objs.push(new MovingObj()); } // background("#251551"); background("#E5E5E6") } function draw() { for (let i = 0; i < objs.length; i++) { objs[i].seek(); objs[i].move(); // objs[i].display(); } for (let p = 0; p < palette.length; p++) { drawShape(p, p / palette.length, (p + 1) / palette.length, palette[p]); } for (let j = 0; j < targetObjs.length; j++) { targetObjs[j].move(); // targetObjs[j].draw(); } filter(BLUR, 2); } function drawShape(index, startRatio, endRatio, strokeColor) { let maincolor = color((100 + frameCount * 0.5) % 360, 100, 100, 20); let sc = color(strokeColor); sc.setAlpha(index % 2 == 0 ? 50 : 10); fill(index == 0 ? maincolor : sc); noStroke(); beginShape(); for ( let i = floor(objs.length * startRatio); i < floor(objs.length * endRatio); i++ ) { curveVertex(objs[i].pos.x, objs[i].pos.y); } endShape(CLOSE); } //Steering Behavior（操舵行動）を扱うクラス class MovingObj { constructor() { this.init(); } init() { this.pos = createVector( random(-width * 0.1, width * 1.1), random(-height * 0.1, height * 1.1) ); //位置 while ( this.pos.x >= 0 && this.pos.x <= width && this.pos.y >= 0 && this.pos.y <= height ) { this.pos = createVector( random(-width * 0.1, width * 1.1), random(-height * 0.1, height * 1.1) ); //位置 } this.vel = createVector(0, 0); //速度 this.acc = createVector(0, 0); //加速度 this.maxspeed = random(8, 15); //最大スピード this.maxsteer = random(0.3, 0.75); //旋回力大きいほど舵を切りやすい this.desired = createVector(); // targetObjsの中で一番近いものを探す this.targetObj = this.findNearestTarget(); this.shapeScale = random(1, 4); this.c = color(random(palette)); this.c.setAlpha(50); this.c = random(100) < 25 ? color("#E7ECF2") : this.c; this.lifeCount = random([1, 2, 3]); } move() { this.targetObj = this.findNearestTarget(); this.vel.add(this.acc); //速度に加速度をプラス this.pos.add(this.vel); //位置に速度をプラス this.acc.mult(0); } //操舵行動追跡(seek) seek() { let target = this.targetObj.pos; //希望ベクトル = 目標位置 - 現在位置 this.desired = p5.Vector.sub(target, this.pos); //希望ベクトルをノーマライズ this.desired.normalize(); //希望ベクトルのマグニチュードをmaxに this.desired.setMag(this.maxspeed); //ステアリングベクトル（速度） = 希望ベクトル - 現在のベクトル（速度） var steer = p5.Vector.sub(this.desired, this.vel); //速度を限る steer.limit(this.maxsteer); //適用 this.applyForce(steer); } display() {} applyForce(force) { this.acc.add(force); } // targetObjsの中で一番近いものを探す findNearestTarget() { // targetObjsの中で一番近いものを探す let minDist = 100000; let minIndex = 0; for (let i = 0; i < targetObjs.length; i++) { let dist = targetObjs[i].pos.dist(this.pos); if (dist < minDist) { minDist = dist; minIndex = i; } } const targetObj = targetObjs[minIndex]; return targetObj; } } class TargetObj { constructor() { this.init(); this.pos = createVector(0, 0); } init() { this.nX = random(1000); this.nY = random(1000); // this.c = color(random(palette)); // this.c = color( // hue(this.c), // saturation(this.c), // brightness(this.c) * 0.75, // 100 // ); } move() { this.pos.set( map( noise(frameCount * 0.0075 + this.nX), 0, 1, -width * 0.25, width * 1.25 ), map( noise(frameCount * 0.0075 + this.nY), 0, 1, -height * 0.25, height * 1.25 ) ); } draw() { // stroke(255); // noFill(); // ellipse(this.pos.x, this.pos.y, 10, 10); } }

iridescence