var can, c, W, H;//global vars go here var gridW = 40; var gridN = 18; var vecs = []; var parts = []; window.onload = function() { init(); draw(); } function init() { can = document.getElementById("can"); c = can.getContext("2d"); W = window.innerWidth; H = window.innerHeight; can.width = W; can.height = H; //initializing vector array //I'm not sure of a better way in javascript to initialize 2d arrays for (let i = 0; i < gridN; ++i) { for (let j = 0; j < gridN; ++j) { vecs[i] = []; } } //This is where the magic is. Every vector in the grid is initialized with a value //that relates to its position in the grid. The last two arguments are what you should change for (let i = 0; i < gridN; ++i) { let y = i - 8; for (let j = 0; j < gridN; ++j) { let x = j - 7; //change last two arguments for different particle movements vecs[i].push(new Vector2D(j * gridW, i * gridW, y + 1, x * -1)); } } //This initializes all of the particles at random positions for (let i = 0; i < 200; ++i) { // parts.push(new Particle(Math.random() * 450 + 100, Math.random() * (gridW * gridN - 150) + 50)); let xpos = Math.random() * parseInt(W / 3) + (W / 3); let ypos = Math.random() * parseInt(H / 3) + (H / 3); parts.push(new Particle(xpos, ypos)); } } function draw() { requestAnimationFrame(draw); //background c.beginPath(); c.rect(0,0,W,H); c.fillStyle = "rgba(255,255,255,0.05)"; c.fill(); //This will show the vectors. Uncomment to display them // for (let i = 0; i < gridN; ++i) { // for (let j = 0; j < gridN; ++j) { // vecs[i][j].update(); // } // } //draws and updates all particles for (let i = 0; i < parts.length; ++i) { parts[i].update(); } } function Vector2D(xPos, yPos, x, y) { this.xPos = xPos; this.yPos = yPos; this.x = x; this.y = y; //mag is the vector's magnitude (a.k.a. length) this.mag = Math.sqrt((this.x * this.x) + (this.y * this.y)); //update just draws for vectors this.update = function() { this.render(); } this.render = function() { c.beginPath(); c.lineWidth = 2; c.strokeStyle = "red"; c.moveTo(this.xPos, this.yPos); c.lineTo(this.xPos + this.x, this.yPos + this.y); c.stroke(); } } function Particle(x, y) { this.xPos = x; this.yPos = y; this.xVel = 0; this.yVel = 0; this.xAcc = 0; this.yAcc = 0; this.accMult = 0.005; this.update = function() { this.render(); //Instead of looping through all the vectors to find where the particle is, relative to the screen //I just divided it's positions by the grid units var xGridPos = Math.floor(this.xPos / gridW); var yGridPos = Math.floor(this.yPos / gridW); //As long as the particle is within the vector grid, calculate the bilinear interpolation //and add it to the acceleration in each direction if (xGridPos < gridN - 1 && yGridPos < gridN - 1 && xGridPos > 0 && yGridPos > 0) { this.xAcc += bilinearX(this.xPos, this.yPos, vecs[yGridPos][xGridPos], vecs[yGridPos][xGridPos + 1], vecs[yGridPos + 1][xGridPos], vecs[yGridPos + 1][xGridPos + 1]); this.yAcc += bilinearY(this.xPos, this.yPos, vecs[yGridPos][xGridPos], vecs[yGridPos][xGridPos + 1], vecs[yGridPos + 1][xGridPos], vecs[yGridPos + 1][xGridPos + 1]); //else, reset its initial position } else { this.xPos = x; this.yPos = y; this.xVel = 0; this.yVel = 0; } //Because the values in the vector field are comparitively large, I multiply them by a factor //this.accMult, which can be changed above this.xAcc *= this.accMult; this.yAcc *= this.accMult; this.xVel += this.xAcc; this.yVel += this.yAcc; this.xPos += this.xVel; this.yPos += this.yVel; //this is important. You don't want the acceleration to accumulate, as it's constant this.xAcc *= 0; this.yAcc *= 0; } this.render = function() { c.beginPath(); c.fillStyle = "blue"; c.arc(this.xPos, this.yPos, 2, 0, 2 * Math.PI); c.fill(); } } /* Bilinear interpolation happens within a two-dimensional cartesian graph space. Basically, during each frame, the particle is within a grid square, and that grid square has a vector at each corner, for a total of four vectors. For accuracy, you want the vector that is closest to the particle to be the largest influence. This calculates the "average" of the four vectors around it. */ function bilinearX(x, y, v1, v2, v3, v4) { var r1 = ((v2.xPos - x) / (v2.xPos - v1.xPos)) * v1.x + ((x - v1.xPos) / (v2.xPos - v1.xPos)) * v2.x; var r2 = ((v2.xPos - x) / (v2.xPos - v1.xPos)) * v3.x + ((x - v1.xPos) / (v2.xPos - v1.xPos)) * v4.x; return (((v3.yPos - y) / (v3.yPos - v1.yPos)) * r1 + ((y - v1.yPos) / (v3.yPos - v1.yPos)) * r2); } function bilinearY(x, y, v1, v2, v3, v4) { var r1 = ((v2.xPos - x) / (v2.xPos - v1.xPos)) * v1.y + ((x - v1.xPos) / (v2.xPos - v1.xPos)) * v2.y; var r2 = ((v2.xPos - x) / (v2.xPos - v1.xPos)) * v3.y + ((x - v1.xPos) / (v2.xPos - v1.xPos)) * v4.y; return (((v3.yPos - y) / (v3.yPos - v1.yPos)) * r1 + ((y - v1.yPos) / (v3.yPos - v1.yPos)) * r2); }

Vector Field Particle System