installation.md

^{📕 workshop-generative-art → Installation Guide}

---

Installation Guide

This guide will run you through installing all the tools and prerequisites required for the workshop.

Contents

• Code Editor

• Browser

• Command-Line

• Node.js & npm

• canvas-sketch

• canvas-sketch-util

• ThreeJS

• Other Dependencies

Code Editor

If you don't have a JavaScript code editor, you can download VSCode from its website.

Browser

I recommend Chrome for development, as it has great support for canvas rendering and exporting high-resolution images.

All browsers come built-in with the <canvas> API, so you don't need to install that yourself.

Command-Line

In macOS, you can go to Applications > Utilities > Terminal.app to run Terminal and enter commands.

In Windows, you can click Start and search for cmd.exe, or download cmder.net for a more powerful experience.

If you are new to the command-line, you can see some Tips for using the Command-Line.

Node.js & npm

You can download and install the latest version of Node.js (version 8.x or higher) from its website. This will come included with a recent version of npm (5.x or higher).

Once installed, you should be able to run node --version and npm --version from your command-line.

canvas-sketch

We will be using canvas-sketch and its command-line interface (CLI) during the workshop.

To install the CLI with npm, use the --global or -g flag like so:

npm install canvas-sketch-cli --global

💡 Note the -cli suffix in the name; this tells npm to install the CLI tool, not the code library.

canvas-sketch-util

As the workshop progresses, we will start to depend on third-party utilities for math, random number generation, and other features. The canvas-sketch-util library includes many of these features, and you can install it with npm.

Run the following from your project folder:

npm install canvas-sketch-util

Now, your code can require it like so:

const { lerp } = require('canvas-sketch-util/math');
const random = require('canvas-sketch-util/random');

ThreeJS

In the second part of the workshop, we will introduce ThreeJS, a 3D engine on top of WebGL and GLSL.

To install it, run the following from your project folder:

npm install three

Now, you can require it like so:

const THREE = require('three');

Other Dependencies

If you find a third-praty module on npm that you like, you can install and require it in the same way as you did canvas-sketch-util and three.

^{← Back to Documentation}