Comments (1)
Figured it out, you can set the p5Object from within setup and then use it in useEffect. Closing issue, hopefully it will help a poor soul one day :).
// 3rd party imports
import React, { useState, useEffect } from 'react';
import Sketch from 'react-p5';
import p5Types from 'p5';
// Styles
import './PreviewSketch.scss';
// Types
interface PreviewSketchProps {
height?: number;
width?: number;
imgString: string;
}
function PreviewSketch({
height = 200,
width = 200,
imgString,
}: PreviewSketchProps) {
const [p5Object, setP5Object] = useState<any>();
const [mainImage, setMainImage] = useState<any>();
useEffect(() => {
p5Object?.loadImage(imgString, (img: any) => {
setMainImage(img);
});
}, [imgString]);
function setup(p5: p5Types, canvasParentRef: Element) {
setP5Object(p5);
p5.createCanvas(height, width, p5.WEBGL).parent(canvasParentRef);
}
function draw(p5: p5Types) {
p5.background('#FFF');
if (mainImage) {
p5.texture(mainImage);
}
p5.rotateX(p5.frameCount * 0.01);
p5.rotateY(p5.frameCount * 0.01);
p5.box(20);
}
return (
<div className="preview-sketch">
<Sketch setup={setup} draw={draw} />
</div>
);
}
export default PreviewSketch;
from react-p5.
Related Issues (20)
- Is it possible to change the image displayed with React image upload? HOT 2
- Problem with texture img when changing variable on click.
- How can I access to p5.Vector class? HOT 3
- Uncaught TypeError: particles[i].follow is not a function HOT 1
- Typing not available for the p5 declared in the window. HOT 1
- fft.waveform() doesn't return correct array
- issues with p5 sound library import HOT 3
- Cannot read properties of undefined (reading 'stringToGlyphs')
- Type errors appearing when implementing sketch in TS HOT 1
- Multiple instances of react-p5 don't seem to work HOT 2
- `noCanvas()` doesn't seem to work HOT 2
- windowWidth not defined HOT 2
- elements render twice requiring strict mode to be removed HOT 2
- stop sound if user navigates to another tab. HOT 1
- `window is not defined` even with the dynamic import on Next.js HOT 1
- Failed to load image in preload function HOT 1
- Can we update package.json to have the latest and greatest p5.js version? HOT 1
- Renderer for canvas? HOT 1
- Passing additional arguments to functions draw() and setup() HOT 1
- :boom: BUG: deconstruct not works ! HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-p5.