Giter Site home page Giter Site logo

Comments (6)

shtrih avatar shtrih commented on March 29, 2024 3

@vennsoh Provide p5 context from sketch as an argument of Particle constructor. Next use functions from this context like p5context.ellipse(...).

Particle {
constructor(p5context) {
  this.p5context = p5context;
  ...
}

display() {
  this.p5context.ellipse(this.x, this.y, this.diameter, this.diameter);
}
bug1 = new Particle(p);

And you no need use import p5 from "p5"; global.p5 = p5; in your sketch.

from react.

and-who avatar and-who commented on March 29, 2024

Can you provide a bit more Information about what is not working?
Do you get any Errors? Can you see the Canvas?

from react.

vennsoh avatar vennsoh commented on March 29, 2024

Hi @and-who I've uploaded my code to https://github.com/vennsoh/react-p5
I'm getting...
Uncaught ReferenceError: random is not defined at new Particle (particle.js:20) at p5.p.setup (sketch3.js:14) at p5.eval (p5.js:49814) at p5.eval (p5.js:49751)

I suspect my Particle.js class doesn't know how to read the methods/functions from p5 lib. But I'm not sure how to make it work.

from react.

vennsoh avatar vennsoh commented on March 29, 2024

@shtrih Thanks so much! It helps and it works!

from react.

vennsoh avatar vennsoh commented on March 29, 2024

@shtrih However when I try
export default class Particle { constructor(p5) { this.p5 = p5 this.x = this.p5.random(width) <-- The random method doesn't work?
I tried this.p5.random(), p5.random() both don't work?

from react.

vennsoh avatar vennsoh commented on March 29, 2024

Ah sorry ignore this, obviously it doesn't work, the "width" isn't a number.

from react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.