OpenProcessing用のコンテンツをローカルではTypeScriptで開発する
OpenProcessingとかedit.p5js.orgとかのオンラインでp5.jsのコンテンツを共有できるサービスのためのコンテンツってJavaScriptで書かないといけないのがちょっとだるい．TypeScriptで書きたい． ただし普通にTypeScriptで書くとsketchを含んでいたりして，書き方がちょっと違ってしまう問題があったりして，ローカルでの開発はやりやすいけど，OpenProcessingとかに載せるためのコードを準備するのがまた手間だったりする．
そこでローカルではTypeScript，トランスパイルするとコピペでOpenProcessingでいきなり動くようないいとこどりな開発方法を共有する
0: 開発用のプロジェクトを作る
code:sh
mkdir your-project-name
cd your-project-name
npm init
1: ライブラリを入れる
code:sh
npm install p5
npm install --save-dev @types/p5
2: 必要なファイルを準備
code:sh
touch index.html
touch tsconfig.json
mkdir src dist
touch src/sketch.ts
以下のようなフォルダ構成になるはず
code:フォルダ構成
.
├── dist/
├── index.html
├── node_modules
├── src/
│ └── sketch.ts
└── tsconfig.json
3: ファイルの中身を書く
code:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js with TypeScript</title>
<script
integrity="sha512-1YMgn4j8cIL91s14ByDGmHtBU6+F8bWOMcF47S0cRO3QNm8SKPNexy4s3OCim9fABUtO++nJMtcpWbINWjMSzQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
</script>
<script type="module" src="./dist/sketch.js"></script>
</head>
<body></body>
</html>
code:tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"module": "ES6",
"strict": true,
"outDir": "./dist",
"esModuleInterop": true
},
}
sketch.tsがプログラムの本体
code:src/sketch.ts
/// <reference path="../node_modules/@types/p5/global.d.ts" />
function setup(): void {
createCanvas(800, 800);
background(220);
}
function draw(): void {
circle(mouseX, mouseY, 20);
}
(window as any).setup = setup;
(window as any).draw = draw;
4: ローカルで実行してみる
code:sh
npm install
npx tsc
実行はVSCodeのlive serverとか使うと良さそう
https://gyazo.com/51e509df5cc162acfe84f0c7e515f220
5: 生成されたJavaScriptはOpenProcessingにコピペで動く
code:dist/sketch.js
"use strict";
/// <reference path="../node_modules/@types/p5/global.d.ts" />
function setup() {
createCanvas(800, 800);
background(220);
}
function draw() {
circle(mouseX, mouseY, 20);
}
window.setup = setup;
window.draw = draw;
これをそのままコピペすれば良いはず．