Using p5 inside React [closed] - reactjs

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 10 months ago.
Improve this question
I am trying to integrate a slightly modified version of Boids flocking Sim into my React website. I have tried with both wrapper and p5-React npm's, both work on a smaller scale (i.e. with the examples in the descriptions), but when I try to apply it to the boids sim it just shows "loading...". I have watched the youtube tutorial and fully understand the logic, but I am a bit new to p5. Here is what I am trying to include: https://codepen.io/stephenleemorrow/pen/QWaxKqY
Here is my VS Code:
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);
}
}
}
Again, the connection to App() is good cause it works with smaller sketches. I think I'm just missing something in the syntax.
Any help would be GREATLY appreciated!

Answer 1

I made a few changes and got this running (although with errors in the p5 code that kind of fall out of the scope of the answer).
This might be a typo, but to use this sketch with ReactP5Wrapper, you need to export it as a function, so your code above is missing
export const sketch = (p5) => {
at the start. You actually have the closing bracket at the end, so it's probably a typo in the question.
Later in the code, anywhere you are passing p5 into a function, like
Boid.prototype.separate = function (boids, p5) {
you are not passing anything in for p5 - like
let sep = this.separate(boids);
so that would cause undefined errors. The p5 passed into the sketch function can be used throughout the sketch so you can remove p5 from the parameter lists of these other functions.
The really breaking issue here though was that you were trying to load images from the /src/ folder.
Make a directory in the /public/ folder at the top level of your project, call it /assets/ and put your images in there.
Then you can reference them like:
p5.preload = () => {
img = p5.loadImage("assets/test.png");
}
After I do all that, I get the sketch starting, creating the canvas and doing some of the algorithm but it fails at various points that I'm sure will have loads of fun debugging after you get it running to begin with :)
Btw, I'm displaying the sketch in my App component like this, using the ReactP5Wrapper:
import React from 'react';
import { ReactP5Wrapper } from 'react-p5-wrapper';
import { sketch } from './sketch/sketch';
export const App = () => {
return(
<div>
<ReactP5Wrapper sketch={sketch}/>
</div>
)
}