213
edits
02.1.12 Processing sketch XII added
(02.1.12 Processing sketch XII added) |
|||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1,010: | Line 1,010: | ||
[http://processing.org/learning/text/ Strings and Drawing Text in Processing] <br /> | [http://processing.org/learning/text/ Strings and Drawing Text in Processing] <br /> | ||
<br /><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]] | ||