Creating Art with Coding: A Guide to Java

Java stands out as being both versatile and accessible for programming beginners. This translates to its convenience in making digital art, one of its various creative applications, alongside animation, and its ability to create video games.  It's an ideal language for beginners due to the little knowledge you need to get started. That is why we'll be focusing on it for the purpose of creating art.

1. Download our IDE. 

To begin producing art, we need software to code in or an IDE. The language Processing is both free and well-known within the coding community. 

a) Go to https://processing.org/ and follow the download process. 

b) After the download has been completed, access the file in your Finder under Downloads. Double click it to begin.

2. Initializing

There are a few key steps before creating art in Processing, such as functions and the lines of code you’ll need to  know before drawing:

                                       setup()                                                                      draw()

In any application of Java in processing, the setup() function is required. The setup()function is where you typically initialize your program's settings, such as canvas size and frame rate. It's  called once at the beginning of the program.

In addition to setup(), the primary function used for art creation is the draw() function. This function is where the shapes comprising your art will be drawn, and where animations can be created.

Code:

Output:

In line 4, we used the size() function, which is a built-in function that you use to set the dimensions for your sketch. This is always done in the setup() portion. In addition, we assigned a background color in line 9 by using the background() function.

Notes: 

• Void is the keyword written before anything predefined (ie. setup() or draw() ), or user defined functions. 

• Press the triangular button to execute your code.

• You can create comments by using dashes (//) making code more manageable and easier to read. Comments are text the system skips when going through your code meaning it’s treated as invisible. 

• Colors are assigned in the RGB format. There are various online RGB color pickers to guide you.

3. The Basics

Now that we have a basic canvas and background, we can start forming standard geometry shapes that make up any artwork. Let's learn how to make some shapes! 

1. fill (r, g, b) 

• The fill() function is written before any shape that you want to assign a new color to. You select your color using RGB. If you don't use a fill function before a new shape is drawn, it is going to use the color last defined through the fill function. 

2. Stroke(r, g, b) and strokeWeight(num) and noStroke() 

• The stroke() and strokeWeight() are functions used to control the color and thickness of the outlines of your shapes. Similar to fill, stroke()sets the color of the outline for any subsequent shapes. 

• If no color is assigned to it at any point, it is automatically set to black.

•  strokeWeight() function sets the thickness of the outline, and takes the parameter of a number. Ie. The stroke weight of the table in the image below is strokeWeight(5). If you decide you want no stroke at all you simply write noStroke(), with no parameters. 

3. ellipse (x, y, w, h) 

• The ellipse() function is used to draw ellipses or circles. An ellipse is defined by specifying its center coordinates, as well as its width and height. 
  

4. rect (x, y, w, h) 

• The rect() function is used to draw rectangles or squares on the canvas. It takes four parameters: the x and y coordinates of the top-left corner of the rectangle, as well as the width and height of the rectangle. 

5. triangle (x1, y1, x2, y2, x3, y3) 

• The triangle()function is used to draw triangles on the canvas. It takes six parameters: the x, y coordinates of the three vertices of the triangle.

6. line (x1, y1, x2, y2) 

The line() function is used to draw lines on the canvas. It takes four parameters: the x and y coordinates of the starting point (one end) of the line, and the x and y coordinates of the ending point (the other end) of the line.

4. Drawing the final product! 

Code:

Output:

In the first code block, we created the general outline of Miffy's body, the green rectangle 

for a table, and the details of her face. It is important to be mindful of the order your shapes 

are drawn. Layering is an important aspect of Processing, every new block of code will be layered over the previous code block. For example, the circular body is drawn before the table to create a semi circle effect when layered on top.

Code:

Final Output:

In the second code block, we added finishing touches to the image. The plates were drawn

with ellipses, the fork and spoon handles with rectangles (but with a 5th parameter at the end that rounds the edges), and the spoon with an ellipse. 

To create a fork, we drew a rectangle with rounded edges, and then triangles the same color as the table, were layered on top to create the divets of the fork. We applied this process to the ears, drawing white circles on  top of where the ears overlap with the head, creating a seamless effect (we used the noStroke() function to ensure the outline of the layered circles were not visible). 

As you advance into more complicated art creation in Java, you'll be able to apply a more creative use of shapes and layering to achieve unique images.

5. More fun in Java! 

Here are some other examples of art I've replicated in Java!

The drawings I made below are a slightly more advanced application of Java than what we've just learnt. Once you've progressed your knowledge on concepts such as if statements, for loops, and functions, you can move on to different areas of digital art such as these more mathematically driven artworks.              

Good luck on your programming journey!

---

Eden Hazan is a 17 year old currently living in Canada. She fills her free time with her passion for cinema, books, art, and notably, developing her coding skills to build a future for herself in computer programming.