はじめに
本稿は Processing Advent Calendar 2024 への参加記事です。
最初は技術解説的なことをしようかと思っていたのですが時間がなくて、作品作りのほうが楽しいかなと思いまして、振ったら雪が舞うスノードームをつくってみました。
作ったもの
こちらが作ったものになります。
スマホからアクセスしてデバイスをゆらすと雪が舞います。
パソコンからはクリックで簡易的に雪を舞わすことができます。
ちょっとした解説
雪が舞う仕組み
基本的な仕組みはmatter.jsを使用し、ドーム内に雪がとどまるようにしています。振って雪を舞わすため、「device motion event」でデバイスの加速度、「device orientation event」でジャイロセンサーの値を取得しています。
いろいろ試行錯誤した結果
- ジャイロセンサーの値で画面の傾きを求め重力方向にする
- 加速度を外力として与える
という形で実装してみました。
ツリーの種類
ツリーはランダムで3つ生成するようにしています。レイヤー数や柄が違うのでいろいろ見てみていただけると嬉しいです。
おわりに
初のAdvent Calendar参加でした。しっかり文章を書くのが苦手なので、作品メインの参加とさせていただきますした。
クリスマスにちなんでいる、自分的にやったことがなかったmatter.jsを使ってみるということができたので個人的には満足です。ただもう少しIMU周りのデータの使い方を追い詰めて本物のスノードームみたいに出来たらよかったなと思います。
読んでいたみなさま、ありがとうございました！