新聞記者的程式設計第一課

Javascript + p5js 入門

1. JavaScript & P5js 基礎網⾴頁視覺化程式設計⼊入⾨門 Kirby Wu infographics.tw
2. repl.it
3. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制 / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
4. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制 / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
5. 1 + 2 * 3 - 4
6. ( 1 + 2 ) * 3 - 4 % 2
7. 1 + 2; 3 + 4; 7 + 8;
8. 1 + 2; 3 + 4; 7 + 8; 執⾏行(指令) 3 7 15 結果(傳回值)
9. 991 x 768 ? 991 x 768 ?
10. 1 + 2; 3 + 4; 7 + 8; 四則運算 1 == 1 2 != 3 5 <= 4 邏輯運算
11. 1 == 1 2 != 3 5 <= 4 執⾏行(指令) true true false 結果(傳回值)
12. 1 == 1 2 != 3 5 <= 4 true || false true && false (1 == 2 ) || ( 3 == 3 ) && (4 == 5)
13. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制 / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
14. 1 + 2; 3 + 4; 7 + 8; 執⾏行(指令) 3 7 15 結果(傳回值)
15. = 等於 = 指定 = 儲存
16. = 儲存 x 未定數 = 變數 命名規則： [A~Za~z][A-Za-z0~9_]
17. = 儲存 x 變數 1
18. = x 1 + x 1 儲存 讀取
19. = x 1 + x 1 ; ; 逐⾏行運算
20. A = 1 + 2; B = A + 4; C = B + 8; 執⾏行(指令) A = 3 B = 7 C = 15 結果(傳回值)
21. A = 1 + 2; A = A + 3; 執⾏行(指令) A = 3 A = ? 結果(傳回值)
22. 2 的 20 次⽅方是多少? 220 Q:
23. 2*2*2*2*2*2*2*2*2*2*2*2*2*2*2*2 A = 2 * 2; A = A * A; A = A * A; A = A * A;
24. 2*2*2*2*2*2*2*2*2*2*2*2*2*2*2*2 A = 2 * 2; A = A * A; A = A * A; A = A * A; 幫我把 2 ⾃自乘 16 遍後存到 A 中
25. 2*2*2*2*2*2*2*2*2*2*2*2*2*2*2*2 A = 2 * 2; A = A * A; A = A * A; A = A * A; 幫我把 2 ⾃自乘 16 遍後存到 A 中 如果還沒乘到第 16 遍就不要停
26. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制 / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
27. A = 1; A = A * 2; 跑 16 遍
28. A = 1; { A = A * 2;
 } 跑 16 遍 這⼀一段
29. A = 1; { A = A * 2;
 } 16遍前 沒跑到 不要停
30. A = 1; for(B=0;B<16;B=B+1)
 { A = A * 2;
 } B變成16前 沒跑到 不要停
31. A = 1; for(B=0;B<16;B=B+1) { A = A * 2;
 } B=0 ; B<16 ; B=B+1 初始值 繼續的條件 累進的運算
32. A = 1; for(B=0;B<16;)
 { A = A * 2; B = B + 1;
 }
33. A = 1; B = 0; for(;B<16;)
 { A = A * 2; B = B + 1;
 }
34. A = 1; B = 0; for(;;)
 { A = A * 2; B = B + 1;
 }
35. A = 1; B = 0; for(;;)
 { A = A * 2; B = B + 1;
 if(B>=16) {
 break;
 } }
36. if(B>=16) {
 … } 如果這個邏輯運算成⽴立 就執⾏行這⼀一段程式
37. A = 1; B = 0; for(;;)
 { A = A * 2; B = B + 1;
 if(B>=16) {
 break;
 } }
38. for(初始值;繼續條件;累進)
 { 欲重覆的程式區塊 } if(進⼊入條件)
 { 條件執⾏行的程式區塊 }
39. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制 / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
40. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制 / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
41. A = 1; 數字
42. A = 1; A = B; A = 台灣;
43. A = 1; A = “B”; A = “台灣”; 字串 數字
44. A = 1; A = “台灣”; 數字 字串 A = 1 + 2; A = 1 == 2;
45. A = 1; A = “台灣”; 數字 字串 true false A = 1 == 2; 邏輯值 = boolean = 布林
46. A = 1; A = “台灣”; 數字 字串 A = true; 邏輯值
47. 3 1 4 1 5 9 2 6 5 3 5
48. A1 = 3 A2 = 1 A3 = 4 A4 = 1 A5 = 5 A6 = 9 …
49. A1 = 3 A2 = 1 A3 = 4 A4 = 1 A5 = 5 A6 = 9 … B
50. A1 = 3 A2 = 1 A3 = 4 A4 = 1 A5 = 5 A6 = 9 … if(B==1) { C = A1; } if(B==2) { C = A2; } if(B==3) { C = A3; } if(B==4) { C = A4; } …
51. A1 = 3 A2 = 1 A3 = 4 A4 = 1 A5 = 5 A6 = 9 … for(i=0;i<10;i++) {
 if(B==i) { C = Ai; }
 }
52. A[i] 陣列 = Array A = [3,1,4,1,5,9,2,6,5,3,5]
53. A = [3,1,4,1,5,9,2,6,5,3,5] C = A[B] B = 5
54. A = [3,1,4,1,5,9,2,6,5,3,5] A = { 0: 3, 1: 1, 2: 4, 3: 5, … }
55. A = { “radius”: 5, “x”: 10, “y”: 10 } A[“x”] 物件 = Object = 雜湊 = Hash
56. A = 1; A = “台灣”; 數字 字串 A = true; 邏輯值 A = [1,2,3 ..]; 陣列 A = {x: 1, …} 物件
57. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制 / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
58. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制 + 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
59. { ⼀一段程式碼 } A = { ⼀一段程式碼 } A;
60. 函式 function A() {
 }
61. 函式 function A() {
 B = B + 1; }
62. function A() {
 B = B + 1; } A(); A(); A();
63. function A(C) {
 B = B + C; } A(1); A(2); A(3); 參數
64. function A(C,D) {
 B = B + C + D; } A(1,2); A(3,4); A(5,6); 多個參數
65. function A(C,D) {
 return B = B + C + D; } E = A(1,2); F = E + A(3,4); G = F + A(5,6); 傳回值
66. var i = 0; function A() {
 var i = 1; } A();
67. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制 / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
68. a = (1 + 2 - 3) / 4 % 5; if(a==1) {
 } for(i=0;i<5;i++) {
 break; } a = [1,2,3]; b = {c: 1}; function d(e,f) { return e + f;
 } a = true || false && (b == 2) var a = 1;
 function b() { var a = 2;
 } 四則運算 邏輯運算 條件執⾏行 資料型態 函式 重覆執⾏行 變數宣告與有效範圍
70. rect(10,10,100,100); x y 寬 ⾼高 fill(“black”); 設定填⾊色為⿊黑⾊色
71. v = [1,3,2,4,3,5,4,6,5,7]; for(i=0;i<10;i++) { fill(“black”); rect( 0, i * 10,
 v[i] * 10, 8 ); }
72. v = [1,3,2,4,3,5,4,6,5,7]; for(i=0;i<10;i++) { fill(“black”); rect(0,i * 10,v[i] * 10,8); }
73. codepen.io/tkirby/pen/rOvwqg
74. ???
 v = [1,3,2,4,3,5,4,6,5,7]; for(i=0;i<10;i++) { fill(???); rect(0,i * 10,v[i] * 10,8); } Q: 將 Bar Chart 變成彩⾊色的
75. http://p5js.org/reference/
76. 來個 PIE CHART 吧... http://p5js.org/reference/#/p5/arc
77. a = [1,3,2,4,5,7,9,6,8,0]; b = [“#ff0000”,”#00ff00”,”#0000ff”]; sum = 0; for(i=0;i<10;i++) { sum += a[i]; }
 function draw() {
 last = 0; for(i=0;i<10;i++) { fill(b[i % 3]); arc(50,50,40,40,
 last * 6.28 / sum, (last + a[i]) * 6.28 / sum); last = last + a[i];
 } }