Make an Etch-a-Sketch!

Overview

This week's project integrates continuous data from the Arduino to enable an electronic Etch-a-Sketch interface.

In The Report

Include your responses to the bold questions, and include snippets of code that explain what you did. Embed a video demo of your Etch-a-sketch and follow-on design.

Parts

Part A. Node Canvas

This week's lab is based on the following Node.js code that creates a canvas for drawing: http://wesbos.com/html5-canvas-websockets-nodejs/

Set up the IxE to serve the client.js client, and to run this server.js code.

Fork this example project to your own repository by clicking the fork button on the top right.

images/fork.png

GitHub will make a copy for you on which you can work.

After logging in to your IxE over ssh. You can now go ahead and clone your forked version of the Etch a Sketch example. Adapt the following example with your name

git clone https://github.com/**_YourGITRepoName_**/etch-a-sketch

This command will download a copy of your repository to your IxE. Don't forget to use git add ., git commit -m 'message' and git push to update your code to the GitHub. If this is unclear have a look at the GitHub Cheat Sheet.

The Etch a Sketch example closely follows the hello world example from the first and second labs. Remember the flashing background and blinking lights. https://github.com/nikmart/interaction-engine/wiki/images/IxE_Explanation.gif

Let's go quickly through it one more time. The Arduino is connected to the Raspberry Pi over a serial connection. This serial connection is handled by the node server(node server.js). The node server communicates with a remote web browser by making the public folder available and by opening a web socket channel. The public folder contains the index.html and client.js files. The client.js is loaded when the web browser interprets the index.html file, and handles all data going to and coming from the node server running on the Raspberry Pi.

1. Where in this code does the drawing occur?
2. What are the inputs to the drawing function?
3. How can the screen be cleared?

Part B. Etch a Sketch

Use any combination of input sensors and switches with the Node Canvas to create your own unique Etch a Sketch. You are welcome to make as liberal an interpretation of the Etch a Sketch concept as you like, as long as you:

• Allow a user to control the creation of a drawing
• Give users real-time feedback of what the user is drawing
• Make it possible to clear a drawing

1. Describe which sensors you are using as inputs and why.
2. In what format does the server expect the X & Y values from the Arduino?
3. What else does the Arduino need to do? The sensorCode folder has an almost working example.
4. What range of output X & Y values do you need? Is it better to map the values from the inputs to the outputs in the Arduino code, the Node code or Client code ? Why?
5. How often do you need to be sending data from the Arduino?
6. Include a copy of the Arduino code, and a copy of your Server and client side code.

Part C. Make it yours

Add a feature. (If you're working in a group, add as many features as you have people in your group.)

For example, make it possible to save a drawing, or make it possible to recall a drawing after it has been cleared from the screen. Or make a multi-player Etch-a-sketch.

1. Upload video of your Etch-a-Sketch in action, being used by someone else in the class!