p5js-beta-04

Bug Fixes

• The sketch now starts in the correct size set by createCanvas(<width>, <height>): screens with different kinds of pixel density should work, as I rely on the CSS pixels in the canvas’ style object rather than the device pixels in width/height attributes
• Examples can now be run directly after opening and without saving them first. Since we need to copy Electron files into the example and create node_modules, a sketch cannot be read-only like example sketches are. Therefore, opened examples are copied into a temporary folder before run.

Installation

Tested with Processing 4.4.7 on MacOS Monterey 12.7.6 and Windows 10.

0. If you have installed this mode before, make sure to remove the modes/p5js folder in your Processing sketchbook for a smoother re-install.
1. Download the released .pdex file down below.
2. Double-click the .pdex file to install the mode.
3. When Processing starts up, click Yes in the dialog to confirm installation. The mode will be placed in your Processing sketchbook folder.
4. Restart Processing.
5. In Processing, open the mode dropdown and select p5.js.
6. The mode tries its best to ensure the presence of the necessary tools pnpm and Node. Wait until the status bar in the Processing editor notifies you that the setup is complete. You can then code and run your sketch.

---

You can find more information—including a little demo video—in the mode’s README.

For feedback, feel free to drop us a line at p5mode-feedback@processingfoundation.org or raise an issue.

p5js-beta-03

Bug Fixes

• Non-JavaScript files (especially the Electron scaffolding) is now hidden from the user; you only see your sketch files in the PDE tabs
• node_modules are now ignored when saving/saving-as your sketch
• The index.html that is needed by Electron is now generated dynamically to guarantee that all your sketch files are loaded properly, no matter whether you have renamed them/added new ones/deleted some
• The sketch now starts in the correct size set by createCanvas(<width>, <height>)
• More stability (no ConcurrentModificationExceptions anymore)

Installation

Tested with Processing 4.4.7 on MacOS Monterey 12.7.6 and Windows 10.

0. If you have installed this mode before, make sure to remove the modes/p5js folder in your Processing sketchbook for a smoother re-install.
1. Download the released .pdex file down below.
2. Double-click the .pdex file to install the mode.
3. When Processing starts up, click Yes in the dialog to confirm installation. The mode will be placed in your Processing sketchbook folder.
4. Restart Processing.
5. In Processing, open the mode dropdown and select p5.js.
6. The mode tries its best to ensure the presence of the necessary tools pnpm and Node. Wait until the status bar in the Processing editor notifies you that the setup is complete. You can then code and run your sketch.

---

You can find more information—including a little demo video—in the mode’s README.

For feedback, feel free to drop us a line at p5mode-feedback@processingfoundation.org or raise an issue.

p5js-beta-02

Installation

Tested with Processing 4.4.7 on MacOS Monterey 12.7.6 and Windows 10.

0. If you have installed this mode before, make sure to remove the modes/p5js folder in your Processing sketchbook for a smoother re-install.
1. Download the released .pdex file down below.
2. Double-click the .pdex file to install the mode.
3. When Processing starts up, click Yes in the dialog to confirm installation. The mode will be placed in your Processing sketchbook folder.
4. Restart Processing.
5. In Processing, open the mode dropdown and select p5.js.
6. The mode tries its best to ensure the presence of the necessary tools pnpm and Node. Wait until the status bar in the Processing editor notifies you that the setup is complete. You can then code and run your sketch.

New Feature: Export Sketch as Application

The new feature for this release is the implementation of File > Export Application via Electron Builder. For easy sharing, hit that menu item or ctrl + shift + E/cmd + shift + E to package your sketch as a standalone application for your platform.

The status bar will inform you once your application is ready and Processing will open your sketch folder in your local file browser. Navigate to the dist folder to either find a portable Windows executable, a MacOS .app file, or a Linux .AppImage file, depending on your system.

---

You can find more information—including a little demo video—in the mode’s README.

For feedback, feel free to drop us a line at p5mode-feedback@processingfoundation.org or raise an issue.

p5js-beta-01

Installation

This has been tested with Processing 4.4.7 on MacOS Monterey 12.7.6 and Windows 10.

1. Download the released .pdex file down below.
2. Double-click the .pdex file to install the mode.
3. When Processing starts up, click Yes in the dialog to confirm installation. The mode will be placed in your Processing sketchbook folder.
4. Restart Processing.
5. In Processing, open the mode dropdown and select p5.js.
6. The mode tries its best to ensure the presence of the necessary tools pnpm and Node. Wait until the status bar in the Processing editor notifies you that the setup is complete. You can then code and run your sketch.

---

You can find more information—including a little demo video—in the mode’s README.

For feedback, feel free to drop us a line at p5mode-feedback@processingfoundation.org or raise an issue.

p5js-pre-03

This pdex release comes with automatic Node installation. Tested on MacOS Monterey 12.7.6 with Processing 4.4.7.

Please find installation instructions in the mode’s README.

p5js-pre-02

Fixed .pdex file by adding an extra top-level folder named after the project. Install by double-clicking. Tested on MacOS with Processing 4.4.7.

p5js-pre-01

First try at releasing a .pdex file for easy install of the p5.js mode in Processing.