loading...
Cover image for A First Attempt at Making Art with Code

A First Attempt at Making Art with Code

mshin1995 profile image Matthew Shin ・4 min read

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.

alt

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.

alt

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/

Posted on by:

mshin1995 profile

Matthew Shin

@mshin1995

Software Engineering Student at Flatiron School

Discussion

markdown guide
 

Yeah! Nice stuff! It's one of the projects that get me more hyped into programming. It also serves as a good way to apply a bit of mathematics that I keep forgetting.

Also, have you seen Dan Shiffman from the Coding Train yet? I've absolutely have more fun with it watching him do make crazy visual stuff on screen. :)

 

Thank You! I actually started by watching videos by him. He does a really good job.

 

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.

 
 

Yeah, I saw that you can make games through it! I will definitely look into that more.

 

The first programming course I took in the university was with Processing. It got me so hooked on programming!

 

It was really fun playing around with it forsure!

 

Nice job! Art and Code are always cool when they get combined. Thanks for sharing!

 
 
 

That was really cool, thanks for sharing!

 

The Processing Foundation also maintains two other beautiful projects: