p5.jsを使ってみたのでメモ。
p5.jsはJavaScriptでProcessingっぽくビジュアルプログラミングができるライブラリです。

使い方

p5.jsのサイトからダウンロード、またはCDNで読み込むことができます。
CDNを使用する場合は下記のコードを追加してください。

<script src="//cdn.jsdelivr.net/p5.js/0.0.0/p5.min.js"></script>

基本的な使い方

書き方はほぼProcessingに近い形です。1度使ったことある人はとっても扱いやすいと思います。

ベースは下記のように書きます。

function setup(){

}

function draw(){

}

setup()内に、画面サイズなどの初期設定を書きます。
そしてdraw()の中に描画のためのコードを書きます。

setup()起動時に一回だけ実行され、draw()はループされ、何度も実行されます。

円を書きたい場合は下記のように書きます。

function setup(){
  createCanvas(400, 400);
}

function draw(){
  ellipse(200, 200, 100 ,100);
}

createCanvas()でcanvasのサイズを指定できます。
ellipse()でx:200px、y:200pxの位置に半径100pxの円を描画しています。
たったこれだけ。簡単ですね。

ほかにもいろいろできるのですがその辺はLearnのページからExampleをみるとわかりやすいです。

Learn - p5.js

またp5.jsにはp5.sound libraryというWeb Audio APIを扱うことのできるライブラリと、p5.dom libraryというDOMを扱うことのできるライブラリが用意されています。
上記のライブラリを使用する場合は別途読み込むことが必要になります。

ProcessingとのP5.jsとの違いはこちらのページにまとめられいますので参考にしてください。

Processing transition · lmccart/p5.js

シェルピンスキーのギャスケットを書いてみた

という訳で何か書いてみようと思ったので、初のフラクタル図形にチャレンジ。

シェルピンスキーのギャスケット - Wikipedia

いろいろ調べてみた中で一番簡単にかけそうだったのでシェルピンスキーのギャスケットという図形を書いてみました。
再帰関数をつかって処理をループさせて書いています。

DEMOはこちらから

コードはこんな感じになっています。

var start_a = {},
  start_b = {},
  start_c = {},
  triangle_height,
  triangle_length,
  w_width,
  w_height,
  center_x,
  center_y,
  repeat = 9;

function triangle(){
  if(w_width > w_height){
    start_b.x = center_x - center_y + 40;
    start_c.x = center_x + center_y - 40;
  }else{
    start_b.x = 40;
    start_c.x = w_width - 40;
  }

  triangle_length = start_c.x - start_b.x;
  triangle_height = sqrt(3) * triangle_length / 2;
  start_b.y = (w_height - triangle_height) / 2 + triangle_height;
  start_c.y = start_b.y;

  start_a.x = triangle_length / 2 + start_b.x;
  start_a.y = start_b.y - triangle_height;
}

function gasket(a, b, c ,n){
  var count = n,
  d = {},
  e = {},
  f = {};
  stroke(255, 255, 255);
  noFill();
  triangle(a.x, a.y, b.x, b.y, c.x, c.y);

  d.x = (a.x + b.x)/2;
  d.y = (a.y + b.y)/2;
  e.x = (b.x + c.x)/2;
  e.y = (b.y + c.y)/2;
  f.x = (c.x + a.x)/2;
  f.y = (c.y + a.y)/2;

  if(count > 1){
    return setTimeout(function(){
      gasket(a, d, f ,count - 1);
      gasket(b, d, e ,count - 1);
      gasket(c, e, f ,count - 1);
    },500);
  }
}

function setup(){
  w_width = windowWidth;
  w_height = windowHeight;
  center_x = w_width / 2;
  center_y = w_height / 2;
  createCanvas(w_width, w_height);
  background(0,0);

  if(w_width > w_height){
    start_b.x = center_x - center_y + 40;
    start_c.x = center_x + center_y - 40;
  }else{
    start_b.x = 40;
    start_c.x = w_width - 40;
  }

  triangle_length = start_c.x - start_b.x;
  triangle_height = sqrt(3) * triangle_length / 2;
  start_b.y = (w_height - triangle_height) / 2 + triangle_height;
  start_c.y = start_b.y;

  start_a.x = triangle_length / 2 + start_b.x;
  start_a.y = start_b.y - triangle_height;

  triangle();
  gasket(start_a, start_b, start_c, repeat);
}

もうちょい効率よくかけるのかなーといろいろ考えたんですが、短時間で書いたらとりあえずこんな感じになりました。

お手軽に図形を書くには使いやすく書きやすかったです。Processingとほぼ同じようにかけるのと、基本はJavaScriptなのでProcessing・JavaScriptを書いたことある人には使いやすいと思います。