​​プログラミングB #08
​​#08 三角関数
​​
​​高尾俊介（takawo@konan-wu.ac.jp）
​​甲南女子大学 文学部 メディア表現学科 講師
​​
​​

​​雑談

​​
​​
 
Art Research by Daito Manabe
README / Sample Page / Harold Edgerton / M.T.M. / Ruth Wolf-Rehfeldt / HERBERT W. FRANKE / karabiner / La Fura dels Baus / Ann Hamilton / Martin Riches / Barry Truax / Koniku / Brez / pixelsandnoise /
scrapbox.io
Art Research by Daito Manabe • scrapbox.io
​​
​​
​​noiseの波形についてなのですが、波形を丸や棒ではなく心拍数を表示しているような線にしようと思ったらどのコードをいじればいいのでしょうか
​​beginShape();
​​vertex(x,y) // x,y は位置座標
​​endShape()
​​
​​のような書き方をすれば連続する線で結ぶことができます
​​ノイズの動きを波のようだと感じ、横波というより砂浜に打ち寄せる波のように円より下側に青い色をつけたいなと考えたのですが、それは可能なのでしょうか？可能だったらやりかたをしりたいです。（背景を砂浜とみる）
​​あと授業内容とは関係ないのですが、文字を砂のように形を崩して消えていくアニメーション（？）（できればクリックで作動させたい）を作ってみたいのですがなにか方法はありますか？
​​
​​課題を提出した後、後になって気に入らずに課題のプログラムを書き換えて再提出するのは大丈夫ですか？
​​OKです！
​​
​​
​​
​​
​​
​​
 
​​
​​https://youtu.be/Plj610aBZkY
​​
​​
​​
​​何が重要か
​​
  • ​​これらの要素はプログラムを用いてしか表現できないような，生成的（ジェネラティブ）な表現と非常に密接に結びついている．
  • ​​生成的な表現：プログラムや，もっというと計算を通じて生み出される．
  • ​​言い換えると，これらが理解できてうまく使えれば，様々な表現に応用できる．
​​
​​
 
User-uploaded image: Large+GIF+1406x500.gif
​​TouchDesignerでNoise CHOPをつかってCircle TOPのパラメータ（要素の値）を操作する例．TouchDesignerのMath CHOPでやっていたことがp5.jsのmapに当たります．そう考えるとやっていることはp5.jsでも変わらない．
​​
​​
​​
 
User-uploaded image: Large+GIF+400x400.gif
​​09/00_noise_conditional
​​上の不連続に表示されるバーは下で表示されている山状のノイズを条件分岐で一定以上の数値（これもノイズで生成した値）以上の場合に描かれている
​​
​​

​​授業内容：アニメーションと三角関数

​​
  • ​​三角関数：「タンジェント」
  • ​​三角関数の性質
  1. ​​角度と距離からXY座標が計算できる：くるくる回る表現
  1. ​​一定周期で振動する：波のように揺れる表現
​​
​​実際，コンピュータで制作されるデジタルアート，メディア・アートでは三角関数は「基本的な道具」として多用されている．
​​
​​