【javascript】processing.js使ってみた

仕事の寄り道がてら気になるものを動かしてみました。

それが
processing.js (公式：https://processing.org/ )

ただ導入するまでに時間がかかったので忘備録として残していきます。

processing.js とは

processing.jsとは、web上でprocessingというプログラミング言語を実行するjavascriptのライブラリです。
(John ResigというJqueryを作った人がprocessing.jsを作ったらしい！笑)

へえ、processing自体はプログラミング言語なのですね(笑)

このprocessingは
・オープンソースで作られている言語。
・javaで書かれている
・視覚的な表現(アニメーションやイメージの生成)が得意
など、フロントの幅がぐんと上がりそうな言語のような感じです。

それが javascriptを経由して使用できる、それがprocessing.js！！！
(ちょっとcanvasなにおいがしますね)

めちゃくちゃ簡単に描画できる！

究極この2行をかけばまるがかける！！（笑）

size(200, 200);
ellipse(100, 100, 100, 100);

f:id:okinawanpizza:20200705155632p:plain

canvasでもみたことあるようなコードですね、、　

processing.jsセットアップ

それでは導入していきます。

１ディレクトリとファイルを作成します。

// ディレクトリの中身  
processing.js   //git hub から取得(二番で説明)
init.js  //手動で作成  
index.html   //手動で作成

2 processing.jsをgitから取得します。
https://github.com/jeresig/processing-js/tree/master ライセンスなど、いろんなファイルがクローンされますが、
processing.jsだけ使います。

3 init.js と index.html に以下を記述

init.js

window.onload = function()
{
  var canvas = document.getElementsByTagName("canvas");
  for ( var i = 0; i < canvas.length; i++ )
  {
    Processing( canvas[i], canvas[i].previousSibling.textContent );
  }
};

キャンバスを作成するためのコードですね

index.html

<html> 
　<head>
　<title>Processing.js使ってみた</title>
　<script type="text/javascript" src="processing.js"></script>
　<script type="text/javascript" src="init.js"></script>
　</head>
<body>　
　<h1>一つProcessing.jsの例</h1>
　<script type="application/processing">

void setup() {
  size(640, 640);  //キャンバスのサイズ   
  background(0);  //  背景(カラーコード)  
  
  stroke(255);  //線の色
  fill(150);  //円の中身
  strokeWeight(5);   //線の太さ 
}

void draw() {
}

void mouseClicked() {
  ellipse(mouseX, mouseY, 50, 50);  //ellipseは丸を作る関数。それぞれx座標, y座標 ,横幅 ,縦幅を表す  
}

</script>
　<canvas></canvas>
</body>
 </html>

これで、クリックすると縁を書くコードが完成しました。

mouseClicked()というコードだけでクリックイベントのようなものが実現するのはすごくシンプルでいいですね！

f:id:okinawanpizza:20200705162146p:plain