Installation

Preparing your Arduino Board

This instruction explains how to develop your p5js/Arduino-project using the nnarduino Controller App.

The Controller App is a simple, precompiled, executeable program that allows you to open your p5js-sketch in a special “player”. In this environment you can connect to your Arduino without any additional installations or plugins.

First, you will need to install the correct software on your Arduino Board.

You will only need to do this once for every new board you would like to use. The software installed on your Arduino will stay on the Board even if you disconnect it from your computer or the power supply.

1. Download the Arduino IDE

  • Download the Arduino IDE from this website and run the installer.

  • Connect your Arduino board to your computer

  • Open the Arduino IDE.

  • In the navigation bar: Go to Tools (Werkzeuge) -> Board and select your Board from the list

  • Go to Tools -> Port and select the correct port. This usually will be something like /dev/cu.usbserial-xxx

2. Install the sketch

  • Visit the nnarduino-sketch repository and click “download repository”

  • Unzip the folder

  • Important: rename the folder to nnarduino-sketch (remove the 99grad- prefix and the id at the end)

  • In the unzipped folder you will find a file named nnarduino-sketch.ino. Double click it to open the file in the Arduino IDE.

  • Go to Sketch -> Upload and wait for the upload to complete

  • You can now close the Arduino IDE. The software is stored on the Arduino and will remain there even after disconnecting the board from the computer.

Download the Controller App

3. Installation

  • Download the latest version on the nnarduino controller app:
    MacOS version download
    Windows version download

  • Unzip the archive and launch the application. If you see a warning that the developer could not be verified, do a right click on the application and select “Open” from the context menu.

4. Create your first project

  • Start with a simple example like connecting a Button

  • Create a file named sketch.js and write your code or copy & paste the example code

  • Switch to the Controller App, select File --> Open sketch from the menu

  • Find your sketch.js and select it

The Controller App is now linked to your sketch.js. After making changes to your file, simply press Command + R in the Controller App to show the updates.