A First Attempt at Making Art with Code

#webdev #beginners #art #java

To follow up on my first blog post, I wanted to learn about how to actually produce some sort of visual arts through a coding language. After doing some research on the subject, I discovered a program called Processing, which allows its users to do exactly that. This is by no means an in-depth tutorial, but rather my experience exploring this topic.

What is Processing?

Processing is an open-source software program created by MIT graduate students, Ben Fry and Casey Reas, initially designed around learning to code within the context of the visual arts. The program provides an Integrated Development Environment(IDE) that is able to run code and display the outcomes on a digital sketchbook. Although Processing can be considered on its own as a programming language, it uses the Java language for the most part. However, the program allows users to change the mode to different languages, such as Javascript or Python.

The Canvas

An important detail to consider before starting a project is getting to know your canvas. The canvas on the computer is essentially a coordinate system with the points being assigned to a pixel on the screen. However, unlike a traditional coordinate system, this one begins at (0, 0) from the top left corner. To set the size of this canvas, the function size(x, y) is used, easy enough right?

alt — A regular coordinate system and a computer coordinate system

Basic Shapes

I found that a good starting point for making art with code was to get familiar with four basic shapes. These are a point, line, rectangle, and ellipse. Although that doesn't seem like a lot, I was pleasantly surprised at how much you can actually do by using just these four shapes. There are functions for each of these shapes that take in the coordinate points of the canvas as an argument to specify where they will appear. Those functions are:

point(x, y)
line(x1, y1, x2, y2)
rect(x, y, width, height)
ellipse(x, y, width, height)

Static vs. Interactive

There are two types of sketches you can make through coding. One is static and the other is interactive. Static sketches are made through a series of functions that create one individual, still image. There is no animation associated with this type and it does not require any interactivity with the viewer. Interactive sketches, on the other hand, are made through a series of frames and like the name states, allow viewers to interact with it. These are animated most of the time.

This is an example of a static sketch that I modeled after a painting by Piet Mondrian along with its code.

alt — On the left is the code version, on the right is the real one

size(500, 500);
background(255);

fill(255, 0, 0);
strokeWeight(6);
rect(0, 0, 215, 215);

fill(255);
strokeWeight(6);
rect(215, 0, 285, 215);

fill(255);
strokeWeight(8);
rect(0, 215, 215, 110);

fill(255);
strokeWeight(8);
rect(215, 215, 285, 110);

fill(255, 255, 0);
strokeWeight(6);
rect(0, 325, 50, 175);

fill(255);
strokeWeight(6);
rect(50, 325, 165, 175);

fill(0, 0, 255);
strokeWeight(6);
rect(215, 325, 150, 150);

fill(255);
strokeWeight(6);
rect(215, 475, 150, 25);

fill(255);
strokeWeight(6);
rect(365, 325, 135, 175);

Setup and Draw

Coding a static sketch is pretty straight forward in that you can simply write lines of code that will run once and produce a still image. Interactive sketches require a little bit more organization. This is where void setup() and void draw() come into play. Like the name states, void setup is where you write the code that sets everything up, like the size of the canvas for example. Every piece of code within the setup block only runs once at the very beginning. As for all the code in the draw block, those get continuously looped resulting in animations.

These next two images are examples of interactive sketches that I made along with the code used to create them.

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

void draw() {
  if (mousePressed) {
    background(0);
  } 
  stroke(random(0,255), random(0,255), random(0,255));
  line(mouseX, mouseY, 375, 375);
}

void mousePressed(){
  saveFrame();
}

The above images are obviously different, but they were made using the same code. By setting the x and y coordinates of the line to wherever my mouse cursor was, I was able to interact with the program and produce different results based on how I moved my mouse. I also added functions for a mouse click that would reset the canvas to a blank slate as well as capture the image right before it was erased.

Takeaways

Interacting with this program, I really enjoyed the fact that it didn't take all that much in order to produce a visible result on the screen. It was interesting to see how the code I had written was translated into a visual image. Although I had a great experience with this topic, seeing other people's works made me realize that I had only scratched the surface. Going forward, I hope that I will be able to learn more about coding as a whole, so that I can eventually apply that knowledge towards making more complex works.

Resources

https://processing.org/

Top comments (11)

mkenzo_8 • Mar 21 '19

I have made some 2D games on it!
Also, some interfaces to control an Arduino board remotely! Processing is a very cool way to get started on programming.