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

Class Exercises

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.