クリエイティブコーディングのための数学+JavaScript入門三角関数と行列

ΫϦΤΠςΟϒ ίʔσΟϯάͷͨΊͷ ਺ֶʴ+BWB4DSJQUೖ໳ ࡾ֯ؔ਺ͱߦྻ ৽य़εϖγϟϧ ͔ͨ͸͠ͷͿͻΖ ୈҰճΫϦΤΠςΟϒίʔσΟϯάษڧձʮϕΫτϧʯ੒Ռ෺ ୈೋճΫϦΤΠςΟϒίʔσΟϯάษڧձʮྗʯ੒Ռ෺ άϧʔϓలʮ3FqFDUJPOʯग़ల࡞඼ԋग़ άϧʔϓలʮVOGSBNFʯग़ల࡞඼ʰ3FOEBOʱ

ΫϦΤΠςΟϒίʔσΟϯάͰ਺ֶʁ w ύʔςΟΫϧΛࣗ༝ʹඈ͹͍ͨ͠  ˠ଎౓ͷܭࢉɺϕΫτϧɺҠಈྔܭࢉ w ৭Λࣗ༝ʹมԽ͍ͤͨ͞  ˠपظ֯౓ͷܭࢉɺೱ୶ͷ࿈ଓతมԽ w େྔͷΦϒδΣΫτʹμϯεͯ͠΋Β͍͍ͨ  ˠ੍࣌ؒޚʢλΠϜϥϓεʣɺߴ౓ͳมܗܭࢉ
w δΣωϨΠςΟϒΞʔτΛ࡞Γ͍ͨ  ˠ਺ֶΞϧΰϦζϜͷཧղ

໨ඪ ᶃ ࡾ֯ؔ਺ͱߦྻͰදݱʹ׆༻Ͱ͖Δ෦෼Λ஌Δ w શ෦͸஌ΒΜͰ΋Կͱ͔ͳΔΘΑ ᶄ ਺ֶࣜˠ+BWB4DSJQU΁Ҡ২Ͱ͖ΔΑ͏ʹͳΔ w ը૾ɺԻ੠ॲཧͷXJLJQFEJB΍࿦จ͕׆༻Ͱ͖ ΔΑ͏ʹͳΓ·ͧ͢
Ұ෦ҙ༁͕͋Γ·͢ਖ਼֬ੑ͸ଞͷจݙΛࢀߟʹͯ͠Ͷ

ΞδΣϯμ ᶃ ؔ਺ͱ͸ N ᶄ ࡾ֯ؔ਺ͱ͸ N ᶅ
ࡾ֯ؔ਺Λ࢖ͬͨίʔσΟϯάମݧ N ᶆ ߦྻͱ͸ N ᶇ ߦྻΛ࣮૷͢ΔίʔσΟϯάମݧ N ᶈ ࣗ༝ʹίʔσΟϯά N ᶉ ൃද N

ʮؔ਺ʯͱ͸ w ॲཧͷ·ͱΊ w ύϥϝʔλʢҾ਺ʣΛ౉ͯ͠ɺ  ฦΓ஋Λฦͯ͘͠ΕΔʢ͜ͱ΋͋Δʣ

ʮؔ਺ʯͱ͸ w ॲཧͷ·ͱΊ w ύϥϝʔλʢҾ਺ʣΛ౉ͯ͠ɺ  ฦΓ஋Λฦͯ͘͠ΕΔʢ͜ͱ΋͋Δʣ ਺ֶ΋ಉ༷ʂ

ࡾ֯ؔ਺ʢ਺ֶ*ʣ

ʮࡾ֯ؔ਺ʯͱ͸ ᶃ ֯౓ΛҾ਺ʹ౉͢ͱɺ͔Βͷ஋Λฦؔ͢਺ ᶄ ฦͯ͘͠ΕΔ஋͸ϥϯμϜͰ͸ͳ͘  ֯౓ͱؔ܎ੑ͕͋Δ

ʮࡾ֯ؔ਺ʯͱ͸ ᶃ ֯౓ΛҾ਺ʹ౉͢ͱɺ͔Βͷ஋Λฦؔ͢਺ ᶄ ฦͯ͘͠ΕΔ஋͸ϥϯμϜͰ͸ͳ͘  ֯౓ͱؔ܎ੑ͕͋Δ දݱͰ࢖͏ͷ͸ओʹαΠϯ TJO ͱίαΠϯ DPT
ͦΕͱύΠˠК<ʜ>͸Ͱ͋Δͱ͍͏ࣄ

