Coding and Art: A Beginner’s Guide to Processing 3
Prior to my software engineering bootcamp, I worked as an actor and lighting/sound technician throughout various performing arts venues in New York City.
As I progressed through my coding education, I became interested in finding ways in which computer programming could be utilized to create art. Some cursory research into these possibilities immediately lead me to the fascinating world of Processing.
Processing 3
Processing is an open-source, Java-based programming library created to help graphic designers bridge the gap between computer science and visual art. Processing is compatible with Windows, Linux, and Mac, and comes with its own IDE that you can use to get started easily.
Below is an image of some sample code written within the Processing IDE. Processing sketches are usually written with at least two basic functions, setup and draw.
The setup function runs once, and includes basic information about the window that will eventually display your sketch.size refers to the size of the canvas used to create your drawing. background describes the background color of the canvas(in this, case 0 refers to RGB(0,0,0), or black).
The draw function loops continually. It most often contains the code that actually creates the sketch and maps it to the surface that you have specified above. You’ll notice that Processing comes with built-in functions for creating various basic shapes, such as circles, rectangles, triangles, etc. For example, to create a rectangle, you can call the rect function, which accepts 4 arguments. The first two coordinates provide the location of the shape on the canvas, described in terms of pixels x and y as a measure of distance from the top left-hand corner of the canvas. The next two arguments provide the size of the object, width and height, respectively.
Each of the other shapes functions in a similar way, with certain pixel coordinates specifying necessary information about the construction of the shape on a page.
The above code renders the image below.
And just like that, we’ve created a geometric painting! With only a few lines of code, we’ve already rendered an image that would have taken much more time and effort using some combination of HTML and CSS.
Interactive Bezier Sketch
Additionally, you can add movement and interactivity to your creations with ease. Below is another code snippet for an interesting built-in geometric design called a Bezier.
Within the bezier function parameters, we can utilize the mouseX function to easily grab the x coordinate of our mouse. With each loop of the draw function, the coordinates of our bezier curve change, and the shape appears to move.
As you can see below, our mouse movements manipulate the bezier curve, making our drawing more dynamic and interactive. And we didn’t even need a single line of Javascript!
Once you’ve mastered the basics of this interesting graphical programming library, you can create some truly special projects. One art installation, displayed below, was actually created by collecting movement data from a dancer using three different Microsoft Kinect motion sensors. The data was then analyzed and compiled into a complex sketch using a combination of Processing and some 3D graphics software.
So cool! Happy Coding!
Sources:
