106.04.21 p5.js簡單語法

首先先來個我的作業展示OuO

好
開始QuQ

原則上index.html內容就不會變，請參考106.04.21 p5.js事前準備與問題解決
程式都會寫在sketch.js裡面
測試就直接用瀏覽器開啟index.html

本篇以本次作業會用到的功能為主

JavaScript的變數宣告

let x;//類似區域變數，常用於function或for的index
var y;//類似全域變數，不管在哪一行定義，整個程式都可以使用

JavaScript的迴圈
根本就是clike的迴圈

for(let i = 0; i < 10; i++){
}

JavaScript其他
; 照理說可加可不加

p5.js輸入框、按鈕
可參考這個官方範例 Input and Button

p5.js畫圈圈
可參考官方API - ellipse()

ellipse(x, y, w, [h]);//x座標, y座標, 寬, 高

p5.js畫線線
可參考官方API - line()

line(x1,y1,x2,y2);

所以要把圈圈連起來不難，可來這裡預覽

function draw() {
  ellipse(100, 100, 20, 20);
  ellipse(200, 300, 10);
  line(100, 100, 200, 300);
}

最後說一下作業
輸入框、按鈕我是用這個上面提到的範例Input and Button改的
所以我一開始就說
用網頁畫圖並不難，反而是對齊格式我算了很久
而對齊格式也是這個作業的精華吧，我猜
提供一下對齊想法(我的樹是躺著的OuO)：
1. 算出leaf node個數，也就是最後一排最高那排
2. 決定最後一排的間隔，所以乘上leaf node個數就是整棵樹的高(不要跟n1那個高搞錯@@)了
3. 利用每層個數決定每層第一個的Y座標，同層就加上(高/每層個數)
4. 連線，每過n2個點前面的點就要換下一個，可利用取餘數判斷

以上
再來就靠自己了@@