top of page

JSDuino for Circuit Playground and Arduino Leonardo

Program these microcontrollers in P5JS to provide access to sensors and control outputs: 
Microbit,
Circuit Playground Classic,
Circuit Playground Express,
or Arduino Leonardo with P5JS 
FunKey board

Simple to use:

1. Download and install firmware to the board:

-- for Microbit download and drag the .hex file

-- for Circuit Playground Express download and drag the .uf2 file

-- for Circuit Playground Classic download and install the .ino file using the Arduino IDE

-- for FunKey and Arduino Leonardo download and install the .ino file using the Arduino IDE

2. Click on the links below which will launch a P5JS editor with the code loaded. Run the code using the "run code" button in the editor. You can edit and save to your hard drive using the "download code" button then rename the files. Later you can upload your files using the "upload code" button.  In these links you will see a replication of the P5JS editor.  Use any of the links to launch the editor then load and save your custom code.

Microbit

Sample programs.  Be sure to run in Chrome. Also, be sure to close the windows before you launch another link. If you have trouble, you may have to close Chrome and then reopen it before going to these links.

Note:  Special functions in P5JS have been created to give access to onboard sensors, external sensors attached to pins or ports, and outputs including the LEDs and other outputs attached to pins or ports.

Potentiometer attached to port 0 controls the size of an ellipse:
https://www.elasticmind.com/JSDuinoMbit/index.html?file=potControlsEllipse.js

Theremin: Light sensor attached to port 0 controls the frequency of an oscillator
https://www.elasticmind.com/JSDuinoMbit/index.html?file=code_Theremin_short.js


Accelerometer onboard Microbit controls the position of an ellipse:
https://www.elasticmind.com/JSDuinoMbit/index.html?file=accelerometerControlsEllipse.js

Mouse inside ellipse lights LED connected to Microbit:
https://www.elasticmind.com/JSDuinoMbit/index.html?file=mouseInCircleLightsLED.js

Read values from sensors and control outputs on Microbit:
https://www.elasticmind.com/JSDuinoMbit/index.html?file=simpleReadWritePorts.js

Read values from sensors on Microbit and display the values:
https://www.elasticmind.com/JSDuinoMbit/index.html?file=analogValueDisplayed.js

Mouse inside ellipses light difference colors on RGB LED connected to Microbit:
https://www.elasticmind.com/JSDuinoMbit/index.html?file=mouseInCircleRGB.js

Values from sensor attached to Microbit is graphed in real time:
https://www.elasticmind.com/JSDuinoMbit/index.html?file=analogValueGraphing.js

Graphical sliders control RGB LED values connected to Microbit:
https://www.elasticmind.com/JSDuinoMbit/index.html?file=slidersControlRGBLeds.js

Display of onboard sensor values:
https://www.elasticmind.com/JSDuinoMbit/index.html?file=onboardSensorDisplay.js

Accelerometer Theremin:
https://www.elasticmind.com/JSDuinoMbit/index.html?file=MbitTheremin.js

Accelerometer Theremin Relative Coordinates:
https://www.elasticmind.com/JSDuinoMbit/index.html?file=tiltThereminRelative.js

Accelerometer Theremin Absolute Coordinates:
https://www.elasticmind.com/JSDuinoMbit/index.html?file=tiltThereminAbsolute.js


Control LEDS on Microbit from P5:
https://www.elasticmind.com/JSDuinoMbit/index.html?file=leds.js

Circuit Playground Express files and links
This file will replace the file that came with your Circuit Playground Express.  Be sure you know how to restore the Circuit Playground Express's default .uf2 file so you can return it to "normal" functioning. This is explained on the AdaFruit site.  Plug in the Circuit Playground Express, and you will see its drive icon appear on the desktop.  Then drag the .uf2 file to the Circuit Playground Express's "drive icon", which will load this firmware that enables direct communication with P5JS.
https://www.elasticmind.com/JSDuinoCPE/firmata20200802.uf2
(right-click and "save link as")

Sample programs.  Be sure to run in Chrome. Also, be sure to close the windows before you launch another link. If you have trouble, you may have to close Chrome and then reopen it before going to these links.

Note:  Special functions in P5JS are enabled to give access to onboard sensors, external sensors attached to pins or ports, and outputs including the LEDs and other outputs attached to pins or ports.  You cannot yet use this connection with the official P5JS.org site, however P5JS is implemented on the elasticmind.com server.  Click on the link below.  It may ask you to "connect" to the CPE device, and you should do that.  The link below is a demo of how to use P5JS coding with the CPE.  You may edit this code and save and load your experiments to your hard drive using the "upload code" and "download code" buttons visible at the bottom of the code editing window.  You may watch the video below for Arduino Leonardo, but it is similar for the CPE.

Display of onboard sensor values:

https://www.elasticmind.com/JSDuinoCPE

You'll be able to download from this location an .ino Arduino file to load onto an Arduino board or a FunKey board.  Then you go to these urls to code it directly.

Using Chrome, go to the links below. An editor will launch with examples.  You can edit the examples, and load and save code files from your computer.

Here's an example that uses a sensor to change a value in Javascript.  Connect a potentiometer to port A0 (M) then click on this link.  The code will appear in an editor.  Click "run code" to run.  You can also upload or download javascript files you have made, stored on your computer.


https://www.elasticmind.com/JSDuino/index.html?file=sensorToRectangle.js

Here's another example that uses a sensors and outputs with comments in the code. 

https://www.elasticmind.com/JSDuino/index.html?file=sensorsAndActuators.js

Here's another example that uses a servo motor controlled by a potentiometer.  The servo is connected to port D0 (G) and the potentiometer is connected to port A0 (M)

https://www.elasticmind.com/JSDuino/index.html?file=servo.js

Heartbeat recorder example:  The heartbeat sensor is connected to port A0(M)​.  Place the sensor on your skin, give it a while to stabilize and you should see dips in the graph when your heartbeat is detected.  Try different areas on your palm, fingertip or cheek.  

https://www.elasticmind.com/JSDuino/index.html?file=heartbeatRecorder.js

 

Theremin: sensor on port A0 controls the frequency of sound

Make SURE you have potentiometers connected to A0 and A1

https://www.elasticmind.com/JSDuino/index.html?file=theremin.js

Potentiometers control the frequency of sound of two inputs

https://www.elasticmind.com/JSDuino/index.html?file=dualOscillator.js

Control the light level of an LED  using "pwm" on port 3, 5, 6 or 13

https://www.elasticmind.com/JSDuino/index.html?file=pwm.js

bottom of page