Hice un proyecto llamado "pintura de píxeles" por javascript con la biblioteca p5js, pero cuando lo ejecuté, ese proyecto funcionó demasiado lento. No sé por qué y cómo hacer que funcione más rápido. Y aquí está mi código:
let h = 40, w = 64; let checkbox; let scl = 10; let painting = new Array(h); let brush = [0, 0, 0]; for(let i = 0; i < h; i++) { painting[i] = new Array(w); for(let j = 0; j < w; j++) { painting[i][j] = [255, 255, 255]; } } function setup() { createCanvas(w * scl, h * scl); checkbox = createCheckbox('Show gird line', true); checkbox.changed(onChange); } function draw() { background(220); for(let y = 0; y < h; y++) { for(let x = 0; x < w; x++) { fill(painting[y][x]); rect(x * scl, y * scl, scl, scl); } } if(mouseIsPressed) { paint(); } } function onChange() { if (checkbox.checked()) { stroke(0); } else { noStroke(); } } function paint() { if(mouseX < w * scl && mouseY < h * scl) { let x = floor(mouseX / scl); let y = floor(mouseY / scl); painting[y][x] = brush; } } <!--Include--> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>¿Hay alguna solución para que mi proyecto se ejecute más rápido?
El código que tienes es fácil de leer.
Puede que no valga la pena optimizarlo en esta etapa, ya que haría que el código fuera innecesariamente más complejo o más difícil de leer y cambiar en el futuro.
Sin embargo, si desea obtener información sobre las diferentes formas en que podría lograr lo mismo, puedo brindarle algunas ideas, para su caso de uso particular, en términos de rendimiento, es posible que no haga una gran diferencia:
painting como una matriz [w][h] anidada, podría usar una matriz plana [w * h] y usar un bucle for simple en lugar de un bucle for anidado. Esto sería algo similar a usar pixels[] . (Puede convertir x,y en un índice ( index = x + (y * width) ) y viceversa ( x = index % width, y = floor(index / width) )p5.Image , acceder a pixels[] para dibujar en él y renderizar usando image() (idealmente, obtendría un acceso de nivel inferior al renderizador WebGL para habilitar el antialiasing si es compatible con el navegador). La cuadrícula en sí podría ser una texture() para un cuádruple en el que usaría vertex() para especificar no solo las posiciones de geometría x, y, sino también las coordenadas de textura u, v junto con textureWrap(REPEAT) . (Publicé un ejemplo de procesamiento de repetición anterior: la lógica es la misma y la sintaxis es casi idéntica)p5.Image , puede almacenar en caché el dibujo usando createGraphics() : por ejemplo, solo actualice la instancia de p5.Graphics cuando se arrastra el mouse; de lo contrario, reproduzca el dibujo almacenado en caché. Además, puede utilizar noLoop() / loop() para controlar cuándo se actualiza el lienzo de p5 (por ejemplo loop() en mousePressed() , gráficos actualizados en mouseMoved() , noLoop() en mouseReleased() )Probablemente también haya otros métodos.
Si bien es bueno estar al tanto de las técnicas para optimizar su código, recomiendo encarecidamente no optimizar hasta que lo necesite; y cuando usa un generador de perfiles (DevTools tiene eso) para enfocarse solo en los bits que son los más lentos y no perder el tiempo y la legibilidad del código en una parte del código donde la optimización realmente no tendría un impacto.