Programming with Pointillism
Is programming a form of art? There is definitely something aesthetically pleasing about good code — code that is well organized, with classes and functions that are succinct and coherent. A lot of software engineers could benefit from more art knowledge. Website development and UI/UX design are obvious use cases, but I think a lot of abstract art concepts can be helpful as well. For example, code refactoring and implementing design patterns both require an eye for symmetry and spatial awareness to ensure consistent usage across a codebase.
Artists, I think, could also benefit from learning some code. There are clear applications of computer science to animation and game design, but coding can also unlock new capabilities for creating sculptures and interactive art. Fun fact: I actually took an art class in college and used programming in most of my projects, including an Android app for street photography and a robotic sculpture that could be controlled remotely using an Arduino.
A few years ago, I started a project called Block Lessons to help students learn coding through hands-on labs. Programming with Pointillism is a Block Lessons lab that demonstrates the exciting overlap between art and programming. For artists trying to learn code, programmers trying to learn art, or just a teacher trying to get their students excited about computer science, this lab has something for everyone. Here are a few exercises you can try.
Exercise 1: Random Dots
Look at these two lists of numbers — which one do you think was more likely to be generated when pulling the numbers one through five out of a hat: 12345 or 41325?
The correct answer is that both of these outcomes are equally likely, specifically they both have a 1 in 120 chance of occurring. Humans struggle to generate randomness ourselves, and are likely to subconsciously follow a pattern or avoid extremes. Thats why, when asked to pick a random number, people are more likely to choose 3 or 7 than 1 or 9.
Even though humans are not great at generating random numbers, computers are pretty amazing at it. Randomness has some pretty obvious uses in computer science, like when video game developers add randomness to make their game more exciting. More commonly, random number generators in programs are used to assign unique identifiers to items in a database, so that they can be found even if their other attributes change.
In the Programming with Pointillism lab, we can use the draw_random_dot block to generate a random dot. Clicking “run simulation” will run our code. Try stacking five draw_random_dot blocks to make a program that will generate five random dots on the “canvas” on the right side of the screen. Save the image by right clicking, then selecting “save image.” Then click the “clear dots” button and try re-running the simulation. Save a few images using the random dot generation.
Next, lets try generating our own a random image by hand. Remove the draw_random_dot block and pull down the following blocks:
- set color: set a dot color (choose a color in the dropdown).
- set size: set a dot size between 1 and 100 (type in a value).
Now click “run simulation.” You should be able to click on the canvas to draw a dot with your mouse pointer. Try changing set size and set color and re-running the simulation so that you can add additional dots. After creating an image with five dots, save the image.
Find a friend and have them guess which images were created randomly, and which one was made by you. Can they figure it out? What aspects of your image seem more or less “random” than the truly randomized images?
Exercise 2: Grid System
Instead of drawing dots with our mouse, we can tell the computer to draw dots for us. Most 2D computer graphics systems use a coordinate system to represent the location of the items being drawn on the canvas. Unlike a Cartesian coordinate system, the coordinate system of our canvas starts with (0, 0) in the top left corner, and increases positively as it moves towards the bottom right corner. A good way to picture it is as if the canvas were a grid, with rows and columns. A point in the 1st row and 1st column would appear in the top left, and a point in the 400th row and 400th column would appear in the bottom right.
We can use the set row and set column blocks to select a spot on the grid, then use the draw_dot block and “run simulation” to draw the dot on the canvas. Try drawing dots in each corner of the grid. Then try drawing a dot in the center. You can even try drawing basic pictures, like a smiley face, using dots.
This method for drawing dots may seem more tedious than using the mouse, but it has a bunch of benefits. First, the code lets us “Clear Dots” and “Run Simulation” as many times as we want — we don’t need to redraw our dots every time as long as we have the code. Second, computers are very precise. If we want to draw a dot in the exact center of the canvas, our mouse click may be close but it probably won’t be exact. When we tell the computer where to draw a dot, it doesn’t just guess, it puts the dot exactly where we want it to go. This is why computers are so important to activities that require extreme precision, like flying large planes or operating medical equipment.
Exercise 3: Loops
Drawing dots using set row and set column works alright for single dots, but what if we want to draw a line of dots, or a square of dots? Is there an easier way? Some programs can draw these shapes automatically, but our lab is more limited. Luckily, we can use loops to draw a bunch of dots without needing to set the row and column for each dot individually.
There are two loops we can use for our lab. The “repeat for every column” block lets us do something repeatedly for each column in a range of columns. For example, if we wanted to draw a line across the middle of our grid, we could do something like this:
The “repeat for every row” block lets us do something repeatedly for each row in a range of rows:
We can combine both loops to draw entire squares. This requires “nesting” our blocks so that one loop is looping over the other.
Try experimenting with these different loops. You can vary the “step” which determines how many columns / rows to skip after each iteration of the loop (i.e. every “ith” iteration). You can also vary the starting row / column and the ending row / column.
Exercise 4: Pointillism
Pointillism is more than drawing dots of a single color on a screen. To make our dots more exciting, we can get our color from a background image instead of setting it directly.
To start, choose a background with the “select background” button. This will add an image to our computer canvas that we will use to set our dot colors.
Next, lets use our repeat loops nested in one another to generate our grid of dots. This time instead of setting a color at the beginning, lets set the color to “current color at row and column” right before we draw each dot. This way, our dot will represent the color from the same point in our background image.
Finally, to reveal your Pointillist masterpiece, click the “clear background” button. If your dots overlap with one another, you may not need to do this last step since your background will be fully covered.
Try changing the steps, dot size, and other attributes to see what types of Pointillist art you can make!
Thank you to my beautiful fiancé Monica for proofreading and for everyone that has tried out Block Lessons with friends or students!
