ArtGenerative ArtPen Plotting

How to Make Generative Art Bookmarks With p5.js and the Silhouette Cameo as a Pen Plotter Using Multiple Pens (Code & Video Included)

Generative Art Bookmarks p5.js Silhouette Cameo Pen Plot

Note: You can think about this post as having two parts – the p5.js code part and the pen plotting part. This post covers the code to create the bookmarks and the video (linked at the bottom) shows the physical process for exporting the images and plotting them. Let’s get started . . .

I have a little bit of a book problem.  I’ve been an avid reader for years and I’m frequently reading multiple things at one time.  On top of that, I don’t do digital books.  I love the feel and look of an actual physical book and am unreasonably unwilling to give up that experience even if there’s great technology to help me out.  

One of the challenges of reading multiple books at one time is that you need bookmarks.  Lots of them.  I’ve used scraps of paper, index cards, tissues, and the cover on hardbacks, but a good bookmark is really the best solution.

In this post we’re going to make some Generative Art bookmarks using p5.js and pen plot them using the Cameo by Silhouette.  I like this project because it’s relatively fast, looks great, and is a fun introduction to generative art and pen plotting.

Onward . . . 

To start, we need some type of design for the bookmarks.  I’ve made some bookmarks in the past using simple random lines and really liked the output.  Today, we’re going to make some additional random line bookmarks and add in a few colors as well.

Note:  The code for this project leverages p5.js and the SVG export library for p5.js.  In order to plot lines using the Cameo, we need the output to come out as a path.  An SVG path file is the best way to accomplish that.

Yes, another note:  There are various pen plotters that are widely available.  I use a Cameo by Silhouette to pen plot because I have one on hand.  It does a great job of pen plotting and also cuts material to make stencils.  My only complaint from a pen plotting standpoint is that the pen holder could be improved to better hold and accommodate a range of pen sizes.

Getting Started

The first part of the project involves choosing a bookmark size.  I have some Strathmore 5×7” Printmaking paper that I’m planning to use.  For bookmarks, we just want some type of heavy weight paper that will hold up to wear and absorb the pen well.  The Strathmore paper is 280 g/m and smooth.

I’d like to get three bookmarks out of a single sheet and I’m going to target a 1.5″ width to give myself a little padding.

Strathmore Printmaking paper for pen plotting generative art bookmarks.
Strathmore Printmaking paper for the generative art bookmarks and a few pens to try.

We’ll also use a couple of different pens to see how different sizes and brands behave.  Specifically, we use a Sharpie, Faber Castell Pitt Artist Pen, and Micron Pens.

Now that we know the size and have some pens in mind, we can write the p5.js code to “draw” the bookmarks.

p5.js Code

For those of you who aren’t familiar with generative art, p5.js is a JavaScript implementation of  Processing.  Check out this link if you want to learn more.  Ultimately, what you use to draw the image matters less than the output itself. To draw lines with the Cameo we need to export paths rather than an image, which doesn’t have paths.

The paper I’m using is 5×7” and I decided that I’d try to squeeze three bookmarks out of a piece.  If each bookmark is 1.5×7” then I can roughly pad the edges with ⅛”.  Though some trial and error I figured out that a canvas size of 117×525 pixels gives me the approximate output size I want. I’m sure I could do the math to figure out the pixel density, but I’ll just defer to brute force for now.

That means our script starts with something like the block below. Note that we’re passing an additional argument to the createCanvas function. That ensures that our canvas will draw SVG. You’ll need this as well as p5.js for it to work correctly.

// generative art bookmarks
const width = 117;
const height = 525;

function setup() {
  createCanvas(width, height, SVG);
  noLoop();
  randomSeed(3);  // we'll come back to this later
}

Drawing the Lines

The next part of the image is drawing the vertical lines. I want the lines to begin at similar (but not the same) levels in the upper part of the bookmark and end different places in the lower part. What that means is that we need to create two ranges for the x, y coordinates. The upper range will be narrower and the lower range will be wider.

Here’s a look at the variables we want:

// generativeBookmarks

// canvas sizing
const width = 117;
const height = 525;

// offsets for choosing the y values
const y_offset_upper = 10;
const y_offset_lower = 25;
const y_offset_window = 35;

// step variable for spacing lines
let step;

// offset for the right and left side of the canvas
let x_offset = 3;

function setup() {
  createCanvas(width, height, SVG);
  noLoop();
  //randomSeed(3);
}

In p5.js the line function connects two sets of x, y coordinates. For each line the horizontal placement or x value should remain fixed and we want the vertical, y value, to be randomly chosen. That means we’ll take a given x value and then choose two y values. The upper y value will be chosen in the narrower part of the range and the lower value will be chosen in the wide range. We’ll use the random function to select the values.

We’ll draw lines starting at the left side of the canvas and move right until we get close to the edge. To make the bookmarks look less structured we’ll use the random function to space the lines horizontally.

In terms of code we want to start on the left side of the canvas, choose some points, draw a line, move to the right, and repeat until we get to the right side of the canvas.

The code block below is the complete script:

// generativeBookmarks

// canvas sizing
const width = 117;
const height = 525;

// offsets for choosing the y values
const y_offset_upper = 10;
const y_offset_lower = 25;
const y_offset_window = 35;

// step variable for spacing lines
let step;

// offset for the right and left side of the canvas
let x_offset = 3;

function setup() {
  createCanvas(width, height, SVG);
  noLoop();
  //randomSeed(3);
}

function draw() {
  stroke(0); // make the lines black so they're easy to see
  strokeWeight(2);  // make them a little heavier

  // start just to the right of the canvas edge, draw lines, move to the right
  for (let x = x_offset; x < width-x_offset; x+= step) {

    // choose the upper y value
    let y1 = random(y_offset_upper, y_offset_window);

    //choose the lower y value
    let y2 = random(height/2, height-y_offset_lower);

    // draw the line
    line(x, y1, x, y2);

    // choose a random step value for horizontal spacing
    step = random(2,8);
  }

  // uncomment this to save the image
  //save('superSweetBookmarks.svg')
}

Storing Variations

One of the great things about using a machine to generate the bookmark is that it can generate an infinite number of designs.  However, the designs are all driven by the random function and the variation will be gone as soon as you refresh the page or reload the script.

Using a random seed is a simple way to save variations you like. The seed feeds the random function and enables you to recreate and store variations.

I fed the random seed a few values and came up with three variations.

Check out the video below to walk through the image export, plot staging, and pen plotting using the Silhouette Cameo with three different pens.

0 0 vote
Article Rating

Leave a Reply

0 Comments
Inline Feedbacks
View all comments