ブラウザでボールプールをやってみよう「パー」

ブラウザでボールプールをやってみよう「パーでかき混ぜる」

ブラウザでボールプールをやってみよう「チョキ」

ブラウザでボールプールをやってみよう「グー」

ブラウザで「ボールプール」ができます。
PCのカメラで手の位置とポーズを認識して、ブラウザ上のボールを動かします。

ブラウザ上に「手をみせて」が表示されたら、カメラに映るところに手をかざしてみてください。
カメラが捉えた手の位置と手のポーズが赤い線で表示されます。

ブラウザに表示された手を動かしてボールをかき混ぜることができます。
手を「パー」にすると、下向きの重力が発生して、ボールは床に落ちます。
「チョキ」にすると、重力がなくなって、ボールが浮き上がります。
「グー」にすると、グーにした手の位置に引力が発生して、ポールを引きつけます。

p5.js、matter.js、matter-attractor.js、handpose.js を混ぜながら使ってます。
ブラウザのうえのオブジェクトをジェスチャーで動かせるというのが、おもしろいです。

残念ながら、ときどきバグってしまいます。
再読み込みしたりキャッシュをクリアしたりすると正常に動作するかもしれません。

下記のURLでPCのブラウザからお試しください。

ブラウザでボールプール | ballpool with handpose >>

【関連記事】p5.jsでの感染拡大シミュレーション

【関連記事】独学Processingの趣味的なたのしさ

2021年5月17日 Generative Design

たったそれだけのことなのに、やりかたがわからずにとても時間が掛かった。
かなり無駄に回り道になったけど、その過程でいろいろ勉強になった。
「クロージャ」とか「多次元配列」とかやっと少し理解できた感じ。

時間を掛けながら自分で考えて調べて・・・というプロセスを踏むと理解の深さとか強度とかが上がる感じがするのは楽しいけど、正しく理解できてるかどうかはちょっとあやしい。

くわしくはこちら >>

【関連記事】
P5.jsでゆらめく光の波

2020年10月26日 Generative Design

オラファー・エリアソンの展示で見た水面に反射する光の円を作ってみようと思ったのですが・・・なんかちがう。もう少し工夫が必要。

こちらからどうぞ
p5.js Demo >>

2020年9月10日 Generative Design

P5.jsで子供の絵の発達段階の「錯画期」のようなドローイング

P5.jsで子供の絵の発達段階の「錯画期」のようなドローイング

P5.jsで子供の絵の発達段階の「錯画期」のようなドローイング

P5.jsで子供の絵の発達段階の「錯画期」のようなドローイング

まだまだこのくらいのレベルなんだということです。
こうして遊んでるのも楽しいです。

コンストラクタとかすぐに忘れてしまうので、たまに思い出しながら練習したほうがよさそう。

リロードするごとにランダムに再描画します。
できれば、PCでご覧ください。

こちらからどうぞ >>

2020年8月24日 Generative Design

身振りでブラウザの上のオブジェクトを操作するデモ

下記のリンク先でパソコンでカメラの使用を許可してお試しください。もちろん録画や別ユーザーからの閲覧はありません。
左上に「PoseNetモデルが読み込まれました」が表示されたら、パソコンのカメラに手を振ってみると、手の動きに合わせてパーティクルが動き回ります。

画面上に映像は表示されていませんが、カメラからの映像のあなたの手の位置を判定して、画面内の手の位置にパーティクルが引き寄せられています。
両手を使えば両方の手の位置で引力が発生します。もう一人いればさらに引力の発生箇所を増やせます。

ml5.js という機械学習のライブラリで映像のなかの手首の位置を検出してくれました。
いろいろな使い途がありそうです。

まだ全然うまく動かせませんが、ブラウザ上のオブジェクトがジェスチャーで操作できるのは、ちょっとおもしろいです。

こちらでお試しください。
gesture attraction | ジェスチャー アトラクション | p5.js+ml5.js Generative Desig >>

2020年5月20日 Generative Design

すべての点には引力があって、お互いに引き寄せあっています。
赤い点が感染者で青い点が非感染者です。

青い点は赤い点に1秒間接触しているごとに約10%の確率で感染します。
赤い点は7秒間で回復して青い点に戻ります。回復したあとも再感染します。
赤い点は回復までの7秒間に約2%の確率で死亡します。

再読み込みごとに、最初の人口が50〜700人の間でランダムに、最初の感染者数は1〜5人の間でランダムに設定されます。

お互いに引き寄せあう点は時間がたつとクラスターを形成します。
画面内をクリックするとクラスターを分散させることができます。

死亡者数を増やさずに、感染者数を0にできたら封じ込め成功です。

コロナウイルスの性質や影響を正しく反映しているものではありませんが、ソーシャルディスタンスが大切なことは間違いなさそうです。

感染拡大を大局的な視点で理解するヒントになればと思います。

拡大して見るならこちら
infection spread | 感染拡大シミュレーション | p5.js Generative Design >>

■参考資料
https://www.openprocessing.org/sketch/868181
クリエイティブコーディング入門 技術評論社

【関連記事】
独学Processingの趣味的なたのしさ

円形から始まるパーティクルがノイズで動いてフェードアウト。
いまいち理解できなかったけど、いろいろできそう。

学習速度は遅いけど、すこしづつ。

【関連記事】独学Processingの趣味的なたのしさ

2019年12月31日 Generative Design