Exercise: Drawing Studio

Search for Inspiration

Transcript

You've learned to draw things to your canvas, change color using your keyboard and mouse and to add images to Processing. Now use these skills to create your own drawing studio. Add an image as a background and draw something on top of it. Make it possible to change colors interactively and maybe use another image as your cursor. If you are totally fed up with drawing programs you can continue developing your previous space exploration project and just add some interactive elements to that. Maybe moving a planet on the screen with your keyboard or mouse or changing the background color by pressing enter? Before starting search for some inspiration in Open Processing!
Do this

Search for an interesting drawing-project in Open Processing

You can search with the keyword “drawing”, “interaction” and “game” but you can also try out other search terms!

Educator notes

Students have experimented with different kinds of drawing programs in this chapter. Advise them to use their earlier code in this exercise - it’s not wise to build the same thing over and over again!

The Drawing Studio

The Drawing Studio - Example Projects

Below there's three versions of a drawing studio. The background image is the same: Antoine Watteau's Head of a man (1718), downloaded from Metropolitan Museum of Art Open Gallery.

<

Subtle Additions
The color of the stroke is partly transparent black and the line is thin.

Covered with Mist
The color of the stroke is partly transparent grey and the line is very thick.

Dressing Up!
You can choose colors with the buttons. When you press any key, the program puts a heart-image to the location of the mouse

If you don’t want to build a drawing studio, you can make a game or develop your previous space-exploration project further! If you continue with the space exploration project, spice it up with some interactive elements from this chapter.

Exercise instructions

Advised maximum time for the project is 30 minutes.

Make your own drawing studio.

  • Build your project on the setup- and draw -methods
  • Add an image to the background of your project.
  • Resize the image so that it’s the same size as the canvas.
  • The program draws a line, a shape or a custom-image to your mouse-location.
  • When you press a key on your keyboard, something happens
  • Make comments on your code with “//” -marks and explanations

EXTRA

  • If you feel like it, you can also add your project to Open Processing.

Educator notes

Activity:: Onthis page, there's three examples of a drawing studio using Antoine Watteau's Head of a Man (1718) as the background. Give the students a task to find an interesting painting from the Metropolitan Museum of Art Collection. After, students should use the painting as the background of their drawing studio. It's possible to add many kinds of digital layers to classical paintings. This can engage students with art they wouldn't otherwise see and help them to realize the potential (and fun!) of combining classical painting with digital art making. 

A lot of the paintings in the MET Collection have been published under Public Domain license so it's totally free to use them. It can be even more interesting to utilize paintings from a collection at your local art museum!