Installation on Windows

To get your Arduino Javascript p5js or VueJS project started, you will need to install a few things on your computer and Arduino board.

Getting your Windows Machine ready

1. Install Node (npm)

First we will need to get npm up and running on your PC. You will only need to do this once.

  • Visit the Node website and download the latest version of NPM.

  • Run the installer. Important: During the installation you will be asked on a screen titled “Tools fo Native Modules” if you would like to automatically install the necessary tools. Make sure the checkbox is checked! An addional window (PowerShell) might open. Confirm whatever needs to be confirmed.

  • Find the “Windows Powershell” program by clicking on the windows-icon on your desktop and typing “powershell”. Open it by clicking on “run as administrator”

  • A window with a command line will open

  • Type npm -version in to Powershell and press ENTER. If it responds with a number, e.g. 8.8.0, the installation was successful.

2. Install Python

3. Download the arduino-p5js example

  • Visit the arduino-p5js repository and click “download repository”. A zip-file will be downloaded with a name like 99grad-arduino-p5js-(version).zip.

  • Unpack the zip-file on your desktop and rename the folder if you like. In this example we will rename it to project.

  • Doubleclick to open the unpacked folder. Click on the address bar on the top of the window to see the full path of the folder, i.e. C:\Users\Yourname\Desktop\project. Copy this path to the clipboard.

  • Switch back to the Powershell window. Type cd followed by a space. Paste the path in the window. You will now read something like cd C:\Users\Yourname\Desktop\project. Press ENTER.

4. Install the npm-packages

  • Type npm install in the Powershell and press ENTER.

  • You will see tons of strange symbols and warnings. Stay calm and enjoy feeling like a cool programmer.

  • Type npm install -g electron electron-packager and press ENTER. Again, enjoy the Matrix.

Let things do their thing. A window might open saying additional software needs to be installed. If necessary, go through the installation and then run npm install again in the terminal.

5. Test the application

  • Type npm run serve in the Powershell and press ENTER.

  • After a few seconds a window will open. If you see a big circle with “p5”, you’ve made it!

  • To stop / quit the application: Press strg + c + c in the Powershell

Getting your Arduino ready to go

Next, the Arduino Board needs the correct software.

6. 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

7. 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)

  • Open nnarduino-sketch.ino in the folder. The Arduino IDE will open.- 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.

Troubleshooting

If you have a warning saying “Could not find Visual Studio installation to use” click on the windows symbol, search for “Visual Studio Installer” and install the latest version. You will be asked to restart your computer after the installation.

Run npm install again. If the problem remains, go to the Microsoft website and download the free community edition. Install the “Desktopdevelopment with C++” package. Additionally set the checkbox for the package “MSVC v142 – VS 2022 C++” (or higher) in the list to the right.