如何在一个html/css网格中显示多个p5.js脚本 [英] How to display multiple p5.js scripts in a HTML/CSS grid
本文介绍了如何在一个html/css网格中显示多个p5.js脚本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有多个p5.js脚本，它们都生成100x100的画布。假设我有9个，这是每个的代码：
var canvas_size = 200
function setup() {
createCanvas(canvas_size, canvas_size);
frameRate(300);
}
function draw() {
background(random(255));
}
现在我希望我的index.html在一个网格中显示9个脚本中的每一个(固定的列数和行数，甚至更好的响应性)。我正在玩最常见的网格的css示例，但实际上没有运气。
这是我的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>
和style.css：
html, body {
margin: 0;
padding: 0;
}
谢谢！
推荐答案
您的每个草图都需要在instance mode中实现。此方法避免了在全局范围内声明您的setup、draw和其他p5.js生命周期函数，这会导致您的不同草图之间发生冲突。
示例：
// 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);
要使每个草图出现在特定的网格位置，您可以让每个草图指定一个容器div id。或者您可以使用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>这篇关于如何在一个html/css网格中显示多个p5.js脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
