Off-The-Shelf Hacker: Spin Text And Scroll Objects with Processing
Following up on last week’s introduction to the Processing sketchbook, this week in the Off-The-Shelf Hacker we’ll go a little deeper and cover a couple of examples of animating text and shapes. These techniques are useful for displays, user notification and digital signage. The techniques are suitable for use on my Raspberry Pi-based presentation machine. Don’t forget that Processing maps into the Arduino and the physical computing environment so you could easily use the logic for both Raspberry Pi and Arduino projects.
Let’s Spin Some Text
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
PFont f; String message = "Dr. Torq's Laboratory"; float theta, deg; void setup() { size(200, 200); // fullScreen(); f = createFont("Arial",20,true); } void draw() { background(255); fill(0); textFont(f); // Set the font translate(width/2,height/2); // Translate to the center rotate(theta); // Rotate by theta in radians // rotate(radians(deg)); // Rotate by degrees using the radians function textAlign(CENTER); text(message,0,0); theta += 0.01; // Increase rotation by radians // Increase rotation by degrees // deg += 1; delay(50); // Control rotational speed via milliseconds delay } |
The sketch opens a window on the desktop (or your Raspberry Pi connected HDMI screen) and displays text rotating around its center axis using the rotate() function. Keep in mind that rotate requires an angle measured in radians, from 0 to 2 pi. To use degrees, substitute the lines with “deg” in place of the standard rotate() measures. Change the rotation direction by decrementing the rotate angle.
You’ll also notice the delay() function at the bottom. Depending on your processor, the text may spin too quickly, to be useful. Adding a delay provides rotation speed flexibility and is measured in milliseconds.
The fullScreen() function is a new feature, appearing in Processing 3. Comment out the size() line and uncomment the fullScreen line.
An interesting addition to spinning the text might be to add logic that expands the text from small letters to large, repeat. In this case, you’d manipulate the size variable in the createFont() function.
How could you use a sensor hooked up to an Arduino that spins text on your Linux notebook screen according to the sensor measurement?
Now Let’s Scroll Some Objects
How about making text or a square move across the middle of a window?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
/** * Translate. * * The translate() function allows objects to be moved * to any location within the window. The first parameter * sets the x-axis offset and the second parameter sets the * y-axis offset. **/ PFont f; float x; String str1 = "Dr Torq's Laboratory"; void setup() { size(640, 360); f = createFont("Arial",60,true); } void draw() { background(102); textFont(f); x = x + 1; if (x < width) { translate(x, height/2); // text(str1, 0, -30); rect(0, -50, 100, 100); } else { x = 0; } } |
This sketch opens a new window and moves a text string across the screen with the translate() function. The text is centered up by dividing the screen height in half and using that as the y coordinate, in the translate function.
You’ll also notice the commented-out rect() function, immediately following the text() function. Translating objects, like a rectangle, is just as easy as text. In this case, a 100 x 100-pixel box will scroll from left to right across the screen. Other objects, like circles, photos and lines could be substituted, as well.
Going Standalone
The last topic I’ll cover today is creating a standalone application, from a Processing sketch. Normally, you’d develop the code and just run it in the Processing integrated development environment (IDE). Hitting the big right arrow at the top of the edit window runs the program and the square stops it.
Sometimes, it might be nice to be able to run your sketch, without going through all the effort of starting up the IDE. It could be some animation running before a presentation. It might be a display that responds to button presses or sensor input. We’ll get to those topics in a future column.
Building a standalone application is pretty straightforward.
Start up the Processing IDE and pull up your sketch. Next, click “File” and then “Export Application”. An “export options” window will appear where you can choose your platform (Windows, Mac or Linux), whether you want the app to run full screen or have a stop button and whether you want the Java runtime bundled with the application. I usually just pick Linux and let it rip. Processing will work it’s magic and in a short time, a file manager screen will show up with several directories containing files for the X86 32 and 64-bit environments, as well as the ARM (Raspberry Pi) platforms.
Simply cd into the appropriate directory and run the script from the command line.
|
1 |
rob% cd /home/rob/sketchbook3/processing/translate_text1/ |
|
1 |
rob% ./translate_text1 |
I like to develop my sketches on my Linux notebook and then transfer them over to the Pi, mostly because I can type a lot faster on my notebook than my Pi’s portable keyboard. Obviously, if you are going to create sketches that use the Raspberry Pi general-purpose I/O pins (GPIO), it makes sense to develop on the Pi. Keep in mind, that programs accessing the Pi’s GPIO pins, generally need to be executed using sudo, otherwise you’ll get a permission error. We’ll go a little deeper into that topic in a later article, as well.
As usual, stop the sketch by simply typing a ctrl-c.
Wrapping it Up
I like Processing because, I grew up on the C language, so it’s very familiar, structured and logical. It has tons of libraries for all kinds of visual effects and integrates well on both the Raspberry Pi and Arduino platforms.
Give it a try for a few of your animated display jobs and let me know how they work out.
Feature Image: Non-linear code visualization from Dextro, using Processing.
