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
510
新聞記者的程式設計第一課
Javascript + p5js 入門
tkirby
October 30, 2015
Tweet
Share
More Decks by tkirby
See All by tkirby
前端網頁資料視覺化設計
tkirby
1
430
Theory of Graphical Perception
tkirby
0
460
Open Refine Course
tkirby
0
180
Language Reference
tkirby
0
98
Visualization over Web
tkirby
0
110
迎戰壞資料 @ dbootcamp Taipei
tkirby
0
720
Rasterize D3.js
tkirby
7
1.6k
SVG + D3.JS Course Slide
tkirby
0
210
資料新聞學手冊導讀
tkirby
0
240
Other Decks in Technology
See All in Technology
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
0
230
AI前提のサービス運用ってなんだろう?
ryuichi1208
8
1.4k
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
Engineer Career Talk
lycorp_recruit_jp
0
190
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
320
RubyのWebアプリケーションを50倍速くする方法 / How to Make a Ruby Web Application 50 Times Faster
hogelog
3
950
OTelCol_TailSampling_and_SpanMetrics
gumamon
1
200
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
180
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
180
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
Featured
See All Featured
Navigating Team Friction
lara
183
14k
Building an army of robots
kneath
302
43k
Typedesign – Prime Four
hannesfritz
40
2.4k
Thoughts on Productivity
jonyablonski
67
4.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
How to Ace a Technical Interview
jacobian
276
23k
We Have a Design System, Now What?
morganepeng
50
7.2k
The Language of Interfaces
destraynor
154
24k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Code Review Best Practice
trishagee
64
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
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]; } }