高井です。今回もProcessingで遊んでいきます。
あらすじ
Processing普及活動に勤しむ高井は、
フラクタル図形を描き、OpenProcessingに投稿したのであった。
・これまでの記事
フラクタル図形の描き方
OpenProcessingについて
・投稿した作品
今回やること
前回OpenProcessingに投稿した作品は、
「ロードするたびにランダムなn角形のフラクタル図形が表示される」というものでした。
でもやっぱり
自分で何角形にするのか、何回再帰するのか決めたい！
変な数字（小数とか）にして遊びたい！
ですよね！
やっていきます！
どうやるの？
Processingには、Webブラウザ上でProcessingを動かすための方法が2種類用意されています。
processing.js
通常のProcessingで書いたソースコード(.pde)をそのまま使うならこちら。
用意するものは3つだけ。
・表示用HTML
・Processing作品(.pde)
・processing.js(ここからダウンロードまたはCDN)
用意したHTMLに以下のように定義するだけで、
Processing作品を読み込んで表示したり、HTML内に直接Processingのコードを記述したりできます。
<head>
<script type="text/javascript" src="processing.js"></script>
</head>
簡単すぎる…！
p5.js
ProcessingをJavascriptに移植したライブラリという感じです。
関数の宣言がvoid setup(){...}ではなくfunction setup(){...}だったり、
DOM操作に関する関数がふんだんに用意されていたりします。
こちらもp5.jsをインポートする一文をHTMLに書くだけで使えちゃいます。
今回はこちらを使っていきます。
やってみた
というわけでOpenProcessingで制作開始です。
OpenProcessingの編集画面で右側タブの「HTML/CSS/JS」モードを選択すると、
なんとHTML等のテンプレを出してくれます。
スゲ～！
index.html
HTMLには、
・各JSの読み込み
・図形や再帰回数を入力できるinput要素
・実行ボタン（図形を更新するボタン）
を用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<!-- keep the line below for OpenProcessing compatibility -->
<script src="https://openprocessing.org/openprocessing_sketch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
<script src="action.js"></script>
<script src="fractal.js"></script>
</head>
<body>
<input type="number" name="pointNum" size="2" /><span>角形を 再帰回数</span><input type="number" name="maxCount" size="2" /><span>回で描く</span>
<button id="button">実行！</button>
<p>※十角形以上は再帰回数3までを推奨。大きすぎると処理落ちします</p>
</body>
</html>
action.js
実行ボタンを押したときのイベント処理です。
var maxCount = 3; // 再帰回数
var pointNum; // n角形を描く
window.onload = function() {
document.getElementById("button").onclick = function(){
maxCount = document.getElementsByName("maxCount")[0].value;
pointNum = document.getElementsByName("pointNum")[0].value;
};
}
fractal.js
フラクタル図形を描く処理が書いてあります。
前回の記事からほぼ変わっていませんので、ソースコードが見たい人はOpenProcessingから見てみてください。
完成したのがこちら！
自由に数字を入れて遊んでみてください！
（再帰回数を大きくしすぎると処理に時間がかかってつまんなくなるのでやめておきましょう）
高井でした