Almost every programming language works with text output in the form of words or alphabets, numbers and special characters. This is one of the easiest things to do when you start learning a new language. However, the moment you start doodling with the graphics, it looks like you hit a brick wall. The learning curve becomes steeper and some newcomers can even hang their boots. Even solving problems with what you’ve created can be a daunting task as you begin to work on more complex constructions.

Processing makes working with graphics much easier. You can draw a circle with just one line of code and then color it with another line. If you want to resize it, this is another line. When it comes to processing, each program is called a ‘sketch’. This is understandable because you actually sketched a visual element.

Simulated bouncing bubbles using processing

Adding another line to the ‘sketch’ above allows you to place the circle on your canvas. You can probably guess where it’s going – animation. As such, it not only helps to create shapes but also allows you to animate those shapes relatively easily. Adding something more to the mix, you can also use Newton’s physics formulas to simulate the flight parameters of an actual spaceship. It may be an overstatement but you know what we are talking about Casey Race and Benjamin Fry Processing from the Aesthetics and Computation Group at MIT Media Lab in 2001. Their main goal was to create a tool for beginners to start programming with the instant gratification of getting a visual response. The language is built on Java but uses a simplified syntax. The same goes for graphics programming models that rely on many libraries to help achieve graphical interfaces.

Significance

It is a programming language that uses a simplified Java syntax to eliminate the hassle of understanding the actual Java syntax which is quite complicated for beginners. And it still maintains the functionality needed to perform visualization and other necessary activities. This makes it a great tool for starting programming, creating graphics and animations with data visual analysis, which in turn helps to create simulations of physics. The Core Processing Framework simplifies the use of basic multimedia libraries (OpenGL, PDF, Camera Capture), thus removing the overhead involved in setting up basic applications. It uses an extensible code framework to allow the creation of dozens of useful libraries for everything from 3D import / export tools to complex 3D geometric images. For scientific data analysis, it can act as a tool to combine data from multiple sources and help visualize the data. Basically, it makes easy comparison of data from different sensors and other hardware.

Sketch processing (coding)

To work with graphics in processing, we use a coordinate system that is used to locate each shape. The computer coordinate system is different from the Cartesian coordinate system taught in school. The difference is not so great and the picture on the left will help you to understand the difference between Cartesian and computer coordination systems. Let’s start drawing a line using processing. Everything after ‘//’ is a comment to explain in detail what that particular line of code accomplishes.

Cartesian and computer coordination systems

A line in the computer coordination system

void setup() {

  size(200,200);}

// Create a window of dimensions 200x200 in which the line will be displayed

void draw() {

  background(255);  // Set background colour to white

  rectMode(CENTER);

  line(50,50,150,150);  }

// Draw a line starting at coordinates (x,y) = (50,50) and ending at coordinates (x,y) = (150,150)

That’s it. You’ve created your first program in processing and now it’s time to crank it up a bit.
Now let’s try to create a simple cartoon character using processing.

void setup() {

  size(200,200);

} // Create a window of dimensions 200x200 in which the character will be displayed

void draw() {

  background(255); // Set the background colour to white

  rectMode(CENTER); // Set the rectMode to centre which is used to colour the objects. However, we won’t be using any colours in this example.

  rect(100,100,20,100); // Draw the body of character using a rectangle. Coordinates (x,y) = (100,100) is the centre of the top edge of the rectangle and it has a width of 20 and a height of 100

  ellipse(100,70,60,60); // Draw the face with an ellipse centered at coordinates (x,y) = (100,70) whose minor and major axis are of length 60. This creates a circle.

  ellipse(81,70,16,32); // Draw the left eye with an ellipse at coordinates (x,y) = (81,70) and minor axis of length 16 and major axis of length 32

  ellipse(119,70,16,32); // Draw the right eye in a similar fashion with the same ellipse but at coordinates (x,y) = (119,70)

  line(90,150,80,160); // Draw the left leg, using line starting at coordinates (x,y) = (90,150) and ending at coordinates (x,y) = (80,160) 

  line(110,150,120,160); } // Draw the right leg, using line starting at coordinates (x,y) = (110,150) and ending at coordinates (x,y) = (120,160)

Cartoon character created using processing

Tools and learning systems

Video tutorials on the official website are categorized into three categories viz. Beginner, intermediate and advanced. This video tutorial can be accessed here. Available for download on the Processing IDE Download page. You can download IDE for both Windows and Linux environments in both 32-bit and 64-bit versions, and the Mac OS X platform is no exception. There are many libraries available for various functions like exporting PDF, sending and receiving serial data through RS-232 port. In addition, libraries have been created for network-related functionality, such as sending and receiving data over the Internet between clients and servers. Multimedia libraries like video libraries help to read pictures from the camera, play movie files and make movies. The Sound Library can play audio files, receive audio input from the input audio port, add effects, and take it one step further and synthesize sound. DXF Export Library is used to create DXF files to store geometry data that can be used in other programs. You can check the documentation of these libraries here.

Integrated development environment processing

Like every programming language, there is a user contribution library to make your life easier in processing. Libraries for 3D, animation, data analysis, I / O, math, video, animation, etc. help speed up the development process. Let’s take a look at some of them. Adds support for a Microsoft Kinect that comes with the XBOX 360 and XBOX One consoles. And there’s even one for ultra-sensitive 3D motion detectors – leap motion. Do we dare mention Arduino? In fact the Arduino development environment is inspired by the processing development environment. Some of Apple’s MacBook hardware can be accessed using the community library.

LED cube responds to mouse input

Then there are tools like Applet Maker and Color Selector to help you with the simple things you had to spend some extra time making from scratch. These tools and others can be obtained here.
Casey Reas and Ben Fry, creators of Processing, co-authored a book, Processing: A Programming Handbook for Visual Designers, which could serve as a companion guide for quick reference. You can request a preview copy of the book here. Topics like photography and drawing and its relationship with software are covered in great detail. Even advanced features like animation, application performance metrics have been taken into consideration.

Visit here for tutorials on the other 15 hot programming languages.