const ColorPalette = Object.freeze({ "colorT": "#50d0d0", "colorM": "#be1e3e", "colorK": "#7967c3", "colorH": "#ffc639", "colorN": "#255699" }); var rectTrail = []; var vehicles = []; function setup() { createCanvas(windowWidth, windowHeight); background(color(ColorPalette.colorN)); vehicles.push(new Vehicle(color(ColorPalette.colorT))); vehicles.push(new Vehicle(color(ColorPalette.colorM))); vehicles.push(new Vehicle(color(ColorPalette.colorK))); vehicles.push(new Vehicle(color(ColorPalette.colorH))); } function draw() { background(color(ColorPalette.colorN)); for(var i = vehicles.length-1; i >= 0; i--){ vehicles[i].wander(); vehicles[i].update(); vehicles[i].boundary(); vehicles[i].display(); } } function Vehicle(rectCol){ this.pos = createVector(random(0, width), random(0, height)); this.vel = p5.Vector.random2D(); this.acc = createVector(0, 0); this.maxForce = 0.07; this.maxVel = 6.0; this.radius = 40.0; this.rectCol = rectCol; this.rectTrail = []; this.wanderP = createVector(); this.wanderMag = random(60, 200); this.wanderRadius = random(60, 100); this.wanderTheta = HALF_PI; this.wanderNoiseSeed = random(10000); this.wanderRadiusNoiseSeed = random(10000); this.wanderMagNoiseSeed = random(10000); this.wanderCircleCenter = createVector(); this.wanderCircleOnPoint = createVector(); this.update = function(){ this.vel.add(this.acc); this.vel.limit(this.maxVel); this.pos.add(this.vel); this.acc.mult(0); this.wanderNoiseSeed += 0.1; this.wanderRadiusNoiseSeed += 0.01; this.wanderMagNoiseSeed += 0.01; let angle = this.vel.heading(); if(frameCount % 9 == 0){ this.rectTrail.push(new RectTrail(this.pos.x, this.pos.y, 50, this.rectCol, angle)); } for(var i = this.rectTrail.length-1; i >= 0; i--){ this.rectTrail[i].update(); if(this.rectTrail[i].isFinished()){ this.rectTrail.splice(i, 1); } } } this.display = function(){ for(var i = this.rectTrail.length-1; i >= 0; i--){ this.rectTrail[i].display(); } } this.applyForce = function(f){ this.acc.add(f); } this.seek = function(target){ let force = p5.Vector.sub(target, this.pos); force.setMag(this.maxVel); force.sub(this.vel); force.limit(this.maxForce); return force; } this.wander = function(){ this.wanderMag = map(noise(this.wanderMagNoiseSeed), 0, 1, 20, 200); this.wanderRadius = map(noise(this.wanderRadiusNoiseSeed), 0, 1, 40, 120); let velCopy = this.vel.copy(); velCopy.setMag(this.wanderMag); this.wanderP = p5.Vector.add(this.pos, velCopy); this.wanderCircleCenter = this.wanderP.copy(); let wanderTheta = this.wanderTheta + this.vel.heading(); let x = this.wanderRadius * cos(wanderTheta); let y = this.wanderRadius * sin(wanderTheta); this.wanderP.add(x, y); this.wanderCircleOnPoint = this.wanderP.copy(); let steer = this.wanderP.sub(this.pos); steer.setMag(this.maxForce); this.applyForce(steer); this.wanderTheta += map(noise(this.wanderNoiseSeed), 0, 1, -0.1, 0.1); } this.boundary = function(){ if(this.wanderCircleCenter.x < -this.radius){ this.wanderCircleCenter.x = width/1.0 + this.radius; this.pos.x = width/1.0 + this.radius; } else if(this.wanderCircleCenter.x > width/1.0 + this.radius){ this.wanderCircleCenter.x = -width/1.0 - this.radius; this.pos.x = -this.radius; } else if(this.wanderCircleCenter.y < -this.radius){ this.wanderCircleCenter.y = height/1.0 + this.radius; this.pos.y = height/1.0 + this.radius; } else if(this.wanderCircleCenter.y > height/1.0 + this.radius){ this.wanderCircleCenter.y = -height/1.0 - this.radius; this.pos.y = -this.radius; } } } function RectTrail(x, y, len, col, a){ this.centerPos = createVector(x, y); this.col = col; this.len = len; this.vertices = []; this.angle = a; for(var i = 0; i < 4; i++){ var angle = (TWO_PI/4)*i; var vx = x + cos(angle + a) * this.len; var vy = y + sin(angle + a) * this.len; this.vertices.push(createVector(vx, vy)); } this.pointPos = this.vertices[0].copy(); this.time = 0.0; this.trail = []; this.update = function(){ this.time += 1.0/12.0; if(0.0 <= this.time && this.time < 1.0){ this.pointPos.x = lerp(this.vertices[0].x, this.vertices[1].x, fract(this.time)); this.pointPos.y = lerp(this.vertices[0].y, this.vertices[1].y, fract(this.time)); this.trail.push(this.pointPos.copy()); } else if(1.0 <= this.time && this.time < 2.0){ this.pointPos.x = lerp(this.vertices[1].x, this.vertices[2].x, fract(this.time)); this.pointPos.y = lerp(this.vertices[1].y, this.vertices[2].y, fract(this.time)); this.trail.push(this.pointPos.copy()); } else if(2.0 <= this.time && this.time < 3.0){ this.pointPos.x = lerp(this.vertices[2].x, this.vertices[3].x, fract(this.time)); this.pointPos.y = lerp(this.vertices[2].y, this.vertices[3].y, fract(this.time)); this.trail.push(this.pointPos.copy()); } else if(3.0 <= this.time && this.time < 4.0){ this.pointPos.x = lerp(this.vertices[3].x, this.vertices[0].x, fract(this.time)); this.pointPos.y = lerp(this.vertices[3].y, this.vertices[0].y, fract(this.time)); this.trail.push(this.pointPos.copy()); this.pointAlpha = lerp(255, 0, fract(this.time)); } else{ this.trail.splice(0, 1); } } this.display = function(){ smooth(true); rectMode(CENTER); strokeWeight(10); drawingContext.shadowOffsetX = 15; drawingContext.shadowOffsetY = 15; drawingContext.shadowBlur = 10; drawingContext.shadowColor = color(0); stroke(this.col); noFill(); beginShape(); for(var i = this.trail.length-1; i >= 0; i--){ vertex(this.trail[i].x, this.trail[i].y); } endShape(); } this.isFinished = function(){ return (this.time > 4.0) && (this.trail.length == 0); } }

RectTrailWonderAgent