Llegué a la mitad de lo que quería en la representación de campos vectoriales físicos en 2D con p5js aquí . La otra mitad es hacer que las partículas aleatorias sigan dinámicamente las fuerzas del campo vectorial, y tengo muchos problemas con eso. He intentado varias cosas para tener en cuenta la envoltura de las partículas, así como el hecho de que estoy traduciendo el origen de la trama al centro del lienzo. Sin embargo, las partículas parecen mínimamente afectadas por los vectores individuales en el campo y, en última instancia, marchan a lo largo del eje x con ligeras irregularidades.

El hecho de que soy completamente nuevo en JS no ayuda a unir todos estos elementos de varias presentaciones disponibles en línea, y agradecería cualquier consejo sobre lo que puede estar fallando y en qué debo concentrarme.

Esto es lo que tengo hasta ahora: un archivo sketch.js correspondiente a mi propia respuesta citada anteriormente:

 scl = 35; var cols,rows; var fr; var particles = []; var flowfield; function setup() { createCanvas(windowWidth, windowHeight); cols = floor(width/scl); rows = floor(height/scl); fr = createP(""); flowfield = new Array(cols * rows); for (var i = 0; i < 1000; i++) { particles[i] = new Particle(); } background(51); } function draw() { translate(height/2, height/2); //moves the origin to bottom left scale(1, -1); //flips the y values so y increases "up" background(255); loadPixels(); for (var y = -rows; y < rows; y++) { for (var x = - cols; x < cols; x++) { var index = x + y * cols; //var v = createVector(sin(x)+cos(y),sin(x)*cos(y)); var v = createVector(y,-x); flowfield[index] = v; fill('blue'); stroke('blue'); push(); translate(x*scl,y*scl); rotate(v.heading()); line(0,0,0.5*scl,0); let arrowSize = 7; translate(0.5*scl - arrowSize, 0); triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0); pop(); } } for (var i = 0; i < particles.length; i++) { particles[i].follow(flowfield); particles[i].update(); particles[i].edges(); particles[i].show(); } }

y un segundo archivo llamado particle.js :

 class Particle { constructor() { this.pos = createVector(random(-width,width), random(-height,height)); this.vel = createVector(0, 0); this.acc = createVector(0, 0); this.maxspeed = 4; this.prevPos = this.pos.copy(); this.size = 8; } update() { this.vel.add(this.acc); this.vel.limit(this.maxspeed); this.pos.add(this.vel); this.acc.mult(0); } follow(vectors) { var x = floor(this.pos.x / scl); var y = floor(this.pos.y / scl); var index = x + y * cols; var force = vectors[index]; this.applyForce(force); } applyForce(force) { this.acc.add(force); } show() { noStroke(); fill('rgba(100,0,255,.5)'); circle(-(this.pos.x+width/2), -(this.pos.y-height/2), this.size); this.updatePrev(); } updatePrev() { this.prevPos.x = this.pos.x; this.prevPos.y = this.pos.y; } edges() { if (this.pos.x > width) { this.pos.x = -width; this.updatePrev(); } if (this.pos.x < -width) { this.pos.x = width; this.updatePrev(); } if (this.pos.y > height) { this.pos.y = -height; this.updatePrev(); } if (this.pos.y == -height) { this.pos.y = height; this.updatePrev(); } } }

El comienzo de la simulación con el código actualizado en esta edición no está mal:

pero muy pronto todas las partículas se alinean con la última fila a lo largo del eje x. Así que supongo que necesito ayuda para comprender los campos de flujo o reducir el efecto de los vectores en la parte inferior.

Ethan Hermsey me resolvió perfectamente este problema de trazado. En este punto, y sin duda debido a alguna falla en el código o alguna falta de comunicación, el código en la respuesta aceptada da como resultado un resultado diferente al deseado al hacer la pregunta, y el código que el propio Ethan resolvió para mí. . Entonces, solo como referencia, este es el efecto deseado:

Generado de la siguiente manera:

 const scl = 35; var cols, rows; var particles = []; var flowfield; function setup() { createCanvas(750, 750); cols = ceil( width / scl ); rows = ceil( height / scl ); flowfield = new Array( cols * rows ); for (var i = 0; i < 1000; i ++ ) { particles[i] = new Particle(); } } function draw() { translate(height / 2, height / 2); //moves the origin to center scale( 1, - 1 ); //flips the y values so y increases "up" background( 255 ); for ( var y = 0; y < rows; y ++ ) { for ( var x = 0; x < cols; x ++ ) { var index = x + y * cols; let vX = x * 2 - cols; let vY = y * 2 - rows; var v = createVector( vY, -vX ); v.normalize(); flowfield[index] = v; // The following push() / pull() affects only the arrows push(); fill( 'red' ); stroke( 'red' ); translate(x*scl-width/2,y*scl-height/2); rotate(v.heading()); line(0,0,0.5*scl,0); let arrowSize = 7; translate(0.5*scl - arrowSize, 0); triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0); pop(); // The preceding push() / pull() affects only the arrows }// Closes inner loop }// Closes outer loop to create vectors and index. //This next loop actually creates the desired particles: for (var i = 0; i < particles.length; i++) { particles[i].follow(flowfield); particles[i].update(); particles[i].edges(); particles[i].show(); } } // End of the function draw class Particle { constructor() { // changed startpostion. Since the origin is in the center of the canvas, // the x goes from -width/2 to width/2 // the y goes from -height/2 to height/2 // i also changed this in this.edges(). this.pos = createVector( random( - width / 2, width / 2 ), random( - height / 2, height / 2 ) ); this.vel = createVector( 0, 0 ); this.acc = createVector( 0, 0 ); this.maxspeed = 4; this.steerStrength = 15; this.prevPos = this.pos.copy(); this.size = 8; } update() { this.vel.add( this.acc ); this.vel.limit( this.maxspeed ); this.pos.add( this.vel ); this.acc.mult( 0 ); } follow( vectors ) { var x = floor( map( this.pos.x, - width / 2, width / 2, 0, cols - 1, true ) ); var y = floor( map( this.pos.y, - height / 2, height / 2, 0, rows - 1, true ) ); var index = ( y * cols ) + x; var force = vectors[ index ].copy(); force.mult( this.steerStrength ); this.applyForce( force ); } applyForce( force ) { this.acc.add( force ); } show() { noStroke(); fill( 'rgba(100,0,255,.5)' ); // you can just draw on the position. circle( this.pos.x, this.pos.y, this.size ); this.updatePrev(); } updatePrev() { this.prevPos.x = this.pos.x; this.prevPos.y = this.pos.y; } edges() { //clamp between -width/2 and width/2. -height/2 and height/2 if ( this.pos.x > width / 2 ) { this.pos.x = - width / 2; this.updatePrev(); } if ( this.pos.x < - width / 2 ) { this.pos.x = width / 2; this.updatePrev(); } if ( this.pos.y > height / 2 ) { this.pos.y = - height / 2; this.updatePrev(); } if ( this.pos.y < - height / 2 ) { this.pos.y = height / 2; this.updatePrev(); } } }