FLOW / GROWTH / MEMORY / RHYTHM

自然の動きを、
ひとつずつ。

ゆらぐ。育つ。つながる。
小さなルールから生まれる動きを、触って探す。

Scent in motionFLOW STUDY 01 / 04

CURL NOISELIVE

香りの流れ

ひとつの流れに身をまかせながら、ほどけていく。

動きを止める

なぞると、香りの流れがゆっくり曲がります。

USAGE / NOTES

使い方としくみ

この動きをページに組み込む

プロジェクトの src/ と assets/ を natural-motion/ にコピーし、以下を配置します。装飾は周囲の操作を遮りません。

<canvas id="natural-motion" aria-hidden="true"
  style="display:block;width:100%;aspect-ratio:1.6;pointer-events:none"></canvas>
<label><input id="motion-pause" type="checkbox">背景の動きを止める</label>
<script type="module">
import { createMotion } from "./natural-motion/src/motion.js";
const pause = document.getElementById("motion-pause");
const settings = {
  "effect": "flow",
  "seed": 42,
  "engine": "auto",
  "params": {
    "wind": 0.08,
    "curl": 1.05,
    "spread": 1.1,
    "life": 9
  }
};
const motion = await createMotion(
  document.getElementById("natural-motion"),
  { ...settings, onPause: value => { pause.checked = value; } }
);
pause.checked = motion.paused;
pause.addEventListener("change", () => motion.setPaused(pause.checked));
// ページから取り除くとき: motion.destroy();
</script>

埋め込みの見本を見る ↗

計算のしくみを見てみる

共通の流れに乗った煙が、上がるにつれて横へ広がります。「香りの広がり」で、煙の大きさと運ばれる範囲を変えられます。流体の物理シミュレーションではありません。

参考にした研究・解説 ↗

表示はこの端末での1更新あたりの計算時間です。別の作品や端末との速度比較には使えません。

自然の動きを、ひとつずつ。

香りの流れ

使い方としくみ

自然の動きを、
ひとつずつ。