Coding has opened up a channel for self-expression and experimentation that I never imagined possible. Inspired by a visit to an art museum, I created an interactive LED art project. This project started out as a challenge to become better at writing javascript, but I found a new passion working with hardware despite a severe lack of technical knowledge. I’ll share my story of building with hardware for the first time and how I found ways to overcome my lack of skills and confidence so that you’ll want to tackle your hardware project and won’t give up on it before you ever get started either.

1. Creating Art
with a Raspberry Pi
Adventures in trying out hardware, code,
and having fun in a personal project
Stephanie Nemeth  @stephaniecodes
stephanie.lol

2. Hi, I'm Stephanie.
Frontend/JS Developer at
Organizer of
Mentor at


Stupid Hackathon AMS
NodeSchool AMS
stephanie.lol
@stephaniecodes

3. Me:
6 months ago

4. I visited an art
museum.

5. Jean Tinguely
http://www.flickriver.com/photos/46774986@N02/17028829322/

6. “I wanted something ephemeral
that would pass like a falling star...
The work had to just transpire,
make people dream and talk, and
that would be all.“
- Jean Tinguely

7. What I dreamed of

8. What I Built
0:00 / 0:06

9. Phase I: Planning

10.  Project Idea
 Identify Skills Needed
 Research Hardware
 Create A Mockup
 Identify My Must-Haves
 Assembly my Toolkit
 Finally, I'm ready to code!

11. - Coding Skills
- Artistic Ability
- Experience Working With Hardware
- Wiring/Soldering Experience

12. Reality Check
 Could probably handle the coding
 Not a real artist
 No experience with hardware
 No experience with wiring or soldering

13. I started googling.
I needed to find a plug and play hardware option.

14. HATS
Hardware Attached on Top
Easily plugs into a Raspberry Pi's GPIO
No Soldering or Wiring!

15. HATS
They have established libraries!

16. Many kinds of HATs
pimoroni.com
TEXT
LIGHTS
SENSORS
MUSIC
AUDIO

17. Unicorn HAT
64 LED Lights

18. I saw Pixel Art

19.  Project Idea
 Identify Skills Needed
 Research Hardware
 Create A Mockup
 Identify My Must-Haves
 Assembly my Toolkit
 Finally, I'm ready to code!

20. A Mockup of My Idea

21.  Project Idea
 Identify Skills Needed
 Research Hardware
 Create A Mockup
 Identify My Must-Haves
 Assembly my Toolkit
 Finally, I'm ready to code!

22. Must-Haves
- Anyone in the world could interact with the application
- Users can create colorful pixel artwork!
- Build with Javascript & React to improve my skills

23.  Project Idea
 Identify Skills Needed
 Research Hardware
 Create A Mockup
 Identify My Must-Haves
 Assembly my Toolkit
 Finally, I'm ready to code!

24. 1. User Creates Art
Write the web app in React & React-Native

25. 2. Display the art
Raspberry Pi + Unicorn HAT + Python

26. 3. How do they communicate?

28. Other Unicorn HAT projects
- Github repos
- Blog posts
Raspberry Pi project made with React?
- Hard to find examples.
- But, I found one lightning talk video!

29. Socket.IO
Enables real-time communication between apps
Works on every platform, browser or device
Easy setup: Only a node.js server & client libraries
Has client libraries for Python and React!

30. Socket.IO Server
var server = require('http').createServer();
var io = require('socket.io')(server);
io.on('connection', function(socket) {
socket.on('artSubmitted', function(data) {
io.emit('updateState', data);
});
});
server.listen(3000);

31. Socket.IO React Client
import React, { Component } from 'react';
import io from 'socket.io-client';
const socket = io('http://localhost:8000', {});
class App extends Component {
...other code here...
// onSubmit action to send art to Pi
sendMessage = (message, data) => {
socket.emit(message, data);
}
}

32. Socket.IO Pi Client
from socketIO_client import SocketIO
socketIO = SocketIO('http://localhost:8000')
def main():
# Gets msg from other client & call updateState method
socketIO.on('updateState', updateState)
# Keeps the socket open...
socketIO.wait()
def updateState(data):
# Do stuff with data & turn on LEDs
...more code here...

33. Project Design

34.  Project Idea
 Identify Skills Needed
 Research Hardware
 Create A Mockup
 Identify My Must-Haves
 Assembly my Toolkit
 Finally, I'm ready to code!

35. Phase II: Building

36. “Taking on large tasks, or too many
tasks at once, overwhelms us. You’re
more likely to follow through if the task
is small. Once successful, you can then
try a new activity or increase the
original task’s complexity.“
- Sabina Nawaz
https://hbr.org/2017/02/break-bad-habits-with-a-simple-checklist

37. Break Up Goals
- Turn on one LED on the HAT
- Turn on multiple LEDS in 1 color
- Turn on multiple LEDS in multiple colors

38. Light one LED
Break it down into even smaller goals
Click a button, send text message to hardware
Click a button, see one pixel light up
Click on grid square, see that pixel light up



39. Breaking Up Goals
Kept my momentum in the project
Multiple small 'wins' prevents discouragement
Light one LED Display pixel art in only ONE color
Display pixel art in multiple colors!
 

40. Try it out!
https://light-art.herokuapp.com

41. Surprise Bonus Project!
Arduino + LEDs + Socket.IO client in my shirt

42. Project Design

43. Making a Connected Wearable
Arduino + Neopixel LEDs + C++
Feather Huzzah ESP8266 WiFi

44. Wiring Prototype
Arduino
NeoPixel LED Strips
Battery
On/Off Switch

45. Achievements Unlocked!
Wiring + Soldering

46. Breaking Up Goals
 Kept adding on to project
 Wasn't intimidated to try new hardware
 Gained skills I didn't know I could

47. Final Thoughts
- I had never written for hardware.
- I had never written any Python or React Native.
- I had never built anything using Socket.IO.
- I had never built a server with JavaScript.
- I had never combined so many tools into one project.

48. Final Thoughts
Despite all these "nevers", I managed to pull off a
cool first hardware project using a Pi.
(And I ended up with a new dev job!)

49. Don't let what you think are your insufficiencies
hold you back from tackling the stuff you really
want to build.

50. Thank you!
Now go create something wonderful.
Slides available at
Stephanie Nemeth  @stephaniecodes
stephanie.lol/codemotion
stephanie.lol