The Interactive & Immersive HQ

Generative Graphics Tools for Raspberry Pi

The Raspberry Pi series of single-board computers are an affordable platform for projects of all kinds, found in classrooms and industrial applications alike. Over the last decade, each new model has brought more impressive specs, including quad core processors, a separate GPU chip, multiple display support, and more. As the platform has matured, the list of available software has also grown to include a number of high quality tools for creative coding, all of which are free! In this post, we’ll take a look at a couple of great software tools for creating real-time generative graphics with a Raspberry Pi.

Before we get started, I want to point out that all screenshots contained in this post were taken on an actual Raspberry Pi 4B. For more info on the Raspberry Pi and different models available, check out the official Raspberry Pi website: https://www.raspberrypi.com/

Processing for Pi

Link: https://pi.processing.org/
Main Processing Site: https://processing.org

generative graphics raspberry pi

Processing, first released in 2001, is a well-established programming language and development environment for creating all kinds of visual and interactive content. Cross-platform since its inception, there are versions of Processing for Mac OS, Windows, Linux, Raspberry Pi, and more. Processing uses a modified version of the Java programming language. With a long track record of use in new media art and design, Processing has a lot of documentation available in the form of books, YouTube videos, and written tutorials. A large amount of external libraries have been developed to extend the program’s core functionality.

So what about the Raspberry Pi version? You might assume that given the Raspberry Pi’s spartan nature, some features might be missing. However, all of the Processing API (link: https://processing.org/reference) can be used on the Raspberry Pi. On top of that, some additional functionality has been added to make use of the Raspberry Pi’s extension header pins, allowing your Processing sketches to interact directly with the world of physical computing. There are classes for communicating directly with I2C and SPI devices — great for making interactive projects!

generative graphics raspberry pi
Interactive particle system (mouse movement generates more particles)

In terms of generative visuals, Processing includes a pretty thorough selection of 2D and 3D geometry tools, as well as plenty of options for manipulating textures. In line with its beginner-friendly nature, a wide range of example projects are included to showcase the available functionality. You’ll find a lot of the typical “generative graphics” fare, including particle systems, complex 3D geometry, and fully textured and lit 3D scenes.

generative graphics raspberry pi
3D scene showcasing textured and lit 3D geometry

p5.js: Processing in the Browser

Link: https://www.p5js.org

p5.js is a creative coding JavaScript library that is based on Processing. Projects are run in a web browser, with the possibility of using the entire webpage as the canvas. p5.js has a number of unique libraries including ml.5, which enables access to machine algorithms and models in the browser. Being built within a webpage framework, p5.js has the added benefit of being easily integrated with other web technologies like web APIs.

generative graphics raspberry pi
A sketch running in the p5.js web editor in Chromium on the Raspberry Pi.

p5.js has a dedicated web-based editor similar to the Processing development environment. From a Raspberry Pi perspective, as long as you’ve got a browser installed and an internet connection, you can access and run p5.js projects that are hosted on the web. You can also download the library to develop and run projects locally, but in this case you’ll have to provide you own editor.

generative graphics raspberry pi
A p5.js sketch showcasing how shaders can be used to texture 3D objects.

3D rendering p5.js uses WebGL, which makes working in 3D slightly different than in Processing. In general, though, the built-in graphics capabilities are fairly similar. Check out the full list of functions here: https://p5js.org/reference/

Get Our 7 Core TouchDesigner Templates, FREE

We’re making our 7 core project file templates available – for free.

These templates shed light into the most useful and sometimes obtuse features of TouchDesigner.

They’re designed to be immediately applicable for the complete TouchDesigner beginner, while also providing inspiration for the advanced user.

openFrameworks for Raspberry Pi

Link: https://openframeworks.cc/

openFrameworks is an open source toolkit for creative coding that is written in C++ and built on top of OpenGL. Like Processing, it’s a multi-platform affair, running on Windows, Mac, Linux (including Raspberry Pi), iOS, and Android. Whereas Processing provides a built-in development environment, openFrameworks users must provide their own IDE of choice. openFrameworks projects can be published as a native application, rather than as a Java applet as is the case for Processing.

generative graphics raspberry pi
An example of openFramework’s 3D geometry primitives

In general, openFrameworks isn’t quite as plug-and-play as Processing, and requires more programming knowledge. Sometimes, even getting certain examples to run requires a bit of troubleshooting, which is something you’re less likely to encounter with Processing. Although less beginner friendly than Processing, it offers a major benefit of speed. Most of the examples below ran at a full 60fps, even at full screen! Considering the hardware it’s running on, that’s pretty impressive.

Like Processing, openFrameworks has a large number of additional libraries that have been developed to expand its core capabilities. For a full list of available libraries, check out: https://ofxaddons.com

generative graphics raspberry pi
Lighting 3D geometry with multiple lights

When it comes to generative graphics, openFrameworks has a lot to offer. As you can see from the examples in this section, there are plenty of options for working with 2D and 3D geometry. Geometry can be lit, textured, and viewed through virtual cameras. Setting up particle systems with forces is no problem, and as mentioned before runs at a full 60fps, making for some smooth movement!

generative graphics raspberry pi
Particle simulation with multiple forces

There are also tools for generating 2D vector graphics, manipulating textures, utilizing frame buffers for feedback effects, pulling in webcam feeds, and more. Check out all available functions in the openFrameworks documentation: https://openframeworks.cc/documentation/

generative graphics raspberry pi
High resolution frame buffer for trailing effect

Wrap-Up

Considering the cost of the Rasbperry Pi (which usually starts at ~$30USD depending on the model) and the fact that each of these tools is freely available and open source, the Raspberry Pi is a compelling option for creating simple generative graphics and/or interactive projects. While it certainly won’t match the power of a purpose-built desktop computer or laptop with a powerful GPU, it is impressive what the devices are capable of.

Not all of the tools we’ve looked will be appropriate for every application. Processing and p5.js are great for quick prototyping, experimentation, and ease of setup and use, but are not always as performative as openFrameworks can be. But that said, it’s worth checking out all the options to see what best suits your needs and interests.

Hopefully this post has gotten you excited to try out some of these tools for yourself —happy experimenting!