Workflow

This chapter describes the normal “workflow” while working on your p5js sketch, how to add media to your project, preview the result and build an executable desktop application

Warning

If you are using the Controller App you can skip this information!

Where your p5js code goes

After installing the arduino-p5js template, you will see a folder called src. Most of the time you will be working in this src folder. It contains all files that are needed for your p5js project:

  • the sketch.js is the main p5.js file. This is where your p5-code goes. It contains the setup() and draw() function you probably already know from working with the p5js-editor

  • the style.scss is where all your styles go for HTML-elements, margins, backgrounds etc. It basically is just a simple css file, but it is passed through a preprocessor before it gets included in the webpage. You can write your CSS-selectors in a nested syntax, define variables etc. If you haven’t had contact with scss yet, you should really have a look.

  • the index.html is loaded when you start the application. It includes the sketch.js and style.scss and shows the canvas.

Stay in the src folder!

Feel free to add subfolders, files and whatever you need for your sketch. But make sure, you only work in the src folder. Files outside of this folder will not be accessible during the development.

Starting the preview / development mode

  • open the Terminal (Mac) or the Powershell (Windows) and navigate to your project folder using the cd command - see the installation guide for more info

  • type npm run serve and press ENTER

A window will open with your sketch. It will also automatically open the debug-console on the right. Everytime you make a change to your code, the window will automatically be refreshed. If not, press STRG + R to refresh it manually.

Building an executeable application

To build an executable application:

  • open the Terminal (Mac) or Powershell (Windows) like described above and navigate to the projectfolder.

  • on a Mac: Type npm run build

  • on Windows: Type npm run build-win

This will create a folder on the root of your projectfolder and export the application in the folder.