記錄用: 106.04.21 p5.js事前準備與問題解決

機率統計課要畫樹狀圖
教授又說網頁版為佳
只好亂找
剛好看到同學使用processing
查了一下才發現竟然有JS的網頁板可用，就是這篇主題p5.js
官方算是有詳盡的API跟教學
首頁恩....我不知道那個手指要幹嘛XDD

API

GitHub (從官方網站下載原始碼要錢，從GitHub下載就不用....OuO)

processing甚至有提供專屬的IDE，看起來很誘人，可看介紹影片

不過我還是用Atom寫，用記事本也是可

正題
官方有介紹如何開始其實一點也不難
首先需要兩個檔案(放在同一個資料夾)：
index.html、sketch.js (命名請隨意)
index.html：

<html>
  <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

sketch.js：

function setup() {

}

function draw() {
  ellipse(50, 50, 80, 80);
}

官方是說這樣就可以畫一個圓了

補充
要編輯跟在瀏覽器開啟html檔很簡單
只需要在檔案右鍵選擇開啟方式即可

要看有沒有錯誤或debug可以在瀏覽器右鍵 > 檢查 > Console

問題一
不過我試了很久，一直有錯誤訊息
Failed to load resource: net::ERR_FILE_NOT_FOUND
解決方式是去GitHub的release下載原始碼自己include

<script src="p5.js"></script>

問題二
使用官方範例Input and Button時
因為需要同時include p5.js、p5.dom.js，發現錯誤
Uncaught TypeError: Cannot read property 'prototype' of undefined
at p5.dom.js:71
at p5.dom.js:34
at p5.dom.js:35
Uncaught not yet implemented
解決方法是要按照順序include，先p5.js再p5.dom.js

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

問題三
不想下載的話還是有方法，我在解決問題二時有查到這個方法

<script async src=https://CDN.JSDelivr.net/g/p5.js(p5.min.js+addons/p5.dom.js+addons/p5.sound.js)></script>
<script defer src=sketch.js></script>

不放心網路上include的話還是下載吧

總結
共四個檔案在同一個資料夾：index.html、sketch.js、p5.min.js、p5.dom.js
index.html：

<html>
  <head>
    <script src="p5.min.js"></script>
    <script src="p5.dom.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

sketch.js：

function setup() {

}

function draw() {
  ellipse(50, 50, 80, 80);
}

這樣用瀏覽器開啟index.html就可以看到一個圓了
"p5.min.js"算是精簡版的p5.js吧

下一篇再來簡單介紹語法@@

參考資料：
Centering Sketch using p5.dom

106.04.21 p5.js事前準備與問題解決

3 則留言: