p5.jsで流体シミュレーション風 - Qiita

この記事はProcessing Advent Calendar 2018 20日目の記事です。 今回は2次元流体シミュレーションっぽいものを作ってみました。 作ったもの マウスでドラッグすると流れを作ることができ、キーボードを押すとリセットできます。 解説 初期化 まず、シミュレーションの空間を格子に区切り、各格子点にそれぞれ流体の速度と色を持たせます。 // variables for simulations let colors; let velocities; ... function initialize() { colors = new Array(GRID_NUM + 1); velocities = new Array(GRID_NUM + 1); const colorFunc = getInitialColorFunction(); for(let xi = 0; xi