Painting Randomly Colored Ellipses in Processing

In this tutorial, we will be using the random function in Processing in order to create a painting using randomly generated colors. The tutorial will be interesting for students in middle or high school, younger children if they have lots of one on one instruction, and anyone who is a beginner learning to program in the Processing language.

Processing is a coding language aimed at visual artists. It is widely used today for projects in New Media, from CNC machines to installations in galleries. It's a great first language to learn, with excellent videos by one of the project leads, Dan Shiffman. You can see his videos at https://thecodingtrain.com/.

• A computer running Linux, Mac, or Windows
• Either Processing: download at https://processing.org/download/ or go to https://p5js.org/ to code online. P5js is a web-based implementation of Processing.

When you start the program, you will see a window that looks like this one. This is a new file in Processing.

Here's the first line of code. We are going to start the code by setting up the canvas for our digital painting. This section of code is called "setup." This part will not change, it defines the size of the canvas in pixels, as well as the color of the background.

As you write your code, you will notice that the section at the bottom of the window is showing you error messages highlighted in red. Don't be alarmed! These can be very helpful as you write your code, they will tell you what's missing and try to help you to diagnose problems in the code.

One example of an error message you may notice is seen here, "missing right curly bracket." Curly brackets are used to define a section of code in programming. You'll see one at the beginning and the end. Also, you will see as we go on that most lines end in a semicolon (;). This is just the way the program is structured, part of what's called syntax. It seems strange when you start, but you will get used to it quickly as you practice coding.

Now we will finish setting up our canvas. Write these two lines and then press the play button at the top. If there are no errors in the code, you should see the canvas we have defined. We have created a window that is 800 pixels wide (the X axis) by 800 pixels tall (the y axis), by defining the size in line 2. In line 3, we told Processing to make the background some shade of grey by calling the random function and defining it as a number between 0 (black) and 255 (white). Numbers in between represent a shade of grey. (We could simplify this line by removing the 0 and having only the number 255 there, because Processing understands that if we don't define it, the bottom of the range is 0.

We have also closed the Setup section with a curly bracket in line 4. The error message will vanish.

Now we need to define a couple of variables that we'll use a bit later. Right now, we are giving them a name. Later, we will define them for the program. We could give them any name, but for clarity we are calling them circleX and circleY, because they will define the horizontal and vertical position of each circle we will be drawing.

We're putting them at the top because it's usually good practice to keep your variables up there. "float" means that we are defining the variables as floating point values and not integers (whole numbers).

Now that we have defined our canvas and background color and prepared our two variables, we are ready to move on to our next section, which is the actual drawing. The setup remains static, while the drawing in Processing will get drawn and redrawn, a number of frames per second in a loop.

We will start by opening this section of code with void draw() { on line 9.

With these two lines, we are defining where we want the program to draw circles. We are defining the variables we set in step 4. But we are not defining them by a fixed point. Instead, we are calling on a function, random. This is a command that processing knows. The value that we are giving them is the entire width (X) and height (Y) of our canvas. These two words show up in pink in the interface because they are variable parameters that are already defined within Processing.

So we just told the program that each circle can be drawn anywhere on the canvas.

Now that we have defined our variables in order to tell the program where each circle will be drawn, we need to give instructions for where to draw each circle, as well as how big and what color we would like them to be. Line 12 shows how we draw a circle or any ellipse. The first two values in parentheses are for the location on the X and Y axis. We have inserted our variables, circleX and circleY. So the circles could be drawn anywhere on the canvas. The third and fourth values are set numbers: 20 and 20. This means that the circles will be drawn 20 pixels wide and 20 pixels tall. What would happen if we entered a variable here?

In line 13, we are telling the program what color paint each circle, by using the calling the fill function. Again, following our theme, we have made the colors random. In digital media, colors are defined by three values from 0 to 255. These correspond to the three primary colors of light, red, green and blue, often referred to as just RGB. Notice that for each color channel, we have asked the program to enter a random number from 0 to 255. So we will have a full range of randomized color in our randomly-placed circles.

We close with a curly bracket. If you forget to do it, Processing will remind you.

If your code is written with no errors, you should see the program draw what you have asked it to do. If not, it's time to debug. You can do this with the help of the handy error messages highlighted in red at the bottom of the screen. Go step by step through the lines of code you have written and be patient! A big part of coding is finding and fixing bugs.

Now we can add a little more complexity to the program. First, let's make it so that we can restart from an empty canvas with a click of the mouse.

Add lines 16-18. These call on another built in function in Processing. If we click the mouse now, the program will redraw the background, erasing all of the shapes and colors that it has drawn up to this point. Then it will start again in its endless loop.

Press play and see if it works.

Now let's play with the shapes a little and add some variation. Head back to Line 12 and change the last two values from 20 pixels to a random size. But in this case, we're going to keep the random size pretty restrained. Enter random(15,25) in place of each 20. What will this do?

For each circle that is drawn, instead of the width and height being uniformly 20 pixels, we will see variation from 15 to 25 pixels. Instead of drawing all circles, we will see mostly ellipses, and our painting will have more variation.

If you haven't already done it, press play and see!

Now that we have set up the basic code, play with it to see what happens. Try changing the values of some of the random ranges. Remember that the canvas is 800 by 800 pixels, and that color is 0-255.

Why is the background grey while the ellipses are colored? You could try changing this as well.

Have fun!

Don't forget to save your file. Processing will set up a default save location on your computer in your Documents folder. If you're working online in P5JS, you can save it there.