I have finished week twelve of Andrew Glassner’s 2D Animation and Interaction Course. This week the subjects were shapes, angles, loops, variations on ‘if’, utilities and the mouse. The homework was to create a painting program. Painting has to be interpret very broadly. I have to use the mouse and the keyboard. Did not need to use map (), lerp () or dist(). Instead I used the modulo.
Because I would like to make a painting program in which you can paint in Hiroshi Kawano’s style I made it very simple. Kind of Ceefax style. I would like to add simple rectangles to Hiroshi Kwawano’s painting. To do so I had to paint rectangles with a size twenty times twenty pixels. Also I would like to change color during the painting. And I would like to clear everything when I am finished or when I am not pleased with the result.
That seems simple. And it is. To paint in rectangles I used the modulo. It calculates the reminder when one number is divided by another. As the Processing 2 reference page states: when 52.1 is divided by 10, the divisor (10) goes into the dividend (52.1) five times (5 * 10 == 50), and there is a remainder of 2.1 (52.1 – 50 == 2.1). Thus, 52.1 % 10 produces 2.1.’ An ideal function to calculate multiples of 20 pixels.
I created a global variable which holds the number twenty. Used mouseDragged to paint. The outcome of the mouseposition modulo rectanglesize are subtracted from the actual mouseposition. This gives the location of the rectangle in multiple positions of twenty. Sounds very complicated in text but it is easier to follow in the actual code. To choose the five painting colors (red, black, orange blue and white) I just stored them under the keys one to five. Made black the default paint color. To clear the image I used the zero key. This paints the background-image over the entire painting which results in clearing the screen to its original state.
And here is the paint program including the code.