Eyes, JAPAN Blog > p5.js紹介

p5.js紹介

Takumi Yamashita

この記事は1年以上前に書かれたもので、内容が古い可能性がありますのでご注意ください。

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

そこで…

 

 

キャプチャ

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

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

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

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

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

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

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

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

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

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

タッチにも対応した関数

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

などがあります。

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

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

以上でした。

 

Comments are closed.