Lately I've been playing with Processing, which is an open source creative coding application created by Casey Reas and Ben Frye. Processing can be used for a wide variety of purposes, including interactive programs, audio-visual media, generative art, and the like. While the possibilities of Processing are nearly endless, this post will mostly focus on drawing with shapes and bringing simple interactivity to coding sketches. Data visualization, integrated electronics, and script-writing will be covered more in depth in the future!
Processing has been hugely influential in promoting software literacy in creative communities. Beyond its accessibility and amazing community of users and educators, there is almost no limit to what can be completed in Processing, making it an important tool for advanced and beginning designers, and anyone in between.
As soon as I started playing with Processing it instantly reminded me of kidpix, which many kids raised in the 90's will remember fondly. One of my favorite features of kidpix was all the stamps, which could be applied singularly, as well as the painting tools, which followed the mouse. As a young child I was too busy enjoying myself to wonder how this worked, but as I got older I began to wonder how responsive computer programs were built. Much of the "glitch art" we see nowadays online that was born from the visual style of kidpix is either filtered through processing or another program built to achieve similar results.
Drawing with shapes in processing is fairly simple. It is often used to create patterns of varying degrees of complexity, generative logos, or other forms of geometric art that are visually very pervasive in modern design. This is because a computer is very capable of using algorithms to create repetitive, procedural art that would require much more time and energy to be done manually.
Processing facilitates the workflow of many different assignments. A logo could be created easily through processing by setting up generative parameters for a shape and then simply capturing the range of results to find the perfect match. Just as art can be created deliberately, there is a lot of room to experiment, which is where a lot of the modern glitch art we see is born. Data can be imported into processing and slightly adapted within functions to create immensely interesting visual designs, like the central image featured here by Philip Visnjic. In this case, digital data stored on a hard drive was integrated into processing to create vivid textile patterns in a project called "Fragmented Memory."
Processing can also be used to create depth in artworks. With robust 3d capabilities, shapes and objects can be layered in space to achieve very sophisticated results. As shown above, Manolo Gamboa Naon, or "Manoloide" on instagram, is a creative coder hailing from Argentina. His mesmerizing visual patterns are all created in processing, often with highly advanced shading and alpha channels. His amazing work can be viewed on his instagram or behance.
One of processing's biggest assets is its ability to create interactive programs. We interact with technology every day without even considering all of the code that our beloved devices need to run, but being able to engage with a piece of art and see how our actions affect it can be illuminating. It is here we can see the possibilities of both functional and creative software and how we can play a role in its development.
Interactivity places emphasis on the actions of the user. One of the most simple forms of this is by assigning influence to the tools that we use, that then in turn affect the program. The mouse, which we are fully dependent on in order to interact with a computer, can play a substantial role in creating really simple interactive applications. If you tell processing to draw something wherever the mouse is on screen, you have just created an interactive program!
Drag the cursor to move the circles, press any key to pause, and press the mouse to resume and reset the background.
Drag the cursor to see areas of color change across the dancing squares.
These are fairly simple examples of interactivity in processing, and can be done using some of the very basic tools first introduced. Dan Shiffman, an associate professor at NYU's Interactive Telecommunications Program, has a great playlist of videos on the basics of processing on his youtube channel, "The Coding Train", which is where I learned all of the skills I used to create these programs.
Just a quick overview; in order to set up your "canvas" for sketching, you need to create a function. A function is a set of instructions that tells the computer what to draw. Once you tell processing to draw a canvas, you can use set language the computer understands to start drawing shapes- terms like "ellipse" and "rect" can help us draw circles and squares. You have to set their position and size using an XY coordinate system, but if you want the position of your shapes to follow the mouse, you can set the position as "mouseX, mouseY." You can also induce randomness in the position, size, color, and opacity of your shapes. If you want your sketches to be further influenced by your actions, or if you want to said randomness to be affected by certain behaviors, you have to begin setting variables, and writing conditional statements. For instance, IF the mouse is pressed, THEN clear the canvas. The syntax can seem complicated, as it is not entirely clear what the computer does and does not already understand. In order for the computer to register variables, they need to be defined at the beginning of a function. Once you really understand how to set and manage your variables, you can begin writing really complicated functions.
Obviously the range of what can be created through processing is vast and even a little overwhelming. But one you get started you'll find you can make things that are pretty exciting with some of the most simple tools. Its a great way to increase software literacy and also appreciate the applications and devices we use on a daily basis. Technology has come a long way!