αΠϯTJO Ҿ਺͕͍͘Β૿͑ͯ΋ʙͷ஋Λ॥؀͢Δ w .BUITJO ˠ w .BUITJO К➗ <ʜ>ˠ
w .BUITJO К <ʜ>ˠ w .BUITJO К К➗ <ʜ>ˠ w .BUITJO К <>ˠ

αΠϯDPT Ҿ਺͕͍͘Β૿͑ͯ΋ʙͷ஋Λ॥؀͢Δ  К➗౓෼͚ͩฦΓ஋͕Φϑηοτ͞Ε͍ͯΔ w .BUIDPT ˠ w .BUIDPT К➗
<ʜ>ˠ w .BUIDPT К <ʜ>ˠ w .BUIDPT К К➗ <ʜ>ˠ w .BUIDPT К <>ˠ

TJOͱDPT ੨ɿTJOɹ੺ɿDPT IUUQHPPHMC.E(KM

՝୊ᶃɹTJODPTΛ࢖ͬͯԿ͔࡞Δ ੍໿ w .BUITJO .BUIDPT Λ࢖͏ ྫ w ޫ͕໌໓͢ΔΞχϝʔγϣϯ w
IUUQHPPHMRY3[) w TJODPTΛ࢖ͬͯඳ͔ΕΔਤ w .BUI1*࢖ͬͯ΋͍͍͔΋ alpha = sin(count) x = cos(count)×10 y = sin(count)×10 ⎧ ⎨ ⎪ ⎩ ⎪

͓·͚ɿΞʔΫλϯδΣϯτBUBO ΞʔΫʙ͸஋͔Β֯౓ΛٻΊΔٯؔ਺ w .BUIBUBO Z Y ˠК

ऄ଍ɿ.BUIBUBOͱ.BUIBUBO UBO͸୯ҐͰ஋͕॥؀͢Δ  BUBO΋୯ҐͰ஋Λฦ͢  BUBO͸͕Θ͔ΔΑ͏ɺΑ͠ͳʹ΍ͬͯ͘ΕΔ w .BUIUBO ˠ w .BUIUBO
ˠ

ߦྻʢ਺ֶ$ʣ

ʮߦྻʯͱ͸ w ෳ਺ͷ਺ΛߦͱྻͰอ࣋͢Δ਺ྻ 3 5 ( ) 1 0 0
1 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ a 11 … a 1n ! " ! a m1 # a mn ⎛ ⎝ ⎜ ⎜ ⎜ ⎜ ⎞ ⎠ ⎟ ⎟ ⎟ ⎟

ʮߦྻʯͱ͸ w ෳ਺ͷ਺ΛߦͱྻͰอ࣋͢Δ਺ྻ w දݱͰ͸ߦྻಉ࢜ͷܭࢉ·Ͱཧղ͕͋Δͱ͍͍ײ͡ 3 5 ( ) 1
0 0 1 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ a 11 … a 1n ! " ! a m1 # a mn ⎛ ⎝ ⎜ ⎜ ⎜ ⎜ ⎞ ⎠ ⎟ ⎟ ⎟ ⎟

ߦྻͷܭࢉɿ߹ମʢDPODBUʣ M = 1 2 3 4 ⎛ ⎝ ⎜
⎞ ⎠ ⎟ 5 6 7 8 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟

⎞ ⎠ ⎟ 5 6 7 8 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ = 1×5+2×7 1×6+2×8 3×5+4×7 3×6+4×8 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ ҰͭΊͷߦྻ͸ԣʹɺೋͭΊͷߦྻ͸ॎʹ஋Λर͏ ύζϧΈ͍ͨͳײͩ͡Α

⎞ ⎠ ⎟ 5 6 7 8 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ = 1×5+2×7 1×6+2×8 3×5+4×7 3×6+4×8 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ = 19 22 43 50 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ ҰͭΊͷߦྻ͸ԣʹɺೋͭΊͷߦྻ͸ॎʹ஋Λर͏ ܭࢉ্ग़ͯ͘Δߦྻ࠷খͷେ͖͞ʹͳΔ ύζϧΈ͍ͨͳײͩ͡Α

ߦྻͷܭࢉɿ߹ମʢDPODBUʣΛ൚Խ = A× E + B ×G A× F +
B × H C × E + D×G C × F + D× H ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ M = A B C D ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ E F G H ⎛ ⎝ ⎜ ⎞ ⎠ ⎟

ߦྻͷܭࢉɿ߹ମʢDPODBUʣΛ൚Խ ࿈ཱํఔࣜʹͯ͠ΈΔ = A× E + B ×G A× F
+ B × H C × E + D×G C × F + D× H ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ M = A B C D ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ E F G H ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ → a = A× E + B ×G b = A× F + B × H c = C × E + D×G d = C × F + D× H ⎧ ⎨ ⎪ ⎪ ⎩ ⎪ ⎪

ߦྻͷܭࢉɿ߹ମʢDPODBUʣΛ࣮૷ → a = A× E + B ×G b
= A× F + B × H c = C × E + D×G d = C × F + D× H ⎧ ⎨ ⎪ ⎪ ⎩ ⎪ ⎪ function concatMatrix(A, B, C, D, E, F, G, H) {  ...  return [a, b, c, d]  } IUUQHPPHMF:NX&

ʮߦྻʯԿʹ࢖͏Μ ೋ࣍ݩ࠲ඪ 9 : ΍ࡾ࣍ݩ࠲ඪ 9 : ; ͷΑ͏ʹෳ਺ ͷ஋͔Β੒ΔσʔλΛૢ࡞͢Δ৔߹༗ޮ
ྫɿʮ࠲ඪʯʹʮม׵ߦྻʯΛՃ͑Δͱ  ɹɹʮมܗʯ͕ߦ͑ΔʢҰ࣍ม׵ɺΞϑΟϯม׵ʣ w ʮճసͷͨΊͷߦྻʯ SPUBUF w ʮҠಈͷͨΊͷߦྻʯ USBOTMBUF w ʮ֦େͷͨΊͷߦྻʯ TDBMF w ʮ܏ࣼͷͨΊͷߦྻʯ TLFX

՝୊ᶄɹճసߦྻΛ࣮૷͢Δ ໰୊ɿ࠲ඪ Λݪ఺Λத৺ʹ౓ʢКʣճ సͤͨ͞࠲ඪΛϓϩάϥϜͰٻΊΑɻ ճసߦྻ Ұ౓࿈ཱํఔࣜʹ͢ΔͱϓϩάϥϜԽ͠΍͍͢Αʂ cosθ −sinθ
sinθ cosθ ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ ′ P = cosθ −sinθ sinθ cosθ ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ 5 10 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟

՝୊ᶄɹճసߦྻΛ࣮૷͢Δ ໰୊ɿ࠲ඪ Λݪ఺Λத৺ʹ౓ʢКʣճ సͤͨ͞࠲ඪΛϓϩάϥϜͰٻΊΑɻ ճసߦྻ cosθ −sinθ sinθ
cosθ ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ ′ P = cosθ −sinθ sinθ cosθ ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ 5 10 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ = cosθ ×5−sinθ ×10 sinθ ×5+cosθ ×10 IUUQHPPHMLO3R

՝୊ᶄ`ɹճసߦྻͰΞχϝʔγϣϯ Ͳͷ࠲ඪɾ֯౓Ͱ΋ٻΊΒΕΔΑ͏ʹɺ՝୊ᶄͷΞϧ ΰϦζϜΛؔ਺Խ͠ɺ֯౓Λ૿΍͍ͯ͘͠ͱճస͢Δ Α͏ͳΞχϝʔγϣϯΛ࡞੒͍ͯͩ͘͠͞ɻ IUUQHPPHM;9;Y/L

·ͱΊ ਺ֶ͕ࣜಡΊΔΑ͏ʹͳΕ͹͍ΖΜͳ࿦จ͕δΣωϨ ΠςΟϒදݱͰ׆༻Ͱ͖ΔΑ͏ʹͳͬͯ௙ΔΑʂ ਺ֶָ͍͠Αʂ

͓͚ͮ͘ w TJOͱDPTͷղઆͰ͔ͭͬͨΞχϝʔγϣϯ  IUUQHPPHMC.E(KM w ՝୊ᶄճసߦྻΛ͔ͭͬͨΞχϝʔγϣϯ  IUUQHPPHM;9;Y/L w ࢀߟɿ೥લʹॻ͍ͨϒϩά  IUUQDSFBUPSEFOBKQBSDIJWFTIUNM
w ਺ࣜΤσΟλʔɿ.BUI5ZQF  IUUQXXXEFTTDJDPNFOQSPEVDUTNBUIUZQF USJBMBTQ

クリエイティブコーディングのための数学+JavaScript入門三角関数と行列

クリエイティブコーディングのための数学+JavaScript入門三角関数と行列

feb19

More Decks by feb19

Other Decks in Programming

Featured

Transcript

ΫϦΤΠςΟϒίʔσΟϯάͰ਺ֶʁ w ύʔςΟΫϧΛࣗ༝ʹඈ͹͍ͨ͠  ˠ଎౓ͷܭࢉɺϕΫτϧɺҠಈྔܭࢉ w ৭Λࣗ༝ʹมԽ͍ͤͨ͞  ˠपظ֯౓ͷܭࢉɺೱ୶ͷ࿈ଓతมԽ w େྔͷΦϒδΣΫτʹμϯεͯ͠΋Β͍͍ͨ  ˠ੍࣌ؒޚʢλΠϜϥϓεʣɺߴ౓ͳมܗܭࢉ

໨ඪ ᶃ ࡾ֯ؔ਺ͱߦྻͰදݱʹ׆༻Ͱ͖Δ෦෼Λ஌Δ w શ෦͸஌ΒΜͰ΋Կͱ͔ͳΔΘΑ ᶄ ਺ֶࣜˠ+BWB4DSJQU΁Ҡ২Ͱ͖ΔΑ͏ʹͳΔ w ը૾ɺԻ੠ॲཧͷXJLJQFEJB΍࿦จ͕׆༻Ͱ͖ ΔΑ͏ʹͳΓ·ͧ͢

ΞδΣϯμ ᶃ ؔ਺ͱ͸ N ᶄ ࡾ֯ؔ਺ͱ͸ N ᶅ

ʮؔ਺ʯͱ͸ w ॲཧͷ·ͱΊ w ύϥϝʔλʢҾ਺ʣΛ౉ͯ͠ɺ  ฦΓ஋Λฦͯ͘͠ΕΔʢ͜ͱ΋͋Δʣ

ʮؔ਺ʯͱ͸ w ॲཧͷ·ͱΊ w ύϥϝʔλʢҾ਺ʣΛ౉ͯ͠ɺ  ฦΓ஋Λฦͯ͘͠ΕΔʢ͜ͱ΋͋Δʣ ਺ֶ΋ಉ༷ʂ

ࡾ֯ؔ਺ʢ਺ֶ*ʣ

ʮࡾ֯ؔ਺ʯͱ͸ ᶃ ֯౓ΛҾ਺ʹ౉͢ͱɺ͔Βͷ஋Λฦؔ͢਺ ᶄ ฦͯ͘͠ΕΔ஋͸ϥϯμϜͰ͸ͳ͘  ֯౓ͱؔ܎ੑ͕͋Δ

ʮࡾ֯ؔ਺ʯͱ͸ ᶃ ֯౓ΛҾ਺ʹ౉͢ͱɺ͔Βͷ஋Λฦؔ͢਺ ᶄ ฦͯ͘͠ΕΔ஋͸ϥϯμϜͰ͸ͳ͘  ֯౓ͱؔ܎ੑ͕͋Δ දݱͰ࢖͏ͷ͸ओʹαΠϯ TJO ͱίαΠϯ DPT

αΠϯTJO Ҿ਺͕͍͘Β૿͑ͯ΋ʙͷ஋Λ॥؀͢Δ w .BUITJO ˠ w .BUITJO К➗ <ʜ>ˠ

αΠϯDPT Ҿ਺͕͍͘Β૿͑ͯ΋ʙͷ஋Λ॥؀͢Δ  К➗౓෼͚ͩฦΓ஋͕Φϑηοτ͞Ε͍ͯΔ w .BUIDPT ˠ w .BUIDPT К➗

TJOͱDPT ੨ɿTJOɹ੺ɿDPT IUUQHPPHMC.E(KM

՝୊ᶃɹTJODPTΛ࢖ͬͯԿ͔࡞Δ ੍໿ w .BUITJO .BUIDPT Λ࢖͏ ྫ w ޫ͕໌໓͢ΔΞχϝʔγϣϯ w

͓·͚ɿΞʔΫλϯδΣϯτBUBO ΞʔΫʙ͸஋͔Β֯౓ΛٻΊΔٯؔ਺ w .BUIBUBO Z Y ˠК

ऄ଍ɿ.BUIBUBOͱ.BUIBUBO UBO͸୯ҐͰ஋͕॥؀͢Δ  BUBO΋୯ҐͰ஋Λฦ͢  BUBO͸͕Θ͔ΔΑ͏ɺΑ͠ͳʹ΍ͬͯ͘ΕΔ w .BUIUBO ˠ w .BUIUBO

ߦྻʢ਺ֶ$ʣ

ʮߦྻʯͱ͸ w ෳ਺ͷ਺ΛߦͱྻͰอ࣋͢Δ਺ྻ 3 5 ( ) 1 0 0

ʮߦྻʯͱ͸ w ෳ਺ͷ਺ΛߦͱྻͰอ࣋͢Δ਺ྻ w දݱͰ͸ߦྻಉ࢜ͷܭࢉ·Ͱཧղ͕͋Δͱ͍͍ײ͡ 3 5 ( ) 1

ߦྻͷܭࢉɿ߹ମʢDPODBUʣ M = 1 2 3 4 ⎛ ⎝ ⎜

ߦྻͷܭࢉɿ߹ମʢDPODBUʣ M = 1 2 3 4 ⎛ ⎝ ⎜

ߦྻͷܭࢉɿ߹ମʢDPODBUʣ M = 1 2 3 4 ⎛ ⎝ ⎜

ߦྻͷܭࢉɿ߹ମʢDPODBUʣΛ൚Խ = A× E + B ×G A× F +

ߦྻͷܭࢉɿ߹ମʢDPODBUʣΛ൚Խ ࿈ཱํఔࣜʹͯ͠ΈΔ = A× E + B ×G A× F

ߦྻͷܭࢉɿ߹ମʢDPODBUʣΛ࣮૷ → a = A× E + B ×G b

ʮߦྻʯԿʹ࢖͏Μ ೋ࣍ݩ࠲ඪ 9 : ΍ࡾ࣍ݩ࠲ඪ 9 : ; ͷΑ͏ʹෳ਺ ͷ஋͔Β੒ΔσʔλΛૢ࡞͢Δ৔߹༗ޮ

՝୊ᶄɹճసߦྻΛ࣮૷͢Δ ໰୊ɿ࠲ඪ Λݪ఺Λத৺ʹ౓ʢКʣճ సͤͨ͞࠲ඪΛϓϩάϥϜͰٻΊΑɻ ճసߦྻ Ұ౓࿈ཱํఔࣜʹ͢ΔͱϓϩάϥϜԽ͠΍͍͢Αʂ cosθ −sinθ

՝୊ᶄɹճసߦྻΛ࣮૷͢Δ ໰୊ɿ࠲ඪ Λݪ఺Λத৺ʹ౓ʢКʣճ సͤͨ͞࠲ඪΛϓϩάϥϜͰٻΊΑɻ ճసߦྻ cosθ −sinθ sinθ

՝୊ᶄ`ɹճసߦྻͰΞχϝʔγϣϯ Ͳͷ࠲ඪɾ֯౓Ͱ΋ٻΊΒΕΔΑ͏ʹɺ՝୊ᶄͷΞϧ ΰϦζϜΛؔ਺Խ͠ɺ֯౓Λ૿΍͍ͯ͘͠ͱճస͢Δ Α͏ͳΞχϝʔγϣϯΛ࡞੒͍ͯͩ͘͠͞ɻ IUUQHPPHM;9;Y/L

·ͱΊ ਺ֶ͕ࣜಡΊΔΑ͏ʹͳΕ͹͍ΖΜͳ࿦จ͕δΣωϨ ΠςΟϒදݱͰ׆༻Ͱ͖ΔΑ͏ʹͳͬͯ௙ΔΑʂ ਺ֶָ͍͠Αʂ

͓͚ͮ͘ w TJOͱDPTͷղઆͰ͔ͭͬͨΞχϝʔγϣϯ  IUUQHPPHMC.E(KM w ՝୊ᶄճసߦྻΛ͔ͭͬͨΞχϝʔγϣϯ  IUUQHPPHM;9;Y/L w ࢀߟɿ೥લʹॻ͍ͨϒϩά  IUUQDSFBUPSEFOBKQBSDIJWFTIUNM

クリエイティブコーディングのための数学+JavaScript入門 三角関数と行列

クリエイティブコーディングのための数学+JavaScript入門 三角関数と行列

More Decks by feb19

Other Decks in Programming

Featured

Transcript

クリエイティブコーディングのための数学+JavaScript入門三角関数と行列

クリエイティブコーディングのための数学+JavaScript入門三角関数と行列