Lady Gaga Midi

Todayโ€™s Groups

ASachi, Amber
BSanie, Dorothy, Jonathan
CTalia, Jennifer
DJane, Bateel, Dorothy
EEnayet, Gabriel, Kim

Homework Review Part 1

Homework Review Part 2

Sanie ๐Ÿ‘‰ Talia ๐Ÿ‘‰ Dorothy ๐Ÿ‘‰ Amber ๐Ÿ‘‰ Jennifer ๐Ÿ‘‰ Bateel ๐Ÿ‘‰ Jonathan ๐Ÿ‘‰ Danielle ๐Ÿ‘‰ Sachi ๐Ÿ‘‰ Enayet ๐Ÿ‘‰ Gabriel ๐Ÿ‘‰ Jane ๐Ÿ‘‰ Kim ๐Ÿ‘‰ Sanie

Find your name on the list above, choose a sketch created by the person after you on the list.

Todayโ€™s Learning Objectives


Keep Sketching!

Explore using Paper.js. Focus this week on creating vector-based images. I highly encourage you to use a hybrid workflow this week: starting with code in paper.js but finishing with manual work in Illustrator.

Required: Choose One

Option 1: Poster
Expand one of your sketches into a poster. Your poster must be printed in color at 24"x24" or greater. Your poster should promote a specific event (of your choosing) and must include a generative vector element and text describing the title, date, and location of the event.

Option 2: Lasercut
Expand one of your sketches into a laser cut artifact. This can be anything you like as along as it combines generative vector data and laser cutting/etching.

For either option, create two to three sketch posts. The first posts will show the vector data created by your code. The final post should show photo documentation of your final poster/laser-cut. Complete your posts before our next class, and bring your poster/laser-cut to class.

Vector vs Raster

Boolean Operations



Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface. โ€” About Paper.js

Object Oriented API

In contrast to p5.js, Paper.js provides an object oriented API. Shapes in p5 are drawn immediately onto the canvas and can not be manipulated once drawn. In Paper.js shapes are represented by Javascript objects arranged in a scene graph. You can modify properties of the shapes after you create them. You can even modify shapes after they are drawn to move them and create animation.


PaperScript is an extension of JavaScript with a few added features that make working with Paper.js less verbose. Specifically PaperScript offers operator overloading allowing you to use the mathematic operators (+ - * / %) on Paper.js Point and Size objects.

var pointA = new Point(5, 10);
var pointB = new Point(15, 20);
var sum;

// legal in PaperScript, not in Javascript
sum = pointA + pointB;

// legal in Javascript
sum = pointA.add(pointB);

Basic Example

var center = new Point(250, 250);

var path = new Path();
path.strokeColor = 'red';
path.moveTo(center + [-100, -100]);
path.lineTo(center + [100, 100]);

path = new Path(); // what happens if you revove this?
path.strokeColor = 'green'; // what happens if you remove this? what happens if you move it after moveTo/lineTo
path.moveTo(center + [100, -100]);
path.lineTo(center + [-100, 100]);

The code above is PaperScript, not JavaScript!

Boolean Example

var center = new Point(250, 250);

var rectangle1 = new Rectangle(new Point(100, 100), new Size(300, 300));
var path1 = new Path.Rectangle(rectangle1);
path1.strokeColor = 'red';

var rectangle2 = new Rectangle(new Point(0, 100), new Size(250, 300));
var path2 = new Path.Rectangle(rectangle2);
path2.strokeColor = 'green';

var comboPath = path1.subtract(path2); = {
    strokeColor: 'black',
    fillColor: '#ccf',
    strokeWidth: 4,
    dashArray: [10, 4],
    shadowColor: new Color(0, 0, 0, .5),
    shadowBlur: 12,
    shadowOffset: new Point(5, 5),

Exporting SVG

Mike Chambers: Saving an SVG File from Paper.js

function downloadAsSVG(fileName) {

   if(!fileName) {
       fileName = "output.svg"

   var url = "data:image/svg+xml;utf8," + encodeURIComponent(paper.project.exportSVG({asString:true}));

   var link = document.createElement("a"); = fileName;
   link.href = url;;

In-class Challenge

Explore using paper.js by modifying the scripts above. Work through the following challenges in order. Donโ€™t skip any.

Start by downloading the files for the examples above.

Paper.js Example Files

Modify the Basic Example

  1. Make both lines 8 pixels wide and blue.
  2. Set the .strokeCap of the lines to 'round'
  3. Make 50 lines with random start and end points using a for loop.
// pick random value from 0 to 500
var x = Math.random() * 500;
  1. Make the lines 5 pixels wide and green.
  2. Give each line a random width and color.

Modify the Boolean Example

  1. Make the green square 500 pixels wide.
  2. Change the function that creates comboPath from subtract to unite
  3. Change it again to intersect
  4. Change the green square to an ellipse.
  5. Remove the green and red shape, leaving only the compound shape. Tip: .remove()

Exporting SVG

  1. Add the downloadAsSVG() function to your code, export your drawing.
  2. Open your .svg in Adobe Illustrator, experiment with applying effects in Illustrator.

Challenging Challenges

  1. Starting from scratch, draw a very simple stick figure.
  2. Create a compound shape from three shapes using the boolean operations(unite, intersect, subtract, etc). Tip: Youโ€™ll need to do this in two steps.
  3. Create the drawing below.