因為大家其實不太會被指令 所以在網路上有一個小小的P5 cheatsheet 小教學如果有需要可以隨時回來這邊去看自己有需要的東西
如果您有本地端的設定可以參考 因為教學都是用在網路編輯器,但我們其實還是需要在本機端才是最主要的需求
他會直接提供主要大家可以直接在本機端如何直接設定的做法
建議也可以安裝 VSCODE 跟 liveserve 去把P5.js直接執行出來
也可以直接去下載他的CDN在html裡面放入P5.js
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>p5.js example</title>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="p5.js"></script>
<!-- <script src="../addons/p5.sound.js"></script> -->
<script src="sketch.js"></script>
</head>
<body>
<main></main>
</body>
</html>
sketch.js裡面只要放入 p5 的設定就可以跑執行看看了
function setup() {
//slow down the frameRate to make it more visible
createCanvas(1000, 1000);
background(0, 0, 0);
}
function draw() {
background(100, 10);
fill(mouseX, mouseY, frameCount);
if (mouseIsPressed) {
fill(0);
rect(mouseX, mouseY, 100, 100);
} else {
ellipse(mouseX, mouseY, 100, 100);
}
}
// print(pmouseX +
這邊主要給已經會寫code的朋友利用https://openprocessing.org/ 你可以在裡面操作的技巧 你就可以節省很多不必要的滑鼠刪除增加指令