10_3:オブジェクトの配列 p5.js JavaScript

以下の2つは、これまで見てきた変数、繰り返し、条件、関数、オブジェクト、配列というプログラミングの主要概念を全部取り入れたサンプルです。オブジェクトの配列の作成はこれまで見てきた配列の作成とほとんど同じですが、要素がオブ […]

続きを読む

7:モーション p5.js JavaScript

パラパラ漫画と同様に、画面のアニメーションは、あるイメージを描画し、次いでそれと少しだけ違ったイメージを描画することの連続で作成されます。滑らかなモーション(動き)の錯覚は残像によって生み出されます。同じように見えて少し […]

続きを読む

5_6:変換状態の保存と復元 p5.js JavaScript

変換の効果が以降の関数に影響しないように分離させることができます。push()関数は現在の座標システムのコピーを保存し、pop()関数は保存した座標システムを復元します。これらの関数は、あるシェイプにだけ特定の変換が必要 […]

続きを読む

5:移動、回転、拡大縮小 p5.js JavaScript

キャンバス上での描画物の位置取りと移動にはまた、キャンバスの座標システムを変更するというテクニックがあります。たとえばシェイプは右に50ピクセル移動することができますが、これは、座標の原点(0,0)を50ピクセル右に移動 […]

続きを読む

4_7:マッピング(対応付け) p5.js JavaScript

プログラミング用語として「マッピング」という単語が使われますが、これは日本語で言うと、「あれとこれを対応付ける」というような意味です。たとえば、キャンバスの幅が1920ピクセルあって、mouseXの値を、キャンバスの背景 […]

続きを読む

4_3:応答:イージングの導入 p5.js JavaScript

Webアニメーションでは、ある位置からある位置に移動するとき、目的地にすぐにではなく少し間をとってから到達したり、だんだん速くなったり(加速)、だんだん遅くなったり(減速)するものがよく見られます。これはイージングと呼ば […]

続きを読む

11_3:ml5.js SketchRNN 描く線の最初のデータを得るまで ml5.js JavaScript

ml5.jsでは、数式で表されるような機械学習の難しい側面が隠されているので、このSketchRNNを扱うときでも、あらかじめ用意された関数やメソッドを適切に操作するだけで、興味をそそる面白い体験を得ることができます。 […]

続きを読む