福野泰介の一日一創

Xで見かけたステキなアプリをJavaScriptで再現！

「swimming cursors」 src on GitHub forked junkiyoshi/Insta20250112
パソコンで毎日活躍してくれているカーソルくんが群になって泳ぎ回るアプリです。マウスクリックでフルスクリーン。カーソル表示オフ機能も付けました。背景が真っ黒なのでプロジェクターで投影してもおもしろいはず。

Flock of arrows. Source code -> https://t.co/Q67ItL6Vr7 #openframeworks #programming #creativecoding #プログラミング pic.twitter.com/9KZynfFthv

— JunKiyoshi (@junkiyoshi) January 12, 2025

JunKiyoshi氏による作品「Flock of arrows.」は、C++言語のオープンソースなフレームワーク「openFrameworks」で作られていました。

滑らかな動きで見てみたくなり、JavaScriptへの移植を始め、その実装で必要だったノイズをまず実装し、シード付きランダム RandamXorshift や、Vector2 とともに、必要最小限の openFrameworks っぽいJavaScriptのフレームワーク「ofjs」を作成。

お気に入り言語のJavaScriptですが、ベクトルの計算が演算子でできないのはちょっと面倒。C++であれば演算子の多重定義（オーバーロード）機能でベクトルの他、複素数などいろんな数を演算子を使って分かりやすく計算できて便利です。

links
- Flock of arrows. – プログラミング de 落描き
- パーリン氏自身による改良版、シンプレックスノイズとパーリンノイズを比較
- なめらかなランダムノイズ、パーリンノイズのJavaScript実装とデモ、PerlinNoise.js
- ピクセルなテクスチャーをつくろう！pixel-texture-makerとマイクラ風な木ライブラリ「voxel-trees」移植

1月15日は、いちごの日！一般財団法人IchigoJam財団のウェブサイトが新デザインになりました。ドメインも ichigojam.or.jp を取得し、旧ドメイン ichigojam.club から移動設定完了。「.club」の方はこども向けにいずれ活用したいと思います。

「IchigoJam-words.csv」
IchigoJamは、コンピュータサイエンスへのはじめのいっぽ。IchigoJamリファレンスに登場する言葉を解説するIchigoJam用語集を作り始めました。「数」からの派生だけでたくさん登場する用語！

「IT用語集」 src on GitHub
さくらのクラウド検定のオンライン教材を使った、IT用語集へ、IchigoJam用語集も追加！

世界一やさしいIT入門教材を目指しましょう！

links
- IchigoJam
- IchigoJam 10.5才、一般財団法人IchigoJam財団設立！
- 強い高専生を創ろう、IT・DX教育コストを限りなくゼロにするチャレンジ with さくらインターネット

滑らかな変化が美しいランダムノイズ「PerlinNoise（パーリンノイズ）」を整備しましたが、パーリンノイズの開発者、パーリン氏によるもっと自然でもっと速いアルゴリズム「シンプレックスノイズ」がありました。そちらも同様にESモジュールにまとめ、パーリンノイズと比較してみました。

「SimplexNoise1D vs PerlinNoise1D」
パラーメタ1つのノイズ比較、上が改良版SimplexNoise、下が元となったPerlinNoise

「SimplexNoise2D vs PerlinNoise2D」
PerlinNoise2Dはちょっと単調に見えますね。

「SimplexNoise3D vs PerlinNoise3D」
返ってくる値域が違うため上のSimplexNoiseの方がはっきり見えます。それぞれクセがあるので、使うシーンによって切り替えてみるのも良さそうです。

「SimplexNoise - on GitHub」
Node.js用にnpmで公開されている「simplex-noise」のESモジュールを download.js で、ダウンロードし、PerlinNoise.js とインターフェイスを合わせました。

links
- なめらかなランダムノイズ、パーリンノイズのJavaScript実装とデモ、PerlinNoise.js
- ピクセルなテクスチャーをつくろう！pixel-texture-makerとマイクラ風な木ライブラリ「voxel-trees」移植

乱数はデタラメすぎて、パターンづくりも面倒なとき、滑らかに変化する乱数ノイズが便利です。

パーリンノイズ（Perlin noise）のJavaScriptの実装し、1/2/3次元のデモを作りました。

「PerlinNoise1D DEMO」 src on GitHub
PerlinoNoise1Dクラスを new で生成して、noise機能を時間をパラメータに呼び出せばOK！ import { PerlinNoise1D } from "https://code4fukui.github.io/PerlinNoise/PerlinNoise1D.js"; const noise = new PerlinNoise1D(); for (let i = 0; i < 1; i += 0.1) { console.log(noise.noise(i)) }

「PerlinNoise2D DEMO」 src on GitHub
noise.noise(i, j) と2次元で指定するPerlinNoise2D

「PerlinNoise3D DEMO」 src on GitHub
noise.noise(i, j, k) と3次元で指定するPerlinNoise3D

ノイズを使ったプログラムによるCG生成は、ちょっとの変更で大きく変わって楽しい！
いろんなものに使ってみたくなりますね。

links
- ピクセルなテクスチャーをつくろう！pixel-texture-makerとマイクラ風な木ライブラリ「voxel-trees」移植