Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
新聞記者的程式設計第一課
Search
tkirby
October 30, 2015
Technology
0
580
新聞記者的程式設計第一課
Javascript + p5js 入門
tkirby
October 30, 2015
Tweet
Share
More Decks by tkirby
See All by tkirby
前端網頁資料視覺化設計
tkirby
1
520
Theory of Graphical Perception
tkirby
0
540
Open Refine Course
tkirby
0
210
Language Reference
tkirby
0
110
Visualization over Web
tkirby
0
130
迎戰壞資料 @ dbootcamp Taipei
tkirby
0
760
Rasterize D3.js
tkirby
7
1.7k
SVG + D3.JS Course Slide
tkirby
0
230
資料新聞學手冊導讀
tkirby
0
280
Other Decks in Technology
See All in Technology
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.2k
フィンテック養成勉強会#54
finengine
0
180
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
770
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
100
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
360
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
1k
エンジニア向け技術スタック情報
kauche
1
280
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
490
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
1
180
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
220
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
Docker and Python
trallard
44
3.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Music & Morning Musume
bryan
46
6.6k
Side Projects
sachag
455
42k
Producing Creativity
orderedlist
PRO
346
40k
Practical Orchestrator
shlominoach
188
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Transcript
JavaScript & P5js 基礎網⾴頁視覺化程式設計⼊入⾨門 Kirby Wu infographics.tw
repl.it
程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制
/ 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制
/ 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
1 + 2 * 3 - 4
( 1 + 2 ) * 3 - 4 %
2
1 + 2; 3 + 4; 7 + 8;
1 + 2; 3 + 4; 7 + 8; 執⾏行(指令)
3 7 15 結果(傳回值)
991 x 768 ? 991 x 768 ?
1 + 2; 3 + 4; 7 + 8; 四則運算
1 == 1 2 != 3 5 <= 4 邏輯運算
1 == 1 2 != 3 5 <= 4 執⾏行(指令)
true true false 結果(傳回值)
1 == 1 2 != 3 5 <= 4 true
|| false true && false (1 == 2 ) || ( 3 == 3 ) && (4 == 5)
程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制
/ 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
1 + 2; 3 + 4; 7 + 8; 執⾏行(指令)
3 7 15 結果(傳回值)
= 等於 = 指定 = 儲存
= 儲存 x 未定數 = 變數 命名規則: [A~Za~z][A-Za-z0~9_]
= 儲存 x 變數 1
= x 1 + x 1 儲存 讀取
= x 1 + x 1 ; ; 逐⾏行運算
A = 1 + 2; B = A + 4;
C = B + 8; 執⾏行(指令) A = 3 B = 7 C = 15 結果(傳回值)
A = 1 + 2; A = A + 3;
執⾏行(指令) A = 3 A = ? 結果(傳回值)
2 的 20 次⽅方是多少? 220 Q:
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*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 中
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 遍就不要停
程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制
/ 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
A = 1; A = A * 2; 跑 16
遍
A = 1; { A = A * 2; }
跑 16 遍 這⼀一段
A = 1; { A = A * 2; }
16遍前 沒跑到 不要停
A = 1; for(B=0;B<16;B=B+1) { A = A * 2;
} B變成16前 沒跑到 不要停
A = 1; for(B=0;B<16;B=B+1) { A = A * 2;
} B=0 ; B<16 ; B=B+1 初始值 繼續的條件 累進的運算
A = 1; for(B=0;B<16;) { A = A * 2;
B = B + 1; }
A = 1; B = 0; for(;B<16;) { A =
A * 2; B = B + 1; }
A = 1; B = 0; for(;;) { A =
A * 2; B = B + 1; }
A = 1; B = 0; for(;;) { A =
A * 2; B = B + 1; if(B>=16) { break; } }
if(B>=16) { … } 如果這個邏輯運算成⽴立 就執⾏行這⼀一段程式
A = 1; B = 0; for(;;) { A =
A * 2; B = B + 1; if(B>=16) { break; } }
for(初始值;繼續條件;累進) { 欲重覆的程式區塊 } if(進⼊入條件) { 條件執⾏行的程式區塊 }
程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制
/ 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制
/ 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
A = 1; 數字
A = 1; A = B; A = 台灣;
A = 1; A = “B”; A = “台灣”; 字串
數字
A = 1; A = “台灣”; 數字 字串 A =
1 + 2; A = 1 == 2;
A = 1; A = “台灣”; 數字 字串 true false
A = 1 == 2; 邏輯值 = boolean = 布林
A = 1; A = “台灣”; 數字 字串 A =
true; 邏輯值
3 1 4 1 5 9 2 6 5 3
5
A1 = 3 A2 = 1 A3 = 4 A4
= 1 A5 = 5 A6 = 9 …
A1 = 3 A2 = 1 A3 = 4 A4
= 1 A5 = 5 A6 = 9 … B
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; } …
A1 = 3 A2 = 1 A3 = 4 A4
= 1 A5 = 5 A6 = 9 … for(i=0;i<10;i++) { if(B==i) { C = Ai; } }
A[i] 陣列 = Array A = [3,1,4,1,5,9,2,6,5,3,5]
A = [3,1,4,1,5,9,2,6,5,3,5] C = A[B] B = 5
A = [3,1,4,1,5,9,2,6,5,3,5] A = { 0: 3, 1: 1,
2: 4, 3: 5, … }
A = { “radius”: 5, “x”: 10, “y”: 10 }
A[“x”] 物件 = Object = 雜湊 = Hash
A = 1; A = “台灣”; 數字 字串 A =
true; 邏輯值 A = [1,2,3 ..]; 陣列 A = {x: 1, …} 物件
程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制
/ 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制
+ 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
{ ⼀一段程式碼 } A = { ⼀一段程式碼 } A;
函式 function A() { }
函式 function A() { B = B + 1; }
function A() { B = B + 1; } A();
A(); A();
function A(C) { B = B + C; } A(1);
A(2); A(3); 參數
function A(C,D) { B = B + C + D;
} A(1,2); A(3,4); A(5,6); 多個參數
function A(C,D) { return B = B + C +
D; } E = A(1,2); F = E + A(3,4); G = F + A(5,6); 傳回值
var i = 0; function A() { var i =
1; } A();
程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制
/ 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
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; } 四則運算 邏輯運算 條件執⾏行 資料型態 函式 重覆執⾏行 變數宣告與有效範圍
None
rect(10,10,100,100); x y 寬 ⾼高 fill(“black”); 設定填⾊色為⿊黑⾊色
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 ); }
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); }
codepen.io/tkirby/pen/rOvwqg
??? 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 變成彩⾊色的
http://p5js.org/reference/
來個 PIE CHART 吧... http://p5js.org/reference/#/p5/arc
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]; } }