我希望为我的动画工作室建立一个网站,并希望在背景中设置几个p5草图以增添一些风格。目前,我已经设置了两个基本的草图,只是为了确保一切正常。其中一个显示为粉色,另一个显示为蓝色,它们都被设计成绘制在“我们是谁”的上方和下方。
我的问题是我的html页面似乎能够加载其中一个脚本,但不能同时加载两个脚本。我可以注释掉粉色脚本,蓝色脚本就会显示出来,适当地添加到我的div中,反之亦然。
有没有人知道如何让这两个草图显示在同一个页面上呢?
谢谢。
附言:我尝试使用实例模式,但仍无法使其正常工作。我听说实例模式对此有帮助,但我不知道如何从实例模式转到在同一页上有两个草图。如果有任何资源可提供,我将不胜感激!
我的问题是我的html页面似乎能够加载其中一个脚本,但不能同时加载两个脚本。我可以注释掉粉色脚本,蓝色脚本就会显示出来,适当地添加到我的div中,反之亦然。
有没有人知道如何让这两个草图显示在同一个页面上呢?
谢谢。
附言:我尝试使用实例模式,但仍无法使其正常工作。我听说实例模式对此有帮助,但我不知道如何从实例模式转到在同一页上有两个草图。如果有任何资源可提供,我将不胜感激!
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>