7_3:p5.play スプライトの点やピクセルに対する重なりチェック

p5.play.jsの当たり判定はスプライトのコライダーを使って行われますが、このとき任意の点(マウスカーソルの位置)やスプライトの内の不透明なピクセルの点に対して衝突チェックを行うこともできます。 具体的にいうと、下図 […]

続きを読む

5_3:p5.play スプライトのアニメーションの変更

スプライトには複数のアニメーションを追加することができ、表示するアニメーションを変更することができます。たとえば、スプライトに鳥の怪物がホバリングしているidleアニメーションと、獲物を襲うattackアニメーションを追 […]

続きを読む

2_2:p5.play スプライトシート アニメーションの基本

スプライトシートアニメーションの基本的な手順 アニメーションの表現では、たとえばゲームキャラクターの動きなどに”スプライトシート”がよく使用されます。スプライトシートとは、動かしたいアニメーションの全フレーム(コマ)を1 […]

続きを読む

14:ゲーム制作に役立つp5.play速習 Creative Coding p5.js

アリソンパリッシュによる このチュートリアルでは、パオロ・ペデルチーニのp5.playライブラリを紹介します。このチュートリアルはいささか独断的で、p5.playを面白くする機能の多くを取り上げていません。このライブラリ […]

続きを読む

13_1:RiTaJS 入門 Creative Coding p5.js

アリソンパリッシュによる このチュートリアルでは、ダニエルハウと貢献者チームによる、p5.jsと互換性のあるJavaScriptライブラリであるRiTaJSの機能のいくつかを示します。その過程では、オブジェクトとデータに […]

続きを読む

13:外部ライブラリの使用 Creative Coding p5.js

アリソンパリッシュによる 1つのプログラミングフレームワークに詰め込むことのできる機能性は限られており、p5.jsにも多くの機能が備わっていますが、全部が含まれているわけではありません。このチュートリアルでは、p5.js […]

続きを読む

12_2:ビデオの操作 Creative Coding p5.js

アリソンパリッシュによる p5.jsフレームワークは、スケッチでのビデオ再生制御を容易にします。 ビデオとWebブラウザ コンピュータのビデオと言うと、通常はビデオファイル、つまり動画のエンコーディングされたデータを含む […]

続きを読む

12_1:コントロール要素 Creative Coding p5.js

アリソンパリッシュによる p5.jsフレームワークを使用すると、スケッチを含むページに、HTML5のインターフェース要素が簡単に追加できます。追加したインターフェース要素を使用すると、ユーザーがスケッチを制御できるように […]

続きを読む

11:テキストと文字表現 Creative Coding p5.js

アリソンパリッシュによる このチュートリアルでは、p5.jsを使ってスケッチにテキストを表示する方法と、テキストのさまざまなサイズやフォントの形状にもとづいて、スケッチに異なる振る舞いを与える方法を見ていきます。また、テ […]

続きを読む

10:オブジェクトの工場としてのクラス Creative Coding p5.js

アリソンパリッシュによる (まだ書きかけ。。。) 場合によっては、同じ基本シェイプを持つ多数のオブジェクトを作成する必要が生じるかもしれません。想像されている通り、これを実現する良い方法は、オブジェクトを返す関数の作成で […]

続きを読む

9:メソッドを持つオブジェクト Creative Coding p5.js

アリソンパリッシュによる このセクションでは、オブジェクトの新しい側面、つまりオブジェクトはメソッドを持つことができるという事実を見ていきます。メソッドは通常の関数とよく似ていますが、メソッドにはどの値に対して作用をする […]

続きを読む

8:関数のつづき Creative Coding p5.js

アリソンパリッシュによる パラメータ 前に関数について述べたとき、記述した関数は、一連のステートメントを再利用できるようにすることを意図したものでした。関数には、関数を呼び出すコードから関数に値を渡せるようにすることで、 […]

続きを読む

7:配列とオブジェクト Creative Coding p5.js

アリソンパリッシュによる このチュートリアルでは、スケッチ内のユーザーアクションに関する情報を保持する方法を見ていきます。これを実現するには、配列とオブジェクトという新しいプログラミング概念について知る必要があります。 […]

続きを読む

6:メディア イメージとサウンド Creative Coding p5.js

アリソンパリッシュによる このチュートリアルでは、既存のメディアをスケッチに読み込む方法について見ていきます。 イメージ p5.jsで画像を読み込みイメージとして表示するのは簡単です。以下のサンプルでは、PNGかJPEG […]

続きを読む

5:変換と関数 Creative Coding p5.js

アリソンパリッシュによる このチュートリアルでは、変換の使用方法を見ていきます。変換は、シェイプを画面のどこにどのようにして描画するかを変更するための便利で洗練されたテクニックです。また、関数を記述する基本も見ていきます […]

