So far we’ve learned a bit about the Arduino microcontroller and a bit about the Processing programming language, which runs on laptops or desktop computers. The interactive exhibits that we design often need both a small ’embedded’ computer (like an Arduino and associated sensors, LEDs, etc.), a full-size computer like a laptop, some kind of connection between the two (either wired or wireless), and other components.
One of our Processing examples last week involved drawing a little stick figure with lines, circles and other shapes. Technically, these shapes are known as vector representations, pictures that are created by specifying the end points and other parameters of interest for lines and curves. One way to create vector representations is by writing programs to specify them, as you did last week. Another (usually easier) way is to use a drawing or illustration program. The best known vector-based drawing program is Adobe’s commercial software Illustrator. In class we are going to use an open source program called Inkscape instead. Being able to express yourself by making pictures with a drawing program is a very useful skill for making sketches, storyboards, presentations, exhibit mockups, and the like. Later you will also learn how to import the vector-based graphics that you create into other programs, and even to manipulate them using programs that you write in Processing.
Background Preparation and Reading
- Install Inkscape on your computer
- Read “Introducing Vector Graphics and Inkscape” quickly, trying to get the main points
- Play with the Bezier Curve Demo for a few minutes to get a feel for how such curves are specified by control points
- Feel free to monkey around a bit with the Inkscape software if you have some time
Class Exercises
- Work through the Inkscape Basic Tutorial
- Work through the Inkscape Advanced Tutorial
- Look at the list of 10 of the Best Inkscape Tutorials and decide which one you would most like to work through
Other Resources
- Mastering Illustration Programs
- Vector Tuts+ a great collection of tutorials for doing vector art
- SVG Tutorial from W3 Schools. Inkscape reads and writes an XML format called SVG (Scalable Vector Graphics). This means you can actually read and edit the code that underlies a given image. In Inkscape, use Edit -> XML Editor to see and manipulate the contents of the SVG file as code.
William J Turkel 