I have multiple p5.js scripts that all produce a canvas of 100x100. Let's say I have 9 and this is the code of each one:
var canvas_size = 200
function setup() {
createCanvas(canvas_size, canvas_size);
frameRate(300);
}
function draw() {
background(random(255));
}
Now I want my index.html to show each of the 9 scripts in a grid (number of columns and rows fixed or even better responsive). I am playing with the most common CSS examples of grids with no luck actually.
Here's my 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>
and style.css:
html, body {
margin: 0;
padding: 0;
}
Thank you!
Each of your sketches will need to be implemented in instance mode. This method avoids declaring your setup, draw and other p5.js lifecycle functions in the global scope, which would result in conflicts between your different sketches.
Example:
// 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);
To make each of your sketches appear in a particular grid position you can either have each sketch specify a container div id. Or you can use 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>