以前に作った感染拡大シミュレーションに、感染力と人流のスライダーを追加してみました。
p5.jsで作ったものにp5.dom.jsでスライダーを付けています。

赤い点が感染者で青い点が非感染者です。
すべての点には引力が設定されていて、お互いに引き寄せあって動き続けます。
お互いに引き寄せあう点は時間経過でクラスターを形成します。

最初の人口は50~500人の間でランダムに設定されます。
最初の感染者数は1~5人の間でランダムに設定されます。

青い点は赤い点に1秒間接触しているごとに約10%の確率で感染します。
赤い点は7秒間で回復して青い点に戻ります。
回復までの7秒間に約2%の確率で消滅します。
「人口」「感染者数」「死亡者数」としてリアルタイムに表示されます。

「感染力」と「人流」のパラメーターを追加しています。
感染力は感染確率を設定でき、人流は引力の大きさを設定できます。
どちらも最初は1倍になっています。

感染力は0倍〜10倍の範囲でリアルタイムで変更できます。
感染力を上げるとクラスター内での感染が急速になります。
感染力を0倍にすると7秒後にはすべての点が青くなります。

人流も0倍〜5倍の範囲でリアルタイムに変更できます。。
人流を大きくするとすべての点が広範囲に活発に動き回るようになります。
人流を0倍にすると引力がなくなりクラスターは分散され、感染者数が減少していきます。

画面内をクリックすると反発力でクラスターを分散させることができます。

統計データに基づいていないので断定的なことは言えませんが、デルタ株が流行しているし、できるだけステイホームで過ごしたいと思います。

The red dots are the infected and the blue dots are the non-infected.
All the points have a set gravitational force and keep moving, attracting each other.
Points that are attracted to each other will form clusters over time.

The initial population will be randomly set between 50~500 people.
The initial number of infected people is randomly set between 1 and 5.

A blue dot has about a 10% chance of being infected for every second it is in contact with a red dot.
The red dot will recover and return to the blue dot in 7 seconds.
The red dot will recover and return to the blue dot in 7 seconds, and has a 2% chance of disappearing in the 7 seconds before it recovers.
“The data is displayed in real time as “Population,” “Infected,” and “Dead.

This time, I set up the “Infectivity” and “Human Flow” parameters.
Infectivity allows you to set the probability of infection, and human flow allows you to set the magnitude of attraction.
Both are initially set to 1X.

Infectivity can be changed in real time in the range of 0 to 10 times.
Increasing the infectivity will cause rapid infection within the cluster.
If you set the infectivity to 0 times, all the dots turn blue after 7 seconds.

You can also change the human flow in real time in the range of 0 to 5 times.
If you increase the human flow, all the points will be active in a wide area.
If you set the human flow to 0, the attraction will disappear, the cluster will disperse, and the number of infected people will decrease.

You can click in the screen to disperse the cluster by repulsive force.

I can’t say anything definitive because it’s not based on statistical data, but the delta strain is prevalent and I’d like to stay home as much as possible.

infection spread + control | 感染拡大シミュレーション+パラメーター | Generative Design >>

以前に作ったもののバリエーション。
色や形をボールプールらしくしたらコンテンツとして少し明確になった気がします。
こういうアピアランスって大切。

ブラウザからカメラを起動しています。
カメラに写る手の位置と「グー」「チョキ」「パー」をhandpose.jsで判定して、matter.jsのBodyを動かしてます。
上のgifではスムーズですが、手の位置とポーズの判定が少しギクシャクします。

どうやってmatter.jsのBodyにランダムな色を指定するのか考え込んでいましたが、p5.js側で指定すればいいことに気づくと、わりと簡単でした。

PCでご覧いただいた方が、わかりやすいかも。

ブラウザでボールプール(カラー版) | ballpool with handpose (color version) >>

【関連記事】
ブラウザでボールプールをつくってみた

2021年7月22日 Generative Design

以前に作ったもののバリエーション。線で繋いだだけでまた違った表情。でもスマホで動作が重い。
リロードすると並ぶ個数が4個、9個、16個にランダムで切り替ります。

やりかたがわからなくて、線でつなぐだけのことにも苦労しました。
スクリプトの構造を考え直せば動作も速くなるし、カラーを工夫するだけでもイメージは変わる。

くわしくはこちら >>

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

p5.jsのノイズの光の波を並べてみた >>

2021年7月12日 Generative Design

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

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

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

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

ブラウザで「ボールプール」ができます。
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