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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

ࡾ֯ؔ਺ʢ਺ֶ*ʣ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

ߦྻʢ਺ֶ$ʣ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ߦྻͷܭࢉɿ߹ମʢ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 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟

Slide 23

Slide 23 text

ߦྻͷܭࢉɿ߹ମʢ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 ⎧ ⎨ ⎪ ⎪ ⎩ ⎪ ⎪

Slide 24

Slide 24 text

ߦྻͷܭࢉɿ߹ମʢ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&

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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