Matej
Space of Matej

Space of Matej

Setting up the Processing development environment

Setting up the Processing development environment

A guide on how to get up and running with Processing

Matej's photo
Matej
ยทMar 2, 2022ยท

4 min read

Table of contents

  • Downloading โฌ‡๏ธ
  • Trying it out the install ๐Ÿคž
  • Let's change it into dark mode ๐Ÿ–ค
  • Conclusion ๐ŸŽ‰

As I've been using processing for some time now, I want to share how I set up my creative environment.

In this post, we're going to set up the Processing Development Environment (PDE), set up a theme, and install plugins. On top of that, we're going to run a sample application to verify the installation.

Let's get started! ๐Ÿƒโ€โ™‚๏ธ

Downloading โฌ‡๏ธ

The journey starts on the processing website. Head on over to processing.org, where you will be greeted by a landing page.

image.png

Click on the "Download" button to see the different versions of Processing available.

image.png

I'm using the latest beta version of Processing 4. As of right now, I had no issues with the beta, everything worked as expected and there were no bugs.

The latest update enables themes. I am forever grateful for this since this finally enables a dark mode in the Processing IDE ๐Ÿ™.

Now, select your platform of choice and it will start downloading!

macOS ๐ŸŽ

For macOS, you will receive a zip file. When you unpack it, you will see Processing.app next to it. Drag that file into your Applications folder and now it's installed. Easy peasy!

Go to your Applications folder and double-click on the icon to start the Processing Development Environment (PDE)!

Windows 10/11 ๐ŸชŸ

For Windows, you will also receive a zip file. When you unpack it with WinRAR or 7Zip, you will see a lot of files and subfolders.

First, create a new folder under C:\Program Files called Processing and drag the contents of the zip file inside of it. Now it should be installed.

For ease of access, I pinned the Processing.exe to my desktop and start menu.

Now click the Processing.exe to start it!

Linux ๐Ÿง

On Linux you receive a .tar.gz file. Download this file and move it to your home directory. Fire up a terminal and type the following:

$ tar xvfz processing-xxxx.tgz

(Replace xxxx with the rest of the file's name, which is the version number. In my case this is 4.0b6-linux-x64). This will create a folder named something similar to processing-4.0b6.

Go into the newly-created directory in your terminal:

$ cd processing-4.0b6

and run it:

$ ./processing

Always going into ~/processing-4.0b6 can be quite annoying, I would rename the folder processing-4.0b6 into processing with

mv ~/processing-4.0b6 ~/processing

and then add it to your path. I suggest reading this post to learn more about it: Adding programs into path

Trying it out the install ๐Ÿคž

When you run your the PDE, you should see a screen that looks similar to this: image.png

This is the Processing Development Environment (PDE).

In the middle, there's the text editor, which allows us to edit our sketch (sketch is just a name for the program. But since we're not programming and we're sketching, it's called a sketch).

On the top, there is Run (also bound to CMD+R / CTRL+R) and Stop buttons. At the bottom, we can see our output console for debugging.

On the right, we can select different flavors of Processing when we install them. For example p5, Processing.py, etc.

Let's run our first sketch:

Copy the following code into Processing:

void setup() {
  size(600, 600);
  background(0);
}

void draw() {  
  fill(#f1f1f1);
  circle(mouseX, mouseY, 50);
}

A window should appear on your screen with a black background. When you go over it with your mouse, circles appear where your mouse position is.

This is what I drew on my screen: image.png

Congratulations! You just created your first sketch ๐ŸŽ‰

Let's change it into dark mode ๐Ÿ–ค

As I am a vampire myself, I do not like light and bright color editors. You might be the same as me and want to change your theme.

Until recently, this was not possible. But Processing 4 has implemented theming of the editor and now you can easily do it!

If you head into Processing, then under Tools you should see an item that says Theme Selector....: Screenshot 2022-02-20 at 16.16.20.png

When you click on it, a window with possible themes should open up: Screenshot 2022-02-20 at 16.16.59.png

Click on your desired theme and your Processing should update. Personally, I like this one: Screenshot 2022-02-20 at 16.18.32.png

Conclusion ๐ŸŽ‰

It is quite straightforward to set it up, a lot easier than other environments since it is just an application you have to install.

Hopefully, this helped you out with setting up your Processing Development Environment or maybe inspired you to play around a bit with it!

Thanks for reading ๐Ÿ‘‹


Reach to to me:

ย 
Share this