├── .gitignore ├── .npmignore ├── LICENSE.md ├── README.md ├── back-in-out.glsl ├── back-in.glsl ├── back-out.glsl ├── bounce-in-out.glsl ├── bounce-in.glsl ├── bounce-out.glsl ├── circular-in-out.glsl ├── circular-in.glsl ├── circular-out.glsl ├── cubic-in-out.glsl ├── cubic-in.glsl ├── cubic-out.glsl ├── elastic-in-out.glsl ├── elastic-in.glsl ├── elastic-out.glsl ├── exponential-in-out.glsl ├── exponential-in.glsl ├── exponential-out.glsl ├── index.html ├── linear.glsl ├── package.json ├── quadratic-in-out.glsl ├── quadratic-in.glsl ├── quadratic-out.glsl ├── quartic-in-out.glsl ├── quartic-in.glsl ├── quartic-out.glsl ├── quintic-in-out.glsl ├── quintic-in.glsl ├── quintic-out.glsl ├── sine-in-out.glsl ├── sine-in.glsl ├── sine-out.glsl └── test └── visual ├── .gitignore ├── _base.glsl ├── frag.glsl ├── index.js └── make.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules 4 | bundle.js 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | test.* 2 | test 3 | .gitignore 4 | .DS_Store 5 | npm-debug.log 6 | bundle.js 7 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | This software is released under the MIT license: 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 7 | the Software, and to permit persons to whom the Software is furnished to do so, 8 | subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 15 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 16 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 17 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # glsl-easings [![stable](http://badges.github.io/stability-badges/dist/stable.svg)](http://github.com/badges/stability-badges) 2 | 3 | [Robert Penner's easing functions](http://www.robertpenner.com/easing/) in GLSL, 4 | available as a module for [glslify](http://github.com/chrisdickinson/glslify). 5 | 6 | I tried as best I could to make them speedy for GLSL, but I'm sure there are a 7 | lot of gaps to fill – pull requests welcome! 8 | 9 | ## Usage 10 | 11 | [![NPM](https://nodei.co/npm/glsl-easings.png)](https://nodei.co/npm/glsl-easings/) 12 | 13 | Each easing function has its own file which can be required from glslify: 14 | 15 | ``` glsl 16 | #pragma glslify: ease = require(glsl-easings/back-in-out) 17 | #pragma glslify: ease = require(glsl-easings/back-in) 18 | #pragma glslify: ease = require(glsl-easings/back-out) 19 | #pragma glslify: ease = require(glsl-easings/bounce-in-out) 20 | #pragma glslify: ease = require(glsl-easings/bounce-in) 21 | #pragma glslify: ease = require(glsl-easings/bounce-out) 22 | #pragma glslify: ease = require(glsl-easings/circular-in-out) 23 | #pragma glslify: ease = require(glsl-easings/circular-in) 24 | #pragma glslify: ease = require(glsl-easings/circular-out) 25 | #pragma glslify: ease = require(glsl-easings/cubic-in-out) 26 | #pragma glslify: ease = require(glsl-easings/cubic-in) 27 | #pragma glslify: ease = require(glsl-easings/cubic-out) 28 | #pragma glslify: ease = require(glsl-easings/elastic-in-out) 29 | #pragma glslify: ease = require(glsl-easings/elastic-in) 30 | #pragma glslify: ease = require(glsl-easings/elastic-out) 31 | #pragma glslify: ease = require(glsl-easings/exponential-in-out) 32 | #pragma glslify: ease = require(glsl-easings/exponential-in) 33 | #pragma glslify: ease = require(glsl-easings/exponential-out) 34 | #pragma glslify: ease = require(glsl-easings/linear) 35 | #pragma glslify: ease = require(glsl-easings/quadratic-in-out) 36 | #pragma glslify: ease = require(glsl-easings/quadratic-in) 37 | #pragma glslify: ease = require(glsl-easings/quadratic-out) 38 | #pragma glslify: ease = require(glsl-easings/quartic-in-out) 39 | #pragma glslify: ease = require(glsl-easings/quartic-in) 40 | #pragma glslify: ease = require(glsl-easings/quartic-out) 41 | #pragma glslify: ease = require(glsl-easings/quintic-in-out) 42 | #pragma glslify: ease = require(glsl-easings/quintic-in) 43 | #pragma glslify: ease = require(glsl-easings/quintic-out) 44 | #pragma glslify: ease = require(glsl-easings/sine-in-out) 45 | #pragma glslify: ease = require(glsl-easings/sine-in) 46 | #pragma glslify: ease = require(glsl-easings/sine-out) 47 | ``` 48 | 49 | And each function has the following signature: 50 | 51 | ``` glsl 52 | float ease(float t) 53 | ``` 54 | 55 | Where `t` is a value between 0 and 1, returning a new float between 0 and 1. 56 | 57 | ## License 58 | 59 | MIT. See [LICENSE.md](http://github.com/hughsk/glsl-easings/blob/master/LICENSE.md) for details. 60 | -------------------------------------------------------------------------------- /back-in-out.glsl: -------------------------------------------------------------------------------- 1 | #ifndef PI 2 | #define PI 3.141592653589793 3 | #endif 4 | 5 | float backInOut(float t) { 6 | float f = t < 0.5 7 | ? 2.0 * t 8 | : 1.0 - (2.0 * t - 1.0); 9 | 10 | float g = pow(f, 3.0) - f * sin(f * PI); 11 | 12 | return t < 0.5 13 | ? 0.5 * g 14 | : 0.5 * (1.0 - g) + 0.5; 15 | } 16 | 17 | #pragma glslify: export(backInOut) 18 | -------------------------------------------------------------------------------- /back-in.glsl: -------------------------------------------------------------------------------- 1 | #ifndef PI 2 | #define PI 3.141592653589793 3 | #endif 4 | 5 | float backIn(float t) { 6 | return pow(t, 3.0) - t * sin(t * PI); 7 | } 8 | 9 | #pragma glslify: export(backIn) 10 | -------------------------------------------------------------------------------- /back-out.glsl: -------------------------------------------------------------------------------- 1 | #ifndef PI 2 | #define PI 3.141592653589793 3 | #endif 4 | 5 | float backOut(float t) { 6 | float f = 1.0 - t; 7 | return 1.0 - (pow(f, 3.0) - f * sin(f * PI)); 8 | } 9 | 10 | #pragma glslify: export(backOut) 11 | -------------------------------------------------------------------------------- /bounce-in-out.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify: bounceOut = require(./bounce-out) 2 | 3 | float bounceInOut(float t) { 4 | return t < 0.5 5 | ? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0)) 6 | : 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5; 7 | } 8 | 9 | 10 | 11 | #pragma glslify: export(bounceInOut) 12 | -------------------------------------------------------------------------------- /bounce-in.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify: bounceOut = require(./bounce-out) 2 | 3 | float bounceIn(float t) { 4 | return 1.0 - bounceOut(1.0 - t); 5 | } 6 | 7 | #pragma glslify: export(bounceIn) 8 | -------------------------------------------------------------------------------- /bounce-out.glsl: -------------------------------------------------------------------------------- 1 | #ifndef PI 2 | #define PI 3.141592653589793 3 | #endif 4 | 5 | float bounceOut(float t) { 6 | const float a = 4.0 / 11.0; 7 | const float b = 8.0 / 11.0; 8 | const float c = 9.0 / 10.0; 9 | 10 | const float ca = 4356.0 / 361.0; 11 | const float cb = 35442.0 / 1805.0; 12 | const float cc = 16061.0 / 1805.0; 13 | 14 | float t2 = t * t; 15 | 16 | return t < a 17 | ? 7.5625 * t2 18 | : t < b 19 | ? 9.075 * t2 - 9.9 * t + 3.4 20 | : t < c 21 | ? ca * t2 - cb * t + cc 22 | : 10.8 * t * t - 20.52 * t + 10.72; 23 | } 24 | 25 | #pragma glslify: export(bounceOut) 26 | -------------------------------------------------------------------------------- /circular-in-out.glsl: -------------------------------------------------------------------------------- 1 | float circularInOut(float t) { 2 | return t < 0.5 3 | ? 0.5 * (1.0 - sqrt(1.0 - 4.0 * t * t)) 4 | : 0.5 * (sqrt((3.0 - 2.0 * t) * (2.0 * t - 1.0)) + 1.0); 5 | } 6 | 7 | #pragma glslify: export(circularInOut) 8 | -------------------------------------------------------------------------------- /circular-in.glsl: -------------------------------------------------------------------------------- 1 | float circularIn(float t) { 2 | return 1.0 - sqrt(1.0 - t * t); 3 | } 4 | 5 | #pragma glslify: export(circularIn) 6 | -------------------------------------------------------------------------------- /circular-out.glsl: -------------------------------------------------------------------------------- 1 | float circularOut(float t) { 2 | return sqrt((2.0 - t) * t); 3 | } 4 | 5 | #pragma glslify: export(circularOut) 6 | -------------------------------------------------------------------------------- /cubic-in-out.glsl: -------------------------------------------------------------------------------- 1 | float cubicInOut(float t) { 2 | return t < 0.5 3 | ? 4.0 * t * t * t 4 | : 0.5 * pow(2.0 * t - 2.0, 3.0) + 1.0; 5 | } 6 | 7 | #pragma glslify: export(cubicInOut) 8 | -------------------------------------------------------------------------------- /cubic-in.glsl: -------------------------------------------------------------------------------- 1 | float cubicIn(float t) { 2 | return t * t * t; 3 | } 4 | 5 | #pragma glslify: export(cubicIn) 6 | -------------------------------------------------------------------------------- /cubic-out.glsl: -------------------------------------------------------------------------------- 1 | float cubicOut(float t) { 2 | float f = t - 1.0; 3 | return f * f * f + 1.0; 4 | } 5 | 6 | #pragma glslify: export(cubicOut) 7 | -------------------------------------------------------------------------------- /elastic-in-out.glsl: -------------------------------------------------------------------------------- 1 | #ifndef HALF_PI 2 | #define HALF_PI 1.5707963267948966 3 | #endif 4 | 5 | float elasticInOut(float t) { 6 | return t < 0.5 7 | ? 0.5 * sin(+13.0 * HALF_PI * 2.0 * t) * pow(2.0, 10.0 * (2.0 * t - 1.0)) 8 | : 0.5 * sin(-13.0 * HALF_PI * ((2.0 * t - 1.0) + 1.0)) * pow(2.0, -10.0 * (2.0 * t - 1.0)) + 1.0; 9 | } 10 | 11 | #pragma glslify: export(elasticInOut) 12 | -------------------------------------------------------------------------------- /elastic-in.glsl: -------------------------------------------------------------------------------- 1 | #ifndef HALF_PI 2 | #define HALF_PI 1.5707963267948966 3 | #endif 4 | 5 | float elasticIn(float t) { 6 | return sin(13.0 * t * HALF_PI) * pow(2.0, 10.0 * (t - 1.0)); 7 | } 8 | 9 | #pragma glslify: export(elasticIn) 10 | -------------------------------------------------------------------------------- /elastic-out.glsl: -------------------------------------------------------------------------------- 1 | #ifndef HALF_PI 2 | #define HALF_PI 1.5707963267948966 3 | #endif 4 | 5 | float elasticOut(float t) { 6 | return sin(-13.0 * (t + 1.0) * HALF_PI) * pow(2.0, -10.0 * t) + 1.0; 7 | } 8 | 9 | #pragma glslify: export(elasticOut) 10 | -------------------------------------------------------------------------------- /exponential-in-out.glsl: -------------------------------------------------------------------------------- 1 | float exponentialInOut(float t) { 2 | return t == 0.0 || t == 1.0 3 | ? t 4 | : t < 0.5 5 | ? +0.5 * pow(2.0, (20.0 * t) - 10.0) 6 | : -0.5 * pow(2.0, 10.0 - (t * 20.0)) + 1.0; 7 | } 8 | 9 | #pragma glslify: export(exponentialInOut) 10 | -------------------------------------------------------------------------------- /exponential-in.glsl: -------------------------------------------------------------------------------- 1 | float exponentialIn(float t) { 2 | return t == 0.0 ? t : pow(2.0, 10.0 * (t - 1.0)); 3 | } 4 | 5 | #pragma glslify: export(exponentialIn) 6 | -------------------------------------------------------------------------------- /exponential-out.glsl: -------------------------------------------------------------------------------- 1 | float exponentialOut(float t) { 2 | return t == 1.0 ? t : 1.0 - pow(2.0, -10.0 * t); 3 | } 4 | 5 | #pragma glslify: export(exponentialOut) 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | glsl-easings 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /linear.glsl: -------------------------------------------------------------------------------- 1 | float linear(float t) { 2 | return t; 3 | } 4 | 5 | #pragma glslify: export(linear) 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "glsl-easings", 3 | "version": "1.0.0", 4 | "main": "linear.glsl", 5 | "scripts": { 6 | "test": "npm run make:test && cd test/visual && beefy index.js -- -t glslify", 7 | "make:test": "node test/visual/make.js", 8 | "make:page": "npm run make:test && browserify -t glslify test/visual/index.js -o bundle.js" 9 | }, 10 | "author": "Hugh Kennedy (http://hughsk.io/)", 11 | "license": "MIT", 12 | "repository": { 13 | "type": "git", 14 | "url": "git://github.com/hughsk/glsl-easings.git" 15 | }, 16 | "bugs": { 17 | "url": "https://github.com/hughsk/glsl-easings/issues" 18 | }, 19 | "homepage": "https://github.com/hughsk/glsl-easings", 20 | "dependencies": {}, 21 | "devDependencies": { 22 | "beefy": "^2.1.1", 23 | "browserify": "^7.0.0", 24 | "canvas-fit": "^1.2.0", 25 | "gl-buffer": "^2.0.6", 26 | "gl-context": "^0.1.1", 27 | "gl-mat4": "^1.0.1", 28 | "gl-now": "^1.3.1", 29 | "gl-vao": "^1.1.2", 30 | "glslify": "^1.6.0" 31 | }, 32 | "description": "Robert Penner's easing functions in GLSL, available as a module for glslify.", 33 | "keywords": [ 34 | "glsl", 35 | "transition", 36 | "ease", 37 | "easing", 38 | "animation", 39 | "webgl", 40 | "shader" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /quadratic-in-out.glsl: -------------------------------------------------------------------------------- 1 | float quadraticInOut(float t) { 2 | float p = 2.0 * t * t; 3 | return t < 0.5 ? p : -p + (4.0 * t) - 1.0; 4 | } 5 | 6 | #pragma glslify: export(quadraticInOut) 7 | -------------------------------------------------------------------------------- /quadratic-in.glsl: -------------------------------------------------------------------------------- 1 | float quadraticIn(float t) { 2 | return t * t; 3 | } 4 | 5 | #pragma glslify: export(quadraticIn) 6 | -------------------------------------------------------------------------------- /quadratic-out.glsl: -------------------------------------------------------------------------------- 1 | float quadraticOut(float t) { 2 | return -t * (t - 2.0); 3 | } 4 | 5 | #pragma glslify: export(quadraticOut) 6 | -------------------------------------------------------------------------------- /quartic-in-out.glsl: -------------------------------------------------------------------------------- 1 | float quarticInOut(float t) { 2 | return t < 0.5 3 | ? +8.0 * pow(t, 4.0) 4 | : -8.0 * pow(t - 1.0, 4.0) + 1.0; 5 | } 6 | 7 | #pragma glslify: export(quarticInOut) 8 | -------------------------------------------------------------------------------- /quartic-in.glsl: -------------------------------------------------------------------------------- 1 | float quarticIn(float t) { 2 | return pow(t, 4.0); 3 | } 4 | 5 | #pragma glslify: export(quarticIn) 6 | -------------------------------------------------------------------------------- /quartic-out.glsl: -------------------------------------------------------------------------------- 1 | float quarticOut(float t) { 2 | return pow(t - 1.0, 3.0) * (1.0 - t) + 1.0; 3 | } 4 | 5 | #pragma glslify: export(quarticOut) 6 | -------------------------------------------------------------------------------- /quintic-in-out.glsl: -------------------------------------------------------------------------------- 1 | float qinticInOut(float t) { 2 | return t < 0.5 3 | ? +16.0 * pow(t, 5.0) 4 | : -0.5 * pow(2.0 * t - 2.0, 5.0) + 1.0; 5 | } 6 | 7 | #pragma glslify: export(qinticInOut) 8 | -------------------------------------------------------------------------------- /quintic-in.glsl: -------------------------------------------------------------------------------- 1 | float qinticIn(float t) { 2 | return pow(t, 5.0); 3 | } 4 | 5 | #pragma glslify: export(qinticIn) 6 | -------------------------------------------------------------------------------- /quintic-out.glsl: -------------------------------------------------------------------------------- 1 | float qinticOut(float t) { 2 | return 1.0 - (pow(t - 1.0, 5.0)); 3 | } 4 | 5 | #pragma glslify: export(qinticOut) 6 | -------------------------------------------------------------------------------- /sine-in-out.glsl: -------------------------------------------------------------------------------- 1 | #ifndef PI 2 | #define PI 3.141592653589793 3 | #endif 4 | 5 | float sineInOut(float t) { 6 | return -0.5 * (cos(PI * t) - 1.0); 7 | } 8 | 9 | #pragma glslify: export(sineInOut) 10 | -------------------------------------------------------------------------------- /sine-in.glsl: -------------------------------------------------------------------------------- 1 | #ifndef HALF_PI 2 | #define HALF_PI 1.5707963267948966 3 | #endif 4 | 5 | float sineIn(float t) { 6 | return sin((t - 1.0) * HALF_PI) + 1.0; 7 | } 8 | 9 | #pragma glslify: export(sineIn) 10 | -------------------------------------------------------------------------------- /sine-out.glsl: -------------------------------------------------------------------------------- 1 | #ifndef HALF_PI 2 | #define HALF_PI 1.5707963267948966 3 | #endif 4 | 5 | float sineOut(float t) { 6 | return sin(t * HALF_PI); 7 | } 8 | 9 | #pragma glslify: export(sineOut) 10 | -------------------------------------------------------------------------------- /test/visual/.gitignore: -------------------------------------------------------------------------------- 1 | *.glsl 2 | !_base.glsl 3 | !frag.glsl 4 | -------------------------------------------------------------------------------- /test/visual/_base.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | #pragma glslify: ease = require(__MODULE__) 4 | 5 | attribute float aPosition; 6 | uniform vec2 uScreen; 7 | uniform mat4 uModel; 8 | 9 | void main() { 10 | vec2 position = vec2(aPosition, ease(aPosition)); 11 | 12 | position.x /= uScreen.x / uScreen.y; 13 | position.x -= 0.25; 14 | position.y -= 0.5; 15 | 16 | gl_Position = uModel * vec4(position.x, position.y, 1.0, 1.0); 17 | } 18 | -------------------------------------------------------------------------------- /test/visual/frag.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | void main() { 4 | gl_FragColor = vec4(0.9, 0.4, 0.6, 1); 5 | } 6 | -------------------------------------------------------------------------------- /test/visual/index.js: -------------------------------------------------------------------------------- 1 | var canvas = document.body.appendChild(document.createElement('canvas')) 2 | var gl = require('gl-context')(canvas, render) 3 | var glBuffer = require('gl-buffer') 4 | var mat4 = require('gl-mat4') 5 | var glslify = require('glslify') 6 | var glVAO = require('gl-vao') 7 | 8 | var LINE_PRECISION = 400 9 | 10 | var line = new Float32Array(LINE_PRECISION) 11 | for (var i = 0; i < LINE_PRECISION; i++) { 12 | line[i] = i / (LINE_PRECISION - 1) 13 | } 14 | 15 | line = glVAO(gl, [{ 16 | buffer: glBuffer(gl, line) 17 | , size: 1 18 | }]) 19 | 20 | var shaders = { 21 | linear : glslify({ frag: './frag.glsl', vert: './linear.glsl' })(gl) 22 | , backInOut : glslify({ frag: './frag.glsl', vert: './back-in-out.glsl' })(gl) 23 | , backOut : glslify({ frag: './frag.glsl', vert: './back-out.glsl' })(gl) 24 | , backIn : glslify({ frag: './frag.glsl', vert: './back-in.glsl' })(gl) 25 | , bounceInOut : glslify({ frag: './frag.glsl', vert: './bounce-in-out.glsl' })(gl) 26 | , bounceOut : glslify({ frag: './frag.glsl', vert: './bounce-out.glsl' })(gl) 27 | , bounceIn : glslify({ frag: './frag.glsl', vert: './bounce-in.glsl' })(gl) 28 | , circularInOut : glslify({ frag: './frag.glsl', vert: './circular-in-out.glsl' })(gl) 29 | , circularOut : glslify({ frag: './frag.glsl', vert: './circular-out.glsl' })(gl) 30 | , circularIn : glslify({ frag: './frag.glsl', vert: './circular-in.glsl' })(gl) 31 | , cubicInOut : glslify({ frag: './frag.glsl', vert: './cubic-in-out.glsl' })(gl) 32 | , cubicOut : glslify({ frag: './frag.glsl', vert: './cubic-out.glsl' })(gl) 33 | , cubicIn : glslify({ frag: './frag.glsl', vert: './cubic-in.glsl' })(gl) 34 | , elasticInOut : glslify({ frag: './frag.glsl', vert: './elastic-in-out.glsl' })(gl) 35 | , elasticOut : glslify({ frag: './frag.glsl', vert: './elastic-out.glsl' })(gl) 36 | , elasticIn : glslify({ frag: './frag.glsl', vert: './elastic-in.glsl' })(gl) 37 | , exponentialInOut : glslify({ frag: './frag.glsl', vert: './exponential-in-out.glsl' })(gl) 38 | , exponentialOut : glslify({ frag: './frag.glsl', vert: './exponential-out.glsl' })(gl) 39 | , exponentialIn : glslify({ frag: './frag.glsl', vert: './exponential-in.glsl' })(gl) 40 | , quadraticInOut : glslify({ frag: './frag.glsl', vert: './quadratic-in-out.glsl' })(gl) 41 | , quadraticOut : glslify({ frag: './frag.glsl', vert: './quadratic-out.glsl' })(gl) 42 | , quadraticIn : glslify({ frag: './frag.glsl', vert: './quadratic-in.glsl' })(gl) 43 | , quarticInOut : glslify({ frag: './frag.glsl', vert: './quartic-in-out.glsl' })(gl) 44 | , quarticOut : glslify({ frag: './frag.glsl', vert: './quartic-out.glsl' })(gl) 45 | , quarticIn : glslify({ frag: './frag.glsl', vert: './quartic-in.glsl' })(gl) 46 | , quinticInOut : glslify({ frag: './frag.glsl', vert: './quintic-in-out.glsl' })(gl) 47 | , quinticOut : glslify({ frag: './frag.glsl', vert: './quintic-out.glsl' })(gl) 48 | , quinticIn : glslify({ frag: './frag.glsl', vert: './quintic-in.glsl' })(gl) 49 | , sineInOut : glslify({ frag: './frag.glsl', vert: './sine-in-out.glsl' })(gl) 50 | , sineOut : glslify({ frag: './frag.glsl', vert: './sine-out.glsl' })(gl) 51 | , sineIn : glslify({ frag: './frag.glsl', vert: './sine-in.glsl' })(gl) 52 | } 53 | 54 | var linear = glslify({ frag: './blue.glsl', vert: './linear.glsl' })(gl) 55 | var names = Object.keys(shaders) 56 | var selected = null 57 | var model = mat4.create() 58 | var dims = [] 59 | 60 | mat4.scale(model, model, [0.5, 0.5, 0.5]) 61 | 62 | function render() { 63 | dims[0] = gl.drawingBufferWidth 64 | dims[1] = gl.drawingBufferHeight 65 | gl.clearColor(0, 0, 0, 1) 66 | gl.clear(gl.COLOR_BUFFER_BIT) 67 | gl.viewport(0, 0, dims[0], dims[1]) 68 | 69 | gl.enable(gl.BLEND) 70 | gl.blendFunc(gl.ONE, gl.ONE) 71 | gl.lineWidth(1.5) 72 | 73 | for (var i = 0; i < names.length; i++) { 74 | var name = names[i] 75 | if (selected && selected !== name) continue 76 | 77 | shaders[name].bind() 78 | shaders[name].uniforms.uModel = model 79 | shaders[name].uniforms.uScreen = dims 80 | 81 | line.bind() 82 | line.draw(gl.LINE_STRIP, LINE_PRECISION) 83 | } 84 | 85 | linear.bind() 86 | linear.uniforms.uModel = model 87 | linear.uniforms.uScreen = dims 88 | line.bind() 89 | line.draw(gl.LINE_STRIP, LINE_PRECISION) 90 | 91 | gl.disable(gl.BLEND) 92 | } 93 | 94 | window.addEventListener('resize' 95 | , require('canvas-fit')(canvas) 96 | , false 97 | ) 98 | 99 | // Terrible Hacky UI 100 | var ul = document.body.appendChild(document.createElement('ul')) 101 | 102 | ul.style.color = '#fff' 103 | ul.style.position = 'fixed' 104 | ul.style.width = '200px' 105 | ul.style.fontSize = '0.9em' 106 | ul.style.top = 0 107 | ul.style.left = 0 108 | ul.style.bottom = 0 109 | ul.style.margin = 0 110 | ul.style.padding = 0 111 | ul.style.listStyle = 'none' 112 | ul.style.overflow = 'auto' 113 | ul.style.fontFamily = 'Source Code Pro' 114 | 115 | names.forEach(function(name) { 116 | var li = ul.appendChild(document.createElement('li')) 117 | li.innerHTML = name 118 | li.style.padding = '1em' 119 | li.addEventListener('mouseover', function() { 120 | li.style.background = '#fff' 121 | li.style.color = '#000' 122 | selected = name 123 | }, false) 124 | li.addEventListener('mouseout', function() { 125 | li.style.background = '#000' 126 | li.style.color = '#fff' 127 | }, false) 128 | }) 129 | 130 | ul.addEventListener('mouseleave', function(e) { 131 | if (e.target !== this) return 132 | selected = null 133 | }) 134 | -------------------------------------------------------------------------------- /test/visual/make.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var fs = require('fs') 3 | 4 | var root = path.resolve(__dirname, '../..') 5 | var base = fs.readFileSync(path.join(__dirname, '_base.glsl'), 'utf8') 6 | var files = fs.readdirSync(root).map(function(name) { 7 | return { name: name, root: path.resolve(root, name) } 8 | }).filter(function(file) { 9 | return path.extname(file.name) === '.glsl' 10 | }) 11 | 12 | files.forEach(function(file) { 13 | var content = base.replace('__MODULE__', '../../' + file.name) 14 | 15 | fs.writeFile(path.join(__dirname, file.name), content, function(err) { 16 | if (err) throw err 17 | }) 18 | }) 19 | --------------------------------------------------------------------------------