New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
An example of exposing imperative methods from the sketch? #258
Comments
I don't understand what you mean exactly by "expose methods". Could you provide an example implementation of what you have in mind? |
Sure. Sketch: // sketch.ts
type Methods = {
resetGame: () => void,
getPosition: () => number,
}
export function sketch(p5): Methods = {
...p5 code...
return {
resetGame: () => ...
getPosition: () => ...
} React: // index.tsx
const game = (p5) => {
const methods = sketch(p5)
window.methods = methods
}
function Page() {
return (
<>
<button onClick={window.methods.reset}>Reset</button>
...
<NextReactP5Wrapper sketch={game} />
</>
)
} Now I can call For sure, I can also achieve sketch control by using props and p5.updateWithProps. But specifically for things like See also: useImperativeHandle() is very close to what I want. |
I'm not sure this brings any benefits that composition couldn't already give you. For example when we want to have a I also don't see a use case where you would want to return such functions from the sketch itself, perhaps you can elaborate on this? The
I think generally what I see from your example code is that we could have a This would be much cleaner and more predictable in terms of behaviour and readability. Perhaps I missed your point and if so, I would love to hear more so I can help further but it seems to me that composition over inheritance would be the principle to go with here as things stand. What do you think? 😊 |
I'll try to elaborate.
This means that if I want to bind some in-game actions to React elements (buttons, etc), I have two options as far as I see:
I don't see these options as "composition vs inheritance", but rather "who manages the state" — React or p5. I want the state to be managed by p5. I understand that React prefers controlled components and moving all state into React, but I don't want to move all my game state into React just because I want to have a button that asks my game to do something. I also don't mind the runtime overhead (I think?). |
Can you provide a minimal code example of how you'd propose this would work? I know you provided one above but due to how p5 itself works, I don't see this is possible with instance mode without rewiring the internals or factory functioning the implementation. Even then, I am still concerned about the runtime cost and the developer experience of implementing things this way. It would be to open a PR, if you're willing to create one, to discuss this more concretely on an implementation level as to what you're hoping for. |
I don't know how to make this work.. but I also wouldn't expect myself to know, given that I'm not an advanced user of either p5 or React.
Hmmm. Can you elaborate? |
P5 has two modes: instance mode and global mode. Global mode is where you have all the P5 functions, etc in the global scope like most p5 projects have. Instance mode is where you create a new instance of the P5 class and then use the functions (methods) on that class instance. In the case of libraries such as this one, instance mode is the only and best option! In instance mode you need to provide a That function cannot return arbitrary functions to you as the user as it is not intended for that purpose on a function someFactory() {
let var1 = 0;
let var2 = "test";
return {
func1() {...},
func3() {...},
game(p5) {
p5.updateWithProps = props => {
var1 = props.whatever;
}
}
}
}
const { func1, func3, game } = someFactory();
...
<NextReactP5Wrapper sketch={game} />
... Something like that is what I assume you are looking for and it's the closest you can get to what you seem to be describing. Library wise there is really nothing we could change based on my current understanding of your wishes, it would need to be done on your end with something like the above. |
Closing due to inactivity. Please reply to re-open if necessary. |
Yeah, that's fair. If there's no easy way then sure |
I am writing a game with p5 and I want to expose methods like “resetGame()” or “getPosition()” etc from the sketch. The methods are modifying/querying internal sketch state that React doesn’t know about.
I’m not sure how to describe my issue. Just everything that I’ve tried so far fails in some random way.
If you have an example of how to expose methods in a non-hacky way, that would help me a lot.
The text was updated successfully, but these errors were encountered: