gpt4 book ai didi

javascript - 如何在同一个 html 页面上显示两个 p5js 草图?

转载 作者:行者123 更新时间:2023-12-04 07:44:09 26 4
gpt4 key购买 nike

我希望为我的动画工作室建立一个网站,我希望在后台设置一些 p5 草图以增加一些天赋。现在,我设置了两个基本草图,以确保一切正常。一个显示为 pink ,其中一个显示为 blue ,它们被设计为在“我们是谁”这一行的上方和下方绘制。
我的问题是我的 html 页面似乎能够加载我的脚本之一,但不能同时加载两者。我可以注释掉粉红色的脚本,蓝色会显示出来,正确地作为我的 div 的父级,反之亦然。
有谁知道如何使这两个草图显示在同一页面上?
谢谢
附言我试过使用 instance mode ,但我仍然无法使它工作。我听说实例模式对此很有帮助,但我不知道如何从实例模式转到在同一页面上有两个草图。如果有人有这方面的资源,我将不胜感激!

    function setup(){
const myBlueCanvas = createCanvas(400,400);
myBlueCanvas.parent(blueCanvas);
}

function draw(){
clearInterval();
background(80,100,255);
ellipse(mouseX, mouseY, 20, 20)
}
html, body {
padding: 20px;
margin: 2000;
text-align: center;
background-color: rgb(248, 253, 255);
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

canvas {
display: block;
}

.title {

text-align: left;
font-family: Termina, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 70px;
font-variant: small-caps;
color:rgb(9, 25, 78);
/* background-color: burlywood; */
}

.h1{
text-align: left;
font-family: Termina, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
}

.canvasTest{
/* background-color: darkslateblue; */
text-align: center;
}
<!DOCTYPE html>
<html lang="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Robins Egg</title>

<link rel="stylesheet" type="text/css" href="style.css">
<style>

</style>

<script src="../p5.js"></script>
<!-- <script src="../p5.dom.js"></script> -->

<!-- <script src = "blueSketch.js"></script> -->
<script src = "pinkSketch.js"></script>
<!-- <script src="../addons/p5.sound.js"></script> -->

</head>

<body>

<main>
<div class = "title">

Robin's <br>
Egg <br>
Studio <br>

</div>
<!-- branch fun -->
<div class = "container">
<div id = "pinkCanvas">
</div>
</div>

<!-- Who We are -->
<div class = h1>
Who We Are
</div>


<!-- sketchTests-->
<div class = "container">
<div id = "blueCanvas">
</div>
</div>



<div>
hello world, my name is robins egg <br>
this is my second paragraph.
</div>

</main>
</body>

</html>

最佳答案

我吃了一些面条后把它修好了!我没有正确使用实例模式。我一直将每个草图保存为一个单独的文件,并希望 html 分别加载每个草图。

////top Sketch
var sketchPink = function(p) {
p.setup = function() {
const myPinkCanvas = p.createCanvas(400, 400);
myPinkCanvas.parent("pinkCanvas");
}

p.draw = function() {
p.clear();
p.background(255, 100, 100);
p.ellipse(p.mouseX, p.mouseY, 20, 20);
}
}

//secondary sketch
var sketchBlue = function(p) {
p.setup = function() {
const myBlueCanvas = p.createCanvas(400, 400);
myBlueCanvas.parent("blueCanvas");
}

p.draw = function() {
p.clear();
p.background(100, 100, 255);
p.ellipse(p.mouseX, p.mouseY, 20, 20);
}
}

var myp5Blue = new p5(sketchBlue);
var myp5Pink = new p5(sketchPink);
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Robins Egg</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

</head>

<body>
<main>
<div>
Sketch #1
</div>

<div class="container">
<div id="pinkCanvas">
</div>
</div>

<div>
Sketch #2
</div>

<div class="container">
<div id="blueCanvas">
</div>
</div>

</main>
</body>

</html>

关于javascript - 如何在同一个 html 页面上显示两个 p5js 草图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67285131/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com