• 絵を描いてみよう

  • 直線、ベジェ曲線、円、長方形 2020/7/2
  • マウスの座標に円を描く 2020/7/2
  • キャンバスの幅、高さを使ってキャンバスの中心座標を得る 2020/7/2
  • ひとつなぎの線（1フレーム前のマウス座標、現在のマウス座標） 2020/7/2
  • 円弧を描く 2020/7/9

• 図形を動かす

  • 一定の速さで動かす（等速直線運動） 2020/7/9
  • 円弧を回転させる 2020/7/9
  • 円弧を回転させる2 2020/7/9
  • 壁で跳ね返る—if文を使って 2020/7/15
  • ふわっと移動する 2020/7/15
  • ふわっと大きくなる 2020/7/15
  • マウスについてくる動き 2020/7/16
  • マウスについてくる動き（数珠つなぎ） 2020/7/16

• マウスインタラクションをつくる

  • 四角形の上にマウスが乗ったら（マウスオーバー） 2020/7/16
  • 四角形の上にマウスが乗ったら（マウスオーバー。四角形の中心を基準に大きくなる） 2020/7/16
  • 四角形の上でマウスを押したら（マウスダウン） 2020/7/16
  • 四角形をドラッグ（マウスダウン＋マウスについてくる動き） 2020/7/16
  • 円にマウスが乗ったら（マウスオーバー）—三平方の定理を使って 2020/7/15
  • 円にマウスが乗ったら（マウスオーバー）—dist()関数を使って 2020/7/15
  • 円の上でマウスを押したら（マウスダウン） 2020/7/15

• 配列と繰り返し

  • 配列と繰り返しを使った表現 1 2020/9/3
  • 複数の図形に同じ動きを与える 1「ランダムの方向に動く」 2020/9/3
  • 複数の図形に同じ動きを与える 2「1つ前についていく」 2020/9/3
  • 「少しずつ大きさの違う円」＋「一つ前についていく動き」 2020/9/3
  • 「少しずつ大きさの違う正方形」＋「一つ前についていく動き」 2020/9/3
  • 「マウスの軌跡」＋「毎フレーム半径が大きくなる」（波紋） 2020/9/3
  • 「インデックスに比例して大きくなる円」＋「画面の中心から離れながら角度をつける」 2020/9/3
  • 図形をマトリクス状に並べる 2020/9/3
  • 図形をマトリクス状に並べる（二重ループを使ったやり方） 2020/9/3
  • 図形を円環マトリクス状に並べる（二重ループを使ったやり方） 2020/9/3
  • 「円を二重にマトリクス状に並べる」+「片方はマウスの方に行こうとする」 2020/9/3

• 円運動、円環配置

  • 角度 2020/9/3
  • 円環配置＋回転 2020/10/10
  • 円環配置＋色相環 2020/10/10
  • 時計 2020/10/10

• クラス、ファイルの読み込み／保存

  • お絵かきと保存 2020/10/10
  • CSVデータの読み込み／データの並び替え 2020/10/10
  • JSONデータの読み込み／関係性の表現 2020/10/10

• おまけ（ちょっと上級）

  • Canvasのサイズとマウスの座標を使う（HSB版） 2020/7/2
  • ひとつなぎの線（スムーズ版） 2020/7/2
  • 正三角形の描画・回転 2020/7/16

• 外部入力を使う

  • webカメラを使った表現（スキャナのように使う） 2020/7/16
  • webカメラを使った表現（中心の幅1ピクセルだけ取得して並べる） 2020/7/16

• 音を扱う

  • 音声ファイルを再生する 2020/8/27
  • オシレーターを使ってサイン波を出す 2020/8/27
  • マイク入力を扱う 2020/8/27
  • 音を解析する 2020/8/27
  • 仮想の音源の位置とマウスとのインタラクション 2020/8/27

• 3D表現

  • シンプルな3D表現 2020/9/3
  • 3D空間上の点群 2020/9/3