213
edits
02.1.12 Processing sketch XII added
mNo edit summary |
(02.1.12 Processing sketch XII added) |
||
| (19 intermediate revisions by 2 users not shown) | |||
| Line 61: | Line 61: | ||
// the ellipse in between the two lines has a radius of "rad", | // the ellipse in between the two lines has a radius of "rad", | ||
// so the width and | // so the width and height is "2*rad". Since ellipses have their | ||
// origin in the middle in processing, we need to add the radius | // origin in the middle in processing, we need to add the radius | ||
// to our "startPointX" value to have it centered in between the lines: | // to our "startPointX" value to have it centered in between the lines: | ||
| Line 570: | Line 570: | ||
<br /><br /> | <br /><br /> | ||
== 21.11.2011 Arduino workshop sketches == | |||
=== I Blinking LED === | |||
[[File:LED_schematics.png|200px|thumb]] | |||
[[File:I_blinkingLED_fritzing_bb.png|200px|thumb]] | |||
<source lang="java"> | |||
/* BLINKING LED | |||
* | |||
* Demonstrates how to make a LED connected to digital pin 4 | |||
* blink in an interval of 1 second. | |||
* | |||
* You could also use the internal LED on pin 13. This | |||
* LED is mounted onto the board with a resistor in between, | |||
* so whenn connecting a LED to pin 13 we don't need an extra | |||
* resistor. | |||
* | |||
*/ | |||
// specifiy the pin for our LED | |||
int ledPin = 4; | |||
void setup(){ | |||
// configure the pin of the LED as an output | |||
pinMode(ledPin, OUTPUT); | |||
} | |||
void loop(){ | |||
// set the LED pin to HIGH (+5 Volts) | |||
digitalWrite(ledPin, HIGH); | |||
// wait for 1000 milliseconds = 1 second | |||
delay(1000); | |||
// set the LED pin to LOW (0 Volts) | |||
digitalWrite(ledPin, LOW); | |||
// again wait 1 second | |||
delay(1000); | |||
} | |||
</source> | |||
<br /><br /> | |||
=== II Pushbutton === | |||
[[File:Pushbutton_schematic.png|200px|thumb]] | |||
[[File:II_pushbutton_arduino.png|200px|thumb]] | |||
<source lang="java"> | |||
/* PUSHBUTTON | |||
* | |||
* Here we connect a pushbutton to the digital pin 2. | |||
* When the button is pressed, the LED on port 13 | |||
* (the internal one), starts blinking. | |||
* | |||
*/ | |||
int myLedPin = 13; // LED pin | |||
int myButtonPin = 2; // input pin (for the pushbutton) | |||
int myButtonState = 0; // variable for storing the inputpin status | |||
void setup() { | |||
// declare the LED pin as output | |||
pinMode(myLedPin, OUTPUT); | |||
// declare the button pin as input | |||
pinMode(myButtonPin, INPUT); | |||
} | |||
void loop(){ | |||
// read the current state of the button pin | |||
// (either HIGH or LOW) and store it in the | |||
// variable myButtonState: | |||
myButtonState = digitalRead(myButtonPin); | |||
// whenever the button is pressed: | |||
// start the LED blinking | |||
if (myButtonState == HIGH) { | |||
digitalWrite(myLedPin, HIGH); | |||
delay(300); | |||
digitalWrite(myLedPin, LOW); | |||
delay(300); | |||
} | |||
// when the button is not pressed: | |||
else{ | |||
// turn off the LED | |||
digitalWrite(myLedPin, LOW); | |||
} | |||
} | |||
</source> | |||
<br /><br /> | |||
== 28.11.2011 Arduino & Processing sketches == | |||
=== III Potentiometer (Arduino) === | |||
[[File:III_poti_schematic.png|200px|thumb]] | |||
[[File:III_potentiometer_arduino.png|200px|thumb]] | |||
<source lang="java"> | |||
/* TURNING THE KNOB (ARDUINO) | |||
* | |||
* Here we connect a potentiometer (variable resistor) to | |||
* the analog pin 3 of our Arduino to control the state | |||
* of an LED connected to pin 13 and also to send the | |||
* value via the serial connection to a processing sketch. | |||
* | |||
* The value we get from an analog pin is ranging from | |||
* 0 to 1023 (10 Bit). In order to send it as one Byte | |||
* (8 Bit) we have to scale the incomming value using | |||
* the map() function. | |||
* | |||
* NOTE: You can use the same code for many different | |||
* types of variable resistors (e.g. photo resistor, | |||
* bend sensor, etc.) | |||
* | |||
* Frederic Gmeiner, 2011 | |||
*/ | |||
// specify the pin numbers we are going to use: | |||
int ledPin = 13; | |||
int potiPin = 3; | |||
// create a variable to hold the value from the poti: | |||
int potiValue; | |||
void setup(){ | |||
// set the pin mode of the led pin to act as an output: | |||
pinMode(ledPin,OUTPUT); | |||
// establish a serial connection: | |||
Serial.begin(9600); | |||
} | |||
void loop(){ | |||
// read the current value of the poti pin | |||
// and store it in the variable potiValue: | |||
potiValue = analogRead(potiPin); | |||
// if the value is over a certain threshold | |||
// (here it's 511 or the middle of the range), | |||
// turn the LED on, otherwise turn it off: | |||
if(potiValue > 511){ | |||
digitalWrite(ledPin,HIGH); | |||
}else{ | |||
digitalWrite(ledPin,LOW); | |||
} | |||
// in oder to send the poti value as one byte (0-255) | |||
// we have to scale it from the original range (0 - 1023): | |||
int scaledVal = map(potiValue,0,1023,0,255); | |||
// send the scaled value via the serial port as a byte: | |||
Serial.print(scaledVal,BYTE); | |||
// wait a little bit to not overload the serial buffer: | |||
delay(50); | |||
} | |||
</source> | |||
<br /><br /> | |||
=== III Potentiometer (Processing) === | |||
<source lang="java"> | |||
/* TURNING THE KNOB (PROCESSING) | |||
* | |||
* Example of how to read incomming data | |||
* from the serial connection. | |||
* | |||
* Frederic Gmeiner, 2011 | |||
*/ | |||
// first we have to import the serial library: | |||
import processing.serial.*; | |||
// variable for our Serial object: | |||
Serial myPort; | |||
// variable to hold the incomming value | |||
int incomingVal; | |||
void setup(){ | |||
size(255,255); | |||
// this line is very helpful to find out the name of the serial | |||
// port of your Arduino. It lists all available ports of your | |||
// computer. (Make sure that your arduino is connected to a USB | |||
// port before running this sketch) | |||
println(Serial.list()); | |||
// make a new Serial object with the name of our current Arduino | |||
// port. NOTE: The name of the port is different for each Arduino | |||
// so we have to change it accordingly. On a windows system it is | |||
// called different like "COM3" or similar. | |||
myPort = new Serial(this,"/dev/tty.usbserial-A70061cx",9600); | |||
} | |||
void draw(){ | |||
background(0); | |||
// only read from the serial port if there is new data | |||
// available and store this in the variable incommingVal: | |||
while(myPort.available() > 0){ | |||
incomingVal = myPort.read(); | |||
} | |||
// set the fill color to the incoming value: | |||
fill(incomingVal); | |||
// draw a rectangle with the height of the | |||
// incomming value: | |||
rect(0,height-incomingVal,width,height); | |||
} | |||
</source> | |||
<br /><br /> | |||
== 05.12.2011 Arduino & Processing sketches == | |||
=== IV LED Brightness (Arduino) === | |||
<source lang="java"> | |||
/* MOUSE LED (ARDUINO) | |||
* | |||
* This sketch uses the PWM (Pulse width modulation) | |||
* function of the Arduino to create voltages between | |||
* 0V and 5V (analog output) to set the brightness of a LED. | |||
* The value for the LED brightness is received via | |||
* the serial connection from a processing sketch where | |||
* it is created from the mouse's y position. | |||
* | |||
* Look at the example "I Blinking LED" for how to | |||
* connect the LED, but make sure that you use the | |||
* pin declared in this sketch. | |||
* | |||
* Frederic Gmeiner, 2011 | |||
*/ | |||
// pin connected to the LED | |||
// (make sure that it is labeled with PWM) | |||
int myLedPin = 11; | |||
// for storing the incoming data | |||
byte myIncomingData; | |||
void setup() { | |||
// initialize serial communication | |||
Serial.begin(9600); | |||
} | |||
void loop() { | |||
// only read if there is new data on the serial port | |||
while (Serial.available() > 0) { | |||
myIncomingData = Serial.read(); | |||
} | |||
// set brightness of the LED with the last value from the serial port | |||
analogWrite(myLedPin, myIncomingData); | |||
// wait 10 milliseconds to avoid overloading the serial port | |||
delay(10); | |||
} | |||
</source> | |||
<br /><br /> | |||
=== IV LED Brightness (Processing) === | |||
<source lang="java"> | |||
/* MOUSE LED (PROCESSING) | |||
* | |||
* Here we take the y-position of the mouse | |||
* and map it to the range of 0-255 to | |||
* set the background color and to | |||
* send it to the serial port of the | |||
* Arduino. | |||
* | |||
* Frederic Gmeiner, 2011 | |||
*/ | |||
import processing.serial.*; | |||
// serial port object | |||
Serial myPort; | |||
// for storing the scaled y position value | |||
int myValue; | |||
void setup() | |||
{ | |||
size(200, 500); | |||
// print all serial devices | |||
println("Available serial ports:"); | |||
println(Serial.list()); | |||
// set the port which is connected to the arduino board | |||
// !!! CHANGE THE "/dev/tty.usbserial-A70061cx" TO THE NAME OF YOUR | |||
// PORT !!! | |||
myPort = new Serial(this, "/dev/tty.usbserial-A70061cx", 9600); | |||
} | |||
void draw() | |||
{ | |||
// get the y position of the mouse, which can be something | |||
// between 0 and the HEIGHT of the sketch window and map | |||
// it to the range of 0 - 255. The map() function returns a | |||
// float value so we have to cast the output to an integer | |||
// before assigning it to myValue | |||
myValue = int( map(mouseY,0,height,0,255)); | |||
// for debugging: print myValue to the console | |||
println(myValue); | |||
// set the background color to myValue | |||
background(myValue); | |||
// send myValue to the arduino port | |||
myPort.write(myValue); | |||
} | |||
</source> | |||
<br /><br /> | |||
=== IX translate() and rotate() (PROCESSING ONLY) === | |||
<source lang="java"> | |||
/* ORBITING RECTS (PROCESSING ONLY) | |||
* | |||
* Example of the translate() and rotate() | |||
* functions. Try to comment out certain lines | |||
* of the code to understand what exactly happens | |||
* during the runtime of the program. | |||
* | |||
* There is also a good tutorial which explains | |||
* 2D transformations: | |||
* http://processing.org/learning/transform2d/ | |||
* | |||
* Frederic Gmeiner, 2011 | |||
*/ | |||
// value used for the increasing rotation | |||
float rotationVal = 0; | |||
void setup(){ | |||
size(500,500); | |||
smooth(); | |||
noStroke(); | |||
// this tells processing to draw rectangles | |||
// from the center instead of the upper left | |||
// corner | |||
rectMode(CENTER); | |||
} | |||
void draw(){ | |||
background(100); | |||
// set the origin to the center of the sketch window | |||
// (so width/2, height/2 is now equal to 0,0 ) | |||
translate(width/2,height/2); | |||
// rotate the whole scene by the amount of | |||
// the increasing rotationVal | |||
rotate(rotationVal); | |||
// change the origin again by 100 pixels to the right. | |||
// we are doing this so that the rectangle won't stick | |||
// to the center of the sketch and rotates there, | |||
// but rather let the rect orbit around the | |||
// center with a distance of 100px. | |||
translate(100,0); | |||
// now draw the black rectangle to the | |||
// origin (0,0) | |||
fill(0); | |||
rect(0,0,30,30); | |||
// to get to the position of the smaller red | |||
// rectangle which is circling faster, we have | |||
// to rotate the scene again with a multiplication | |||
// of the prvious rotation: | |||
rotate(rotationVal*4); | |||
// shift the origin again by 40px to the right: | |||
translate(40,0); | |||
// draw the smaller red rectangle | |||
fill(255,0,0); | |||
rect(0,0,5,5); | |||
// increase the rotation value a bit: | |||
rotationVal += 0.01; | |||
} | |||
</source> | |||
<br /><br /> | |||
=== X String, Char & Typography (PROCESSING ONLY) === | |||
<source lang="java"> | |||
/* RANDOM LETTERS MOUSE WRITER | |||
* | |||
* Example of how to work with font files and | |||
* charecters (char). | |||
* In order to use a font face we have to | |||
* convert it using the Tools>create font... | |||
* menu. This will make the font available | |||
* in the data folder of this sketch. | |||
* Follow this tutorial for detailed | |||
* descriptions: | |||
* http://processing.org/learning/text/ | |||
* | |||
* Frederic Gmeiner, 2011 | |||
*/ | |||
// create a font object | |||
PFont mySerif; | |||
void setup() { | |||
size(400,400); | |||
smooth(); | |||
// load the font file "Baskerville-48.vlw" from | |||
// the data folder | |||
// !!! MAKE SURE THAT YOU HAVE THE FILE IN YOUR | |||
// DATA FOLDER OR THAT YOU CREATED A NEW ONE AND CHANGED | |||
// THE NAME ACCORDINGLY !!! | |||
mySerif = loadFont("Baskerville-48.vlw"); | |||
// set the text align to center | |||
textAlign(CENTER); | |||
background(0); | |||
fill(255,0,0); | |||
// specify the font and the size which should | |||
// be used when calling the text() function | |||
textFont(mySerif, 15); | |||
// write "random letters" to the position 50,15 | |||
text("random letters", 50, 15); | |||
} | |||
void draw() { | |||
//background(0); | |||
fill(200,200,200,50); | |||
// set the font and font size | |||
textFont(mySerif, 32); | |||
// instead of writing a String to the screen we only | |||
// draw a single randomly chosen character to the current | |||
// mouse position. | |||
// the char() function returns a character from the unicode | |||
// table by the index. | |||
text( char(int(random(150))), mouseX, mouseY); | |||
} | |||
</source> | |||
<br /><br /> | |||
=== Exercise IV === | |||
Modify the example X so that instead of writing random characters, the following String (char sequence) | |||
is written "HELLO WORLD" (but with only one letter at each draw() cycle). | |||
Helpful links: <br /> | |||
[http://processing.org/learning/text/ Strings and Drawing Text in Processing] <br /> | |||
<br /><br /> | |||
=== SOLUTION: Exercise IV === | |||
[[File:Processing_hello_world_mouse_writer.png|200px|thumb]] | |||
<source lang="java"> | |||
PFont mySerif; | |||
char[] letters = {'H','E','L','L','O',' ','W','O','R','L','D',' '}; | |||
int curPos = 0; | |||
void setup() { | |||
size(400,400); | |||
smooth(); | |||
mySerif = loadFont("Serif-48.vlw"); | |||
textAlign(CENTER); | |||
textFont(mySerif, 32); | |||
background(0); | |||
frameRate(5); | |||
} | |||
void draw() { | |||
fill(200,200,200,100); | |||
translate(mouseX,mouseY); | |||
text( char(letters[curPos]), 0, 0); | |||
curPos++; | |||
if(curPos == letters.length){ | |||
curPos = 0; | |||
} | |||
} | |||
</source> | |||
<br /> <br /> | |||
== 12.12.2011 Arduino & Processing sketches == | |||
=== V Capacitive Sensing (Arduino) === | |||
[[File:V_arduino_capacitive_sensing.png|200px|thumb]] | |||
<source lang="java"> | |||
/* CAPACITVE SENSING (ARDUINO) | |||
* | |||
* Example of how to include external libraries. | |||
* In this case we are using the CapSense Library | |||
* (http://www.arduino.cc/playground/Main/CapSense) | |||
* to turn a piece of aluminium foil into a capacitive | |||
* sensor. Check out the description page for more | |||
* details and options. | |||
* | |||
* Frederic Gmeiner, 2011 | |||
*/ | |||
#include <CapSense.h> | |||
CapSense cs_9_2 = CapSense(9,2); | |||
long capValue; | |||
void setup() | |||
{ | |||
Serial.begin(9600); | |||
} | |||
void loop() | |||
{ | |||
capValue = cs_9_2.capSense(30); | |||
Serial.println(capValue); | |||
delay(10); | |||
} | |||
</source> | |||
<br /> <br /> | |||
=== Va Smoothing Sensor Values === | |||
[[File:Arduino_array_smoothing.png|200px|thumb]] | |||
<source lang="java"> | |||
/* SMOOTHING SENSOR VALUES (ARDUINO) | |||
* | |||
* Sometimes the values from a sensor variate | |||
* around a certain value or have certain peaks | |||
* that we need to filter out in order to | |||
* work with the signal. For this we can | |||
* use an array in which we write the | |||
* sensor reaings first and calculate the | |||
* average of all values in the array. | |||
* | |||
* NOTE: This smoothing example is very simple. | |||
* There are much better ways of doing this, but | |||
* this is the most basic procedure to illustrate | |||
* the purpose of a smoothing algorithm. | |||
* | |||
* Frederic Gmeiner, 2011 | |||
*/ | |||
#include <CapSense.h> | |||
CapSense cs_9_2 = CapSense(9,2); | |||
// vars for smoothing array: | |||
const int numReadings = 10; | |||
long capValues[numReadings]; | |||
int index = 0; // the index of the current reading | |||
int total = 0; // the running total | |||
int average = 0; // the average | |||
void setup() | |||
{ | |||
Serial.begin(9600); | |||
} | |||
void loop() | |||
{ | |||
capValues[index] = cs_9_2.capSense(30); | |||
// reset and recalculate the total: | |||
total= 0; | |||
for(int i=0; i<numReadings; i++) total += capValues[i]; | |||
// advance to the next position in the array: | |||
index = index + 1; | |||
// if we're at the end of the array... | |||
// ...wrap around to the beginning: | |||
if (index >= numReadings) index = 0; | |||
// calculate the average: | |||
average = total / numReadings; | |||
Serial.println(average); // print the average | |||
delay(10); // arbitrary delay to limit data to serial port | |||
} | |||
</source> | |||
<br /> <br /> | |||
=== XI Interval Timer=== | |||
<source lang="java"> | |||
/* INTERVAL TIMER (PROCESSING) | |||
* | |||
* Often when animating things, we need | |||
* to trigger events in a certain interval. | |||
* For this the millis() funtion is very helpful. | |||
* It returns the time in milliseconds | |||
* since the program was started. | |||
* | |||
* Frederic Gmeiner, 2011 | |||
*/ | |||
// create a variable to store the last time | |||
// our event was triggered. (the long datatype | |||
// can store much larger numbers as an integer) | |||
long lastMillis= 0; | |||
// define the length of the interval | |||
int interval = 1000; | |||
void draw(){ | |||
// check whether the interval time has passed: | |||
if(millis() - lastMillis > interval){ | |||
// once the interval time has passed, | |||
// update the lastMillis so that we need to | |||
// wait again for 1000 milliseconds. | |||
lastMillis = millis(); | |||
// trigger the event: | |||
println(millis()/1000); | |||
} | |||
} | |||
</source> | |||
<br /> <br /> | |||
=== Exercise V: Counter === | |||
[[File:processing_counter_screenshot.png|200px|thumb]] | |||
Modify the example XI above so that it will display the seconds directly in the sketch window.<br /> | |||
Also change the color of the font according to whether or not the number which is displayed | |||
is dividable by 3. For this the modulo operator % is very helpful.<br /> | |||
[http://processing.org/reference/modulo.html modulo operator] | |||
== 02.01.2012 Processing sketches == | |||
=== XII Classes === | |||
<source lang="java"> | |||
/* GROWING FLOWERS (PROCESSING) | |||
* | |||
* In this example the concept of "object | |||
* orientated programming" (OOP) is used | |||
* to structure the code into objects by using | |||
* a class which describes a flower (a very | |||
* abstract flower though). | |||
* | |||
* IMPORTANT: Make sure you have the corresponding | |||
* class "Flower.pde" in your sketch folder !!! | |||
* | |||
* Frederic Gmeiner, 2012 | |||
*/ | |||
// declare two new objects of the type Flower and | |||
// call their constructor function Flower() with | |||
// individual values: | |||
Flower flower1 = new Flower("Tulip", 200, 400); | |||
Flower flower2 = new Flower("Rose", 0, 400); | |||
void setup() { | |||
size(400, 400); | |||
smooth(); | |||
} | |||
void draw() { | |||
background(150); | |||
// call the grow() function of flower1 | |||
// which increases the growths by 0.1 | |||
flower1.grow(0.1); | |||
// call the paint() function of flower1 | |||
// in order to draw the flower to the screen | |||
flower1.paint(); | |||
// set the xPos variable of flower2 to the | |||
// current x position of the mouse | |||
flower2.xPos = mouseX; | |||
// call the grow() function of flower2 with | |||
// half of the value of flower1 | |||
flower2.grow(0.05); | |||
// call the paint function of flower2 | |||
flower2.paint(); | |||
// to make the objects interact with each other | |||
// we have to check from within our main draw loop. | |||
// here we check compare the individial x positions | |||
// and change the fill color accordingly: | |||
if ( flower2.xPos > flower1.xPos){ | |||
fill(255, 0, 0); | |||
} | |||
else { | |||
fill(150); | |||
} | |||
} | |||
</source> | |||
<br /> <br /> | |||
<source lang="java"> | |||
/* FLOWER CLASS (PROCESSING) | |||
* | |||
* Definition of the Flower class which we use in | |||
* the GROWING FLOWERS sketch. NOTE: Class names always | |||
* start with an upper case letter. | |||
* | |||
* IMPORTANT: Make sure you have this class in the | |||
* file "Flower.pde" in your main sketch folder !!! | |||
* | |||
* Frederic Gmeiner, 2012 | |||
*/ | |||
class Flower { | |||
// global class variables | |||
float growth; | |||
String name; | |||
float xPos; | |||
float yPos; | |||
// this is the so called "constructor" method with which | |||
// the Flower class is initiated and fed with individual | |||
// values. | |||
Flower(String theName, int theXPos, int theYPos) { | |||
// assign the local function variables (theName, theXPos, | |||
// theYPos) to the global class variables (name, xPos, yPos). | |||
name = theName; | |||
xPos = theXPos; | |||
yPos = theYPos; | |||
} | |||
// function fow increasing the growth variable | |||
// (by means of a grow factor) | |||
void grow(float theGrowFactor){ | |||
growth += theGrowFactor; | |||
} | |||
// function for painting the visual appearance | |||
// of the flower onto the screen | |||
void paint(){ | |||
line(xPos,yPos, xPos, yPos - growth); | |||
ellipse(xPos, yPos - growth, growth, growth); | |||
} | |||
} | |||
</source> | |||
<br /> <br /> | |||
[[Category:Physical Computing]] | [[Category:Physical Computing]] | ||
[[Category:Frederic Gmeiner]] | [[Category:Frederic Gmeiner]] | ||
[[Category:WS11 | [[Category:WS11]] | ||