31:Tcaf,{ class Particle { constructor(x, y) { this.pos = new Vector(x, y); this.vel = new Vector(Math.random() * 2 - 1, Math.random() * 2 - 1); this.acc = new Vector(0, 0); this.size = 8; } move(acc) { if (acc) { this.acc.addTo(acc); } this.vel.addTo(this.acc); this.pos.addTo(this.vel); if (this.vel.getLength() > 2) { this.vel.setLength(2); } this.acc.setLength(0); } draw() { ctx.fillRect(this.pos.x, this.pos.y, this.size, this.size); } wrap() { if (this.pos.x > w) { this.pos.x = 0; } else if (this.pos.x < -this.size) { this.pos.x = w - 1; } if (this.pos.y > h) { this.pos.y = 0; } else if (this.pos.y < -this.size) { this.pos.y = h - 1; } } } let canvas; let ctx; let field; let w, h; let size; let columns; let rows; let noiseZ; let particles; let hue; function setup() { size = 15; hue = 0; noiseZ = 0; ctx = DOM.context2d(width, height); reset(); window.addEventListener("resize", reset); } function initParticles() { particles = []; let numberOfParticles = (w * h) / 1500; for (let i = 0; i < numberOfParticles; i++) { let particle = new Particle(Math.random() * w, Math.random() * h); particles.push(particle); } } function initField() { field = new Array(columns); for (let x = 0; x < columns; x++) { field[x] = new Array(columns); for (let y = 0; y < rows; y++) { let v = new Vector(0, 0); field[x][y] = v; } } } function calculateField() { for (let x = 0; x < columns; x++) { for (let y = 0; y < rows; y++) { let angle = n.simplex3(x / 20, y / 20, noiseZ) * Math.PI * 2; let length = n.simplex3(x / 40 + 40000, y / 40 + 40000, noiseZ) * 0.5; field[x][y].setLength(length); field[x][y].setAngle(angle); } } } function reset() { w = width; h = height; ctx.strokeStyle = "white"; columns = Math.round(w / size) + 1; rows = Math.round(h / size) + 1; initParticles(); initField(); } function draw() { requestAnimationFrame(draw); calculateField(); noiseZ += 0.002; drawBackground(); drawFlowField(); drawParticles(); } function drawBackground() { ctx.fillStyle = "black"; ctx.fillRect(0, 0, w, h); } function drawParticles() { hue += 0.5; ctx.fillStyle = `hsla(${hue}, 50%, 50%, 1)`; particles.forEach((p) => { p.draw(); let pos = p.pos.div(size); let v; if (pos.x >= 0 && pos.x < columns && pos.y >= 0 && pos.y < rows) { v = field[Math.floor(pos.x)][Math.floor(pos.y)]; } p.move(v); p.wrap(); }); } function drawFlowField() { for (let x = 0; x < columns; x++) { for (let y = 0; y < rows; y++) { ctx.beginPath(); let x1 = x * size; let y1 = y * size; ctx.moveTo(x1, y1); ctx.lineTo( x1 + field[x][y].x * size * 2, y1 + field[x][y].y * size * 2 ); ctx.stroke(); } } } setup(); draw(); yield ctx.canvas; }32:T755,class Vector { constructor(x, y) { this.x = x; this.y = y; } add(v) { return new Vector(this.x + v.x, this.y + v.y); } addTo(v) { this.x += v.x; this.y += v.y; } sub(v) { return new Vector(this.x - v.x, this.y - v.y); } subFrom(v) { this.x -= v.x; this.y -= v.y; } mult(n) { return new Vector(this.x * n, this.y * n); } div(n) { return new Vector(this.x / n, this.y / n); } setAngle(angle) { var length = this.getLength(); this.x = Math.cos(angle) * length; this.y = Math.sin(angle) * length; return this; } setLength(length) { var angle = this.getAngle(); this.x = Math.cos(angle) * length; this.y = Math.sin(angle) * length; return this; } getAngle() { return Math.atan2(this.y, this.x); } getLength() { return Math.hypot(this.x, this.y); } getLengthSq() { return this.x * this.x + this.y * this.y; } distanceTo(v) { return this.sub(v).getLength(); } distanceToSq(v) { return this.sub(v).getLengthSq(); } copy() { return new Vector(this.x, this.y); } rotate(angle) { return new Vector( this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle) ); } rotateAround(v, angle) { let x = (this.x - v.x) * Math.cos(angle) - (v.y - this.y) * Math.sin(angle) + v.x; let y = (v.y - this.y) * Math.cos(angle) + (this.x - v.x) * Math.sin(angle) + v.y; return new Vector(x, y); } lerp(v, t) { let delta = v.sub(this).mult(t); return this.add(delta); } lerpTo(v, t) { let delta = v.sub(this).mult(t); this.addTo(delta); } moveTowards(v, length) { let delta = v.sub(this).setLength(length); return this.add(delta); } equals(v) { return this.x == v.x && this.y == v.y; } }33:[] 2f:{"title":"Simple Noise Flow Field Part 2","cells":[{"id":0,"value":"# Simple Noise Flow Field Part 2","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"I created a simple noise flow field with Canvas API by following [the instruction](https://codepen.io/DonKarlssonSan/post/particles-in-simplex-noise-flow-field) by Johan Karlson. In this part, the randomly generated particles move around in line with the force applied in the field with simple noise. You can see how the flow field is coded in [Part 1](https://observablehq.com/@shinichirokuwahara/simple-noise-flow-field-part-1).","pinned":false,"hidden":false,"mode":"md"},{"id":215,"value":"Part 3 is [here](https://observablehq.com/@shinichirokuwahara/simple-noise-flow-field-part-3).","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":188,"value":"Following [Vector.js](https://github.com/DonKarlssonSan/vectory/blob/master/src/vector.js) by Johan Karlson","pinned":false,"hidden":false,"mode":"md"},{"id":156,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"n = new noise.Noise(Math.random())","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"noise = require(\"https://bundle.run/noisejs@2.1.0\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}