如何在同一個 html 頁面上顯示兩個 p5js 草圖？

Question

我希望為我的 animation 工作室建立一個網站，我希望在后台設置一些 p5 草圖以增加一些風格。 目前，我設置了兩個基本草圖，以確保一切正常。 一個顯示為pink ，一個顯示為blue ，它們被設計為繪制在“我們是誰”線的上方和下方。

我的問題是我的 html 頁面似乎能夠加載我的腳本之一，但不能同時加載兩者。 我可以注釋掉粉紅色的腳本，藍色會出現，正確地作為我的 div 的父級，反之亦然。

有誰知道如何讓這兩個草圖出現在同一頁面上？

謝謝

ps 我嘗試過使用instance mode ，但我仍然無法使其工作。 我聽說實例模式對此很有幫助，但我不知道如何從實例模式 go 到在同一頁面上有兩個草圖。 如果有人有這方面的資源，我將不勝感激！

 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>

Answer 1

經過一番折騰，我修好了。 我沒有正確使用實例模式。 我一直將每個草圖保存為單獨的文件，並期望 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>

如何在同一個 html 頁面上顯示兩個 p5js 草圖？

問題描述

1 個解決方案

解決方案1
2 2021-04-27 17:35:35

如何在同一個 html 頁面上顯示兩個 p5js 草圖？

問題描述

1 個解決方案

解決方案1 2 2021-04-27 17:35:35

解決方案1
2 2021-04-27 17:35:35