使用p5内反应

Question

我正试图整合一个稍微修改版本的Boids蜂群Sim到我的反应网站。我试过包装器和p5-React，它们的工作范围都较小(即描述中的示例)，但当我尝试将其应用于boids时，它只是显示了“loading.”。我看过youtube的教程，完全理解了逻辑，但我对p5有点陌生。下面是我试图包含的内容：https://codepen.io/stephenleemorrow/pen/QWaxKqY

这是我的VS代码：

  let flock;
  let img;
  let bg;

  p5.preload = () => {
    img = p5.loadImage("src\pngbyte.com-Open-Window-Window-Png-Image-window-png-images-open-bar.png");
  }

  p5.setup = () => {
    bg = p5.loadImage("src\pixle-cloud-landscape.webp");
    p5.createCanvas(568, 320);
    flock = new Flock();
    // Add an initial set of boids into the system
    for (let i = 0; i < 20; i++) {
      let b = new Boid(p5.width / 2, p5.height / 2);
      flock.addBoid(b);
    }
  }

  p5.draw = (p5) =>  {
    p5.background(51);
    flock.run();
    p5.image(img, -23, -10, 610, 340);
  }

  // Add a new boid into the System
  p5.mouseDragged = () => {
    flock.addBoid(new Boid(p5.mouseX, p5.mouseY));
  }

  // The Nature of Code
  // Daniel Shiffman
  // http://natureofcode.com

  // Flock object
  // Does very little, simply manages the array of all the boids

  function Flock() {
    // An array for all the boids
    this.boids = []; // Initialize the array
  }

  Flock.prototype.run = function () {
    for (let i = 0; i < this.boids.length; i++) {
      this.boids[i].run(this.boids);  // Passing the entire list of boids to each boid individually
    }
  }

  Flock.prototype.addBoid = function (b) {
    this.boids.push(b);
  }

  // The Nature of Code
  // Daniel Shiffman
  // http://natureofcode.com

  // Boid class
  // Methods for Separation, Cohesion, Alignment added

  function Boid(x, y) {
    this.acceleration = p5.createVector(0, 0);
    this.velocity = p5.createVector(p5.random(-1, 1), p5.random(-1, 1));
    this.position = p5.createVector(x, y);
    this.r = 3.0;
    this.maxspeed = 3;    // Maximum speed
    this.maxforce = 0.05; // Maximum steering force
  }

  Boid.prototype.run = function (boids) {
    this.flock(boids);
    this.update();
    this.borders();
    this.render();
  }

  Boid.prototype.applyForce = function (force) {
    // We could add mass here if we want A = F / M
    this.acceleration.add(force);
  }

  // We accumulate a new acceleration each time based on three rules
  Boid.prototype.flock = function (boids) {
    let sep = this.separate(boids);   // Separation
    let ali = this.align(boids);      // Alignment
    let coh = this.cohesion(boids);   // Cohesion
    // Arbitrarily weight these forces
    sep.mult(1.5);
    ali.mult(1.0);
    coh.mult(1.0);
    // Add the force vectors to acceleration
    this.applyForce(sep);
    this.applyForce(ali);
    this.applyForce(coh);
  }

  // Method to update location
  Boid.prototype.update = function () {
    // Update velocity
    this.velocity.add(this.acceleration);
    // Limit speed
    this.velocity.limit(this.maxspeed);
    this.position.add(this.velocity);
    // Reset accelertion to 0 each cycle
    this.acceleration.mult(0);
  }

  // A method that calculates and applies a steering force towards a target
  // STEER = DESIRED MINUS VELOCITY
  Boid.prototype.seek = function (target) {
    let desired = p5.Vector.sub(target, this.position);  // A vector pointing from the location to the target
    // Normalize desired and scale to maximum speed
    desired.normalize();
    desired.mult(this.maxspeed);
    // Steering = Desired minus Velocity
    let steer = p5.Vector.sub(desired, this.velocity);
    steer.limit(this.maxforce);  // Limit to maximum steering force
    return steer;
  }

  Boid.prototype.render = function () {
    // Draw a triangle rotated in the direction of velocity
    let theta = this.velocity.heading() + p5.radians(90);
    p5.fill(50);
    p5.stroke(100);
    p5.push();
    p5.translate(this.position.x, this.position.y);
    p5.rotate(theta);
    p5.beginShape();
    p5.vertex(0, -this.r * .5);
    p5.vertex(-this.r, this.r * .5);
    p5.vertex(this.r, this.r * .5);
    p5.endShape(p5.CLOSE);
    p5.pop();
  }

  // Wraparound
  Boid.prototype.borders = function () {
    if (this.position.x < -this.r) this.position.x = p5.width + this.r;
    if (this.position.y < -this.r) this.position.y = p5.height + this.r;
    if (this.position.x > p5.width + this.r) this.position.x = -this.r;
    if (this.position.y > p5.height + this.r) this.position.y = -this.r;
  }

  // Separation
  // Method checks for nearby boids and steers away
  Boid.prototype.separate = function (boids, p5) {
    let desiredseparation = 25.0;
    let steer = p5.createVector(0, 0);
    let count = 0;
    // For every boid in the system, check if it's too close
    for (let i = 0; i < boids.length; i++) {
      let d = p5.Vector.dist(this.position, boids[i].position);
      // If the distance is greater than 0 and less than an arbitrary amount (0 when you are yourself)
      if ((d > 0) && (d < desiredseparation)) {
        // Calculate vector pointing away from neighbor
        let diff = p5.Vector.sub(this.position, boids[i].position);
        diff.normalize();
        diff.div(d);        // Weight by distance
        steer.add(diff);
        count++;            // Keep track of how many
      }
    }
    // Average -- divide by how many
    if (count > 0) {
      steer.div(count);
    }

    // As long as the vector is greater than 0
    if (steer.mag() > 0) {
      // Implement Reynolds: Steering = Desired - Velocity
      steer.normalize();
      steer.mult(this.maxspeed);
      steer.sub(this.velocity);
      steer.limit(this.maxforce);
    }
    return steer;
  }

  // Alignment
  // For every nearby boid in the system, calculate the average velocity
  Boid.prototype.align = function (boids) {
    let neighbordist = 50;
    let sum = p5.createVector(0, 0);
    let count = 0;
    for (let i = 0; i < boids.length; i++) {
      let d = p5.Vector.dist(this.position, boids[i].position);
      if ((d > 0) && (d < neighbordist)) {
        sum.add(boids[i].velocity);
        count++;
      }
    }
    if (count > 0) {
      sum.div(count);
      sum.normalize();
      sum.mult(this.maxspeed);
      let steer = p5.Vector.sub(sum, this.velocity);
      steer.limit(this.maxforce);
      return steer;
    } else {
      return p5.createVector(0, 0);
    }
  }

  // Cohesion
  // For the average location (i.e. center) of all nearby boids, calculate steering vector towards that location
  Boid.prototype.cohesion = function (boids) {
    let neighbordist = 50;
    let sum = p5.createVector(0, 0);   // Start with empty vector to accumulate all locations
    let count = 0;
    for (let i = 0; i < boids.length; i++) {
      let d = p5.Vector.dist(this.position, boids[i].position);
      if ((d > 0) && (d < neighbordist)) {
        sum.add(boids[i].position); // Add location
        count++;
      }
    }
    if (count > 0) {
      sum.div(count);
      return this.seek(sum);  // Steer towards the location
    } else {
      return p5.createVector(0, 0);
    }
  }

}

