Processing + Firmata with Arduino

Transcription

1 Processing + Firmata with Arduino Processing IDE and language used to generate interactive visualization and sound Firmata Protocal used to communicate between Arduino and Processing Combining Processing with Arduino you can: Use input from the Arduino to generate images on your computer screen Use input from the Arduino to cue sound files Use input from the internet (like Twitter) to control the Arduino

2 Setting up the Arduino Open the Standard Firmata sketch under File > Examples > Firmata > StandardFirmata Do not make any changes Upload the sketch to your board That s it! This will allow us to control the Arduino via Processing Even if you turn off the Arduino, the standard firmata sketch will start running the next time you turn on the Arduino

3 Setting up a Processing sketch Communicating with the Arduino requires two libraries in Processing, so you will need to add these lines at the beginning of the sketch (before setup): import processing.serial.*; import cc.arduino.*; Next you will need to declare an Arduino with this line: Arduino arduino; Like in Arduino, Setup is a function that runs once when the Sketch is run. Starts with: void setup() { Ends with: } In Setup, add these two lines: println(arduino.list()); arduino = new Arduino(this, Arduino.list()[0], 57600); Change the zero in brackets in the second line to correspond with the port to which your Arduino is connected

4 Differences between Processing and Arduino Instead of Loop, that function is called Draw Begins with: void draw () { Ends with: } When you want to use an Arduino function, put arduino. at the beginning of it. That is because those functions are in a library called arduino. arduino.pinmode() arduino.digitalread() arduino.analogwrite() When you use the values INPUT, OUTPUT, HIGH, and LOW, put Arduino. at the beginning of it. That is because those values are specific to the Arduino class. Arduino.INPUT Arduino.HIGH To run your Processing sketch, press the triangular play button in the upper left, which says Run when you hover over it. To stop, press the square button beside it.

5 Visualization - Shapes Use one of these functions in setup to set the size of your visualization: size(width, height) generates a canvas window of width and height in pixels (check you display settings to see the pixel width and height of your screen) fullscreen() generates a full screen canvas (press the escape key to exit) Here are a couple functions to generate shapes: ellipse(x, y, width, height) generates an ellipse at position coordinates (x,y) in pixels of width and height in pixels (if the width and height are the same, it will be a circle) rect(x, y, width, height) ) generates a rectangle at position coordinates (x,y) in pixels of width and height in pixels (if the width and height are the same, it will be a square) For more, look at the 2D primitives section in the Processing reference By default, Processing will draw ellipses from the center. To change that to instead draw from the upper left corner of the ellipse, use this function: ellipsemode(corner);

6 Exercise 1 Make a circle that responds to pressure Connect an FSR to A0 on the Arduino Set up Processing to communicate with the Arduino Before setup, create an integer variable called fsr and a float variable called circlesize In setup: Set the size of the canvas to (600,600) In draw: Set fsr equal to the analog reading from 0 Set circlesize equal to the mapped value of fsr from a range of 0 to 1023 to a range of 0 to 600 Generate a circle from the center of the canvas that changes size based on the fsr Since the center of the canvas is (300,300) use 300 as the x coordinate, 300 as the y coordinate Use circlesize as the width, and circlesize as the height

7 Visualization Color and lines To set the background color for the canvas use this function: background(color); Use it in setup to layer each frame on top of each other (like the last exercise) Use it in draw to redraw each frame separately. Be sure to use it before generating any other images. For greyscale, just use one number on a scale of is white. 0 is black. For color, use three numbers (also on a scale of 0 255) By default, Processing uses RGB color. To use HSB instead, use the function colormode(hsb); To set the fill color for a shape, before generating the shape use fill(color); To set the stroke color use stroke(color); To turn off stroke or fill use nostroke(); or nofill();

8 Exercise 2 Make a psychedelic circle Keep the FSR connected to A0 and add a potentiometer connected to A1 Start with your sketch from the previous exercise and revise it so that the potentiometer changes the hue of the background color as well as the hue of the circle fill. Before setup: Declare an integer variable called potread Declare a float variable called circlehue and another called backgroundhue In setup: Change the color mode to HSB In draw: Set potread equal to the analog reading from 1 Set circlehue equal to potread mapped from a range of 0 to 1023 to a range of 0 to 255 Set backgroundhue so that the higher circlehue gets, the lower backgroundhue gets. You can do that by setting backgroundhue equal to 255 circlehue. Set the background color to (backgroundhue, 255, 255) Before generating the circle, set it to have no stroke and set its fill color to (circlehue, 255, 255)

9 Exercise 3 Make your own visualization Make a visualization from at least 2 inputs on your Arduino that includes at least 2 shapes.