前端頁面中插入processing代碼
工具：vs code ＋processing
操作系統：mac
1、下載processing.js
下載鏈接：
（1）找到裏面有個processing.js 下載https://github.com/processing-js/processing-js
（2）百度網盤：
鏈接:https://pan.baidu.com/s/1SanFCGOWTmpWzm-qI2qNVw 密碼:3knm
（3）官網（但是我總是登不上去）http://processingjs.org/download/
2、直接在vs code中加入代碼
<script type="text/processing" src="/js/processing.js"></script>
<script type="text/processing" data-processing-target="mycanvas">
... (添加processsing代碼片段）
</script>
<canvas id="mycanvas"></canvas> `
3、直接導入pde代碼
注意將pde文件放入html文件同一級下（包括圖片等素材）
<script src="/js/processing.js"></script>
<canvas data-processing-sources="xxx.pde"></canvas>
但是由於我上網查了之後，目前還沒有找到可以在processingj s中引入第三方庫文件的方法。
（1）提到第三方庫文件無法引入問題：https://www.it1352.com/502674.html
（2）csdn一位博主提出無法解決的問題：我在下面也做了一點目前知道的回答，但是這個問題我看了一下，現在仍然沒有人解答。https://blog.csdn.net/moixx/article/details/105595628
於是轉用javascript庫的p5js，
所以既然官方上給了這麼方便的p5，爲什麼不用呢？？
而且會了processing p5也不是很難，很好上手。
如何在vscode上寫p5
在官網上下載了p5js等一系列文件。
下載地址：
(1)官網：https://p5js.org/zh-Hans/download/ 放入js文件夾中
(2)百度網盤：
鏈接:https://pan.baidu.com/s/1pNja6Qqm2l4iyeQypCizKw 密碼:7uxb
p5還有這條政治正確
在vs code中安裝插件：（自動補全功能）
結構：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/js/p5.js"></script>
<title>Document</title>
</head>
<body>
<script>
var album;
var theta=0.0;
function setup()
{
createCanvas(700, 700);
imageMode(CENTER);
album=loadImage("musicply.png");
album.resize(175,175);
}
function draw()
{
background(255);
translate(width/2,height/2);
rotate(theta);
image(album,0,0);//draw pic
theta+=0.02;
}
</script>
</body>
</html>
p5的api可以參考官網：
（1）https://p5js.org/zh-Hans/reference/
（2）sound API:https://p5js.org/zh-Hans/reference/#/libraries/p5.sound
參考文獻：
官方入門文檔：寫得很仔細，好好看一下https://p5js.org/zh-Hans/get-started/