はじめに
はじめまして！
株式会社ジュニにてインターン中のミキオです。
ジュニのフロントエンドチームでは、毎朝「小話」の時間があり、各人が他のフロントエンドメンバーが知らなさそうな技術ネタを共有しています。
次回は私。とても困っていました。
「 もうネタ切れだあ！ これ以上先輩方が知らない技術ネタなんて、一体どこにあるの？？ 」
そんなとき、p5js.orgのcommunity librariesで発見したのが
謎のライブラリ、c2.jsなのです。
c2.jsとは
c2.jsは、計算幾何学、物理シミュレーション、進化アルゴリズム、その他のモジュールに基づいたクリエイティブコーディングのためのJavaScriptライブラリです。(和訳)
c2.jsはどうやらCreative Coding向けのアルゴリズム計算ライブラリのよう。
「c2.js」というライブラリ名には、どことなくp5.jsやD3.jsの兄弟のようなビッグネーム感があります。
しかし、QiitaとZennで検索結果はまさかの0。
「 これは....!!!!! みんなに話せる......!!!!!! 」
Get Started
早速Get Startedを動かしてみました。
let canvas = document.getElementById('c2');
let renderer = new c2.Renderer(canvas);
renderer.size(480, 480);
renderer.background('#cccccc');
let rect = new c2.Rect(0, 0, 480, 480);
let rects = rect.split([1,2,3,5,8], 'squarify');
renderer.draw(() => {
renderer.clear();
let mouse = renderer.mouse;
let point = new c2.Point(mouse.x, mouse.y);
for (let rect of rects){
if(rect.contains(point)) renderer.fill('#ff0000');
else renderer.fill(false);
renderer.rect(rect);
}
});
実際に動いている様子はこちら。
四角形が分割されました。
splitメソッドで計算をしているようです。
そこで、rect.split([1,2,3,5,8], 'squarify')の
[1,2,3,5,8]を[1,2,3,8]に変えてみると
四角形の分割の比率が変わりました！
どうやらc2.Rectクラスのsplitメソッドでは、入力の配列の面積比によって四角形を分割できるようです。
他にもsliceやmerge、intersectionなど、Rectだけでも多くのメソッドがあるようです。いろいろ試してみたいですね。
c2.jsでアルゴリズミック表現をはじめよう
今回は【未知との遭遇編】として、c2.jsのGet Startedまでをご紹介しました。
ビジュアル表現に使えそうな、さまざまなアルゴリズムが用意されていることが垣間見えたのではないでしょうか。
みなさんもぜひ使ってみてください。
それではまたいつか、「c2.jsによるアルゴリズミック表現②」をお楽しみに！
Discussion