Getting familiar with our tools; Drawing lines; Randomness;

Installing node.js

Head over to https://nodejs.org/en/, download the installer for Node 16.13.0 LTS for your platform (Windows, MacOS, Linux, etc.) and run it on your computer. If you had a terminal open, close the terminal and re-open it.

In order to check if node installed properly, run node -v in your terminal. You should see one line as the output of the command, specifying the version of node your computer has. Make sure npm -v works as well (npm is node's package manager, it's what we use to install external dependencies for our projects.) This will have a different version number than node.

Installing the canvas-sketch library

Create a folder on your computer for this class's code exercises, and use the terminal to navigate to that folder. My personal folder structure is .../work/PointsLinesAndSystems/sketches/, but you can use whatever works for you!.

Once you're in there, run npm install canvas-sketch-cli -g. This will perform a "global" installation of the canvas-sketch command line tools, as well as the library itself.

Working with the canvas-sketch library

First of all, what is this library?

According to Matt Deslauries, its author, canvas-sketch is a loose collection of tools, modules and resources for creating generative art in JavaScript and the browser. It belongs to the same family of libraries as p5.js, pixi.js, Processing or openFrameworks – toolkits meant to facilitate creative coding. I like it because it provides an easy way to work with the constraints we're using in this class, because it allows for easily saving your compositions as image files, because if offers easy control over the composition's properties (things such as dimension, units of measurement, dpi; it was built with printing in mind;) and because it has a handful of pre-made templates for different types of needs.

Getting started

To create a new composition using the penplot template, open a terminal, navigate to your class folder and run:

canvas-sketch 1.js --new --template=penplot

This will start a development server with your composition, meaning that you are able to access your sketch in the browser, by navigating to localhost:9966. You will see the following default composition:

If you press Cmd+S (Ctrl+S on Windows), the composition will download to your downloads folder, in both .svg and .png formats.