p5.js con ejemplo de código de reacción

Después de consultar especialistas en el tema, programadores de varias ramas y profesores dimos con la solución a la pregunta y la compartimos en esta publicación.

Ejemplo 1: combinar p5 con react

exportdefaultfunctionsketch(p)let canvas;

    p.setup=()=>
      canvas = p.createCanvas(300,200);
      p.noStroke();

    p.draw=()=>
      p.background('orangered');
      p.ellipse(150,100,100,100);

    p.myCustomRedrawAccordingToNewPropsHandler=(newProps)=>if(canvas)//Make sure the canvas has been created
        p.fill(newProps.color);

Ejemplo 2: combinar p5 con react

importReact,Componentfrom'react';importP5Wrapperfrom'react-p5-wrapper';importsketchfrom'./sketches/sketch';import'./App.css';classAppextendsComponentconstructor()super();this.state=color:[Math.random()*255,Math.random()*255,Math.random()*255];this.randomColor=this.randomColor.bind(this);randomColor()this.setState(color:[Math.random()*255,Math.random()*255,Math.random()*255])render()return(<div><button onClick=this.randomColor>RandomColor</button><P5Wrapper sketch=sketch color=this.state.color></P5Wrapper></div>);exportdefaultApp;

Agradecemos que desees animar nuestro quehacer exponiendo un comentario y dejando una puntuación te estamos eternamente agradecidos.

---

---

Utiliza Nuestro Buscador