続きを読む

4_2:インタラクション Creative Coding p5.js

アリソンパリッシュによる このチュートリアルでは、p5.jsを使った、ユーザー入力に応答するスケッチを作成する方法を学びます。 ビルトインProcessing変数 前のチュートリアルでは、スケッチで変数を作成する方法を、 […]

続きを読む

4_1:経時的変化 Creative Coding p5.js

アリソンパリッシュによる このチュートリアルでは、時間の経過とともに変化する、簡単なp5.jsスケッチの作成方法を見ていきます。しかしその前に、Processingにおける時間の働きについて少し説明しておく必要があります […]

続きを読む

3:式、変数、ループ Creative Coding p5.js

アリソンパリッシュによる 前のチュートリアルでは、p5.jsのダウンロード方法と初めてのスケッチの作成方法を見ました。このチュートリアルでは、コンピュータプログラムの基本的な概念である、式と変数、ループについて見ていきま […]

続きを読む

1:ブラウザのコンソール内のJavaScript Creative Coding p5.js

このチュートリアルでは、JavaScriptプログラミング言語の基本をWebブラウザのJavaScriptコンソールを使ってみていきます。 Webブラウザの秘密の言語 Webブラウザは、Webページを見たり、ハイパーリン […]

続きを読む

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を扱うときでも、あらかじめ用意された関数やメソッドを適切に操作するだけで、興味をそそる面白い体験を得ることができます。 […]

続きを読む

9_3:似ているか? 似ていないか? ml5.js JavaScript

以下は、「単語の意味をベクトルで表現する」を理解するための、”適切ではないかもしれない”簡易的な例です。 「old woman」と「aunt」は、どちらも同じ女性で年もとっているという点で、「old woman」と「gi […]

続きを読む

9_2:Word2vecとは? ml5.js JavaScript

Word2vecとは、グーグルの研究者であるトマス・ミコロフ氏らが提案した、単語の意味をベクトルで表現する方法で、自然言語処理と呼ばれる技術分野に属します。 そもそも「単語の意味をベクトルで表現する」というのが理解に苦し […]

続きを読む

9_1:Word2vec(単語の意味をベクトルで表現する) ml5.js JavaScript

word2vec() Word2vecは、単語の分散表現(Word Embeddings)に使用される、関係性のモデルのグループです。このメソッドを使用すると、任意の入力ベクトルに対してベクトル演算を実行することができま […]

続きを読む

7_3:ビデオに対するPoseNetサンプル(1人の姿勢検出) ml5.js JavaScript

本稿は「ml5-examples/p5js/PoseNet/PoseNet_webcam」で公開されているサンプルの解説です。 コンピュータにとって、ビデオはつながった静止画を高速で表示することと同じなので、ビデオに映っ […]

続きを読む

5_1_3:鼻歌音程モニター ml5.js JavaScript

AndroidやiOSアプリの「ボーカル音程モニター」にヒントを得て、「鼻歌音程モニター」なるものを試作しました。 これはピッチやMIDI番号、音程の取得までは前の「5_1_2:ピッチ抽出ピアノ」と同じで、ピッチの数値を […]

続きを読む

5_1:ピッチ抽出(Pitch Detection) ml5.js JavaScript

pitchDetection() ピッチ抽出アルゴリズムは、音声信号のピッチや基本周波数を推測する方法です。このメソッドを使用すると、訓練済みの機械学習ピッチ抽出モデルを使って、サウンドファイルのピッチを推測することがで […]

続きを読む

4_1_2:LSTMの訓練(「不思議の国のアリス」モデルの作成) ml5.js JavaScript

初めに概略を述べておくと、「不思議の国のアリス」風の文章を生成するには、「4_1_1:LSTM 文章生成サンプル」で示したml5.charRNN()の第1引数を、「不思議の国のアリス」のモデルへのパスに変えるだけです。た […]

続きを読む

3_1:特徴抽出(Feature Extraction) ml5.js JavaScript

featureExtractor() ニューラルネットワークは画像内容の認識に使用できます。画像をある決まったカテゴリーに分類する際、ほとんどの場合は、大きなデータセットで訓練された”訓練済み”モデルを使用することになる […]

続きを読む

13_6:報酬を割引き、勾配を重みに適用する

いよいよカートポールサンプルの核心に入っていきます。ここでは、「報酬を割引き、それを反映した勾配を重みに適用する」ということを行います。具体的には、「割引率と、全ゲームで集めた全報酬から、報酬の割引を実行する。そして報酬 […]

続きを読む

13_1 カートポールサンプル シンプルバージョン