同样，与App()的连接是很好的，因为它适用于较小的草图。我想我只是漏掉了语法上的一些东西。任何帮助都将不胜感激！

Answer 1

我做了一些更改，并开始运行(尽管p5代码中出现了错误，这就超出了答案的范围)。

这可能是一个错误，但是要在ReactP5Wrapper中使用这个草图，您需要将它作为一个函数导出，所以上面的代码就没有了。

export const sketch = (p5) => {

刚开始的时候。你实际上在结尾处有最后的括号，所以这可能是问题中的一个错误。

在后面的代码中，将p5传递到函数的任何地方，如

Boid.prototype.separate = function (boids, p5) {

您没有传递任何类似p5的内容。

let sep = this.separate(boids); 

因此，这将导致未定义的错误。传递给sketch函数的sketch可以在整个草图中使用，这样您就可以从这些其他函数的参数列表中删除p5。

不过，这里真正关键的问题是，您试图从/src/ 文件夹中加载图像。

在项目顶层的/public/文件夹中创建一个目录，将其命名为/assets/，并将图像放在其中。然后你可以引用它们，比如：

  p5.preload = () => {
    img = p5.loadImage("assets/test.png");
  }

在完成所有这些之后，我得到了草图，创建了画布，并执行了一些算法，但是它在不同的点都失败了，我确信在您开始运行它之后，它会有很多有趣的调试:)

顺便说一下，我使用ReactP5Wrapper在我的App组件中显示草图，如下所示：

import React from 'react';
import { ReactP5Wrapper } from 'react-p5-wrapper';
import { sketch } from './sketch/sketch';

export const App = () => {
   
    return(
        <div>
            <ReactP5Wrapper sketch={sketch}/>
        </div>
    )
}