JavaScript + Art Supplies

I recently started using my code to create real, physical art. Before this week, I didn’t think I’d ever be able to actually say that. I’ve been writing generative art pieces with JavaScript for a year or so now, but it has always been limited to the browser — until now.

Image for post
Image for post
Pen plot in silver, gold, & white on black paper

Generative Art

I won’t dive too far into what “generative art” is or isn’t. At a high level, an artwork being “generative” means it was created with a system that was responsible for making decisions that an artist would typically make themselves. This is obviously really vague. That’s part of the fun of working with generative art! There’s so much room for interpretation, and as the artist, it’s up to you to decide what your system should be responsible for, and just how it should even come to the conclusions it does.

If you’re interested in learning more about these systems, or just want to see some cool examples of what forms generative art can take, check out these resources:

Ok, but how? 👀

Image for post
Image for post
Pen plotted frequency modulated sine wave

AxiDraw

The AxiDraw is a machine 🤖produced by Evil Mad Scientist (they’re in Sunnyvale!) that can move a tool along X & Y axes, and lift & lower said tool. If you attach a pen to the AxiDraw, you can render a physical artwork by giving the machine the right instructions!

canvas-sketch

Normally when I work on generative work, I use a tool called p5.js. Since our rendering “target” here is a pen, we need a different toolset and frame of mind than we would use for creating art in the browser.

Enter canvas-sketch, a tool by Matt DesLauriers . With canvas-sketch, we get a set of utilities that simplify a lot of things you frequently have to account for with generative code (scaling, hot-reloading, unit conversion, math, geometry, randomness, the list goes on…). As the artist here, you’re still ultimately responsible for composing a piece, but now you don’t have to worry about scaling to your paper size, writing SVG strings, or how Simplex noise works under the hood 😅.

Note: You could absolutely do this with p5.js, vanilla JS, or any other language if you wanted to! I’ve chosen to work with canvas-sketch myself becuase I like the utilities it provides, and I’m already familiar with writing generative code in JS. Use whatever you enjoy working with!

Concept & code

One of the toughest (but also most rewarding) pieces of writing generative code is coming up with what you want to piece to even be. Are you going to cross reference multiple randomly sourced images and output a composite? Generate a varied bunch of little topographies? Periodic motion from an isometric point of view?

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Examples of generative code artworks

Once you have an idea, how do you take it from there to a uniquely rendered piece? Usually, the answer is behind a handful of doors. Some of them include:

  • Math! Geometry, trigonometry, and all that other stuff you thought you wouldn’t use again
  • Variation: Randomness, noise (Perlin, Simplex, etc), time, and other sources for “making it change”
  • “Traditional” components of artwork! Color, texture, lines, shapes, transparency

Often, when I’m working on a generative piece, I’ll write it fairly “static”. This can be helpful during development, especially for making sure it “looks right” to you. My biggest piece of advice for this workflow is to take every “magic number” you add, and hoist them all up to constants somewhere together. That way, while you develop, you can tweak the values in these constants to make quick and easy adjustments, rather than having to hunt down and modify values throughout your code. The second benefit to this development pattern is that once the time comes to make it “generative”, you have a clear set of values that can be modulated for a quick impact!

InkScape & actually drawing

Image for post
Image for post
Pen plot of varied simplex noise in black, red, and blue

Once you’ve come up with an artwork that you’re ready to bring into the real world, it’s just a matter of exporting & tidying up! If I know that I want to use multiple colors in my plot, I’ll export each color layer as its own SVG, that way I can easily send the layers to my AxiDraw one at a time and switch pens in-between.

Tip: When saving PNG layers, add a lengthless line to the same corner on each layer! That way you have a reference for aligning the layers to ensure they line up properly when drawing.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Examples of layers used in an AxiDraw plotting

After collecting all the SVG layers, we’ll import them into InkScape, a free vector drawing software. InkScape in particular is a great choice, because there are extensions for interfacing directly with the AxiDraw! Once the layers are all in and aligned, we set up the workspace (paper, pen, AxiDraw “home corner”, etc) and get started with drawing our first layer!

Moving between layers during the drawing process is as simple as toggling the visibility of each layer, swapping pens, and telling the AxiDraw to draw again.

Supplies

My partner has been getting really into a growing collection of art supplies, and I’ve been mostly passively participating in those shopping trips up until this week. Now every run to the arts store has me checking out new weights, sizes, & textures of paper; and every variation of pen and marker imaginable.

Some supplies I’ve had good luck with so far:

  • Copic Multiliners (black)
  • Micron fine liners (multiple colors!)
  • Uni-Ball Signo pens (white, silver, & gold have been awesome)
  • Legion Stonehenge Aqua Coldpress Black paper (this pairs really well with the Uni-Ball pens)
  • Strathmore Bristol 300 Series heavyweight paper (in 9" x 12" & 11" x 17")
Image for post
Image for post

Thanks for reading!

If you’re interested in checking out my plotter work, I’m posting updates regularly on Instagram @cef2010!

If you’d like to check out my other generative work (in the browser), you can find most of it at idontwatchfootball.com.

Can I have one?

Interested in commissioning or purchasing plotted generative artwork? Reach out on Instagram!

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store