Week 5 - Vector Graphics

Notes on Vector Graphics

Vector graphics represent images as a collection of styled shapes and paths. Vector graphics are well suited to highly graphic applications such as type, logos, and some illustration styles. They are very poorly suited for photographic images.

Procedurely generating vector data instead of rasterized data allow you to further work with the data in a program like Adobe Illustrator. Post-processing your program output in Illustrator can make some types of designs much easier to create than working working purely with code or manually.

Note: This week’s homework includes a special requirement: create a large-scale print or laser-cut at least one of your sketches.

Using p5.svg.js

The p5.svg.js by Zeno Zeng library extends p5 by making it draw to an SVG element instead of a canvas element. When you call save() the SVG data will be downloaded as an .svg file which can be opened and edited in Adobe Illustrator. The Github README.md file conains links to a short tutorial and examples.

I have created a basic sketch as template. Sketch Basic SVG


Adobe Extend Script

Setting up ExtendScript

ExtendScript Hello World

ExtendScript Documentation


Atom JSX Language Package Adds syntax coloring for .jsx files. Also you can use set Edit > Select Grammar to tell atom your .jsx files are Javascript.


Create a daily sketch exploring the topics presented in class. Post an image of your results each day to the class sketch blog.

An extra requirement this week: Create a large-scale print or laser-cut of at least one of your sketches this week.