var field; var particles = []; function setup() { createCanvas(windowWidth, windowHeight); background(0); colorMode(HSB, 360, 100, 100, 100); field = new FlowField(40, 40); for(var i = 0; i < 120; i++){ particles.push(new Particle()); } } function draw() { blendMode(BLEND); background(0,4); blendMode(ADD); field.update(); field.display(); for(var i = 0; i < particles.length; i++){ particles[i].follow(field); particles[i].update(); particles[i].boundary(); particles[i].display(field); } } function FlowField(col, row){ this.col = col; this.row = row; this.lenW = width / this.col; this.lenH = height / this.row; this.nValues = [[]]; this.vectorField = [[]]; for(var i = 0; i < this.col; i++){ var values = []; var vector = []; for(var j = 0; j < this.col; j++){ values.push(0); vector.push(createVector()); } this.nValues.push(values); this.vectorField.push(vector); } this.offset = createVector(0, 0, 0); this.offsetInc = createVector(0.1, 0.1, 0.0005); } FlowField.prototype.update = function(){ this.offset.x = 0; for(var i = 0; i < this.col; i++){ this.offset.y = 0; for(var j = 0; j < this.row; j++){ this.offset.y += this.offsetInc.y; this.nValues[i][j] = noise(this.offset.x, this.offset.y, this.offset.z); } this.offset.x += this.offsetInc.x; this.offset.z += this.offsetInc.z; } } FlowField.prototype.display = function(){ stroke(0); noFill(); for(var i = 0; i < this.col; i++){ for(var j = 0; j < this.row; j++){ var n = map(this.nValues[i][j],0,1,-TWO_PI,TWO_PI); var v = p5.Vector.fromAngle(n); this.vectorField[i][j] = v.normalize(); push(); translate(i*this.lenW, j*this.lenH); rotate(v.heading()); line(0, 0, this.lenW, 0); pop(); } } } FlowField.prototype.getVelocity = function(x, y){ return this.vectorField[x][y]; } function Particle(){ this.pos = createVector(random(width), random(height)); this.vel = createVector(); this.acc = createVector(); this.maxSpeedSeed = random(10000); this.maxspeed = map(noise(this.maxSpeedSeed), 0, 1, 6, 15); this.hu = random(360); this.coef = random(0.5,1); this.isFill = random(1) > 0.5; } Particle.prototype.update = function(){ this.vel.add(this.acc); this.vel.limit(this.maxspeed); this.pos.add(this.vel); this.acc.mult(0); this.maxSpeedSeed += 0.01; } Particle.prototype.applyForce = function(force){ this.acc.add(force); } Particle.prototype.follow = function(field){ var x = floor(this.pos.x / field.lenW); var y = floor(this.pos.y / field.lenH); var force = field.getVelocity(x, y); this.applyForce(force); } Particle.prototype.display = function(field){ this.isFill ? fill(this.hu, 100, 100, 100) : noFill(); stroke(this.hu, 100, 100, 100); var x = floor(this.pos.x / field.lenW); var y = floor(this.pos.y / field.lenH); rectMode(CENTER); rect(x * field.lenW + field.lenW / 2, y * field.lenH + field.lenH / 2, field.lenW * this.coef, field.lenH * this.coef); } Particle.prototype.boundary = function(){ if(this.pos.x > width){ this.pos.x = 0; } if(this.pos.y > height){ this.pos.y = 0; } if(this.pos.x < 0){ this.pos.x = width; } if(this.pos.y < 0){ this.pos.y = height; } }