JavaScript研修中の山下琢巳です。
クライアントで動作するので、特別な開発環境が無くてもブラウザさえあれば動作するので
作ったものを見せやすい、ちょっとした小物を作るのに良い！というのもJavaScriptの魅力の一つだと思います。

そこで…

練習がてら簡易トーナメントメイカーを作りました。

ということで、ちょっとしたヴィジュアライザーなどを作るのに便利なJavaScriptライブラリを紹介します。
今回使ったのは p5.js というもの。

使い方はとても簡単。公式サイトのダウンロードからp5.jsをダウンロードして

<script language="javascript" type="text/javascript" src="./p5.js"></script>


をhtmlの head の中に書くだけ。

とにかく描画の処理がとても楽なのがこのライブラリの特徴です。

JavaScript 内で呼び出す関数は主に３つです。

• 一番最初に一度だけ呼び出される処理
  function setup() {
createCanvas(/*横幅*/,/*縦幅*/);//描画用のキャンバスをつくる
//処理;
}
• 毎フレーム呼び出される処理
  function draw() {
//処理;
}
• マウスをクリックした時に呼び出される処理
  function  mousePressed(){
//処理;
}

他にもマウスの状態に応じて呼び出される関数

moudeMove(); mouseDragged(); mouseReleased(); や

タッチにも対応した関数

touchStarted(); touchEnd(); touchMove();

などがあります。

さらに詳しくは　リファレンス　を参照。

本命の描画に関するものも
リファレンスを見ていただければわかるように直線、長方形、円、テキスト、の表示が関数一つでかけます。（英語が優しい）

以上でした。