次の動画は、本稿で最終的に作成するカートポールサンプルの実行画面を録画したものです。 カートポールとは、車輪の付いた台座(カート)の上に細長い棒(ポール)を置いものを言います。カートポールサンプルは、強化学習と呼ばれる機 […]

続きを読む

12 ボストンデータセットによる多変数回帰

「5 ビール売上本数の予測」では、最高気温とビールの売上本数が比例関係にあるととらえ、最高気温を説明変数、売上本数を目的変数として、直線の方程式を得ることで、データにない最高気温の日の売上本数を予測しました。この方法は単 […]

続きを読む

5_1 エクセルでビール売上数を予測する

最高気温が高いほどビールは多く売れるだろう、という相関関係は、エクセルの機能を使うと、実に簡単に右上がりの直線で表すことができます。 こういう統計があったとすると(実際には架空のデータです)、エクセルのグラフ機能で、実に […]

続きを読む

4 論理ゲートをTensorFlow.jsで実装する

機械学習の入門書などを見ていると、「論理ゲート」というものがよく取り上げられています。論理ゲートというのは、元は電子回路に用いられる論理で、オンかオフの2つの入力があった場合、それをオンかオフのどちらで出力するかを決める […]

続きを読む

11_2 手作りイージング関数を使ったキャンバスアニメーション

Web Animations APIとは直接は関係しませんが、イージング関数に渡す変数t, b, c, dを手作りし、得た結果を反映させるキャンバスアニメーションを作成します。1秒かけて、青い円が20から400まで移動し […]

続きを読む

11-1 そもそもイージング関数は一体何を…

イージング関数とは、アニメーションに指定されたキーフレーム間のプロパティ値を補間するときに使用される関数で、次のようなグラフで表されます。一般的なイージング関数は、0秒の始まりから1秒の終わりまでの間に、0から1までの数 […]

続きを読む

10_10_1 finishイベントの利用

「10-10 アニメーションタイマーとしての利用」で述べた”1 セットした時間の経過を教えてくれる、通常のタイマー”の例です。ここでは、アニメーションタイマーのfinishイベントを利用しています。 ページを開くと、カラ […]

続きを読む

10_10 アニメーションタイマーとしての利用

Animationオブジェクトは次の特徴を持つタイマー(便宜的にアニメーションタイマーと呼びます)としても利用できます。 セットした時間の経過を教えてくれる、通常のタイマー セットした時間を繰り返し、その回数を教えてくれ […]

続きを読む

10_1_5 Web Animations APIのモデル

WAAPIには、タイミングモデルとアニメーションモデルという2つのモデルがあります。 タイミングモデル 一瞬一瞬のタイム値を受け取り、それをアニメーションの進捗値(全体の中で何%すすんだかを示す数値)に変換する。 同時に […]

続きを読む

10_1_3 重要!! ブラウザの実験的な機能を有効化する方法

今後、WAAPIの実装がどのように進むかは分かりませんが、少なくとも現状では、WAAPIのフル機能を使用するには、ブラウザの実験的な機能を有効化する必要があります。 実装が最も進んでいるのはFirefoxで、次がChro […]

続きを読む

6_3 よいアニメーションにするには?

よくできたアニメーション、つまり、スタート時にはもたもたせずにすぐ始まり、ヌルヌル動く(60fpsを維持する)アニメーションにするための、いくつかの技術的な方策が提案されています。 再レイアウトをともなわないCSSプロパ […]

続きを読む

6_2 レイアウト変更や再描画をともなうプロパティ

要素のプロパティに変更が加えられると、ブラウザは、その変更の影響を受けるすべての要素のサイズと位置を計算しなくてはなりません。たとえば、相対的な位置設定がしてある要素の位置が変わると、他の子要素や親要素に影響が及ぶことに […]

続きを読む

6 アニメーションのパフォーマンスを上げる

「1_1 アニメーションとは?」では、人間は本来的にアニメーションが好きなのだ、ということを述べましたが、これは正確ではありません。よくできたアニメーションは好きですが、できの悪いものは逆効果で、不快になるでしょう。 よ […]

続きを読む

1_3 Webアニメーション(CSSアニメーション)の場合

Webページで見られるCSSアニメーションも、人間の錯覚によって生まれるという点では、映画のアニメーションと同じです。ただし、CSSアニメーションでは、全コマを描くわけではありません。変化のポイントとなる時点をキーとして […]

続きを読む

1=2 アニメーションが動いて見える原理

アニメーションが動いて見えるのは、人間の錯覚で、脳がだまされているからです。 映画のフィルムのコマで考えると分かりやすくなります。 映画では、1秒間に24のコマが映写されます。これは高速なので、人間の目(脳)は残像現象に […]

続きを読む