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.
Because limits are AWESOME! Like 4k demos (or 1k) setting limits almost always leads to more creativity.
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
vsNative
vertexshaderart.com will automatically set the
gl.lineWidth
towindow.devicePixelRatio
if you pickCSS
. Similarly it will multiplygl_PointSize
by devicePixelRatio if set toCSS
. 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 pickCSS
. Similarly if you want points to be the same size on HD-DPI and non HD-DPI pickCSS
.
-
-
Use
vertexCount
were appropriateYou 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
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.
Pull requests or suggestions welcome. Please open an issue.
-
Install node.js
-
Install Grunt
type
sudo npm -g install grunt
. Nosudo
on windows -
Install http-server
type
sudo npm -g install http-server
. Nosudo
on windows -
Install Meteor
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 issrc/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 doingsomeElement.addEventListener(event, func)
you instead doon(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 copysettings.json
tosettings-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.comNote: 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 GITYou can use that too add your ids and password/secrets for google/twitter/github account testing. See DEPLOY.md.
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 inserver/vertexshaderart/client/vsart.html
note: a comment in the form of
<!--template=name-->
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
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 inlocal=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.
See DEPLOY.md
See CHANGELIST.md.