Does the p5.Vector.random2D() create a different vector compared to the p5.createVector() function?

Viewed 37

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?

screenshot of the two logs

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"
    ]
  }
}
0 Answers
Related