Skip to content

Commit

Permalink
Merge pull request #39 from brianchirls/develop
Browse files Browse the repository at this point in the history
Release 2014-01-14
  • Loading branch information
brianchirls committed Jan 15, 2014
2 parents 7c9c641 + 8d9f302 commit 393c132
Show file tree
Hide file tree
Showing 56 changed files with 2,544 additions and 241 deletions.
16 changes: 3 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ Full documentation is in progress at the [wiki](https://github.com/brianchirls/S

- Optimized rendering path and GPU accelerated up to 60 frames per second
- Accept image input from varied sources: videos, images, canvases and arrays
- Output to multiple canvases
- Effect parameters accept multiple formats and can monitor HTML form inputs
- Basic 2D transforms (translate, rotate, scale, skew) on effect nodes
- Plugin architecture for adding new effects
Expand Down Expand Up @@ -68,15 +67,14 @@ Full documentation is in progress at the [wiki](https://github.com/brianchirls/S
Seriously.js requires a browser that supports [WebGL](http://en.wikipedia.org/wiki/Webgl).
Development is targeted to and tested in Firefox (4.0+) and Google Chrome (9+). Safari
and Opera are [expected to support WebGL](http://caniuse.com/#search=webgl)
in the near future. There are no public plans for Internet Explorer to
support WebGL.
in the near future. Internet Explorer supports WebGL but does not support video textures.

Even though a browser may support WebGL, the ability to run it depends
on the system's graphics card. Seriously.js is heavily optimized, so most
modern desktops and notebooks should be sufficient. Older systems may
run slower, especially when using high-resolution videos.

Mobile browser support for WebGL is limited. Mobile Firefox has some
Mobile browser support for WebGL is limited. Mobile Firefox and Chrome have decent
support, but the Android Browser and Mobile Safari do not.

Seriously.js provides a method to detect browser support and offer
Expand All @@ -99,13 +97,7 @@ So for now, it is best to host your own video files.
- Benchmarking utility to determine client capabilities
- Automatic resolution tuning to maintain minimum frame rate
- Handle lost WebGL context
- Debug mode
- Graphical interface
- Effects:
- Perlin Noise
- Clouds
- Gaussian Blur
- Curves

## Contributing

Expand All @@ -118,6 +110,4 @@ Individual plugins may be licensed differently. Check source code comments.

## Credits

Seriously.js is created and maintained by [Brian Chirls](http://chirls.com) with support from:

<a href="http://mozillapopcorn.org"><img src="http://seriouslyjs.org/images/mozilla.png" alt="Mozilla"/></a>
Seriously.js is created and maintained by [Brian Chirls](http://chirls.com)
63 changes: 34 additions & 29 deletions effects/seriously.ascii.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
var identity, letters;

letters = document.createElement('img');
letters.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvAAAAAICAYAAACf+MsnAAAFY0lEQVR4Xu2Z644bOwyDN+//0NsOigEMQdRHyU6CFDnA+bHVWNaFojiTx8/Pz+/f/4/89/v7z9Xj8Tjib3XyTN9usFcMz8gt3h9zXf/O6nD/W1V7Vb9uXad+nHucZ9xenX7OqTHdSfmRXfmPsSn8xPMrllcfCkdVfHSe7Ned0/yp7jv2GPfqK+MCByc0zzvxKi5RPq8cuvE4+JrwpFM7N78K2yu+qb9kd3qV+ZjUx5n/+xnXP81ctW/UHQ5P3Gd360vxKf+n8dGpxXTeKu6h2ansFT6pvo5G2/FP99NsUf9d/xleInfetcj629m9cf9WOV5K+78R8ERGRLYO8VQiecd/1vwKEJV46JBJRzhRfXftVL/MTgM48UmL0l2OSmzs9kctAJfE4/1KkNFzbj8cjFHsJ/u460vhnPDfqddujJ27poLCWWBuHt0YKr/ki+yOKJnk5Z7pPLfLf4TZif+qvi7XuDWg+HbtNEe79ds9H7m1m2/3+YzLK5Hc9e/gYxdfNP+ZfdV9lT3usWn+9310/qiAdxa1O5gTEqVhoLudxVwVNPrvCqDp/ZX4d0Uk1Y7sbgyU4zooCk8nB3i9Y61V5wWpIjDlP+ZJsxPvmLxEOD2sntk5Pz1LBOb0L+sPfQGs6ksYpt7QAiHuUwtkgl+F3Qyf2YxTX53+Vdjfjc8VYIq7KT+abzof7ervZ8fX8d/Jyc3PmTcnRrrPEbyVTnD8T+Y38pH624mfNIr6muzO95S/sh1Gvog/XmW/a6N+scww43zgqLjcOX9cwFeESQK3Gpx32QggTlwk8Ei8OXfE4VMLeCLQiLBjfJM7VA069XefnZBGJz7Vr24dK3GwEoqLD7p/1+4IMWdRdxaMK9CmP4E62F7nm8S7s4B3BMCkBzQPVQ0IM06+2WLvzlDlI+NfF4d0ljiHuF/Zb/4m/4ojTgnA6f0qfiWA135P5l/NoFv/7txm+5ZyyOw0e1R/skd8ZKKwwnjXf9xLrkBV+2x3Pib9Vz3JOMaNL/KZ+oCkXhDUTLxEwLsC41OfI5DEYe9+mXfr0l2mJH5ISHTOUw2U8IjD5LyVUtxEmrvi4V5ejvijWNWicBbOyfsrYejkMMXmdIFEAZH19ASWnNyrPlBdKH+yU3y0gGjGKf4Mv51ft9zzKk83vul5qr9r7+CT9gHx2zvs0/yofpGX1AuC4svqhYJeJJydNZk/urcSxet91dfiUy94HX6oBHCHi5+F38svCeg1h+zZ6nyF5VUzVC8Q0X9LwE/IkMjmpJ3i27XvxuqQ0c4dp/JTfnb9T847AoNIW/nokIYrYKvnJvln/siPwtD0XAeTU+x0luEugWdLNeY4ecl260vxK8Efl3OnZi4uaZZIMBFeJ/hw6xrFvppvV1Q559d8MwwR50cskIBQ2KhE3y7/ZeddAUjxOr3diZ/8U3+I953z7uzR7Lj4rvjl9HxXvaHaOflSfSkf93y24xx94PpX89I5H2t9+fwK+KVzNOwdIeM+e905+ZqqRIj7pYHiU3FNFnBnkO+41EKige3cpX7GunwoARfjIwKrxNhEJFLfMrsbI+G/smfkojAa60vxPcNeCZCqhjSra6ydBaAWSFzaqnb01c4VEdVCWWPM7svstKDWuKrZpwUb7dVsOzPcxUeGdYdfdgV8Vr+Mv1R8Tn/iHcSNWR8jjjv9URzama9qbp0XlBP4y2Jw6u/E577AZTVz/BM/OfySzSjl79o73FRxaFdfuPG5/XE58PbXEvAT8UBn1HKuSIB8ThYwiZfJnd8z768Aib/3R/iN4J0VeMXcVwvynbl/735OBV6BKTfyT+e/T4/f7dP3uW8F3Aqs/PIHbWXeeeKjnSsAAAAASUVORK5CYII=";
letters.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvAAAAAICAYAAACf+MsnAAAFY0lEQVR4Xu2Z644bOwyDN+//0NsOigEMQdRHyU6CFDnA+bHVWNaFojiTx8/Pz+/f/4/89/v7z9Xj8Tjib3XyTN9usFcMz8gt3h9zXf/O6nD/W1V7Vb9uXad+nHucZ9xenX7OqTHdSfmRXfmPsSn8xPMrllcfCkdVfHSe7Ned0/yp7jv2GPfqK+MCByc0zzvxKi5RPq8cuvE4+JrwpFM7N78K2yu+qb9kd3qV+ZjUx5n/+xnXP81ctW/UHQ5P3Gd360vxKf+n8dGpxXTeKu6h2ansFT6pvo5G2/FP99NsUf9d/xleInfetcj629m9cf9WOV5K+78R8ERGRLYO8VQiecd/1vwKEJV46JBJRzhRfXftVL/MTgM48UmL0l2OSmzs9kctAJfE4/1KkNFzbj8cjFHsJ/u460vhnPDfqddujJ27poLCWWBuHt0YKr/ki+yOKJnk5Z7pPLfLf4TZif+qvi7XuDWg+HbtNEe79ds9H7m1m2/3+YzLK5Hc9e/gYxdfNP+ZfdV9lT3usWn+9310/qiAdxa1O5gTEqVhoLudxVwVNPrvCqDp/ZX4d0Uk1Y7sbgyU4zooCk8nB3i9Y61V5wWpIjDlP+ZJsxPvmLxEOD2sntk5Pz1LBOb0L+sPfQGs6ksYpt7QAiHuUwtkgl+F3Qyf2YxTX53+Vdjfjc8VYIq7KT+abzof7ervZ8fX8d/Jyc3PmTcnRrrPEbyVTnD8T+Y38pH624mfNIr6muzO95S/sh1Gvog/XmW/a6N+scww43zgqLjcOX9cwFeESQK3Gpx32QggTlwk8Ei8OXfE4VMLeCLQiLBjfJM7VA069XefnZBGJz7Vr24dK3GwEoqLD7p/1+4IMWdRdxaMK9CmP4E62F7nm8S7s4B3BMCkBzQPVQ0IM06+2WLvzlDlI+NfF4d0ljiHuF/Zb/4m/4ojTgnA6f0qfiWA135P5l/NoFv/7txm+5ZyyOw0e1R/skd8ZKKwwnjXf9xLrkBV+2x3Pib9Vz3JOMaNL/KZ+oCkXhDUTLxEwLsC41OfI5DEYe9+mXfr0l2mJH5ISHTOUw2U8IjD5LyVUtxEmrvi4V5ejvijWNWicBbOyfsrYejkMMXmdIFEAZH19ASWnNyrPlBdKH+yU3y0gGjGKf4Mv51ft9zzKk83vul5qr9r7+CT9gHx2zvs0/yofpGX1AuC4svqhYJeJJydNZk/urcSxet91dfiUy94HX6oBHCHi5+F38svCeg1h+zZ6nyF5VUzVC8Q0X9LwE/IkMjmpJ3i27XvxuqQ0c4dp/JTfnb9T847AoNIW/nokIYrYKvnJvln/siPwtD0XAeTU+x0luEugWdLNeY4ecl260vxK8Efl3OnZi4uaZZIMBFeJ/hw6xrFvppvV1Q559d8MwwR50cskIBQ2KhE3y7/ZeddAUjxOr3diZ/8U3+I953z7uzR7Lj4rvjl9HxXvaHaOflSfSkf93y24xx94PpX89I5H2t9+fwK+KVzNOwdIeM+e905+ZqqRIj7pYHiU3FNFnBnkO+41EKige3cpX7GunwoARfjIwKrxNhEJFLfMrsbI+G/smfkojAa60vxPcNeCZCqhjSra6ydBaAWSFzaqnb01c4VEdVCWWPM7svstKDWuKrZpwUb7dVsOzPcxUeGdYdfdgV8Vr+Mv1R8Tn/iHcSNWR8jjjv9URzama9qbp0XlBP4y2Jw6u/E577AZTVz/BM/OfySzSjl79o73FRxaFdfuPG5/XE58PbXEvAT8UBn1HKuSIB8ThYwiZfJnd8z768Aib/3R/iN4J0VeMXcVwvynbl/735OBV6BKTfyT+e/T4/f7dP3uW8F3Aqs/PIHbWXeeeKjnSsAAAAASUVORK5CYII=';
identity = new Float32Array([
1, 0, 0, 0,
0, 1, 0, 0,
Expand All @@ -43,7 +43,24 @@
height,
scaledWidth,
scaledHeight,
unif;
unif = {},
me = this;

function resize() {
//set up scaledBuffer if (width or height have changed)
height = me.height;
width = me.width;
scaledWidth = Math.ceil(width / 8);
scaledHeight = Math.ceil(height / 8);

unif.resolution = me.uniforms.resolution;
unif.transform = identity;

if (scaledBuffer) {
scaledBuffer.resize(scaledWidth, scaledHeight);
}
}

return {
initialize: function (parent) {
function setLetters() {
Expand Down Expand Up @@ -74,22 +91,27 @@
});
}

unif = {
letters: lettersTexture
};
unif.letters = lettersTexture;

//when the output scales up, don't smooth it out
gl.bindTexture(gl.TEXTURE_2D, this.texture || this.frameBuffer && this.frameBuffer.texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.bindTexture(gl.TEXTURE_2D, null);

scaledBuffer = new Seriously.util.FrameBuffer(gl, 1, 1);
resize();

scaledBuffer = new Seriously.util.FrameBuffer(gl, scaledWidth, scaledHeight);

//so it stays blocky
gl.bindTexture(gl.TEXTURE_2D, scaledBuffer.texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

this.uniforms.transform = identity;

baseShader = this.baseShader;
},
commonShader: true,
shader: function (inputs, shaderSource) {
baseShader = new Seriously.util.ShaderProgram(this.gl, shaderSource.vertex, shaderSource.fragment);

shaderSource.fragment = '#ifdef GL_ES\n\n' +
'precision mediump float;\n\n' +
'#endif\n\n' +
Expand Down Expand Up @@ -120,26 +142,9 @@

return shaderSource;
},
draw: function (shader, model, uniforms, frameBuffer, parent) {
//set up scaledBuffer if (width or height have changed)
if (height !== this.height || width !== this.width) {
height = this.height;
width = this.width;
scaledWidth = Math.ceil(width / 8);
scaledHeight = Math.ceil(height / 8);

unif.resolution = uniforms.resolution;
unif.transform = identity;

scaledBuffer.resize(scaledWidth, scaledHeight);

//so it stays blocky
gl.bindTexture(gl.TEXTURE_2D, scaledBuffer.texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
}


parent(baseShader, model, uniforms, scaledBuffer.frameBuffer, false, {
resize: resize,
draw: function (shader, model, uniforms, frameBuffer, draw) {
draw(baseShader, model, uniforms, scaledBuffer.frameBuffer, false, {
width: scaledWidth,
height: scaledHeight,
blend: false
Expand All @@ -148,7 +153,7 @@
unif.source = scaledBuffer.texture;
unif.background = uniforms.background;

parent(shader, model, unif, frameBuffer);
draw(shader, model, unif, frameBuffer);
},
destroy: function () {
if (scaledBuffer) {
Expand Down
1 change: 1 addition & 0 deletions effects/seriously.bleach-bypass.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
*/

Seriously.plugin('bleach-bypass', {
commonShader: true,
shader: function (inputs, shaderSource) {
shaderSource.fragment = '#ifdef GL_ES\n\n' +
'precision mediump float;\n\n' +
Expand Down
1 change: 1 addition & 0 deletions effects/seriously.blend.js
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@
this.frameBuffer.resize(width, height);
}

this.emit('resize');
this.setDirty();
}

Expand Down
5 changes: 3 additions & 2 deletions effects/seriously.blur.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,12 @@ http://v002.info/plugins/v002-blurs/
return;
}

baseShader = this.baseShader;

fbHorizontal = new Seriously.util.FrameBuffer(gl, this.width, this.height);
fbVertical = new Seriously.util.FrameBuffer(gl, this.width, this.height);
},
commonShader: true,
shader: function (inputs, shaderSource) {
var gl = this.gl,
/*
Expand All @@ -79,8 +82,6 @@ http://v002.info/plugins/v002-blurs/
maxVaryings = gl.getParameter(gl.MAX_VARYING_VECTORS),
defineVaryings = (maxVaryings >= 10 ? '#define USE_VARYINGS' : '');

baseShader = new Seriously.util.ShaderProgram(gl, shaderSource.vertex, shaderSource.fragment);

shaderSource.vertex = [
defineVaryings,
'#define PI ' + Math.PI,
Expand Down
1 change: 1 addition & 0 deletions effects/seriously.brightness-contrast.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
'use strict';

Seriously.plugin('brightness-contrast', {
commonShader: true,
shader: function (inputs, shaderSource) {
shaderSource.fragment = [
'#ifdef GL_ES\n',
Expand Down
1 change: 1 addition & 0 deletions effects/seriously.channels.js
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@
this.frameBuffer.resize(width, height);
}

this.emit('resize');
this.setDirty();
}

Expand Down
141 changes: 141 additions & 0 deletions effects/seriously.checkerboard.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
/* global define, require */
(function (root, factory) {
'use strict';

if (typeof exports === 'object') {
// Node/CommonJS
factory(require('seriously'));
} else if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['seriously'], factory);
} else {
if (!root.Seriously) {
root.Seriously = { plugin: function (name, opt) { this[name] = opt; } };
}
factory(root.Seriously);
}
}(this, function (Seriously, undefined) {
'use strict';

Seriously.plugin('checkerboard', function () {
var me = this;

function resize() {
me.resize();
}

return {
initialize: function (initialize) {
initialize();
resize();
},
shader: function (inputs, shaderSource) {
shaderSource.vertex = [
'#ifdef GL_ES',
'precision mediump float;',
'#endif',

'attribute vec4 position;',
'attribute vec2 texCoord;',

'uniform vec2 resolution;',
'uniform mat4 transform;',

'uniform vec2 size;',
'uniform vec2 anchor;',

'vec2 pixelCoord;', //based in center
'varying vec2 vGridCoord;', //based in center

'void main(void) {',
// first convert to screen space
' vec4 screenPosition = vec4(position.xy * resolution / 2.0, position.z, position.w);',
' screenPosition = transform * screenPosition;',

// convert back to OpenGL coords
' gl_Position.xy = screenPosition.xy * 2.0 / resolution;',
' gl_Position.z = screenPosition.z * 2.0 / (resolution.x / resolution.y);',
' gl_Position.w = screenPosition.w;',

' pixelCoord = resolution * (texCoord - 0.5) / 2.0;',
' vGridCoord = (pixelCoord - anchor) / size;',
'}\n'
].join('\n');
shaderSource.fragment = [
'#ifdef GL_ES',
'precision mediump float;',
'#endif',

'varying vec2 vTexCoord;',
'varying vec2 vPixelCoord;',
'varying vec2 vGridCoord;',

'uniform vec2 resolution;',
'uniform vec2 anchor;',
'uniform vec2 size;',
'uniform vec4 color1;',
'uniform vec4 color2;',


'void main(void) {',
' vec2 modGridCoord = floor(mod(vGridCoord, 2.0));',
' if (modGridCoord.x == modGridCoord.y) {',
' gl_FragColor = color1;',
' } else {',
' gl_FragColor = color2;',
' }',
'}'
].join('\n');
return shaderSource;
},
inPlace: true,
inputs: {
source: {
type: 'image',
uniform: 'source',
shaderDirty: false
},
anchor: {
type: 'vector',
uniform: 'anchor',
dimensions: 2,
defaultValue: [0, 0]
},
size: {
type: 'vector',
uniform: 'size',
dimensions: 2,
defaultValue: [4, 4]
},
color1: {
type: 'color',
uniform: 'color1',
defaultValue: [1, 1, 1, 1]
},
color2: {
type: 'color',
uniform: 'color2',
defaultValue: [187 / 255, 187 / 255, 187 / 255, 1]
},
width: {
type: 'number',
min: 0,
step: 1,
update: resize,
defaultValue: 640
},
height: {
type: 'number',
min: 0,
step: 1,
update: resize,
defaultValue: 360
}
},
};
}, {
commonShader: true,
title: 'Checkerboard',
categories: ['generator']
});
}));
1 change: 1 addition & 0 deletions effects/seriously.chroma.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
todo: rename parameters
*/
Seriously.plugin('chroma', {
commonShader: true,
shader: function (inputs, shaderSource) {
shaderSource.vertex = [
'#ifdef GL_ES',
Expand Down
4 changes: 3 additions & 1 deletion effects/seriously.color.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
'use strict';

Seriously.plugin('color', {
commonShader: true,
shader: function(inputs, shaderSource, utilities) {
shaderSource.fragment = '#ifdef GL_ES\n\n' +
'precision mediump float;\n\n' +
Expand All @@ -42,6 +43,7 @@
}
},
title: 'Color',
description: 'Generate color'
description: 'Generate color',
categories: ['generator']
});
}));
1 change: 1 addition & 0 deletions effects/seriously.colorcomplements.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
'use strict';

Seriously.plugin('colorcomplements', {
commonShader: true,
shader: function (inputs, shaderSource) {
shaderSource.fragment = [
'#ifdef GL_ES',
Expand Down
1 change: 1 addition & 0 deletions effects/seriously.colorcube.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
//todo: find a way to not invert every single texture

Seriously.plugin('colorcube', {
commonShader: true,
shader: function (inputs, shaderSource) {
shaderSource.fragment = '#ifdef GL_ES\n' +
'precision mediump float;\n' +
Expand Down
Loading

0 comments on commit 393c132

Please sign in to comment.