First Steps

The sketch below connects to a Trinkey and cycles the onboard NeoPixel through a rainbow using HSB color mode. Click Run to execute it in your browser — your browser will ask for USB permission the first time.

How it works

let trinkey declares a global variable that will hold a reference to the connected device. Keeping it in the global scope lets all p5.js lifecycle functions — setup, draw, and so on — access the device later.

preload() is a special p5.js function that runs before anything else. Calling startTrinkey() inside it initiates the USB connection and waits until the device is ready. p5.js will not call setup() until preload() has finished, so the rest of your sketch is guaranteed to have a working device from the very first frame.

The Trinkey is the USB adapter itself. It has one onboard NeoPixel whose color you can set with trinkey.setPixelColor(). Other devices — rotary encoders, touch sensors, and so on — expose different methods. Check the Device Reference for the API of each supported device.

Everything inside setup() is standard p5.js: create a canvas and switch to HSB color mode so hue values from 0–360 map directly to the rainbow. The draw() loop then advances the hue each frame and applies the same color to both the canvas background and the Trinkey's pixel.