the below demo reel provided the visuals for shani aviram's set at the 2017 night of 1,000 kates which took place on aug. 12, 2017 in philadelphia. shani played music and also interacted with the demos live.

(photo by kenzi crash)

demos with source code

full demo reel

in the above demo reel, you can hop to individual demos by hitting the below keys:

n: nightmare cats (demo) (code)

k: kate shape (demo) (code)

g: kate group (demo) (code)

a: kate hands (demo) (code)

e: emoji (demo) (code)

h: hello cat (demo) (code)

y: yellow particles (demo) (code)

u: unicorns (demo) (code)

c: computer (demo) (code)

i: iphone (demo) (code)

s: hate to lose (demo) (code)

v: hate to leave (demo) (code)

m: catmugs (demo) (code)

b: ball of catmugs (demo) (code)

d: dialog.exe (note: this one was made by substack) (demo) (code)

run code yourself

to run some of these demos yourself, you'll need node.js and npm.

once you have node.js & npm installed, fork this repository.

go to your forked version on github and via command line git clone the repository.

on your computer navigate to the directory that the repo was cloned into.

once there, do npm install to install the required dependencies.

once you've installed, you will have access to a number of scripts you can run from the command line:

npm run start: run npm run start followed by the name of the file you want to run. like this: npm run start emoji.js. if everything works correctly, you should see something like [0001] info Server running at http://192.168.93.17:9966/ (connect). open your browser and go to this url localhost:9966. you should see the demo running. to stop this demo and start running another one, go back to the command line and do CTRL + c to stop the server.

npm run makehtml: run npm run makehtml followed by two file names. the first should be the input file (eg emoji.js) and the second should be the output file (eg emoji.html). here's an example of the entire command: npm run makehtml emoji.js emoji.html. this will generate an html file from one of the demos.

build the demo reel html file

the demo reel is made up of 11 different demo programs (the various .js files) that get put one after the other into a single html file. that html file will include all the assets (images) used in the demos. it will also include javascript that allows you to switch between demos by hitting certain keys on the keyboard (as noted above).

there's a shell program called cmd.sh that takes all the files you give it, runs them through the regl.js program (which is where the keys that go with each demo get assigned, among other things), and then outputs an html file that you can open in a browser like any other html file.

to use cmd.sh, once you've cloned and installed everything (as described above), navigate via command line to the directory where you've cloned everything into and run chmod +x cmd.sh (this command lets you run cmd.sh as an executable, like a .exe file on windows).

once you've done the chmod command, run this command:

./cmd.sh nightmarecats.js dialog/main.js cathello2.js catmugball.js catmugwoo.js hatetoleave.js hatetolose.js iphone.js emoji.js computer.js kbhands.js k116.js kate.js unicornwoo.js yellowparticlevortex.js | indexhtmlify > kate.html

this command will run cmd.sh with all the files named after it then pack the whole thing into kate.html. if you like, you can change kate.html to any name you want.

---

i hope you find this useful and if you have any questions, feel free to ask on twitter: @marinakukso.

all demos were created with regl.