Processing.js アニメーションの基本

Transcript

1. ৘ใฤू 8FC
   1SPDFTTJOHKT
   
   
   Ξχϝʔγϣϯͷجຊ ೥݄೔
   ౦ژ᥁ज़େֶ
   ܳज़৘ใηϯλʔ ".$
   ୲౰ɿాॴ३
2. Ξχϝʔγϣϯͷجຊ
3. Ξχϝʔγϣϯ ‣ ࠓ೔͸ૣ଎Ξχϝʔγϣϯʹ௅ઓ
   ‣ ·ͣ͸શମͷ࿮૊ΈΛཧղ͢Δ
   ! ‣ ΞχϝʔγϣϯΛ࣮ݱ͢Δʹ͸ɺϓϩάϥϜΛΑΓߏ଄Խ͍ͯ͘͠ඞཁ
   ‣ TFUVQ ͱVQEBUF ͱ͍͏ೋͭͷύʔτʹߏ଄Խͯ͠ΞχϝʔγϣϯΛ࣮ݱ͢Δ
4. Ξχϝʔγϣϯ ‣ TFUVQ
   r
   ॳظઃఆ
   ϓϩάϥϜͷىಈ࣌ʹҰ౓͚࣮ͩߦ͞Ε·͢ɻը໘ͷجຊઃఆ΍ ϑϨʔϜϨʔτͳͲΛઃఆ͠·͢ɻ
   ‣ ESBX
   r
   ඳը
   ઃఆͨ͠଎͞ ϑϨʔϜϨʔτ ͰϓϩάϥϜ͕ऴྃ͢Δ·Ͱ͘Γ͔͑ ࣮͠ߦ͞Ε·͢ɻ
5. Ξχϝʔγϣϯ ‣ ͜ͷ࢓૊ΈΛར༻ͯ͠ԁ͕ࣼΊԼʹҠಈ͢ΔϓϩάϥϜΛ࡞੒ͯ͠ΈΔ
6. Ξχϝʔγϣϯ ‣ ҎԼͷίʔυΛهೖ float posX, posY; //ԁͷத৺ҐஔΛ֨ೲ͢Δม਺ float speedX, speedY; //ԁͷ଎౓Λ֨ೲ͢Δม਺ void setup() { size(640, 480); //640x480pixelͷը໘Λੜ੒ frameRate(60); //ϑϨʔϜϨʔτ stroke(63, 191, 255); //ઢͷ৭ fill(0, 127, 255, 127); //ృΓͷ৭ posX = 40; //ԁͷॳظҐஔX posY = 40; //ԁͷॳظҐஔY speedX = 3; //ԁͷॳظҐஔX speedY = 2; //ԁͷॳظҐஔY } ! void draw() { background(15); //എܠΛඳը ellipse(posX, posY, 20, 20); //ࢦఆͨ͠ҐஔʹԁΛඳը posX = posX + speedX; //ԁͷX࠲ඪΛߋ৽ posY = posY + speedY; //ԁͷY࠲ඪΛߋ৽ }
7. Ξχϝʔγϣϯ ‣ ԁ͕Ξχϝʔγϣϯ͢Δ ͸ͣ
8. Ξχϝʔγϣϯ ‣ ը໘ͷ୺Ͱό΢ϯυͤͯ͞ΈΔ
   ! ‣ ҎԼͷ৚݅Λઃఆ͢Δඞཁ
   ‣ ը໘ͷӈ୺ɺ΋͘͠͸ը໘ͷࠨ୺
   ˠ
   9ํ޲ͷεϐʔυΛ൓స
   ‣ ը໘ͷ্୺ɺ΋͘͠͸ը໘ͷԼ୺
   ˠ
   :ํ޲ͷεϐʔυΛ൓స
   ! ‣ JGจ
   ‣ ͜ͷΑ͏ͳʮ΋͠˓˓ͩͬͨΒɺ˘˘͠ͳ͍͞ɺʢͦ͏Ͱͳ͚Ε͹ɺ˚˚˚͠ͳ͞ ͍ʣʯͱ͍͏Α͏ͳ੍ޚߏ଄Λදݱ͢ΔͨΊͷ࢓૊Έ
