はじめに
みなさん！！Proccesingという言語は知っていますでしょうか？Proccesigとは，アートやデザイン，グラフィックスやアニメーションに使われるJavaベースの言語です．私の大学では，プログラミングに慣れ親しむために，登竜門としてProcessingを学びます．そして，私はその時にかなりの力作ゲームを作成したので，せっかくならポートフォリオで遊べる状態のものを載せたいと思い．webでProcessingを見られるようにしてみました．
手順
２種類あります．やり方としてはJavaScriptと似ています．
そのまま同じファイルに書き出すのと，別ファイルで作って呼び出すという２種類です．
短いコードは同じファイルに，長いコードは別ファイルを作ることをおすすめします．
では，，，
HTMLファイルに直接書く方法
以下のコードのように<script></script>で囲んで，直接書き込みます．
実際にコピペしてみてください．円がカーソルをついてくるようなものが出てくると思います．
コードを変えて色々遊んでみてください．
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Processing in HTML</title>
<!-- Processing.jsライブラリを読み込む -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js"></script>
</head>
<body>
<!-- Processingスケッチ用のキャンバス -->
<canvas id="mySketch"></canvas>
<!-- Processingスケッチを読み込むスクリプト -->
<script type="text/processing" data-processing-target="mySketch">
// ここにProcessingのコードを直接書く
void setup() {
size(400, 400);
background(200);
}
void draw() {
background(200);
ellipse(mouseX, mouseY, 50, 50);
}
</script>
</body>
</html>
別ファイルで作って呼び出す方法
本来はProcessingで作ったコードが長い時などで別ファイルで管理したい時にもちいますが，今回はわかりやすいように先ほどと同じコードを別ファイルに書き，それを呼び出す方法をお伝えします．私は，これくらいのコードなら，直接書く方を選びますね．．．
という，ことは置いといてファイル構造は以下の感じで，htmlファイルやProcessingのファイルも真似してもらうといいです！簡単ですね!!
.
├── index.html
└── mySketch.pde
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Processing in HTML</title>
<!-- Processing.jsライブラリを読み込む -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js"></script>
</head>
<body>
<!-- Processingスケッチ用のキャンバス -->
<canvas id="mySketch"></canvas>
<!-- 外部の.pdeファイルを読み込む -->
<script type="text/processing" data-processing-target="mySketch" src="mySketch.pde"></script>
</body>
</html>
void setup() {
size(400, 400);
background(200);
}
void draw() {
background(200);
ellipse(mouseX, mouseY, 50, 50);
}
headにライブラリの記述は絶対必要です！！！
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js"></script>
canvasのidとdata-processing-targetの値は同じですか？
最後に
Demo or Die という言葉がありますが，私もそう思っています．色々な制作物を作って，必ず動ける状態にしていきたいですよね．そして，それを実際にいろんな人に触ってもらいたい!!!そんな気持ちから過去の力作（汚作）を公開しようと思い，今回にいたりました．Processingは簡単で綺麗なアートなどを作れるのでみなさんもぜひ作って，ポートフォリオに飾っていきましょう．
それではみなさん，良いエンジニアライフを〜👋