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

7f7cce675da85bf8807da9f8d0c3a955?s=47 tkirby
October 30, 2015

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

Javascript + p5js 入門

7f7cce675da85bf8807da9f8d0c3a955?s=128

tkirby

October 30, 2015
Tweet

Transcript

  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;
 } 四則運算 邏輯運算 條件執⾏行 資料型態 函式 重覆執⾏行 變數宣告與有效範圍
  69. None
  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];
 } }