9. Ξχϝʔγϣϯ ‣ JGจͷจ๏ if(ʬ৚݅ࣜʭ){ ʬਅจʭ//৚͕݅ਖ਼͍͠৔߹ͷॲཧ } else { ʬِจʭ//৚͕݅ਖ਼͘͠ͳ͍৔߹ͷॲཧ }
10. Ξχϝʔγϣϯ ‣ ৚݅෼ذΛ͔ͭͬͯɺนͰό΢ϯυͤͯ͞ΈΔ float posX, posY; //ԁͷத৺ҐஔΛ֨ೲ͢Δม਺ float speedX, speedY; //ԁͷ଎౓Λ֨ೲ͢Δม਺ ! void setup() { size(640, 480); //640x480pixelͷը໘Λੜ੒ frameRate(60); //ϑϨʔϜϨʔτ stroke(63, 191, 255); //ઢͷ৭ fill(0, 127, 255, 127); //ృΓͷ৭ posX = 40; //ԁͷॳظҐஔX posY = 40; //ԁͷॳظҐஔY speedX = 3; //ԁͷॳظҐஔX speedY = 2; //ԁͷॳظҐஔY }
11. Ξχϝʔγϣϯ ‣ ৚݅෼ذΛ͔ͭͬͯɺนͰό΢ϯυͤͯ͞ΈΔ void draw() { background(15); //എܠΛඳը ellipse(posX, posY, 20, 20); //ࢦఆͨ͠ҐஔʹԁΛඳը posX = posX + speedX; //ԁͷX࠲ඪΛߋ৽ posY = posY + speedY; //ԁͷY࠲ඪΛߋ৽ if (posX < 0 || posX > width) { //΋͠ը໘ͷࠨ୺·ͨ͸ӈ୺ʹ౸ୡͨ͠Β speedX = speedX * -1; //Xํ޲ͷεϐʔυΛ൓స } if (posY < 0 || posY > height) { //΋͠ը໘ͷԼ୺·ͨ͸্୺ʹ౸ୡͨ͠Β speedY = speedY * -1; //Yํ޲ͷεϐʔυΛ൓స } }
12. Ξχϝʔγϣϯ ‣ ͨ͘͞ΜͷਤܗΛҰ౓ʹಈ͔ͯ͠ΈΔ
    ‣ ઌि΍ͬͨGPSจͷԠ༻
    ! ‣ σʔλͷ࣋ͪํʹ޻෉͕ඞཁ
    ˠ
    ഑ྻ
    ‣ σʔλͷϩοΧʔͷΑ͏ͳΠϝʔδ
13. Ξχϝʔγϣϯ ‣ ഑ྻͷఆٛͷํ๏ͷྫ // floatܕͷྖҬ100ίΛ֬อɺdataͱ͍͏഑ྻ໊ʹ float data[] = new float[100]; ! // data[0], data[1], data[2] ... data[99] ·ͰҰؾʹੜ੒!
14. Ξχϝʔγϣϯ ‣ ഑ྻͱ͘Γ͔͑͠Λ࢖༻ͯ͠ɺઌఔͷนͰό΢ϯυ͢ΔϓϩάϥϜΛվ଄
    ‣ ͨ͘͞ΜͷਤܗΛಉ࣌ʹಈ͔ͯ͠ΈΔ
15. Ξχϝʔγϣϯ ‣ ഑ྻΛ࢖༻ͯ͠ɺͨ͘͞ΜͷਤܗΛಈ͔͢ int NUM = 100; float posX[] = new float[NUM]; //ԁͷத৺ҐஔΛ֨ೲ͢Δม਺ float posY[] = new float[NUM]; float speedX[] = new float[NUM]; //ԁͷ଎౓Λ֨ೲ͢Δม਺ float speedY[] = new float[NUM]; ! void setup() { size(640, 480); //640x480pixelͷը໘Λੜ੒ frameRate(60); //ϑϨʔϜϨʔτ stroke(63, 191, 255); //ઢͷ৭ fill(0, 127, 255, 127); //ృΓͷ৭ //NUMճ͘Γ͔͑͠ for (int i = 0; i < NUM; i++) { posX[i] = random(width); //ԁͷॳظҐஔX posY[i] = random(height); //ԁͷॳظҐஔY speedX[i] = random(-5,5); //ԁͷॳظҐஔX speedY[i] = random(-5,5); //ԁͷॳظҐஔY } }
16. Ξχϝʔγϣϯ ‣ ഑ྻΛ࢖༻ͯ͠ɺͨ͘͞ΜͷਤܗΛಈ͔͢ void draw() { background(15); //എܠΛඳը //NUMճ͘Γ͔͑͠ for (int i = 0; i < NUM; i++) { ellipse(posX[i], posY[i], 20, 20); //ࢦఆͨ͠ҐஔʹԁΛඳը posX[i] = posX[i] + speedX[i]; //ԁͷX࠲ඪΛߋ৽ posY[i] = posY[i] + speedY[i]; //ԁͷY࠲ඪΛߋ৽ //΋͠ը໘ͷࠨ୺ɺ·ͨ͸ӈ୺ʹ౸ୡͨ͠Β if (posX[i] < 0 || posX[i] > width) { speedX[i] = speedX[i] * -1; //Xํ޲ͷεϐʔυΛ൓స } //΋͠ը໘ͷԼ୺ɺ·ͨ͸্୺ʹ౸ୡͨ͠Β if (posY[i] < 0 || posY[i] > height) { speedY[i] = speedY[i] * -1; //Yํ޲ͷεϐʔυΛ൓స } } }
17. Ξχϝʔγϣϯ ‣ ͨ͘͞Μͷਤܗ͕ಉ࣌ʹಈ͘
18. Ξχϝʔγϣϯ ‣ ࠓ೔͸͜͜·Ͱ