Estoy muy familiarizado con p5.js, pero soy nuevo en el desarrollo web. Me he estado familiarizando con React y estoy trabajando en la creación de una aplicación React que incluye un IDE p5 en el navegador. Estoy usando Ace para construir el editor de código en un React Component sin problemas, pero no estoy seguro de cómo usar ese código para ejecutar un boceto p5. Este es mi código hasta ahora:
import React from 'react'; import AceEditor from "react-ace"; import "ace-builds/src-noconflict/mode-javascript"; import "ace-builds/src-noconflict/theme-chrome" import "ace-builds/src-noconflict/ext-language_tools"; import "ace-builds/webpack-resolver"; import p5 from 'p5'; import './App.css'; let inputCode=''; function onChange(newValue) { console.log(newValue); inputCode = newValue; } export class Editor extends React.Component { render() { return ( <div className="container"> <div className="title-container"> <h1>p5 Code Editor</h1> <button>Run</button> </div> <AceEditor mode="javascript" width="100%" theme="chrome" onChange={onChange} name="UNIQUE_ID_OF_DIV" editorProps={{ $blockScrolling: true }} /> </div> ); } } export class Sketch extends React.Component { render() { return <div class="sketch-container" id="sketch-container"></div> } }Todo lo que he logrado hacer en este punto más allá de representar el editor de código es almacenar el código de entrada en una cadena. Sé que hay métodos para evaluar el código en forma de cadena (eval(), nueva función()), pero trabajar en p5 parece complicarlo más. Los únicos ejemplos que puedo encontrar del uso de p5 en situaciones como esta se parecen a:
const s = (sketch) => { let x = 250; let y = 250; sketch.setup = () { sketch.createCanvas(500, 500); } sketch.draw = () { sketch.background(0); sketch.rect(x, y, 100, 100); } } let myp5 = new p5(s);Pero si el usuario está codificando en p5.js en el editor de texto, no debería tener que usar la sintaxis sketch.method() cada vez que quiera usar una función. Entonces, ¿hay alguna manera de traducir el código de entrada escrito en p5.js en algo legible en una aplicación React? Y si puede, ¿cómo ve los resultados dentro de un div específico?
En lugar de hacer que el código p5 sea un componente real de React, puede configurar un archivo designado escrito en p5.js y escribirlo, y luego ejecutar ese código al presionar un botón o cualquier activador que decida. Tenga en cuenta que si desea ejecutarlo dentro de un div específico, deberá agregar un código a su función de configuración que identifique ese div.