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
540
Theory of Graphical Perception
tkirby
0
560
Open Refine Course
tkirby
0
210
Language Reference
tkirby
0
110
Visualization over Web
tkirby
0
130
迎戰壞資料 @ dbootcamp Taipei
tkirby
0
770
Rasterize D3.js
tkirby
7
1.7k
SVG + D3.JS Course Slide
tkirby
0
240
資料新聞學手冊導讀
tkirby
0
280
Other Decks in Technology
See All in Technology
帳票Vibe Coding
terurou
0
140
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
300
見てわかるテスト駆動開発
recruitengineers
PRO
4
280
GCASアップデート(202506-202508)
techniczna
0
250
OpenAPIから画面生成に挑戦した話
koinunopochi
0
150
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
270
人を動かすことについて考える
ichimichi
2
320
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
[OCI Skill Mapping] AWSユーザーのためのOCI(2025年8月20日開催)
oracle4engineer
PRO
2
140
知られざるprops命名の慣習 アクション編
uhyo
10
2.4k
あなたの知らない OneDrive
murachiakira
0
230
JOAI発表資料 @ 関東kaggler会
joai_committee
1
260
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
How STYLIGHT went responsive
nonsquared
100
5.7k
Speed Design
sergeychernyshev
32
1.1k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Making Projects Easy
brettharned
117
6.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Writing Fast Ruby
sferik
628
62k
Code Reviewing Like a Champion
maltzj
525
40k
Facilitating Awesome Meetings
lara
55
6.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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]; } }