クリスマスツリー型オブジェを作りました

この記事はProcessing Advent Calendar 2022の15日目に寄せた投稿です。

こんにちは、Toriiです。今回、p5.jsで生成した星形多角形をベースにクリスマスツリー型オブジェを作りました。なお、プログラミングについてあまり詳しくないので、記載内容に誤りがあればぜひご指摘ください。

使用したツールや機材

1. p5.js（OpenProcessing、p5.js-svg）
   星形を少しずつ変化させながらオフセットさせるジェネレータをp5.jsでこしらえました。

2. Adobe Illustrator
   最終的な加工データIllustratorで作成、調整しました。

3. trotec Speedy 100
   レーザー加工機です。今回は5.5mm厚のMDFを切り抜きましましたが、この他にもアクリル、皮革、布地、ゴムなどの材料に対応しています。

制作過程

星形の生成

ベースとなる星形の描画はシンプルで、仮想の同心円に当分割で頂点を配置して直線で結んでいます。頂点が奇数番目であれば大きいほうの円周上に、偶数番目であれば小さいほうの円周上に配置するように設定しています。

正多角形の偶数番目の頂点を凹ませるだけ

図形のオフセット

コードを引用して使用した関数の意図を説明すべきでしょうが、自分でも理由のわからない値が多くて諦めました。適当な数値をぶち込むスタイルは結構ですが、せめて何を期待したのかメモを残したほうが良かったですね。反省です。

動いているからこれでOK

こちらの動画で制御した値をざっくり把握できると思います。頂点の数、小さい円（星形のくぼみ）の大きさ、頂点の回転変位量、オフセット結果の回転量、オフセットの距離、もとになる星形の大きさを操作しています。

SVGデータの取得

p5.js-svgというライブラリを使用してキャンバス内のオブジェクトをSVGデータに変換しました。また、HTML（index.html）に要素を取得するためのボタンを設置しています。このスケッチでは'defaultCanvas0'というidにSVGの情報が含まれているので、以下のように指定しました。

<button onClick="getElement();">要素を取得</button>
<script>
function getElement(){
    let element = document.getElementById('defaultCanvas0');
    console.log('-- ここから --');
    console.log(element.innerHTML);
    console.log('-- ここまで --');
}
</script>

出力結果をテキストエディタに貼り付けて「.svg」ファイルとして保存すれば、Illustratorなどのソフトで扱えるベクターファイルの完成です。もっとスマートな方法はあると思いますが、とりあえずこれでOK。

加工用パスの作成

オフセットした星形が重なっているので、Illustratorで再配置しました。本当はp5.jsでやりきりたかった...でも作りたいのはオブジェなのでこれでOK。

右側の円は台座です

加工（カット）

ファブラボみなとみらい様にお邪魔しました。施設も機械も初めて使用するので少々緊張していましたが、丁寧に教えていただいて無事にカットできました。ありがとうございました！

サイズを勘違いしていた1回目のカット

ちなみに全体のサイズを勘違いしていたので加工自体は2回目です。経験になったのでこれでOK。

組み立て

パーツ固定用の軸を用意しました。ホームセンターで購入した丸棒材を程よい大きさにカットしただけです。台座をボンドで固定して軸をはめ込み、大きいものから順番にパーツを通します。最後にベースとなった星形を載せて完成です。

パーツを通して重ねるだけ

分かったこと

オブジェ制作を目的にするのであれば、p5.jsの2D表現に頼ることは最適解ではないと思います。いや、断じて最適解ではないです。

加工パスの設定はIllustratorでの作業比率が高く、サークルパッキングに基づいて充填できればよりスマートにデータが作成できはずですし、そもそもWEBGLモードで3D形状の検討までできていれば、全体のサイズ感やプロポーションを事前に把握できたと思います。（ちなみに実装するスキルはまだ持ち合わせていません）

なにより、パラメトリックに制御できるCADが使えるのであれば、それが一番素直な手法だと思います。

レーザー加工について友人と会話しているとき、すでに答えは出ていた

一方で、自分のコードが実在するモノに変わっていく過程には、これまでとは違ったクリエイティブコーディングの楽しみがありました。また、レーザー加工とp5.jsの組合せについては、彫刻機能による表現に可能性を感じています。

彫刻後の手触りが気持ちいい（パスの配置は失敗していますが…）

作る・書く・学ぶのどれもゆっくりな私ですが、今後も「これでOK」を合言葉にのんびりとクリエイティブコーディングを楽しみます。