Skip to content

Instantly share code, notes, and snippets.

@softmarshmallow
Created November 19, 2020 06:58
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save softmarshmallow/99f4538cd67d3cb15d64460ad87411d8 to your computer and use it in GitHub Desktop.
p5 + nextjs + typescript configuration (simple exmaple)
import React, { Component } from "react"
type P5 = import("p5");
import dynamic from "next/dynamic"
const Sketch = dynamic(import("react-p5"), { ssr: false });
const imageurl = 'https://upload.wikimedia.org/wikipedia/en/9/95/Test_image.jpg'
interface ComponentProps {
//Your component props
}
let img: any
export default class extends Component {
renderRef: any
constructor(props: ComponentProps) {
super(props)
this.renderRef = React.createRef()
this.state = {
x: 100,
y: 100
}
}
componentDidMount() {
}
// image: any
preload(p5: P5) {
p5.loadImage(imageurl, s => {
img = s;
p5.redraw()
});
}
a = <p>helloooo</p>
setup(p5: P5, CanvasParentRef: Element) {
p5.createCanvas(1000, 1000)
// p5.createElement
const editableText = (p5: P5, args: {
x: number
y: number
text: string
}) => {
const w = 80
const h = 30
p5.rect(args.x, args.y, 80, 30)
p5.text(args.text, args.x + w / 2, args.y + h / 2)
}
editableText(p5, {
text: "hi",
x: 0, y: 50
})
editableText(p5, {
text: "hi-lo",
x: 400, y: 50
})
// p5.loadImage(imageurl, img => {
// img = img;
// p5.redraw(); // <- only if you're running with noLoop()
// });
// this.image = p5.loadImage('https://upload.wikimedia.org/wikipedia/en/9/95/Test_image.jpg');
// const image = p5.image(this.image, 100, 100)
}
draw(p5: P5) {
if (img) {
p5.image(img, 100, 100);
}
}
doubleClicked(p5: P5) {
const cursorX = p5.mouseX
const cursorY = p5.mouseY
console.log('clicked', event)
}
render() {
return (
<Sketch doubleClicked={this.doubleClicked} preload={this.preload} setup={this.setup} draw={this.draw}></Sketch>
);
}
}
@softmarshmallow
Copy link
Author

P5 does not support click event for single node, i'm switching to KonvaJS

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment