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
560
新聞記者的程式設計第一課
Javascript + p5js 入門
tkirby
October 30, 2015
Tweet
Share
More Decks by tkirby
See All by tkirby
前端網頁資料視覺化設計
tkirby
1
490
Theory of Graphical Perception
tkirby
0
520
Open Refine Course
tkirby
0
200
Language Reference
tkirby
0
110
Visualization over Web
tkirby
0
120
迎戰壞資料 @ dbootcamp Taipei
tkirby
0
750
Rasterize D3.js
tkirby
7
1.7k
SVG + D3.JS Course Slide
tkirby
0
220
資料新聞學手冊導讀
tkirby
0
260
Other Decks in Technology
See All in Technology
Terraform Cloudで始めるおひとりさまOrganizationsのすゝめ
handy
2
160
改めて学ぶ Trait の使い方 / phpcon odawara 2025
meihei3
1
660
Webアプリを Lambdaで動かすまでに考えること / How to implement monolithic Lambda Web Application
_kensh
7
1.3k
彩の国で始めよう。おっさんエンジニアから共有したい、当たり前のことを当たり前にする技術
otsuki
0
140
技術者はかっこいいものだ!!~キルラキルから学んだエンジニアの生き方~
masakiokuda
2
260
LiteXとオレオレCPUで作る自作SoC奮闘記
msyksphinz
0
590
Amazon S3 Tables + Amazon Athena / Apache Iceberg
okaru
0
270
開発視点でAWS Signerを考えてみよう!! ~コード署名のその先へ~
masakiokuda
3
160
Vision Pro X Text to 3D Model ~How Swift and Generative Al Unlock a New Era of Spatial Computing~
igaryo0506
0
260
DuckDB MCPサーバーを使ってAWSコストを分析させてみた / AWS cost analysis with DuckDB MCP server
masahirokawahara
0
1.2k
SmartHR プロダクトエンジニア求人ガイド_2025 / PdE job guide 2025
smarthr
0
100
大AI時代で輝くために今こそドメインにディープダイブしよう / Deep Dive into Domain in AI-Agent-Era
yuitosato
1
360
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
A designer walks into a library…
pauljervisheath
205
24k
Into the Great Unknown - MozCon
thekraken
37
1.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
390
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
670
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Making Projects Easy
brettharned
116
6.1k
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]; } }