vertexshaderart

See it live at vertexshaderart.com

Cleary inspired by glslsandbox.com this one only lets you edit a vertex shader. The vertex shaders main input is just a vertexId that counts vertices.

Why?

Because limits are AWESOME! Like 4k demos (or 1k) setting limits almost always leads to more creativity.

Tips

A few tips when making art

Consider making things as resolution independent as possible.
- gl_PointSize
  
  You might have a 2000x1000 desktop but someone might be viewing on a phone. If you set gl_PointSize = 50.0 that might be perfect on your desktop but too big for a phone.
  
  You could do something like this at the bottom of your shader
```
#define RESOLUTION_OF_MY_DISPLAY 2000.0
gl_PointSize *= resolution.x / RESOLUTION_OF_MY_DISPLAY;
```
- CSS vs Native
  
  vertexshaderart.com will automatically set the gl.lineWidth to window.devicePixelRatio if you pick CSS. Similarly it will multiply gl_PointSize by devicePixelRatio if set to CSS. It's up to you whether or not your art would be better it multiplied by devicePixelRatio.
  
  For example if you want the thinnest possible lines you'd pick Native. If on the other hand you want the lines to be the same thickness on a 4000x2000 HD-DPI display vs a 2000x1000 non HD-DPI display then pick CSS. Similarly if you want points to be the same size on HD-DPI and non HD-DPI pick CSS.

Use vertexCount were appropriate

You can certainly set a specific count and design your art around that but, if you'd like to it can be nice to try to make it self adjust.

Example:

#define POINTS_PER_CUBE 24.
float cubeVertexId = mod(vertexId, POINTS_PER_CUBE);  // counts vertices in a cube
float cubeId = floor(vertexCount / POINTS_PER_CUBE);  // counts cubes

Embedding

You can embed a piece on your blog or whatever by putting the url in an iframe. Example

<iframe width="700" height="400" src="http://www.vertexshaderart.com/art/uqWtxuQpEkfxqWXCK" frameborder="0" allowfullscreen></iframe>

The UI will be removed and there will put a ▶ icon to start it. This is because you probably don't want them to run automatically since they might be heavy.

If you really do want it to play automatically add ?autoplay=true to the URL.

Contributing

Pull requests or suggestions welcome. Please open an issue.

Building

Prerequsites

Install node.js
Install Grunt

type sudo npm -g install grunt. No sudo on windows
Install http-server

type sudo npm -g install http-server. No sudo on windows
Install Meteor

Visualizer vs Website

The site is split into 2 parts.

A stand alone editor/visualizer

To run this cd to the folder you cloned this repo in and type
```
http-server
```
Now open a browser to http://localhost:8080/src/.

You should see the shader editor with a shader running.

The source for this editor is in the src folder. The main entry point is src/js/main.js

The code is a little funky becaue this was created first and then fitted into Meteor. Because Meteor replaces the entire DOM on the fly, when running in Meteor the code inits once, keeps the canvas and editor DOM elements around and inserts and removes them when required. Any variable that starts with s. is something that survives across pages when on the website.

There's also a special on function to attach events to elements. Instead of doing someElement.addEventListener(event, func) you instead do on(someElement, event, func). This allows the code track and remove all event listeners when Meteor destroys the DOM because otherwise there would be a bunch of handlers still attached on those elements.

Note: The visualizer is set to pause when its window does not have the focus. That includes if the URL bar or the devtools have the focus. This is to save battery when I'm doing dev but it can be a problem for debugging. depending on what code you're working on. It checks if it's running on 'localhost' to enable this feature. You can override this by adding ?pauseOnBlur=false to the URL.
A Meteor based website

The meteor based website exists at server/vertexshaderart. To run it first copy settings.json to settings-dev.json
```
cd server/vertexshaderart
cp settings.json settings-dev.json
```
Then from the server/vertershaderart folder run `start.
```
./start
```
This will launch meteor. Once it's running you can open a browser to http://localhost:3000 and you should see effectively the same site as http://www.vertexshaderart.com

Note: The site run this way has the page size, the number of thumbnails to show per page, set to 3. This is so it's easy to test the pagination code without needing to add hundreds of entries. You can change that in server/vertexshaderart/settings-dev.json

NOTE: DO NOT COMMIT settings-dev.json TO GIT

You can use that too add your ids and password/secrets for google/twitter/github account testing. See DEPLOY.md.

Updating the visualizer into the meteor website.

To update the visiualizer/editor into the meteor website cd to the root folder of this repo and type grunt.

That will

Compile all the JavaScript used in the visualizer app into 1 file and copy it to server/vertexshaderart/client/vsart.js
Convert src/index.html into meteor templates and save them in server/vertexshaderart/client/vsart.html

note: a comment in the form of  will be converted to {{> name}}. This lets you insert other templates into the HTML from the visualizer.
Concat all the css used by the visualizer and save in server/vertexshaderart/client/vsart.css
Extract all the shaders from HTML into JavaScript and save in server/vertexshaderart/client/vsshaders.js

Options for the visualizer/editor

The standalone visualizer/editor has a few options you can pass in on the URL. Options are passed in by adding a ? and then key=value&key=value. (eg: http://localhost:8080/src/?settings=audio2&local=true)

local=true

This makes it use local music instead of going through soundcloud.
settings=<name>

Where name is one of audio, audio2, spiro, default.

There are 4 built in visualiations. In the code search for s.sets
showHistory=true

This fills the screen with the texture that contains the music history.
showFloatHistory=true

This fills the screen with the texture that contains the float music history.
showTouchHistory=true

This fills the screen with the texture that contains the touch data history.
long=true

Along with local=true as in local=true&long=true provides a really long name and title for the music to test that layout doesn't get broken.
pauseOnBlur=false

See above.
pause=true

A more extreme version of pauseOnBlur'. It's effectively the same as pauseOnBlur=true` and clicking the stop button at the top so that rendering is not running. I use this when I want to test UI layout on battery. I can muck with the CSS etc and not having it rendering the heavy graphics.
autoplay=true

If embedded in an iframe the defaul is not to run since they might be heavy and might have music.

Deploying

See DEPLOY.md

Changelist

See CHANGELIST.md.

License

MIT

8BitRick / vertexshaderart