I'm currently working with the node module "react-p5" to include a p5 canvas in my react app written in typescript.
For testing purpose i made a component to display a simple point who moves based on a random vector but nothing appeared in the canvas. This is my current component:
import React from "react";
import Sketch from "react-p5";
import * as p5 from "p5";
type testProps = {
size: {
width: number;
height: number;
};
};
const TestPoints: Point[] = [];
export default function Test(_prop: testProps) {
function setup(_p5: p5, canvasParentRef: Element) {
_p5
.createCanvas(_prop.size.width, _prop.size.height)
.parent(canvasParentRef);
TestPoints.push(new Point(_p5));
}
function draw(_p5: p5) {
_p5.clear();
TestPoints.forEach((boid) => {
boid.update();
boid.show(_p5);
});
}
return <Sketch setup={setup} draw={draw}></Sketch>;
}
class Point {
position: p5.Vector;
velocity: p5.Vector;
constructor(_p5: p5) {
this.position = _p5.createVector(_p5.width / 2, _p5.height / 2);
this.velocity = p5.Vector.random2D();
}
show(_p5: p5) {
_p5.strokeWeight(16);
_p5.stroke(255);
_p5.point(this.position.x, this.position.y);
}
update() {
this.position.add(this.velocity);
}
}
I found after a few test that the problem is in the way that the "p5.Vector.random2D()" function, and if i create the vector with the "_p5.createVector" function it works and the point moves:
constructor(_p5: p5) {
this.position = _p5.createVector(_p5.width / 2, _p5.height / 2);
this.velocity = p5.Vector.random2D();
console.log(this.velocity); // first log
this.velocity = _p5.createVector(this.velocity.x, this.velocity.y);
console.log(this.velocity); // second log
}
But why the Vector that the log function show me in first log is different than the second? Am i missing something? Shouldn't it works only with the random vector?
My package.json is this:
{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.11.45",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"framer-motion": "^6.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-p5": "^1.3.30",
"react-scripts": "^5.0.1",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
