NCC-JavaScript-Week#5

NTUST Coding Club JavaScript Course Week#5 (2015.11.20)
By Chiun Hau
For self-study only.

Transcript

1. Build Cool Things with p5.js 康 㹦 ꔤ
   ⚺ ⥜ ㉂ 噠 鏤 鎙
   鰊 ⥜ 蒀 䕙 撑 僈
   〵 猰 㣐 ✽ ⹛ 鏤 鎙 灇 瑖 爢
   鴍 㣗
2. Why p5.js is COOL? 1 S P D F T T J O H 涸 ㆹ 㷸
   + B W B T D S J Q U 涸 㻜 ⡲
   㛇 劥 ♳ 㽠 僽 剤 鞮 㺢 ✽ ⹛ 䚍 涸 㼭 殥 㹻  罜 ⚂ 佅 䴂  % 粭 㕬 莅 ⹛ 殥
3. NYU ITP Q  ⚺ 銴 歋 * 5 1 涸 㷸 欰 笞 隌  罜 ⚂ 䖎 㢵 僽 㥏 欰
    
   * 5 1 㥶 ず . * 5
   . F E J B
   - B C  僽 ✽ ⹛ 猰 䪮 谁 遯 涸 ⯓ 뀝
4. Example Code <3 劥 傈 䨾 剤 玑 䒭 焺 鿪 㖈 鸏 酆
   I U U Q T    H J U I V C  D P N  D I J V O I B V  Q   O D D
5. function setup() 〫 剚 㖈 玑 䒭 ⴲ 㨥 ⻋ 㻜 㛂 遤 ♧ 妄
   欽 倴 ♧ 妄 䚍 鏤 㹁
6. function draw() 剚 ♧ 湬 㛂 遤 湬 ⵌ ꡠ ꟗ 笪 갤
   欽 ⢵ 殥 㕬 㘗 騈 ⹛ 殥
7. function setup(){ createCanvas(500, 500); } function draw(){ ellipse(100, 100, 50, 50); } 殥 ♧ ⦐ ꬆ 姺 涸 㕩
8. ellipse(x, y, width, height) F M M J Q T F
9. function setup(){ createCanvas(500, 500); } function draw(){ ellipse(100, 100, 50, 50); ellipse(200, 100, 70, 70); } 殥 Ⰽ ⦐ ꬆ 姺 涸 㕩
10. fill(color(100, 200, 100)); stroke(color(“red”)); // or no color noFill(); noStroke(); 겝 蒀
11. var xPos = 0; function draw(){ ellipse(xPos, 100, 50, 50); xPos ++; } 殥 ♧ ⦐ 剚 ⹛ 涸 㕩
12. function mouseClicked() 殹 徿 롗 럊 乹 ♧ ♴ ⛓ 䖕 㽠 剚 㛂 遤
13. function mouseClicked(){ ellipse(mouseX, mouseY, 50, 50); } N P V T F $ M J D L F E 徿 롗 ✲ ⟝
14. Cool? / P
    0 C K F D U T
    / P
    . F U I P E T
    0 O M Z
    F B T Z
    U P
    V T F
    ' 6 / $ 5 * 0 / 4
    
15. rect() triangle() quad() bezier() vertex() ….
16. Advanced V T J O H
    G P S
    J G
    B O E
    B S S B Z
    
17. Build a matrix 欽 G P S ⨞ ♧ ⦐ 瀄 ꤏ
    
18. for(var i = 0; i < 9; i ++){ for(var j = 0; j < 9; j ++) { ellipse(i*50 , j*50, 30, 30) } } 殥 ♧ ⦐  Y  涸 瀄 ꤏ
19. for(var i = 0; i < 10; i ++){ for(var j = 0; j < 10; j ++) { if(i % 2 == 0) { fill(color(“blue”)); } else { fill(color(“red”)); } ellipse(i*50 ,j*50, 30, 30); } } 殥 ♧ ⦐  Y  涸 瀄 ꤏ  ⸈ Ⰵ ⴼ 倬 齅 鱀
20. #PrayForParis ⨞ ♧ ⦐  Y  涸 㕩 䕎 岁 㕜 㕜 偫 瀄 ꤏ 
    鍑 瘸 捀
    Q S B Z ' P S 1 B S J T  K T
      ⴕ ꗻ 箻 绢
    
21. Using sin() 殹 ⦐ 侸 㷸 㹻 ゅ 
    
22. T J O 宕 黇 〫 㔐 ⫄   荛  涸 侸 㶶
    ⵄ 欽 Ⱖ 暶 婌 涸 岚 䕎  醢 鸤 礶 䕙 涸 ⹛ 殥 佪 卓
    
23. frameCount 剚 㔐 ⫄ ♧ ⦐ 侮 侸  ➿ 邍 植 㖈 殥 ꬗ 鹎 遤 ⵌ 痧 䎙 䌴 ✫  䨾 ⟃ ➮ Ⱖ 㻜 剚 ♧ 湬 ⸈ ♧ ⸈ ♧ ♴ ⿡ 
    
24. function draw(){ ellipse(400, 400, sin(frameCount), sin(frameCount)); } G S B N F $ P V O U
    莅
    T J O
    涸 刈 僳 禾 袇
    
25. function draw(){ var sinSeed = sin(frameCount * 0.01); ellipse(400, 400, sinSeed * 100, sinSeed * 100); } G S B N F $ P V O U
    莅
    T J O
    涸 刈 僳 禾 袇  葻 㥪 晝 劥
    
26. sin() = Magic 箻 绢 ⡲ ⦐ ♳ ♴ ⨞ 矦 镜 麌 ⹛ 涸 椕 椕 ゅ 
    鍑 瘸 捀 T J O # B M M  K T
    
27. Final Project 雊  1 S B Z ' P S 1 B S J T 涸 敚 岙 䙐 㣐 䙐 㼭 ゅ 
    䧮 涸 晝 劥 㖈 鸏 酭  I U U Q    H P P  H M  Y - [  P 5 
    玑 䒭 焺 僽  Q S B Z ' P S 1 B S J T   K T
    
28. Terima Kasih! 䧮 僽 㹦 ꔤ  㹦 ꔤ 僽 䧮