Excercises for the course Creative Coding: Making Visuals with JavaScript
Separate sketch sources are under the folder /sketches following the naming convention sketch-XX.js
.
Screenshots, or mp4/gif outputs are available under /sketches/output/ in the subfolders XX matching the relevant sketch js file.
Install WSL with your preferred Linux distribution. In this example we are running Ubuntu 22.04 LTS. Make sure that CPU virtualization is enabled before install.
Once installed, open a WSL console, and follow the Linux guide below.
Install the required packages:
$ sudo apt update && sudo apt install -y nodejs npm
$ # if you want to save video output:
$ # sudo apt install -y ffmpeg
Clone this repository on your local, and navigate to the sketches subfolder. Once there, issue the following to install all the nodejs dependencies:
$ npm install
To run e.g. sketch-02 with live reload in your browser, execute the following command and open the link in the output:
$ canvas-sketch sketches/sketch-02.js --output=sketches/output/02
[0002] info Server running at http://172.25.255.249:9966/ (connect)
[0002] info LiveReload running
[0003] 957ms 365KB (browserify)
[0013] 15ms 0B GET 200 / (generated)
...
To save the plotted image, hit ctrl+s
in your browser while the above command is running, and you will fing the screenshot under the folder specifiedd in the --output
parameter.