懐かしのアレをWebシミュレータで実装する

Last updated at 2025-12-23Posted at 2025-12-23

この記事はNSSOL Advent Calendar 2025の24日目の記事です。

ぜひ、ほかの記事もご覧ください。

はじめに

百貨店を歩いていたら懐かしいものを見つけました。

（※動画は別の方のYoutubeからの引用です）

オイルタイマー、オイルモーションと呼ばれるようです。
子どものころ、釘付けになっていた記憶がよみがえります。

大画面でも見たくなったので、Web上の物理シミュレータで実装しました。

この記事では、実装したシミュレータ上での油滴の物理モデルや技術スタックについて概説します。

実装したWebシミュレータです。

PCでの表示を推奨します。
スマホやタブレットだとキャンバスサイズの都合上、油滴が崩れたりする可能性があります。

右上のGUIからシミュレーションの速度や油滴の生成間隔、背景・油滴の色などを調整できます。
「ばね表示」を押すと、油滴が後述するばね質点系での表示となります。

動画のように2レーンで油滴が流れており、それぞれは衝突しないようになっています。

シミュレータでのフレームワークや物理モデルを解説します。

詳細はコードをご覧ください。

重力や壁との摩擦、空気抵抗などの作用を再現するために、今回はMatter.jsを採用しました。

Matter.js は剛体物理を前提としたエンジンですが、制約（Constraint）を組み合わせることで疑似的な柔軟体表現が可能なため、今回の用途に適していると判断しました。
各定数を与えれば計算自体は裏のエンジンが行ってくれます。

油滴という流体をそのまま正確に表現し、実装するのは非常に難しいです。
代わりに、今回は油滴1滴をばね質点系がつながったボディとして再現することにしました。

今回、オイルタイマーのような「それっぽい」動作を再現するために、ボディが以下の3要素を実現できることが必要と整理しました。

これを達成するためのボディとして、以下のようなボディを作成しました。

このボディを一定間隔で生成し、壁や階段に沿って動かすことで、オイルタイマーらしい動きの再現を図っています。

こんな複雑なボディじゃなくてもいいんじゃないか？というのは自然な疑問だと思います。
ほかのボディも試したところ、一番オイルタイマーらしい挙動を再現できたのがこのボディだったため、今回はこのボディを採用しました。

GitHub Pagesで行っています。
今回のような静的サイトに限られますが、以下の強力なメリットがあります。

オイルタイマーのWebシミュレータを実装しました。
デジタルなオイルタイマーもこれはこれでいいなあという感想です。

今後も、身の回りで面白いものがあればシミュレータの形で作ってみたいかなと思っています。
（↓過去にも鳥の群れのシミュレータを実装したりしました、よければ見てみてください）

それでは。

もともとこのシミュレータ自体は、22日の記事でeureka_さんが触れていた社内の若手LT会向けに作ったものであり、もろもろ修正をして、この記事として投稿しています。

Advent Calendarもそうですが、こういった機会がアウトプットのいいきっかけになりますね。
若手LTや、本Advent Calendarの主催や企画を行ってくれた皆様に感謝します。

また、油滴の物理モデルの考案やシミュレータ全般のアドバイスをいただいた友人Aさんにも感謝します。