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
450
Open Refine Course
tkirby
0
180
Language Reference
tkirby
0
96
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
200
資料新聞學手冊導讀
tkirby
0
240
Other Decks in Technology
See All in Technology
初心者に Vue.js を 教えるには
tsukuha
5
390
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
360
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
物価高なラスベガスでの過ごし方
zakky
0
380
AWS CodePipelineでコンテナアプリをデプロイした際に、古いイメージを自動で削除する
smt7174
1
100
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
150
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
530
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.8k
カメラを用いた店内計測におけるオプトインの仕組みの実現 / ai-optin-camera
cyberagentdevelopers
PRO
1
120
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
130
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
180
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
Featured
See All Featured
Done Done
chrislema
181
16k
Bash Introduction
62gerente
608
210k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Building Your Own Lightsaber
phodgson
102
6.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Speed Design
sergeychernyshev
24
570
How STYLIGHT went responsive
nonsquared
95
5.2k
Adopting Sorbet at Scale
ufuk
73
9k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Designing for Performance
lara
604
68k
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]; } }