Tengo varios scripts p5.js que producen un lienzo de 100x100. Digamos que tengo 9 y este es el código de cada uno:
var canvas_size = 200 function setup() { createCanvas(canvas_size, canvas_size); frameRate(300); } function draw() { background(random(255)); }Ahora quiero que mi index.html muestre cada uno de los 9 scripts en una cuadrícula (número de columnas y filas fijo o incluso mejor receptivo). Estoy jugando con los ejemplos CSS más comunes de cuadrículas sin suerte en realidad.
Aquí está mi index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sketch</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="libraries/p5.min.js"></script> <script src="libraries/p5.sound.min.js"></script> </head> <body> <div class="grid-container"> <div class="grid-item"><script src="sketch1.js"></script></div> <div class="grid-item"><script src="sketch2.js"></script></div> <div class="grid-item"><script src="sketch3.js"></script></div> <div class="grid-item"><script src="sketch4.js"></script></div> <div class="grid-item"><script src="sketch5.js"></script></div> <div class="grid-item"><script src="sketch6.js"></script></div> <div class="grid-item"><script src="sketch7.js"></script></div> <div class="grid-item"><script src="sketch8.js"></script></div> <div class="grid-item"><script src="sketch9.js"></script></div> </div> </body> </html>y estilo.css:
html, body { margin: 0; padding: 0; }¡Gracias!
Cada uno de sus bocetos deberá implementarse en modo instancia . Este método evita declarar su setup , draw y otras funciones del ciclo de vida de p5.js en el ámbito global, lo que daría lugar a conflictos entre sus diferentes bocetos.
Ejemplo:
// all p5.js functions should be called via the p object let sketch = function(p) { let x = 100; let y = 100; p.setup = function() { p.createCanvas(700, 410); }; p.draw = function() { p.background(0); p.fill(255); p.rect(x, y, 50, 50); }; }; let myp5 = new p5(sketch); Para hacer que cada uno de sus bocetos aparezca en una posición de cuadrícula particular, puede hacer que cada boceto especifique una identificación de división de contenedor. O puede usar document.currentSketch.parentElement :
.grid-container { display: flex; flex-direction: row; flex-wrap: wrap; } .grid-item { padding: 5px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sketch</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> </head> <body> <div class="grid-container"> <div id="sketchContainer1" class="grid-item"> <script> function sketch1(p) { p.setup = () => { p.createCanvas(200, 200); p.background('cyan'); }; } new p5(sketch1, "sketchContainer1"); </script> </div> <div id="sketchContainer2" class="grid-item"> <script> function sketch2(p) { p.setup = () => { p.createCanvas(200, 200); p.background('magenta'); }; } new p5(sketch2, "sketchContainer2"); </script> </div> <div class="grid-item"> <script> function sketch3(p) { p.setup = () => { p.createCanvas(200, 200); p.background('yellow'); }; } new p5(sketch3, document.currentScript.parentElement); </script> </div> <div class="grid-item"> <script> function sketch4(p) { p.setup = () => { p.createCanvas(200, 200); p.background('black'); }; } new p5(sketch4, document.currentScript.parentElement); </script> </div> </div> </body> </html>