A starter project for net art websites and installations. Designed to speed up workflow without forcing you to use any frameworks. Made with NodeJS and Gulp task runner.
- State management (the core)
- MIDI control for VJ
- MIDI input/output to Ableton (or any DAW/instrument)
- Autopilot functions
- Bake to URL
- Keyboard and mouse controls
- Projection mapping
- LiveReload so all changes immediately appear in the browser
- CSS preprocessing using Sass
- Sass error notifications
- CSS autoprefixer to help with browser support
- Simple automatic local server instance
- Meta tags to make the project look nice on social media
The documentation is meant for beginner level technologists. If anything is unclear you can file an issue and I'll add more information.
Follow these steps to get the project up and running:
- Install nodeJS. https://nodejs.org/en/download/
- Clone or download this project.
- Open your terminal or command line, and navigate to this project folder. If you have never used the command line, you can get familiar with it:
- Mac https://computers.tutsplus.com/tutorials/navigating-the-terminal-a-gentle-introduction--mac-3855
- Windows https://www.computerhope.com/issues/chusedos.htm
- When you are in the folder run the command:
npm install. This installs all the project dependencies.
- When that finishes, you can run the command:
gulp. This is the task runner that watches the files and compiles the website as you build it.
- The compiled site appears in the
distfolder, and you will build the site in the
srcfolder. There are already some files in the
html: All html files in this folder get copied to the the
img: All images in this folder get copied to
js: Any JS you write goes in the
appfolder. Any JS you need as a dependecy for your project (Like jQuery, ThreeJS etc) goes in the
vendorfolder. All the scripts get combined into one big JS file, with the vendor scripts before the app scripts.
scss: Write your css in
style.scss, and you can also create and import other css/scss files.
reset.cssis included to clear out all the default styles from different browsers so you can start from scratch.
Once the site is done, make sure to update the content of the meta Open Graph tags and replace img/poster.png with your own image so your site looks nice on social media.
How Does This Work?
All the compiling, processing and watching is done using Gulp, with tasks defined in gulpfile.js. Gulp is invoked via the command line, and when you run it you'll see a log of every task that executes.