{"_id":"@async0x4c/processing-ts","_rev":"2-0b58940d223ba8b59a4a9367c1b6bd01","name":"@async0x4c/processing-ts","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.1":{"name":"@async0x4c/processing-ts","version":"0.0.1","author":{"name":"async0x4c"},"license":"MIT","_id":"@async0x4c/processing-ts@0.0.1","maintainers":[{"name":"async0x4c","email":"okmstsvnx.os@gmail.com"}],"homepage":"https://github.com/Asynchronous-0x4C/processing-ts","bugs":{"url":"https://github.com/Asynchronous-0x4C/processing-ts/issues"},"dist":{"shasum":"7a06eebe48c0cb8718404d7d3862183c5818e1a3","tarball":"https://registry.npmjs.org/@async0x4c/processing-ts/-/processing-ts-0.0.1.tgz","fileCount":48,"integrity":"sha512-3IdvyoeDgA0ETWbWTdhSwVs11FFHW5LIAJn95vJeBXqGPmpjzhgXOt5gs+/BMiMQJwI0SvXDGbFIO2yLH3y5CA==","signatures":[{"sig":"MEUCIQDCICiia6roOLWqTsVWHoCBqH7lv8t5gS+93Nfyqo7FHQIgaqRJEdY+pjRz/TNt0weY177O5rlAUXpqgjmlx9qv1oY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1308131},"main":"dist/index.js","type":"module","types":"dist/types/index.d.ts","gitHead":"15b4b3baa5c1eb95da66aa8e92dcf430f1b2367f","private":false,"scripts":{"dev":"vite","devh":"vite --host","build":"vite build && tsc","preview":"vite preview"},"_npmUser":{"name":"async0x4c","actor":{"name":"async0x4c","type":"user","email":"okmstsvnx.os@gmail.com"},"email":"okmstsvnx.os@gmail.com"},"_npmVersion":"11.1.0","description":"A Processing to JavaScript transpiler for web applications.","directories":{},"_nodeVersion":"23.7.0","dependencies":{"antlr4":"^4.13.2","pixi.js":"^8.9.1","processing-ts":"file:"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.0","typescript":"~5.7.2","@types/node":"^24.0.3","vite-plugin-externalize-deps":"^0.9.0"},"_npmOperationalInternal":{"tmp":"tmp/processing-ts_0.0.1_1750857742906_0.24465426868985496","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@async0x4c/processing-ts","private":false,"version":"0.1.0","description":"A Processing to JavaScript transpiler for web applications.","main":"dist/index.js","types":"dist/types/index.d.ts","type":"module","author":{"name":"async0x4c"},"homepage":"https://github.com/Asynchronous-0x4C/processing-ts","bugs":{"url":"https://github.com/Asynchronous-0x4C/processing-ts/issues"},"license":"MIT","keywords":["transpiler","processing"],"publishConfig":{"access":"public"},"scripts":{"dev":"vite","devh":"vite --host","build":"vite build && tsc","preview":"vite preview"},"devDependencies":{"@types/node":"^24.0.3","@types/p5":"^1.7.6","typescript":"~5.7.2","vite":"^6.2.0","vite-plugin-externalize-deps":"^0.9.0"},"dependencies":{"antlr4":"^4.13.2","p5":"^2.0.3","pixi.js":"^8.9.1","processing-ts":"file:"},"_id":"@async0x4c/processing-ts@0.1.0","gitHead":"15b4b3baa5c1eb95da66aa8e92dcf430f1b2367f","_nodeVersion":"23.7.0","_npmVersion":"11.1.0","dist":{"integrity":"sha512-Q66BS/b9L0PA/UWeZntah6dGH58R3S2lYtTau4/VawDwfSXJrPACL8PTs1mHWjpKgisgo+MKo/Fw0hRNka4hig==","shasum":"54d9b6f53081f1a0b069617ab80410b0dd3dafa4","tarball":"https://registry.npmjs.org/@async0x4c/processing-ts/-/processing-ts-0.1.0.tgz","fileCount":52,"unpackedSize":1366941,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFhGdan/3C0nUpYcncr4ZNZ4pstb8Uo5AK04CLROeD6yAiBuehfSvkftKXuSLhR6R+XPdqll6LOgRz8CjQTqStAHRg=="}]},"_npmUser":{"name":"async0x4c","email":"okmstsvnx.os@gmail.com"},"directories":{},"maintainers":[{"name":"async0x4c","email":"okmstsvnx.os@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/processing-ts_0.1.0_1757341320058_0.0022347532830659933"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-25T13:22:22.837Z","modified":"2025-09-08T14:22:00.473Z","0.0.1":"2025-06-25T13:22:23.093Z","0.1.0":"2025-09-08T14:22:00.287Z"},"bugs":{"url":"https://github.com/Asynchronous-0x4C/processing-ts/issues"},"author":{"name":"async0x4c"},"license":"MIT","homepage":"https://github.com/Asynchronous-0x4C/processing-ts","description":"A Processing to JavaScript transpiler for web applications.","maintainers":[{"name":"async0x4c","email":"okmstsvnx.os@gmail.com"}],"readme":"# Processing.ts\r\n> Run native Processing code in your browser using JavaScript / TypeScript\r\n\r\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\r\n\r\nProcessingのコードを、変換なしでそのままWeb上で実行できるTypeScriptライブラリです。\r\n\r\n- 🟢 Processingコード（`.pde`）をそのまま実行\r\n- 📝 Processing4.4までの構文をサポート\r\n- 🎨 Webでインタラクティブアートを公開・共有\r\n- ✅ npmから利用可能\r\n\r\n## Installation\r\n\r\n```shell\r\nnpm i @async0x4c/processing-ts\r\n```\r\n\r\n## Live demo\r\n\r\n[▶ Live Demo](https://asynchronous-0x4c.github.io/processing-ts-docs/demo/)\r\n\r\n## Quick start(Vanilla JS)\r\n\r\n### 1.ライブラリのダウンロード\r\n[library.js](./library.js)をダウンロード\r\n\r\n### 2.スケッチの入ったフォルダを用意\r\n```\r\n.\r\n└── MySketch/\r\n    ├── data/\r\n    │   └── picture.png\r\n    ├── main.pde\r\n    └── system.pde\r\n```\r\n\r\n### 3.`sketch.properties`を作成\r\n```\r\n.\r\n└── MySketch/\r\n    ├── data/\r\n    │   └── picture.png\r\n    ├── main.pde\r\n    ├── system.pde\r\n    └── sketch.properties\r\n```\r\n#### sketch.propertiesのサンプル\r\n```ini\r\nmain = main.pde  # メイン(PDEで一番左になるタブ)のファイル名\r\nsketches = main.pde system.pde  # スケッチで利用する全てのファイル\r\nresources = ./data/picture.png  # 静的に読み込む全てのリソース(任意)\r\n```\r\n\r\n### 4.`Canvas`を渡して実行\r\n```\r\n.\r\n├── index.html\r\n├── main.js\r\n├── library.js\r\n└── MySketch/\r\n    └── ...\r\n```\r\n\r\n#### HTML\r\n```html\r\n<html>\r\n  <head>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n    <title>Processing-ts</title>\r\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/pixi.js/8.12.0/pixi.min.js\" integrity=\"sha512-gO6ZqUJAWdxRHBTOVBmjev2Or6vRUSDO2LWlqrU8jNDh+ymsV1wn36g5u8A3VZ0eauEUJH2lN4EFCWH5PriRrA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>\r\n    <script type=\"module\" src=\"./main.js\"></script>\r\n  </head>\r\n  <body>\r\n    <canvas id=\"app\">\r\n    </canvas>\r\n    <script type=\"module\" src=\"main.ts\"></script>\r\n    <style>\r\n      body{\r\n        margin: 0;\r\n        overflow: hidden;\r\n      }\r\n    </style>\r\n  </body>\r\n</html>\r\n```\r\n#### main.js\r\n```javascript\r\nimport { SketchManager } from \"./library.js\";\r\n\r\nconst manager = new SketchManager(); //スケッチの変換/実行を管理するクラス\r\nmanager.mountPApplet(document.getElementById(\"app\")); //Canvasを渡す\r\nconst sketch = await manager.loadSketch(\"./MySketch/\"); //スケッチを読み込み\r\nawait manager.runSketch(sketch); //スケッチを実行\r\n```\r\n\r\n## Quick start(npm)\r\n\r\n### 1.インストール\r\n```shell\r\nnpm i @async0x4c/processing-ts\r\n```\r\n\r\n### 2.スケッチの入ったフォルダを用意\r\n```\r\n.\r\n└── MySketch/\r\n    ├── data/\r\n    │   └── picture.png\r\n    ├── main.pde\r\n    └── system.pde\r\n```\r\n\r\n### 3.`sketch.properties`を作成\r\n```\r\n.\r\n└── MySketch/\r\n    ├── data/\r\n    │   └── picture.png\r\n    ├── main.pde\r\n    ├── system.pde\r\n    └── sketch.properties\r\n```\r\n#### sketch.propertiesのサンプル\r\n```ini\r\nmain = main.pde  # メイン(PDEで一番左になるタブ)のファイル名\r\nsketches = main.pde system.pde  # スケッチで利用する全てのファイル\r\nresources = ./data/picture.png  # 静的に読み込む全てのリソース(任意)\r\n```\r\n\r\n### 4.`Canvas`を渡して実行\r\n```\r\n.\r\n├── index.html\r\n├── main.js\r\n├── index.js\r\n└── MySketch/\r\n    └── ...\r\n```\r\n\r\n#### HTML\r\n```html\r\n<html>\r\n  <head>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n    <title>Processing-ts</title>\r\n  </head>\r\n  <body>\r\n    <canvas id=\"app\">\r\n    </canvas>\r\n    <script type=\"module\" src=\"main.ts\"></script>\r\n    <style>\r\n      body{\r\n        margin: 0;\r\n        overflow: hidden;\r\n      }\r\n    </style>\r\n  </body>\r\n</html>\r\n```\r\n#### main.js\r\n```javascript\r\nimport { SketchManager } from \"./index.js\";\r\n\r\nconst manager = new SketchManager(); //スケッチの変換/実行を管理するクラス\r\nmanager.mountPApplet(document.getElementById(\"app\")); //Canvasを渡す\r\nconst sketch = await manager.loadSketch(\"./MySketch/\"); //スケッチを読み込み\r\nawait manager.runSketch(sketch); //スケッチを実行\r\n```\r\n\r\n## どんなときに使える？\r\n\r\n- 📋 Processing作品をWebサイトに貼りたいとき\r\n- ♾️ JavaScriptとProcessingを組み合わせたいとき\r\n- 📖 教材をブラウザで動かしたいとき\r\n- ⭐ インタラクティブなポートフォリオを作りたいとき\r\n\r\n## FAQ\r\n\r\n### Q. p5.jsとの違いは何?\r\nA.`p5.js`はJavaScriptでProcessingのスケッチを書く必要がありますが、本ライブラリは元の**Processingコードをブラウザ上で実行**します。\r\n\r\n### Q. Processing.jsで良くない?\r\nProcessing.jsではProcessing.tsに比べ多くの関数がサポートされているものの、対象とするProcessingのバージョンが古いため、動作が異なる関数が存在します。<br>\r\nProcessing.tsでは、最新のProcessingの機能に基づいて実装や変換を行うため、Processing.jsに比べより確実にスケッチをブラウザ上で実行することができます。\r\n\r\n## 今後について\r\n今後の開発においてはWebAssemblyを用いた変換速度の改善や周辺ライブラリのサポート、Processing.tsと連携して高度な機能を実現するProcessing用のライブラリなど様々なものを計画しているので、コミュニティを盛り上げてもらえると嬉しいです。\r\n\r\n## 開発・コントリビューション\r\nバグ報告・提案・コントリビュート大歓迎です！","readmeFilename":"README.md","keywords":["transpiler","processing"]}