Merge branch 'master' of lmno:dither

author: Jules Laplace <jules@okfoc.us> 2014-11-22 23:19:36 -0500
committer: Jules Laplace <jules@okfoc.us> 2014-11-22 23:19:36 -0500
commit: 070b5e6d9d3c7e23c06f0ae0b75026923529c24d (patch)
tree: 89c430dd17ca54ff60f885ecd99cf6cfa0f0b7ff
parent: 04537ed34d443d0610b77420d1dbef64bc05fbfa (diff)
parent: 1631cdf643283fc71bc9d70b5dcbce03ab9c2386 (diff)
49 files changed, 2253 insertions, 334 deletions
diff --git a/.gitignore b/.gitignore
index 6531fe8..259fb84 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ v1
 .#*
 *.swp
 node_modules/
+dist
diff --git a/Gruntfile.js b/Gruntfile.js
index 371228c..333b2a4 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -3,31 +3,90 @@ module.exports = function(grunt) {
 	// Project configuration.
 	grunt.initConfig({
 		pkg: grunt.file.readJSON('package.json'),
+		dentist: {
+			options: {
+				include_js: "app.min.js",
+				include_css: "app.css"
+			},
+			build: {
+				src: 'shader-combo.html',
+				dest_js: 'dist/app.init.js',
+				dest_css: 'dist/app.css',
+				dest_html: 'dist/index.html'
+			}
+		},
 		concat: {
-			dist: {
+			options: {
+				separator: ";"
+			},
+			build: {
 				src: [
-					'js/vendor/jquery/jquery.js',
-					'js/vendor/loader.js',
-					'js/mx/mx.js',
-					'js/mx/mx.*.js',
-					'js/spinner.js',
-					'js/pano.js'
-
+					"js/vendor/acorn.js",
+					"js/vendor/gif.js",
+					"js/vendor/gif-encode.min.js",
+					"js/vendor/jquery/jquery.min.js",
+					"js/vendor/jquery-ui-1.10.3.custom.min.js",
+					"js/vendor/canvasquery.js",
+					"js/vendor/FileSaver/FileSaver.js",
+					"js/vendor/dataUriToBlob.js",
+					"js/util.js",
+					"js/color.js",
+					"js/asdf.js",
+					"js/image.js",
+					"js/user.js",
+					"js/gallery.js",
+					"js/frames.js",
+					"js/render.js",
+					"js/save.js",
+					"js/shader.js",
+					"js/error.highlight.js",
+					"js/help.js",
+					"js/api/gallery.js",
+					"js/api/get.js",
+					"js/api/set.js",
+					"shaders.json",
+					"dist/app.init.js",
 				],
-				dest: 'js/live.concat.js',
+				dest: 'dist/app.concat.js',
 			}
 		},
 		uglify: {
 			options: {
-				banner: '/* asdf.us/dither */\n'
+				banner: '/* asdf.us/shader */\n'
 			},
 			build: {
-				src: 'js/live.concat.js',
-				dest: 'js/live.min.js'
+				src: 'dist/app.concat.js',
+				dest: 'dist/app.min.js'
 			}
 		},
+    clean: {
+      release: ["dist/app.concat.js","dist/app.init.js"],
+    },
+    copy: {
+      build: {
+        files: [
+          {
+            nonull: true,
+            expand: true,
+            src: ['commands.html', 'tutorial.html', 'img/*'],
+            dest: "dist/",
+          },
+        ]
+      },
+      release: {
+        files: [
+          {
+            nonull: true,
+            expand: true,
+            cwd: 'dist/',
+            src: ['**'],
+            dest: process.env.HOME + '/asdf/shader/',
+          },
+        ]
+      },
+    },
 		watch: {
-			files: ['js/!(live.min|live.concat).js','js/vendor/*'],
+			files: ['dist/!(app.min|app.concat).js'],
 			tasks: ['default']
 		}
 	});
@@ -36,8 +95,11 @@ module.exports = function(grunt) {
 	grunt.loadNpmTasks('grunt-contrib-concat');
 	grunt.loadNpmTasks('grunt-contrib-uglify');
 	grunt.loadNpmTasks('grunt-contrib-watch');
-
+	grunt.loadNpmTasks('grunt-contrib-clean');
+	grunt.loadNpmTasks('grunt-contrib-copy');
+	grunt.loadNpmTasks('grunt-dentist');
 
 	// Default task(s).
-	grunt.registerTask('default', ['concat', 'uglify']);
+	grunt.registerTask('default', ['dentist:build', 'concat:build', 'uglify:build', 'copy:build']);
+	grunt.registerTask('install', ['default', 'clean', 'copy:release']);
 };
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..06b58cc
--- /dev/null
+++ b/README.md
@@ -0,0 +1,2 @@
+dither
+======
diff --git a/bin/pep-proxy.py b/bin/pep-proxy.py
new file mode 100755
index 0000000..b44bbbc
--- /dev/null
+++ b/bin/pep-proxy.py
@@ -0,0 +1,31 @@
+#!/usr/bin/env python3
+import http.server
+import urllib.request
+import re
+
+class MyHTTPRequestHandler(http.server.CGIHTTPRequestHandler ):
+  def end_headers(self):
+    self.send_my_headers()
+
+    http.server.CGIHTTPRequestHandler .end_headers(self)
+
+  def send_my_headers(self):
+    self.send_header("Access-Control-Allow-Origin", "*")
+
+  def do_GET(self):
+    if self.path[0:14] == "/cgi-bin/proxy":
+      self.copyfile(urllib.request.urlopen(self.path[15:]), self.wfile)
+    elif re.match(r'.+cgi-bin/im/shader/.+$', self.path):
+      self.path = re.sub(r'(.+cgi-bin/)im/shader/(.+)$', r'\1\2', self.path);
+      super().do_GET();
+    else:
+      super().do_GET()
+
+  def do_POST(self):
+    if re.match(r'.+cgi-bin/im/shader/.+$', self.path):
+      self.path = re.sub(r'(.+cgi-bin/)im/shader/(.+)$', r'\1\2', self.path);
+      super().do_POST();
+
+if __name__ == '__main__':
+  http.server.test(HandlerClass=MyHTTPRequestHandler)
+
diff --git a/bin/proxy.py b/bin/proxy.py
index 6171dab..b44bbbc 100755
--- a/bin/proxy.py
+++ b/bin/proxy.py
@@ -1,12 +1,13 @@
 #!/usr/bin/env python3
 import http.server
 import urllib.request
+import re
 
-class MyHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
+class MyHTTPRequestHandler(http.server.CGIHTTPRequestHandler ):
   def end_headers(self):
     self.send_my_headers()
 
-    http.server.SimpleHTTPRequestHandler.end_headers(self)
+    http.server.CGIHTTPRequestHandler .end_headers(self)
 
   def send_my_headers(self):
     self.send_header("Access-Control-Allow-Origin", "*")
@@ -14,9 +15,17 @@ class MyHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
   def do_GET(self):
     if self.path[0:14] == "/cgi-bin/proxy":
       self.copyfile(urllib.request.urlopen(self.path[15:]), self.wfile)
+    elif re.match(r'.+cgi-bin/im/shader/.+$', self.path):
+      self.path = re.sub(r'(.+cgi-bin/)im/shader/(.+)$', r'\1\2', self.path);
+      super().do_GET();
     else:
       super().do_GET()
 
+  def do_POST(self):
+    if re.match(r'.+cgi-bin/im/shader/.+$', self.path):
+      self.path = re.sub(r'(.+cgi-bin/)im/shader/(.+)$', r'\1\2', self.path);
+      super().do_POST();
+
 if __name__ == '__main__':
   http.server.test(HandlerClass=MyHTTPRequestHandler)
 
diff --git a/bin/sql_build.sql b/bin/sql_build.sql
new file mode 100644
index 0000000..8badd66
--- /dev/null
+++ b/bin/sql_build.sql
@@ -0,0 +1,17 @@
+create database IF NOT EXISTS asdfus;
+grant all privileges on asdfus.* to 'asdfus'@'localhost' identified by 'gTYgT&M6q';
+flush privileges;
+use asdfus;
+create table IF NOT EXISTS shaders (id int(11) AUTO_INCREMENT NOT NULL, PRIMARY KEY(id), script blob, image_url blob, thumbnail_url varchar(50), username varchar(30), time bigint(20) NOT NULL, shader_id int(11));
+
+create table IF NOT EXISTS shader_ids (id int(11) AUTO_INCREMENT NOT NULL, PRIMARY KEY(id), username varchar(40));
+alter table shaders modify username varchar(30);
+
+IF EXISTS (
+  SELECT * 
+  FROM   sys.columns 
+  WHERE name = 'shaders'
+)
+begin
+  alter table shaders add name varchar(40);
+end;
diff --git a/bower.json b/bower.json
index 32f4913..572d0d2 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
 	"name": "dither",
 	"version": "0.0.4",
-	"homepage": "http://asdf.us/dither/",
+	"homepage": "http://asdf.us/shader/",
 	"authors": [
 		"julie"
 	],
diff --git a/cgi-bin/js_check/__init__.pyc b/cgi-bin/js_check/__init__.pyc
index 5d23962..e3d1cac 100644
--- a/cgi-bin/js_check/__init__.pyc
+++ b/cgi-bin/js_check/__init__.pyc
diff --git a/cgi-bin/js_check/jsparser.pyc b/cgi-bin/js_check/jsparser.pyc
index 42b15b8..5ce5c81 100644
--- a/cgi-bin/js_check/jsparser.pyc
+++ b/cgi-bin/js_check/jsparser.pyc
diff --git a/cgi-bin/js_check/validate.pyc b/cgi-bin/js_check/validate.pyc
index 0905b8f..a3c7071 100644
--- a/cgi-bin/js_check/validate.pyc
+++ b/cgi-bin/js_check/validate.pyc
diff --git a/cgi-bin/proxy b/cgi-bin/proxy
new file mode 100755
index 0000000..9c2ca3d
--- /dev/null
+++ b/cgi-bin/proxy
@@ -0,0 +1,26 @@
+#!/usr/bin/python
+
+from os import environ as env
+import urllib.request
+import sys
+
+def error():
+  print("Content-type: text/html")
+  print()
+  print("HELLO!")
+
+def proxy(url,ext):
+  req = urllib.request.urlopen(url)
+  print("Content-type: image/" + ext)
+  print()
+  sys.stdout.flush()
+  sys.stdout.buffer.write( req.read() )
+
+path = env['QUERY_STRING']
+ext = path[-3:].lower()
+
+if path[0:4] == "http" and ext in ("gif","jpg","png","peg"):
+  proxy(path,ext)
+else:
+  error()
+
diff --git a/cgi-bin/save b/cgi-bin/save
index 4c87493..2bfb8c2 100755
--- a/cgi-bin/save
+++ b/cgi-bin/save
@@ -53,7 +53,7 @@ def strip_querystring(url):
   p = re.compile('^[^\?]*')
   return p.findall(url)[0]
 
-def store_shader_in_db(script, shader_id=False, image_url="",username="",name=""):
+def store_shader_in_db(script, shader_id=False, image_url="",username="",name="",width="0",height="0"):
   
   conn = MySQLdb.connect(host= "127.0.0.1",
                     user="asdfus",
@@ -66,8 +66,8 @@ def store_shader_in_db(script, shader_id=False, image_url="",username="",name=""
       shader_id = conn.insert_id()
       conn.commit()
       
-    x.execute("""INSERT INTO shaders (script, image_url, username, name, remote_addr, time, shader_id)  values (%s,%s,%s,%s,%s,%s,%s)""" ,
-      (script, image_url, username, name, REMOTE_IP, NOW, shader_id)
+    x.execute("""INSERT INTO shaders (script, image_url, username, name, remote_addr, time, shader_id, width, height)  values (%s,%s,%s,%s,%s,%s,%s,%s,%s)""" ,
+      (script, image_url, username, name, REMOTE_IP, NOW, shader_id, width, height)
       );
     last_id = conn.insert_id()
     conn.commit()
@@ -97,10 +97,13 @@ def main():
     error("Cannot save this shader:%s" % test_failure)
 
   shader_version_id = store_shader_in_db(
-    form['script'].value, form['shader_id'].value, 
+    form['script'].value,
+    form['shader_id'].value, 
     image_url, 
     form['username'].value,
-    form['name'].value);
+    form['name'].value,
+    form['width'].value,
+    form['height'].value);
   if not shader_version_id:
     error('DB Error')
   else:
diff --git a/cgi-bin/test.cgi b/cgi-bin/test.cgi
new file mode 100755
index 0000000..e33ee3e
--- /dev/null
+++ b/cgi-bin/test.cgi
@@ -0,0 +1,13 @@
+#!/usr/bin/perl 
+ print "Content-type: text/html\n\n";
+ print <<HTML;
+ <html>
+<head>
+ <title>A Simple Perl CGI</title>
+ </head>
+ <body>
+ <h1>A Simple Perl CGI</h1>
+ <p>Hello World</p>
+ </body>
+HTML
+ exit;
diff --git a/cgi-bin/thumbnail_upload b/cgi-bin/thumbnail_upload
index 8ee9866..ab12c66 100644
--- a/cgi-bin/thumbnail_upload
+++ b/cgi-bin/thumbnail_upload
@@ -145,7 +145,7 @@ sub upload_to_AmazonS3{
 
 sub error{
   my $message = shift;
-  my $resp = { success => "false", "error" => $message };
+  my $resp = { success => JSON::false, "error" => $message };
   print JSON->new->encode($resp);
   exit 1;
 }
@@ -174,7 +174,7 @@ sub main{
     error( "problem adding value to db");
   }
   my $resp = {
-    success => "true", 
+    success => JSON::true, 
     url => $thumbnail_url, 
     filesize => $filesize 
   };
diff --git a/cgi-bin/upload b/cgi-bin/upload
new file mode 100755
index 0000000..4f4012c
--- /dev/null
+++ b/cgi-bin/upload
@@ -0,0 +1,201 @@
+#!/usr/bin/perl
+
+use strict; 
+use CGI::Carp qw(fatalsToBrowser);
+
+use DBI;
+use Digest::MD5;
+use File::MMagic;
+use CGI;
+use File::Slurp;
+use Data::Dumper;
+use Amazon::S3;
+use Digest::SHA1;
+use JSON
+#set the temporary directory here
+my $upload_dir = '/tmp/';
+#maximum filesize goes here
+my $maxFileSize = 2.2 * 1024 * 1024;
+
+#aws credentials here
+my $aws_access_key_id     = "AKIAIR53VPBXKJMXZIBA";
+my $aws_secret_access_key = "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";
+
+#SQL CONNECTIONS
+my $sql_username = "asdfus";
+my $sql_dbname = "asdfus";         
+my $sql_passwd = "gTYgT&M6q";
+my $db_tag = "shader";
+
+my $time_now = time();
+
+
+my $IN = new CGI;
+my $resp = {};  
+
+sub get_postdata{
+    return $IN->param('POSTDATA');
+}
+
+#qq file is the default name for the file parameter when using qq upload. change if necessary
+sub get_filedata{
+    my $file = $IN->upload('qqfile');
+    if ($file){
+      return read_file( $file, binmode => ':raw' ) ;
+    }else{
+      return
+    }
+}
+
+
+sub get_filetype{
+  my $filedata = shift;
+  my $mm = new File::MMagic;
+  my $mtype = $mm->checktype_contents($filedata);
+  if ($mtype =~ m@^image/(gif|png|jpeg)@gi){
+    return $1;
+  }else{
+    return undef; 
+  }
+}
+
+
+sub make_photoblaster_directory{
+  return substr(Digest::SHA1->sha1_hex($time_now), 0, 2);
+}    
+sub make_photoblaster_filename{
+  my $filename = $IN->param("filename") || sprintf("%s_%s", "im", $time_now);
+  $filename =~ s/[^-a-zA-Z0-9]/-/g;
+  $filename =~ s/-+/-/g;
+  $filename =~ s/\....$//;
+  $filename =~ s/^-//g;
+  return $filename;
+}
+sub make_photoblaster_url{
+  my $photoblaster_directory = shift;
+  my $filename = shift;
+  return sprintf("http://i.asdf.us/im/%s/%s", $photoblaster_directory, $filename);
+}
+sub add_to_photoblaster_db{
+  my $pb_dir = shift;
+  my $filename = shift;
+  our $dbh = DBI->connect("DBI:mysql:$sql_dbname", $sql_username, $sql_passwd);
+  unless($dbh){  return undef && print STDERR "Could not connect to database: $DBI::errstr"};
+  my $execute = $dbh->do(
+    "INSERT INTO im_cmd ".
+    "(date, name, dir, newfile, tag, remote_addr)".
+    "VALUES(?,?,?,?,?,?);",
+    undef,
+    $time_now,
+    $IN->param("username") || "",
+    $pb_dir,
+    $filename,
+    $db_tag,
+    $ENV{REMOTE_ADDR} || '127.0.0.1'
+  );
+  return $execute;
+}
+
+sub write_to_file{
+  my $filepath = shift;
+  my $filedata = shift;
+  write_file( $filepath, {binmode => ':raw'}, $filedata ) or return undef;
+  return 1;
+}
+
+sub test_gif_size{
+  my $filepath = shift;
+  my $check_size = -s "$filepath";
+  print STDERR qq|Main filesize: $check_size  Max Filesize: $maxFileSize nn|;
+  return $check_size;
+}
+
+sub optimize_gif{
+  my $filepath = shift;
+  my $tmpname = $filepath.".tmp";
+  #because system gives the unix exit code
+  not system("gifsicle -O2 --colors=256 $filepath > $tmpname") or return undef;
+  not system("mv -f $tmpname $filepath") or return undef;
+  return 1;
+}
+
+sub upload_to_AmazonS3{  
+  my $keyname = shift;
+  my $value = shift;
+  my $s3 = Amazon::S3->new(
+      {   aws_access_key_id     => $aws_access_key_id,
+          aws_secret_access_key => $aws_secret_access_key
+      }
+  );
+  my $bucket = $s3->bucket("i.asdf.us");
+  $bucket->add_key(
+      $keyname, $value,
+      {   content_type        => 'image/gif',
+      }
+  );
+  return $bucket;
+}
+
+sub delete_file{
+  my $filepath = shift;
+  unlink($filepath); 
+}
+sub error{
+  my $message = shift;
+
+  my $resp = { success => "false", error => $message };
+  print JSON->new->encode($resp);
+  exit 1;
+}
+
+sub main{
+  print $IN->header();
+  
+  my $filedata = get_postdata() || get_filedata() || read_file("/tmp/tt.gif", binmode=>":raw");
+  unless($filedata){ error("NO DATA RECIEVED") };
+  my $filetype = get_filetype($filedata);
+  unless($filetype){ error("BAD FILE TYPE")};
+
+  my $photoblaster_directory = make_photoblaster_directory();
+  my $photoblaster_filename = sprintf("%s.%s", make_photoblaster_filename(), $filetype);
+
+  my $upload_dir = "/tmp/";
+  my $filepath = $upload_dir . $photoblaster_filename;
+
+  $db_tag = $IN->param("tag") || $db_tag;
+
+  if ($filetype =~ /gif$/i){
+    unless(write_to_file($filepath, $filedata)){
+      error("UNABLE TO WRITE TO FILE");
+    }
+    unless (optimize_gif($filepath)){
+      error("UNABLE TO OPTIMIZE GIF");
+    }
+    my $filedata = read_file($filepath, binmode=>":raw");
+  }
+
+  my $filesize = length($filedata);
+  if ($filesize < 1) {
+    error( "EMPTY FILE"); 
+  } elsif ($filesize > $maxFileSize) {
+    error("FILE TOO LARGE");
+  }
+
+  unless(upload_to_AmazonS3(sprintf("im/%s/%s", $photoblaster_directory, $photoblaster_filename), $filedata)){
+    error("UNABLE TO UPLOAD TO AMAZONS3");
+  };
+  delete_file($filepath);
+  my $photoblaster_url = make_photoblaster_url($photoblaster_directory, $photoblaster_filename);
+  unless(add_to_photoblaster_db($photoblaster_directory, $photoblaster_filename)){
+    print STDERR "problem adding value to db";
+  }
+  my $resp = {
+    success => "true", 
+    url => $photoblaster_url, 
+    filesize =>  $filesize 
+  };
+  print JSON->new->encode($resp);
+}
+
+main();
+
diff --git a/cgi-bin/view b/cgi-bin/view
index f7435f3..6bb55b4 100755
--- a/cgi-bin/view
+++ b/cgi-bin/view
@@ -6,7 +6,7 @@ use feature qw/switch/;
 use CGI;
 
 my $IN = new CGI;
-print $IN->header();
+print $IN->header(-type  =>  'application/json');
 
 our $json =  JSON->new->allow_nonref;
 my $sql_username = "asdfus";
@@ -72,40 +72,41 @@ sub main{
   }
   my $res;
   
-  given($params->{f}){
-    when(/info/){ 
+  for($params->{f}){
+    /info/ && do {
       unless(defined $params->{id}) { not_specified_error("id"); };
       $res = mysql_retrieve('SELECT * FROM shaders WHERE id = ?', $params->{id});
-    }
-    when(/all/){ 
+      last;
+    };
+    /all/ && do { 
       $res =  mysql_retrieve('select * from shaders order by id'); 
-    }
-    when(/range/){
+      last;
+    };
+    /range/ && do {
       unless (defined $params->{limit}){ not_specified_error("limit") };
-      if (defined $params->{last}){
-        $res = mysql_retrieve(sprintf(' select * from shaders order by id desc limit %s , %s', $param->{last}, $params->{limit}));
-      }else{
-        $res = mysql_retrieve(sprintf(' select * from shaders order by id desc limit 0 , %s', $params->{limit}));
-      }
-    }
-    when(/history/){ 
+      $res = mysql_retrieve(' select * from shaders order by id desc limit ? , ?', ($params->{last} || 0), $params->{limit});
+      last;
+    };
+    /history/ && do{ 
       unless(defined $params->{id}) { not_specified_error("id"); };
       $res = mysql_retrieve('SELECT * FROM shaders WHERE shader_id = ? order by id', $params->{id});
-    }
-    when(/username/){
+      last;
+    };
+    /username/ && do{
       unless(defined $params->{username}) { not_specified_error("username") };
       $res = mysql_retrieve('select * from shaders where username = ?', $params->{username}); 
-    }
-    when(/list_users/){
+      last;
+    };
+    /list_users/ && do{
       $res = mysql_retrieve('select distinct username from shaders;');
-    }
-    when(/originals/){
+      last;
+    };
+    /originals/ && do{
       $res =  mysql_retrieve('select shaders.* from shader_ids cross join shaders on shader_ids.id = shaders.shader_id'); 
-    }
-    default {
-      response({ ERROR => "Function parameter f improperly defined"}, $callback);
-      exit(1);
-    }; 
+      last; 
+    };
+    response({ ERROR => "Function parameter f improperly defined"}, $callback);
+    exit(1);
   }
   response($res, $callback);
 }
diff --git a/instructions.html b/commands.html
index dff99d8..df9b072 100644
--- a/instructions.html
+++ b/commands.html
@@ -37,6 +37,7 @@ pixel(x,y) == 4*(y*w+h)
 dist(x,y,a,b)
 angle(x,y,a,b)
 rand(n), randint(n)
+randrange(a,b)
 choice(array)
 deg(radians), rad(degrees)
 
diff --git a/dither-picker.html b/dither-picker.html
index 5e9bff9..fe210ef 100644
--- a/dither-picker.html
+++ b/dither-picker.html
@@ -16,7 +16,7 @@
     <button id="gallery-search">DUMP SEARCH</button>
   </form>
   <button id="gallery-random">IM RANDOM</button>
-  <span id="status"></span>
+  <span class="status"></span>
   <div id="gallery-images"></div>
 </div>
 
@@ -123,7 +123,7 @@ ui.dither = function (frame){
   return cc
 }
 
-function status(s){ $("#status").html(s); console.log(s) }
+function status(s){ $(".status").html(s); console.log(s) }
 
 $(ui.init)
 
diff --git a/img/palette.gif b/img/palette.gif
new file mode 100644
index 0000000..39c134f
--- /dev/null
+++ b/img/palette.gif
diff --git a/index.html b/index.html
index f622cce..5d51485 100644
--- a/index.html
+++ b/index.html
@@ -2,60 +2,261 @@
 <html>
 <head>
 <title>Dither</title>
+<style type="text/css">
+* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+html,body{width:100%;height:100%;margin:0;padding:0;}
+#colors { float: left; width: 16px; height: 100%; background: #eee; padding: 16px 0; margin: 0 10px 0 15px; }
+#body { float: left; padding: 20px 10px; background-color:rgba(255,255,255,0.95);height:100%;}
+#palette,#colors div { cursor: pointer; }
+#dice { font-size: 4em; line-height: 0.8em; position: relative; top: -30px; left: 10px; cursor: pointer; box-shadow: 0 0 4px #b8d6fb,0 0 4px #b8d6fb,0 0 4px #b8d6fb;}
+#dice {outline:0; }
+h1 { font-size: 26px; font-weight: normal }
+</style>
 </head>
 <body>
-<div>
-<button id="random">random</button>
-<button id="pattern2">pattern2</button>
-<button id="pattern3">pattern3</button>
-<button id="pattern4">pattern4</button>
-<button id="pattern2Lite">pattern2lite</button>
-<button id="pattern3Lite">pattern3lite</button>
-<button id="pattern4Lite">pattern4lite</button>
-<button id="floydSteinberg">floyd-steinberg</button>
-<button id="right">right</button>
+
+<div id="colors">
 </div>
-<div id="images"></div>
-</body>
+
+<div id="body">
+<img src="img/palette.gif" id="palette">
+<button id="dice">&#9883;</button>
+<button id="upload">&rarr;</button>
+<input type="text" id="uploaded-url">
+<span id="status"></span>
+
+<h1>dither</h1>
+<a target="_blank" href="dither-picker.html"><button>dither-picker</button></a>
+...
+<a target="_blank" href="threshold.html"><button>threshold</button></a>
+<a target="_blank" href="pattern.html"><button>pattern</button></a>
+<a target="_blank" href="halftone.html"><button>halftone</button></a>
+
+<h1>shader</h1>
+<a target="_blank" href="/shader/"><button>shader-combo</button></a>
+...
+<a target="_blank" href="shader-demo.html"><button>shader-demo</button></a>
+<a target="_blank" href="shader-animate.html"><button>shader-animate</button></a>
+<a target="_blank" href="shader-gif.html"><button>shader-gif</button></a>
+<a target="_blank" href="shader-picker.html"><button>shader-picker</button></a>
+<!--<a target="_blank" href="shader-localstorage.html"><button>shader-localstorage</button></a>-->
+<a target="_blank" href="shader-api.html"><button>shader-api</button></a>
+
+<h1>photoblaster</h1>
+<a target="_blank" href="/im/"><button>photoblaster</button></a>
+<a target="_blank" href="/imgradient/"><button>im-gradient</button></a>
+<a target="_blank" href="/imgrid/"><button>im-grid</button></a>
+<a target="_blank" href="/imbreak/"><button>im-break</button></a>
+
+<h1>etc..</h1>
+<a target="_blank" href="/gif-recorder/"><button>gif-recorder</button></a>
+<a target="_blank" href="/neighbor/"><button>neighbor</button></a>
+...
+<a target="_blank" href="/dendrite/"><button>dendrite</button></a>
+<a target="_blank" href="/dendrite/dendrite-life.html"><button>dendrite-life</button></a>
+<a target="_blank" href="/mandel/mandel5.html"><button>mandel5</button></a>
+<a target="_blank" href="http://glitchyplop.com/"><button>sortpixels</button></a>
+<a target="_blank" href="/strobe/"><button>strobe</button></a>
+</div>
+
 <script type="text/javascript" src="js/vendor/canvasquery.js"></script>
-<script type="text/javascript" src="js/canvasquery.dither.js"></script>
+<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="js/vendor/dataUriToBlob.js"></script>
+<script type="text/javascript" src="js/vendor/FileSaver/FileSaver.js"></script>
+<script type="text/javascript" src="js/user.js"></script>
+<script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="js/save.js"></script>
 <script type="text/javascript">
-var algo = 'random';
-var urls = ["img/abyss.png","img/building.png","img/gradient.jpg"]
-var imgs = []
-var complete = 0
-urls.forEach(function(src){
-  var img = new Image ()
-  img.onload = ready
-  img.src = src
-  imgs.push(img)
-  if (img.complete) ready()
-})
-function ready(){
-  complete += 1
-  if (complete < imgs.length) return;
-  var buttons = document.getElementsByTagName("button")
-  for (var i = 0; i < buttons.length; i++) {
-    (function(n){
-      buttons[n].onclick = function(){
-        algo = buttons[n].id;
-        build()
-      }
-    })(i)
+
+//
+// color
+
+function Color (opt) {
+  if (opt.length == 3) {
+    this.r = opt[0];
+    this.g = opt[1];
+    this.b = opt[2];
+    this.a = 1;
+  }
+  else if (opt.length == 4) {
+    this.r = opt[0];
+    this.g = opt[1];
+    this.b = opt[2];
+    this.a = opt[3];
   }
-  build()
 }
-function build(){
-  document.getElementById("images").innerHTML = ""
-  imgs.forEach(dither)
+Color.prototype.toString = function(){
+  return "rgba(" + this.r + "," + this.g + "," + this.b + "," + this.a + ")";
+}
+Color.prototype.rgb = function(){
+  return [ this.r, this.g, this.b ];
+}
+Color.prototype.rgba = function(){
+  return [ this.r, this.g, this.b, this.a ];
+}
+Color.prototype.hsl = function(){
+}
+Color.prototype.copy = function(){
+  return new Color( this.rgba() );
+}
+Color.prototype.alpha = function(a){
+  var c = this.copy()
+  c.a = a;
+  return c;
+}
+Color.prototype.swatch = function(){
+	var el = document.createElement("div");
+	el.style.className = "swatch";
+	el.style.width = 16 + "px";
+	el.style.height = 16 + "px";
+	el.style.backgroundColor = this.toString();
+	$(el).data("color", this);
+	return el;
+}
+
+var colors = {
+  red: new Color([ 255,0,0 ]),
+  blue: new Color([ 0,0,255 ]),
+  black: new Color([ 0,0,0 ]),
+  green: new Color([ 0,128,0 ]),
+  cyan: new Color([ 0,255,255 ]),
+  yellow: new Color([ 255,255,0 ]),
+  peru: new Color([ 205,133,63 ]),
+}
+
+
+//
+// point
+
+function Point(e, offset) {
+	if (e && offset) {
+		this.x = e.pageX - offset.left;
+		this.y = e.pageY - offset.top;
+	}
 }
-function dither(img){
-  var w = img.naturalWidth, h = img.naturalHeight;
-  var cc = cq(w, h)
-  cc.drawImage(img, 0, 0, w, h);
-  cc[algo + "Dither"]( )
-  cc.appendTo("#images")
+Point.prototype.add = function(p) {
+	this.x += p.x;
+	this.y += p.y;
 }
+Point.prototype.subtract = function(p) {
+	this.x -= p.x;
+	this.y -= p.y;
+}
+Point.prototype.quantize = function(x, y) {
+	this.x = Math.floor( this.x / x ) * x;
+	this.y = Math.floor( this.y / y ) * y;
+}
+
+
+//
+// util.js
+
+function trim (s) {
+	return s.replace(/^\s+/, "").replace(/\s+$/, "");
+}
+function strip (s) {
+	return trim(s).replace(/\W+/, "");
+}
+function sanitize (s) {
+	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;");
+}
+function scrollToBottom (el) {
+	try { $(el).scrollTop( $(el)[0].scrollHeight ) }
+	catch (err) { }
+}
+var Trig = {
+  distanceBetween2Points: function ( point1, point2 ) {
+    var dx = point2.x - point1.x;
+    var dy = point2.y - point1.y;
+    return Math.sqrt( Math.pow( dx, 2 ) + Math.pow( dy, 2 ) );
+  },
+  angleBetween2Points: function ( point1, point2 ) {
+    var dx = point2.x - point1.x;
+    var dy = point2.y - point1.y;
+    return Math.atan2( dx, dy );
+  },
+  magnitude: function (point) {
+    return Math.sqrt( Math.pow( point.x, 2 ) + Math.pow( point.y, 2 ) );
+  }
+}
+
+function fib (f) { for (var i = 1, n = 1; n < 200; i++, n += i) f(n) }
+function random() { return Math.random() }
+function rand(x) { return Math.random() * x }
+function randint(x) { return Math.floor(Math.random() * x) }
+function clamp(x,a,b) { return Math.min(Math.max(x,a),b) }
+function choice(a){ return a[ randint(a.length) ] }
+
+
+//
+// main
+
+var palette = document.querySelector("#palette")
+palette.addEventListener("load", load)
+if (palette.complete) load()
+
+function load(){
+	console.log("hello");
+	user.init()
+	var offset = $("#palette").offset();
+	var paletteImg = $("#palette")[0];
+	var palette = cq(paletteImg);
+	var pattern, mask;
+	var patternURI;
+	var color = new Color( 0, 0, 0 );
+
+	// $("body").append(palette.canvas);
+
+	$("#palette").click(function(e){
+		// they are all 8x8
+		// the first one starts at (15, 5), next one is 16 pixels down or to the right
+		// there are 16 rows and 6 columns, so 92 patterns total
+		var point = new Point(e, offset);
+		pick(point);
+	})
+	function pick(point){
+		point.subtract({ x: 15, y: 5 });
+		point.quantize( 18, 16 );
+		point.add({ x: 15, y: 5 });
+
+		pattern = palette.clone().crop( point.x, point.y, 8, 8 );
+		mask = pattern.colorToMask("#fff");
+		pattern.applyMask(mask);
+		patternURI = pattern.clone().blend( color.toString(), "screen", 1.0 ).canvas.toDataURL("image/png");
+		document.body.style.backgroundImage = 'url(' + patternURI + ')';
+	}
+
+	swatches = []
+	for (var i in colors) {
+		var swatch = colors[i].swatch();
+		swatches[i] = swatch
+		$("#colors").append(swatch);
+		swatch.onclick = function(){
+			color = $(this).data("color");
+			p = cq(paletteImg);
+			patternURI = pattern.clone().blend( color.toString(), "screen", 1.0 ).resizePixel(1 << randint(6)).canvas.toDataURL("image/png");
+			document.body.style.backgroundImage = 'url(' + patternURI + ')';
+		}
+	}
+
+	function dice() {
+		var p = new Point()
+		p.x = randint(palette.canvas.width-20)+20
+		p.y = randint(palette.canvas.height)
+		pick(p)
+		swatches[choice(["red","yellow"])].onclick()
+	}
+	$("#dice").click(dice)
+	dice()
+	$("#upload").click(function(){
+		if (patternURI) {
+			upload(patternURI, (+ new Date()) + "-" + user.username + "-dither.png", "dither")
+		}
+	})
+}
+$("#dice").focus()
+$(window).focus(function(){ $("#dice").focus() })
 </script>
+</body>
 </html>
 
diff --git a/js/api/gallery.js b/js/api/gallery.js
index 92764c6..8f9914b 100644
--- a/js/api/gallery.js
+++ b/js/api/gallery.js
@@ -22,37 +22,59 @@ shader_gallery.bind = function(){
 
 	ShaderAPI.list_users(function(err, users){
 		var $el = $("#pick-user").empty()
-		for (var i in users) {
+
+		var $option = $("<option>")
+		var username = "users"
+		$option.val("LATEST").html(username)
+		$el.append( $option )
+
+		users.sort(function(a,b){
+			return a.username < b.username ? -1 : a.username > b.username ? 1 : 0
+		}).forEach(function(user){
 			var $option = $("<option>")
-			var username = users[i].username
+			var username = user.username
 			$option.val(username).html(username)
 			$el.append( $option )
-		}
-	})
+		})
+	});
 	
 	$(document).on("change", "#pick-user", function(){
 		var name = $(this).val()
-		ShaderAPI.username(name, load_shaders)
+		if (name == "LATEST") {
+			ShaderAPI.latest(load_shaders)
+		}
+		else {
+			ShaderAPI.username(name, load_shaders)
+		}
 	})
 	$(document).on("click", ".shader", function(){
 		run_shader( $(this).data("shader") )
 	})
 }
 
-function new_shader(){
+function new_shader(opt){
+	opt = opt || {}
+	shader_id_root = null
 	run_shader({
 		id: "",
 		shader_id: "",
 		image_url: $("#url").val(),
-		script: "",
-		name: ""
+		script: opt.shader || "",
+		name: opt.name || ""
 	})
 }
 function run_shader(shader_object){
 	console.log(shader_object)
 	shader_id_root = shader_object.shader_id
 	if ($("#persist-image:checked").length) {
+		var new_w = parseInt(shader_object.width, 10)
+		var new_h = parseInt(shader_object.height, 10)
 		$("#url").val( shader_object.image_url )
+		if (new_w && new_h) {
+			preserve_dimensions = true
+			actual_w = w = new_w
+			actual_h = h = new_h
+		}
 		load()
 	}
 	$("#shader").val(shader_object.script)
@@ -75,10 +97,12 @@ function load_shaders(err, shaders){
 function display_shader(shader_object){
 	var $shader = $("<div>").addClass("shader")
 	$shader.data("shader", shader_object)
+	$shader.data("id", shader_object.id)
 	var html = shader_gallery_template
 	for (var field in shader_object) {
 		html = html.replace("{" + field + "}", shader_object[field])
 	}
 	$shader.html(html)
+	shader_object.id && $shader.data("id", shader_object.id)
 	return $shader;
 }
diff --git a/js/api/get.js b/js/api/get.js
index ae06dbd..742d41f 100644
--- a/js/api/get.js
+++ b/js/api/get.js
@@ -1,5 +1,5 @@
 ;var ShaderAPI = {}
-ShaderAPI.limit = 24
+ShaderAPI.limit = 50
 
 // info - fetch a single shader
 //   id: shader id
diff --git a/js/api/localstorage.js b/js/api/localstorage.js
index eeae658..835d139 100644
--- a/js/api/localstorage.js
+++ b/js/api/localstorage.js
@@ -5,8 +5,8 @@ local_shaders.init = function(){
 }
 local_shaders.bind = function(){
   local_shaders.buttons = {}
-  if ('SHADERS' in window) {
-    local_shaders.bindButtons( window.SHADERS )
+  if ('EXAMPLE_SHADERS' in window) {
+    local_shaders.bindButtons( window.EXAMPLE_SHADERS )
   }
   local_shaders.bindButtons( local_shaders.getShaders() )
   document.getElementById("add-shader").addEventListener("click", local_shaders.save, false)
diff --git a/js/api/set.js b/js/api/set.js
index 92cc071..19f3f26 100644
--- a/js/api/set.js
+++ b/js/api/set.js
@@ -6,18 +6,23 @@ function save_shader(){
 		image_url: $("#url").val(),
 		username: user.username,
 		name: $("#shader-name").val() || "",
-		shader_id: shader_id_root
+		shader_id: shader_id_root,
+		width: $("#width").int() || "",
+		height: $("#height").int() || ""
 	}
-	var blob = dataUriToBlob(cc.clone().resize(200,200).canvas.toDataURL("image/png"))
+	var thumb = make_thumbnail()
 
+	status('saving..')
 	console.log(params)
-	$.post("http://asdf.us/cgi-bin/im/shader/save", params, function(resp){
+	$.post("/cgi-bin/im/shader/save", params, function(resp){
 		console.log(resp);
 		data = JSON.parse(resp)
 		if (data.ERROR){
+			status('error saving shader')
 			alert(data.ERROR)
 			return false
 		}
+		status('uploading thumbnail')
 		if (! shader_id_root) {
 			shader_id_root = data.id;
 		}
@@ -28,23 +33,35 @@ function save_shader(){
 		$shader = display_shader(params)
 		$("#shader-gallery").prepend($shader)
 		
-		var form = new FormData();
+		save_thumbnail(data.id, thumb, $shader)
+	})
+}
 
-		form.append("id", data.id);
-		form.append("qqfile", blob);
-		$.ajax({
-			url: "http://asdf.us/cgi-bin/im/shader/thumbnail_upload",
-			type: "POST",
-			data: form,
-			processData: false,
-			contentType: false,
-		}).done(function(resp){
-			console.log(resp);
-			var data = JSON.parse(resp)
-			if (data.success) {
-				$shader.find("img").attr("src", data.url)
-			}
-		});
+function make_thumbnail(){
+	return dataUriToBlob(cc.clone().resize(200,200).canvas.toDataURL("image/png"))
+}
 
-	})
+function save_thumbnail(id, thumb, $shader){
+	if (! id || id == "") return
+	
+	thumb = thumb || make_thumbnail()
+	
+	var form = new FormData();
+
+	form.append("id", id);
+	form.append("qqfile", thumb);
+	$.ajax({
+		url: "/cgi-bin/im/shader/thumbnail_upload",
+		type: "POST",
+		data: form,
+		processData: false,
+		contentType: false,
+	}).done(function(resp){
+		console.log(resp);
+		status('')
+		var data = JSON.parse(resp)
+		if (data.success) {
+			$shader.find("img").attr("src", data.url)
+		}
+	});
 }
diff --git a/js/asdf.js b/js/asdf.js
index 53222e8..6006eea 100644
--- a/js/asdf.js
+++ b/js/asdf.js
@@ -1,7 +1,7 @@
 //
 // asdf .. asdf.us/im search api
 
-var asdf = { fetching: false }
+var asdf = { fetching: false, fetched: false }
 asdf.random = function (e){
   status("fetching random photoblasts")
   e && e.preventDefault();
@@ -13,7 +13,7 @@ asdf.random = function (e){
 
 asdf.fetch = function (opt){
   if (asdf.fetching) return;
-  asdf.fetching = true;
+  asdf.fetching = true
   var params = {random:1};
   $.ajax({
     'url': "http://asdf.us/cgi-bin/im/list",
@@ -21,6 +21,7 @@ asdf.fetch = function (opt){
     'dataType': "jsonp",
     'success': function(urls){
       asdf.fetching = false;
+			asdf.fetched = true
       opt.success && opt.success(urls)
     },
     'error': opt.error || function(err){
diff --git a/js/camera.js b/js/camera.js
new file mode 100644
index 0000000..ef4898a
--- /dev/null
+++ b/js/camera.js
@@ -0,0 +1,67 @@
+var camera = (function(){
+  var loaded = false, video
+
+  navigator.getMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.msGetUserMedia);
+
+  if (! navigator.getMedia) {
+    $("#camera").hide()
+    return
+  }
+
+  $("#camera").click(load)
+  
+  function load(){
+    if (! loaded) {
+      build()
+    }
+    else {
+      ready()
+    }
+    window.gif = window.img = null
+  }
+
+  function ready(){
+    // defer here if necessary.. firefox fires "canplay" before videoWidth is available
+    if (! video.videoWidth) {
+      setTimeout(ready, 50)
+      return
+    }
+    cc.canvas.width = actual_w = w = min(video.videoWidth, 400)
+    cc.canvas.height = actual_h = h = video.videoHeight / (video.videoWidth/w)
+    video.setAttribute('width', video.videoWidth)
+    video.setAttribute('height', video.videoHeight)
+    window.gif = window.img = null
+    window.cam = video
+  }
+  
+  function build(){
+    video = document.createElement("video")
+    navigator.getMedia({
+        video: true,
+        audio: false
+      },
+      function(stream) {
+        if (navigator.mozGetUserMedia) {
+          video.mozSrcObject = stream;
+        } else {
+          var vendorURL = window.URL || window.webkitURL;
+          video.src = vendorURL.createObjectURL(stream);
+        }
+        video.play();
+      },
+      function(err) {
+        console.log("An error occured! " + err);
+      }
+    )
+
+    video.addEventListener('canplay', function(e){
+      if (! loaded) {
+        loaded = true
+        ready()
+      }
+    }, false);
+  }
+})()
diff --git a/js/color.js b/js/color.js
index ba60db7..215c3e6 100644
--- a/js/color.js
+++ b/js/color.js
@@ -16,11 +16,11 @@ function rgb2xyz(rgb){
   var var_G = ( rgb[1] / 255 )        //G from 0 to 255
   var var_B = ( rgb[2] / 255 )        //B from 0 to 255
 
-  if ( var_R > 0.04045 ) var_R = ( ( var_R + 0.055 ) / 1.055 ) ^ 2.4
+  if ( var_R > 0.04045 ) var_R = Math.pow( ( var_R + 0.055 ) / 1.055, 2.4)
   else                   var_R = var_R / 12.92
-  if ( var_G > 0.04045 ) var_G = ( ( var_G + 0.055 ) / 1.055 ) ^ 2.4
+  if ( var_G > 0.04045 ) var_G = Math.pow( ( var_G + 0.055 ) / 1.055, 2.4)
   else                   var_G = var_G / 12.92
-  if ( var_B > 0.04045 ) var_B = ( ( var_B + 0.055 ) / 1.055 ) ^ 2.4
+  if ( var_B > 0.04045 ) var_B = Math.pow( ( var_B + 0.055 ) / 1.055, 2.4)
   else                   var_B = var_B / 12.92
 
   var_R = var_R * 100
@@ -57,7 +57,7 @@ function xyz2rgb(xyz){
 
 function xyz2hunterlab (XYZ) {
   var X = XYZ[0]
-  var Y = XYZ[1]
+  var Y = XYZ[1] || 1e-6  // otherwise divide-by-zero error when converting rgb(0,0,0)
   var Z = XYZ[2]
   var L = 10 * sqrt( Y )
   var a = 17.5 * ( ( ( 1.02 * X ) - Y ) / sqrt( Y ) )
@@ -107,16 +107,16 @@ function cielab2xyz (lab){
   var var_X = lab[1] / 500 + var_Y
   var var_Z = var_Y - lab[2] / 200
 
-  if ( var_Y^3 > 0.008856 ) var_Y = Math.pow(var_Y, 3)
+  if ( Math.pow(var_Y, 3) > 0.008856 ) var_Y = Math.pow(var_Y, 3)
   else                      var_Y = ( var_Y - 16 / 116 ) / 7.787
-  if ( var_X^3 > 0.008856 ) var_X = Math.pow(var_X, 3)
+  if ( Math.pow(var_X, 3) > 0.008856 ) var_X = Math.pow(var_X, 3)
   else                      var_X = ( var_X - 16 / 116 ) / 7.787
-  if ( var_Z^3 > 0.008856 ) var_Z = Math.pow(var_Z, 3)
+  if ( Math.pow(var_Z, 3) > 0.008856 ) var_Z = Math.pow(var_Z, 3)
   else                      var_Z = ( var_Z - 16 / 116 ) / 7.787
 
-  var X = REF_X * var_X     //ref_X =  95.047     Observer= 2°, Illuminant= D65
-  var Y = REF_Y * var_Y     //ref_Y = 100.000
-  var Z = REF_Z * var_Z     //ref_Z = 108.883
+  var x = REF_X * var_X     //ref_X =  95.047     Observer= 2°, Illuminant= D65
+  var y = REF_Y * var_Y     //ref_Y = 100.000
+  var z = REF_Z * var_Z     //ref_Z = 108.883
 
   return [x,y,z]
 }
diff --git a/js/error.highlight.js b/js/error.highlight.js
index 0b478e2..c2d3947 100644
--- a/js/error.highlight.js
+++ b/js/error.highlight.js
@@ -47,7 +47,7 @@ var reposition_highlight = function(){
   dom.highlight.style.left = pos.left + "px"
 
   var y_pos = pos.top + height_until_error - dom.textarea.scrollTop
-  dom.highlight.style.top = y_pos + dom.html.scrollTop + "px"
+  dom.highlight.style.top = y_pos + dom.html.scrollTop + dom.body.scrollTop + "px"
 
   var height_of_highlight = height_with_error;
 
@@ -132,11 +132,12 @@ var create_el_highlight = function(){
 
 var init = function(){
   dom.html = document.querySelector('html')
+  dom.body = document.querySelector('body')
   calc_textarea_style()
   create_el_highlight()
   create_el_textmeasure()
   scrollbar_width = calc_scrollbar_width()
-  textarea.addEventListener('scroll', reposition_highlight)
+  dom.textarea.addEventListener('scroll', reposition_highlight)
 }
 
 // exports
diff --git a/js/frames.js b/js/frames.js
index c9c844d..163e899 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -1,3 +1,4 @@
+var frame_thumb_size = 93
 
 var frame_editor = {}
 
@@ -29,9 +30,14 @@ frame_editor.bind = function(){
   $("#render").click(render)
   $("#save").click(save)
   $("#upload").click(upload)
+
+	$("#background").change(function(){
+		document.body.style.backgroundColor = $("#background").string()
+	})
 }
 
 function add_frame(){
+	$("#render").enable()
   var frame_count = $("#framecount").int()
   if (frame_count < 2) {
     add_single_frame()
@@ -47,14 +53,13 @@ function add_single_frame(){
   var frame = cc.clone().appendTo($el.find(".frame")[0])
   frame.canvas.className = "fullsize"
   frame.canvas.style.display = "none"
-  var thumb = cc.clone().resize(100,100).appendTo($el.find(".frame")[0])
+  var thumb = cc.clone().resize(frame_thumb_size,frame_thumb_size).appendTo($el.find(".frame")[0])
   $("#frames").append($el)
-  $("#render").enable()
 }
 function add_frames(frame_count){
   rendering = true
   var t = old_t - start_t - pause_t
-  var frame_delay = $("#frameinterval").float() * 1000
+  var frame_delay = ($("#frameinterval").float() || $("#framedelay").float()) * 1000
   var frame
   for (var i = 0; i < frame_count; i++) {
     frame = giveFrame(t)
@@ -66,9 +71,6 @@ function add_frames(frame_count){
 }
 function remove_frame(){
   $(this).closest("div").remove()
-  if ($("#frames div").length == 0) {
-    $("#render").disable()
-  }
 }
 function remove_all_frames(){
   $("#frames").empty()
@@ -96,6 +98,10 @@ function sort_frames(){
 
 function render (){
   if (rendering) return
+  if ($("#frames canvas.fullsize").length == 0) {
+  	add_frame()
+  }
+  
   rendering = true
   encoder.reset()
   var delay = $("#framedelay").float() * 1000 || 100
@@ -104,7 +110,7 @@ function render (){
     encoder.addFrame(frame.canvas, delay)
   })
   $("#pause,#render,#add-frame").disable()
-  $("#rendered").find("img").remove()
+  $("#workspace").find("img").remove()
   $("#rendered").show()
   // really bad results with neuquant?
   // status("quantizing")
@@ -121,8 +127,6 @@ function render (){
   $("#render").html("rendering")
 }
 
-function status(s){ $(".status").html(s) }
-
 var encoder = new GifEncoder()
 
 encoder.on("quantized", function(url){
@@ -141,62 +145,14 @@ encoder.on("rendered", function(bytes){
 encoder.on("rendered-url", function(url){
   var image = new Image ()
   lastGif = image.src = url
-  $("#rendered").append(image)
+	$("#workspace canvas").hide()
+  $("#workspace").append(image)
   $("#uploaded-url").hide().val("")
+	$("#uploaded-url + br").hide()
   $("#save,#upload,#rendered").show()
   $("#pause,#render,#add-frame,#save,#upload").enable()
-  $("#render").html("render")
+  $("#render").html("render gif")
   rendering = false
   pause(true)
 })
 
-function get_filename(){
-  var basename = $("#url").val().replace(/^.*\//,"").replace(/\..*$/,"").replace(/[^-_ a-zA-Z0-9]/g,"")
-  var username = user.username
-  var filename = basename + "-" + username + "-" + (+new Date()) + ".gif"
-  return filename.replace(/ /g,"_").replace(/-+/g,"-")
-}
-function save (){
-  if (! lastGif) return;
-  var filename = get_filename()
-  var blob = dataUriToBlob(lastGif)
-  saveAs(blob, filename);
-}
-function saveJSON (data, filename) {
-  var bytes = JSON.stringify(data)
-  var buf = new ArrayBuffer(bytes.length);
-  var arr = new Uint8Array(buf);
-  for (var i = 0; i < bytes.length; i++) {
-    arr[i] = bytes.charCodeAt(i);
-  }
-
-  var blob = new Blob([arr], { type: "text/json" });
-  blob.slice = blob.slice || blob.webkitSlice;
-  
-  saveAs(blob, filename);
-}
-
-function upload(){
-  var filename = get_filename()
-  var username = user.username
-  var blob = dataUriToBlob(lastGif)
-  uploadImage({
-    blob: blob,
-    filename: filename,
-    username: username,
-    success: function(data){
-    
-      // data.url
-      // data.filesize
-      // data.success
-
-      console.log(data);
-      status("uploaded");
-      $("#uploaded-url").show().focus().val(data.url)
-    },
-    error: function(data){
-      console.log(data)
-      status("error uploading: " + data.error)
-    }
-  });
-}
diff --git a/js/gallery.js b/js/gallery.js
index 16ecdd8..839316c 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -3,7 +3,10 @@
 
 var gallery = {}
 
-gallery.init = function(){
+gallery.init = function(choose){
+	if (choose) {
+		gallery.choose = choose;
+	}
   gallery.bind()
 }
 
@@ -11,7 +14,6 @@ gallery.bind = function(){
   $("#gallery-random").click(asdf.random)
   $("#gallery-search").submit(dumpfm.search)
   $(document).on("click", "#gallery-images canvas", gallery.click)
-  status("ready")
 }
 
 gallery.load = function(ims){
@@ -43,6 +45,7 @@ gallery.image = function(im){
       $(thumb.canvas).show()
     })
     $(img).click(gallery.choose);
+    $("#persist-image").attr("checked", false)
   }
   try { img.src = im.url; }
   catch(e){ return; }
@@ -52,3 +55,10 @@ gallery.image = function(im){
 gallery.click = function(){
   gallery.choose()
 }
+
+// template for choose function.. bound to an image object
+gallery.choose = function(){
+	var img = this
+  var imageURL = this.src
+}
+
diff --git a/js/help.js b/js/help.js
new file mode 100644
index 0000000..db0ac6d
--- /dev/null
+++ b/js/help.js
@@ -0,0 +1,47 @@
+
+var help = {}
+
+help.init = function(){
+	help.bind()
+}
+
+help.bind = function(){
+	$(window).on("scroll DOMMouseScroll mousewheel", function(){ scrolling = true })
+	$("#show-commands").click(function(){ $("#tutorial").hide(); $("#commands").toggle() })
+	$("#show-tutorial").click(function(){ $("#commands").hide(); $("#tutorial").toggle() })
+	$("#commands .close").click(function(){ $("#commands").toggle() })
+	$("#tutorial .close").click(function(){ $("#tutorial").toggle() })
+	$("#commands,#tutorial").draggable({
+		start: drag_start,
+		stop: drag_stop
+	})
+	$("#commands,#tutorial").disableSelection();
+	
+	$("#examples").change(function(){ 
+		help.load_example($(this).val())
+		$("#toggle-images").trigger("click")
+	})
+
+  if ('EXAMPLE_SHADERS' in window) {
+  	help.examples = {}
+    window.EXAMPLE_SHADERS.forEach(function(s){
+    	help.examples[ s.name ] = s.shader
+			var $option = $("<option value='" + s.name +"'>" + s.name + "</option>")
+			$("#examples").append($option)
+    })
+  }
+}
+
+help.examples = {}
+
+help.load_example = function(name){
+	var s = help.examples[name]
+	$("#shader").html(s)
+	new_shader({ name: name, shader: s })
+}
+
+function drag_start(){ dragging = true; $(this).addClass("dragging") }
+function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") }
+
+function status(s){ $(".status").html(s); console.log(s) }
+function quiet_status(s){ $(".status").html(s) }
diff --git a/js/image.js b/js/image.js
index 7a5240f..9296300 100644
--- a/js/image.js
+++ b/js/image.js
@@ -1,20 +1,30 @@
+var gif, img
+var imageURL = null
+
 function loadImage(imageURL, callback) {
   var imageURL = proxify( imageURL );
+  window.imageURL = imageURL
 
-  window.gif = window.img = null
+  window.gif = window.img = window.cam = null
 
-  if (imageURL.substr(-3) === "gif") {
+	if (! imageURL) {
+		window.gif = null
+		window.img = null
+		callback()
+	}
+  else if (imageURL.substr(-3).toLowerCase() === "gif") {
     window.gif = GIF(imageURL);
     // gif.on("error", tryToLoadNextImage);
     // gif.on("rendered", trackLoadTime);
     gif.on("rendered", callback);
-    return gif.render();
-  } else {
+		gif.render();
+  }
+  else {
     window.img = new Image();
     // img.addEventListener("error", tryToLoadNextImage);
     img.addEventListener("load", callback);
     img.crossOrigin = "anonymous";
-    return img.src = imageURL;
+    img.src = imageURL;
   }
 }
 
@@ -28,7 +38,7 @@ function giveImage(t) {
 
 function proxify (url) {
   if (url.indexOf("http") == 0)
-    return "/cgi-bin/proxy?" + url // .replace(/^https?:\/\//, "");
+    return "/cgi-bin/proxy?" + url.replace(/^https/, "http");
   else
     return url
 }
@@ -57,9 +67,10 @@ function uploadImage(opt){
   form.append("username", opt.username);
   form.append("filename", opt.filename);
   form.append("qqfile", opt.blob);
+  form.append("tag", opt.tag);
 
   var req = new XMLHttpRequest();
-  req.open("POST", "/cgi-bin/im/upload");
+  req.open("POST", "/cgi-bin/im/shader/upload");
   req.onload = function(event) {
     if (req.status == 200) {
       var res = JSON.parse(req.responseText);
diff --git a/js/render.js b/js/render.js
index fdb0125..a589efc 100644
--- a/js/render.js
+++ b/js/render.js
@@ -1,106 +1,160 @@
 var frame, img_frame;
 var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0
-var paused = false, dragging = false, rendering = false, scrolling = false, deferring = false, scrollTimeout = null;
-var fps = 30;
+var paused = false, dragging = false, rendering = false, scrolling = false, deferring = false, scrollTimeout = null
+var fps = 30
+var preserve_dimensions = false;
 
 function choose (){
-  imageURL = this.src
-  loading = true
-  $("#url").val(imageURL)
-  loadImage(imageURL, ready)
+	loading = true
+	preserve_dimensions = false
+	$("#url").val(this.src)
+	loadImage(this.src, ready)
+	reset()
 }
+
 function load(){
-  loading = true
-  var imageURL = $("#url").val()
-  loadImage(imageURL, ready)
+	var newImageURL = $("#url").val()
+	loading = true
+	if (newImageURL != imageURL) {
+		loadImage(newImageURL, ready)
+		status("loading")
+	}
 }
 
 function ready(){
-  loading = false
-  if (window.gif) {
-    frame = gif.frames[0]
-    w = cc.canvas.width = frame.ctx.canvas.width
-    h = cc.canvas.height = frame.ctx.canvas.height
-    for (var i=0, f; f=gif.frames[i]; i++){
-      f.cloneData = f.ctx.getImageData(0,0,w,h)
-    }
-  }
-  else {
-    fc = cq(img.width, img.height)
-    fc.drawImage(img, 0, 0)
-    frame = img_frame = { ctx: fc.context }
-    w = cc.canvas.width = frame.ctx.canvas.width
-    h = cc.canvas.height = frame.ctx.canvas.height
-    frame.cloneData = frame.ctx.getImageData(0,0,w,h)
-  }
+	loading = false
+	status("")
+	if (window.gif) {
+		frame = gif.frames[0]
+		actual_w = cc.canvas.width = frame.ctx.canvas.width
+		actual_h = cc.canvas.height = frame.ctx.canvas.height
+		if (! preserve_dimensions) {
+			w = actual_w
+			h = actual_h
+		}
+		for (var i=0, f; f=gif.frames[i]; i++){
+			f.cloneData = f.ctx.getImageData(0,0,actual_w,actual_h)
+		}
+	}
+	else if (window.img) {
+		fc = cq(img.width, img.height)
+		fc.drawImage(img, 0, 0)
+		frame = img_frame = { ctx: fc.context }
+		actual_w = cc.canvas.width = frame.ctx.canvas.width
+		actual_h = cc.canvas.height = frame.ctx.canvas.height
+		if (! preserve_dimensions) {
+			w = actual_w
+			h = actual_h
+		}
+		frame.cloneData = frame.ctx.getImageData(0,0,actual_w,actual_h)
+	}
+	else {
+		cc.canvas.width = actual_w = w
+		cc.canvas.height = actual_h = h
+		shader_build()
+	}
+	displayWidthHeight(w, h)
+	preserve_dimensions = false;
+}
+
+function displayWidthHeight(width, height){
+	$("#width").val(width)
+	$("#height").val(height)
 }
 
 function giveFrame(t){
-  if (window.gif) {
-    if (gif.currentFrame) {
-      return gif.frames[gif.currentFrame(t)]
-    }
-    else {
-      return gif.frames[0]
-    }
-  }
-  else if (window.img) {
-    return img_frame
-  }
-  else {
-    return cq(w, h)
-  }
+	if (window.gif) {
+		if (gif.currentFrame) {
+			return gif.frames[gif.currentFrame(t)]
+		}
+		else if (gif.frames) {
+			return gif.frames[0]
+		}
+	}
+	if (window.img) {
+		return img_frame
+	}
+	else if (window.cam) {
+		return camera_frame()
+	}
+	else {
+		return empty_frame()
+	}
+}
+
+function empty_frame(){
+	actual_w = w = w || 400
+	actual_h = h = h || 266
+	var cx = cq(w, h).fillStyle("rgba(255,255,255,255)").fillRect(0,0,w,h)
+	return { ctx: cx.context, cloneData: cx.getImageData(0,0,w,h) }
+}
+
+function feedback_frame(){
+	return { ctx: cc.context, cloneData: cc.getImageData(0,0,w,h) }
+}
+
+function camera_frame(){
+	var cx = cq(w, h).drawImage(cam, 0, 0, w, h)
+	return { ctx: cx.context, cloneData: cx.getImageData(0,0,w,h) }
 }
 
 function reset(){
-  start_t = old_t
-  pause_t = 0
-  pause(false)
-  $("#rendered img").remove()
-  draw(0)
+	start_t = old_t
+	pause_t = 0
+	pause(false)
+	$("#workspace img").remove()
+	$("#workspace canvas").show()
+  $("#uploaded-url").hide()
+	$("#uploaded-url + br").show()
+	remove_all_frames()
+	draw(0)
 }
 
 function pause(state){
-  $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused).html(paused ? "paused" : "pause")
+	paused = typeof state == "boolean" ? state : ! paused
+	$("#pause").toggleClass("paused", paused).html(paused ? "paused" : "pause")
+	if (!paused) {
+		$("#workspace canvas").show()
+		$("#workspace img").hide()
+		$("#save,#upload").disable()
+	}
 }
 
 function step_forward(){
-  var step = $("#framedelay").float() * 1000 || 100
-  old_t += step
-  draw(old_t)
-  pause(true)
+	var step = $("#framedelay").float() * 1000 || 100
+	old_t += step
+	draw(old_t)
+	pause(true)
 }
 
 function animate(t){
-  raf_id = requestAnimationFrame(animate);
+	raf_id = requestAnimationFrame(animate);
 
-  var step_t = t - old_t
-  old_t = t
-  
-  if (paused || dragging || rendering || scrolling || deferring) {
-    pause_t += step_t
-    if (scrolling) {
-      scrolling = false
-      deferring = true
-    }
-    else {
-      deferring = false
-    }
-    return
-  }
+	var step_t = t - old_t
+	old_t = t
 
-  // var timing = +(new Date())
-  draw(t)
-  // timing = +(new Date()) - timing
-  fps = avg(fps, 1000/step_t, 4)
-  // status(~~(fps) + " fps")
+	if (paused || dragging || rendering || scrolling || deferring) {
+		pause_t += step_t
+		if (scrolling) {
+			scrolling = false
+			deferring = true
+		}
+		else {
+			deferring = false
+		}
+		return
+	}
+
+	// var timing = +(new Date())
+	draw(t)
+	// timing = +(new Date()) - timing
+	fps = avg(fps, 1000/step_t, 4)
+	quiet_status(~~(fps) + " fps")
 }
 
 function draw(t) {
-  t -= start_t
-  t -= pause_t
-  frame = giveFrame(t)
-  shade(frame, t)
+	t -= start_t
+	t -= pause_t
+	frame = giveFrame(t)
+	shade(frame, t)
 }
-
-function status(s){ $("#status").html(s); console.log(s) }
diff --git a/js/save.js b/js/save.js
new file mode 100644
index 0000000..ec2fc6b
--- /dev/null
+++ b/js/save.js
@@ -0,0 +1,54 @@
+function get_filename(){
+  var basename = $("#url").val().replace(/^.*\//,"").replace(/\..*$/,"").replace(/[^-_ a-zA-Z0-9]/g,"")
+  var username = user.username
+  var filename = basename + "-" + username + "-" + (+new Date()) + ".gif"
+  return filename.replace(/ /g,"_").replace(/-+/g,"-")
+}
+function save (){
+  if (! lastGif) return;
+  var filename = get_filename()
+  var blob = dataUriToBlob(lastGif)
+  saveAs(blob, filename);
+}
+function saveJSON (data, filename) {
+  var bytes = JSON.stringify(data)
+  var buf = new ArrayBuffer(bytes.length);
+  var arr = new Uint8Array(buf);
+  for (var i = 0; i < bytes.length; i++) {
+    arr[i] = bytes.charCodeAt(i);
+  }
+
+  var blob = new Blob([arr], { type: "text/json" });
+  blob.slice = blob.slice || blob.webkitSlice;
+  
+  saveAs(blob, filename);
+}
+
+function upload(uri, filename, tag){
+  filename = filename || get_filename()
+  uri = (uri && ! uri.target) ? uri : lastGif
+  tag = tag || "shader"
+  
+  var blob = dataUriToBlob(uri)
+  uploadImage({
+    blob: blob,
+    filename: filename,
+    username: user.username,
+    tag: tag,
+    success: function(data){
+
+      // data.url
+      // data.filesize
+      // data.success
+
+      console.log(data);
+      $("#uploaded-url").show().focus().val(data.url)
+      $("#uploaded-url + br").show()
+      status && status("uploaded");
+    },
+    error: function(data){
+      console.log(data)
+      status("error uploading: " + data.error)
+    }
+  });
+}
diff --git a/js/shader.js b/js/shader.js
index 4a6e950..a8559ba 100644
--- a/js/shader.js
+++ b/js/shader.js
@@ -1,3 +1,5 @@
+function shader (x,y,t,d) {}
+
 var shader_build = function(){
   var fn_str = document.getElementById('shader').value
   if (!fn_str.length) fn_str = ""
@@ -16,7 +18,7 @@ var shader_build = function(){
 }
 
 var r,g,b,a;
-
+var w, h, actual_w, actual_h;
 function shade_no_error_handling(frame, t){
   if (! t || isNaN(t)) throw Error ("No time specified")
   if (! frame) throw Error ("No frame specified")
@@ -46,7 +48,7 @@ var firefox_stack_regexp = /:([0-9]+)$/;
 
 function shade_error_handling(frame, t){
   if (! t || isNaN(t)) throw Error ("No time specified")
-  if (! frame) throw Error ("No frame specified")
+  if (! frame || ! frame.ctx || ! frame.cloneData) throw Error ("No frame specified")
 
   var imgData = frame.ctx.getImageData(0,0,w,h)
   var data = imgData.data
@@ -77,7 +79,7 @@ function shade_error_handling(frame, t){
 
     } else if (lines.length > 1) { // attempt chrome match
       var matches = lines[1].match(chrome_stack_regexp)
-      if (matches.length > 1)
+      if (matches && matches.length > 1)
         error_highlight.on(parseInt(matches[1]) - 3)
     }
     
diff --git a/js/user.js b/js/user.js
index a1ac53e..16bf163 100644
--- a/js/user.js
+++ b/js/user.js
@@ -10,6 +10,13 @@ user.load = function(){
   user.username = user.getCookie()
   $("#username").val(user.username)
 }
+user.prefs = new function(){}
+user.prefs.get = function (key){
+	return localStorage.getItem("im.prefs." + key)
+}
+user.prefs.set = function (key,value){
+	return localStorage.setItem("im.prefs." + key, value)
+}
 user.sanitize = function(){
   return $("#username").val().replace(/[^-_ a-zA-Z0-9]/g,"")
 }
diff --git a/js/util.js b/js/util.js
index 1a1a0fe..911e44b 100644
--- a/js/util.js
+++ b/js/util.js
@@ -6,24 +6,30 @@ if (window.$) {
   $.fn.disable = function() { return $(this).attr("disabled","disabled") }
 }
 
+function noop(){}
 function trim(s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") }
 
 var E = Math.E
 var PI = Math.PI
 var PHI = (1+Math.sqrt(5))/2
+var TWO_PI = PI*2
+var LN10 = Math.LN10
 function clamp(n,a,b){ return n<a?a:n<b?n:b }
+function norm(n,a,b){ return (n-a) / (b-a) }
 function lerp(n,a,b){ return (b-a)*n+a }
 function mix(n,a,b){ return a*(1-n)+b*n }
 function ceil(n){ return Math.ceil(n) }
 function floor(n){ return Math.floor(n) }
 function round(n){ return Math.round(n) }
-function max(n){ return Math.max(n) }
-function min(n){ return Math.min(n) }
+function max(a,b){ return Math.max(a,b) }
+function min(a,b){ return Math.min(a,b) }
 function abs(n){ return Math.abs(n) }
 function sign(n){ return Math.abs(n)/n }
 function pow(n,b) { return Math.pow(n,b) }
 function exp(n) { return Math.exp(n) }
-function sqrt(n) { return Math.sqrt(n,b) }
+function log(n){ return Math.log(n) }
+function ln(n){ return Math.log(n)/LN10 }
+function sqrt(n) { return Math.sqrt(n) }
 function cos(n){ return Math.cos(n) }
 function sin(n){ return Math.sin(n) }
 function tan(n){ return Math.tan(n) }
@@ -39,11 +45,19 @@ function sinp(n){ return (1+Math.sin(n))/2 }
 function random(){ return Math.random() }
 function rand(n){ return (Math.random()*n) }
 function randint(n){ return rand(n)|0 }
+function randrange(a,b){ return a + rand(b-a) }
+function randsign(){ return random() >= 0.5 ? -1 : 1 }
 function choice(a){ return a[randint(a.length)] }
 function deg(n){ return n*180/PI }
 function rad(n){ return n*PI/180 }
 function xor(a,b){ a=!!a; b=!!b; return (a||b) && !(a&&b) }
-function pixel(x,y){ return 4*(mod(y,h)*w+mod(x,w)) }
+function mod(n,m){ return n-(m * floor(n/m)) }
+function dist(x0,y0,x1,y1){ return sqrt(pow(x1-x0,2)+pow(y1-y0,2)) }
+function angle(x0,y0,x1,y1){ return atan2(y1-y0,x1-x0) }
+function avg(m,n,a){ return (m*(a-1)+n)/a }
+function quantize(a,b){ return ~~(a/b)*b }
+
+function pixel(x,y){ return 4*(mod(y,actual_h)*actual_w+mod(x,actual_w)) }
 function rgbpixel(d,x,y){
   var p = pixel(~~x,~~y)
   r = d[p]
@@ -51,18 +65,16 @@ function rgbpixel(d,x,y){
   b = d[p+2]
   a = d[p+3]
 }
-function mod(n,m){ return n-(m * floor(n/m)) }
-function dist(x0,y0,x1,y1){ return sqrt(pow(x1-x0,2)+pow(y1-y0,2)) }
-function angle(x0,y0,x1,y1){ return atan2(y1-y0,x1-x0) }
-function avg(m,n,a){ return (m*(a-1)+n)/a }
+function fit(d,x,y){ rgbpixel(d,x*actual_w/w,y*actual_h/h) }
 
 function step(a, b){
   return (b >= a) + 0 
                // ^^ bool -> int
 }
 
+
 function julestep (a,b,n) {
-  return clamp((n - a) / (b - a), 0.0, 1.0);
+  return clamp(norm(n,a,b), 0.0, 1.0);
 }
 
 // hermite curve apparently
diff --git a/js/vendor/gif-encode.min.js b/js/vendor/gif-encode.min.js
new file mode 100644
index 0000000..be5e2cd
--- /dev/null
+++ b/js/vendor/gif-encode.min.js
@@ -0,0 +1,2 @@
+/* asdf.us/gif-recorder */
+function shuffle(a){var b=new Array(a.length);b[0]=a[0];for(var c=1;c<a.length;c++){var d=Math.floor(Math.random()*c);b[c]=b[d],b[d]=a[c]}return b}function sample(a,b){var c=shuffle(a);return c.slice(0,b)}function GifEncoder(){function a(){var a=this,b=0,c=[];a.init=function(){for(var b=0;WORKERS>b;b++){var d=new Worker(workerURL);d.onmessage=a.receiveWork,c.push(d)}};var d={};a.hire=function(a,b){d[a]=b},a.work=function(a){c[++b%c.length].postMessage(a)},a.receiveWork=function(a){a.data.task in d&&d[a.data.task](a)},a.fire=function(){for(var b in c)c[b].postMessage("close");c=[],a.init()},a.init()}function b(a){console.log("[WORKER]",a.data.message)}function c(a){console.log(Date.now()-q,"quantization done"),i=a.data.neuquant,j=a.data.colortab,f.quantized=!0,f.tube("quantized")}function d(a){var b=a.data.frame_index,c=a.data.frame_data;m[b]=c,f.tube("encoded-frame",m.length,k.length);for(var d=0;d<k.length;d++)if(null==m[d])return;console.log("FINISHED "+k.length);var e=m.join(""),g=window.btoa(e),h="data:image/gif;base64,"+g;f.working=!1,f.tube("rendered",e),f.tube("rendered-url",h),console.log(Date.now()-q,"processed frames"),console.log(Date.now()-p,"done"),r.fire()}function e(a){var b=Date.now();a=Math.min(l.length,a);var c=document.createElement("canvas"),d=c.getContext("2d");c.width=g,c.height=h*a;for(var e=d.getImageData(0,0,c.width,c.height),f=e.data,i=0,j=sample(l,4);a--;)for(var k=j[a],m=k.getImageData(0,0,g,h).data,n=0;n<m.length;i++,n++)f[i]=m[n];return console.log(Date.now()-b,"built spritesheet"),e}var f=this;this.working=!1;var g,h,i,j,k=[],l=[],m=[],n=[],g=0,h=0,o=0,p=Date.now(),q=Date.now(),r=(f.tube=new Tube,new a);r.hire("message",b),r.hire("quantize",c),r.hire("encode",d);var s=(this.reset=function(){s(),i=null,j=null,f.quantized=!1},this.resetFrames=function(){k=[],l=[],m=[],n=[],g=0,h=0,o=0});this.on=function(){f.tube.on.apply(f.tube,arguments)},this.off=function(){f.tube.off.apply(f.tube,arguments)};{var i,j;this.addFrame=function(a,b){var c=a.getContext("2d");k.push(a),l.push(c),n.push(b),1==k.length&&(g=a.width,h=a.height)},this.addFrames=function(a,b){for(var c=0;c<a.length;c++){var d=a[c],e=d.getContext("2d");k.push(d),l.push(e),n.push(b)}k.length==a.length&&(g=a[0].width,h=a[0].height)},this.copyFrame=function(a,b){var c=document.createElement("canvas"),d=c.getContext("2d");d.drawImage(a,0,0,a.width,a.height),k.push(c),l.push(d),n.push(b),1==k.length&&(g=a.width,h=a.height)},this.quantize=function(){p=Date.now(),q=Date.now();var a=e(FRAMES_TO_QUANTIZE);r.work({task:"quantize",imageData:a})},this.encode=function(a,b){function c(){if(e==k.length)return d();var a=l[e],b=a.getImageData(0,0,g,h).data,f=n[e];r.work({task:"encode",frame_index:e,frame_length:l.length-1,height:h,width:g,delay:f,imageData:b,neuquant:i,colortab:j}),e++,setTimeout(c,16)}function d(){f.tube("done_sending")}if(!k.length)throw Error("No frames to encode");a=a||i,b=b||j,q=Date.now(),o=0,console.log("working .... ");var e=0;c()}}}var nextTick=function(){if(window.ActiveXObject||!window.postMessage)var a=function(a){setTimeout(a,0)};else{var b=[],c="next-tick-zero-timeout";window.addEventListener("message",function(a){a.source==window&&a.data==c&&(a.stopPropagation&&a.stopPropagation(),b.length&&b.shift()())},!0);var a=function(a){b.push(a),window.postMessage(c,"*")}}return a}(),Uid=function(){var a=0;return function(){return a++ +""}}(),tokenize=function(){var a=function(b,c){return b.trim().split(c||a.default)};return a.default=/\s+/g,a}(),globber=function(a,b){var c,d=a[0],e=a.slice(1),f=b.length;if("*"===d){for(var g=0;f>=g;++g)if(globber(e,b.slice(g)))return!0;return!1}return c=d===b[0],c&&(!e.length&&!f||globber(e,b.slice(1)))},setproto=function(a,b){if(a.__proto__)a.__proto__=b;else for(var c in b)a[c]=b[c]},Tube=function(){var a={},b=function(a){if(a=a||{},a.queue)var c=function(){var a=arguments;return nextTick(function(){c.send.apply(c,a)}),c};else var c=function(){return c.send.apply(c,arguments),c};return setproto(c,b.proto),c.listeners={},c.globListeners={},c};return b.total={},b.proto={},b.proto.on=function(){var a=this;if("string"==typeof arguments[0]){var b={};b[arguments[0]]=arguments[1];{arguments[2]||{}}}else{var b=arguments[0];arguments[1]||{}}for(var c in b){var d=c.split(" "),e=b[c];Array.isArray(e)||(e=[e]);for(var f,g=0;f=e[g];g++)f.uid||(f.uid=Uid());for(var h,g=0;h=d[g];g++){var i=-1===h.indexOf("*")?a.listeners:a.globListeners;i[h]=h in i?i[h].concat(e):e.concat()}}return a},b.proto.off=function(){var a,b,c,d,e=this;if(0===arguments.length)return e.listeners={},e.globListeners={},e;if(1===arguments.length&&"string"==typeof arguments[0]){for(c=arguments[0].split(" "),b=0;d=c[b];b++)delete e.listeners[d],delete e.globListeners[d];return e}if("function"==typeof arguments[0]||Array.isArray(arguments[0])){var f="function"==typeof arguments[0]?[arguments[0]]:arguments[0];return e}if(arguments.length>1){var g={};g[arguments[0]]=arguments[1]}else var g=arguments[0];for(var h in g){c=h.split(" ");var f=g[h];"function"==typeof f&&(f=[f]);for(var b=0;d=c[b];b++){if(d in e.listeners)a=e.listeners;else{if(!(d in e.globListeners))continue;a=e.globListeners}a[d]=a[d].filter(function(a){return-1===f.indexOf(a)})}}return e},b.proto.send=function(c){b.total[c]||(b.total[c]=0),b.total[c]+=1;var d,e,f,g=this.listeners,h=this.globListeners,i=tokenize(c);if(arguments.length){var j=Array.prototype.splice.call(arguments,1);j.push(c)}else var j=[];for(var k=0;e=i[k];k++){var l={},m={};if(d=g[e])for(var n=0;f=d[n];n++)l[f.uid]=f,m[f.uid]=e;var o=e.split(":");for(var p in h){if("*"!==p){var q=a[p]||(a[p]=p.split(":"));if(!globber(q,o))continue}d=h[p];for(var n=0;f=d[n];n++)l[f.uid]=f,m[f.uid]=e}var r=[];for(var f in l)r.push(l[f]);for(var f,n=0;f=r[n];n++)f.apply(f,j)}return this},b}(),FRAMES_PER_GIF=36,FPS=12,DELAY=Math.floor(1e3/FPS),WORKERS=6,FRAMES_TO_QUANTIZE=4,DO_UPLOAD=!0,workerURL=URL.createObjectURL(new Blob(["(",function(){function a(a){var c=a.imageData,d=b(c.data),e=new NeuQuant(d,d.length,1),f=e.process();self.postMessage({task:"quantize",neuquant:e.save(),colortab:f})}function b(a){for(var b=[],c=0,d=0,e=a.length;e>c;d+=4)b[c++]=a[d],b[c++]=a[d+1],b[c++]=a[d+2];return b}function c(a){var b=a.frame_index,c=a.frame_length,d=a.height,e=a.width,f=a.imageData,g=a.delay,h=a.neuquant,i=a.colortab,j=new GIFEncoder;j.setRepeat(0),j.setQuality(1),j.setSize(e,d),j.setDelay(g),0==b?j.start():(j.cont(),j.setProperties(!0,!1)),j.setNeuquant(h,i),j.addFrame(f,!0),c==b&&j.finish(),self.postMessage({task:"encode",frame_index:b,frame_data:j.stream().getData()}),delete j,delete a}GIFEncoder=function(){function a(){this.bin=[]}for(var b=0,c={};256>b;b++)c[b]=String.fromCharCode(b);a.prototype.getData=function(){for(var a="",b=this.bin.length,d=0;b>d;d++)a+=c[this.bin[d]];return a},a.prototype.writeByte=function(a){this.bin.push(a)},a.prototype.writeUTFBytes=function(a){for(var b=a.length,c=0;b>c;c++)this.writeByte(a.charCodeAt(c))},a.prototype.writeBytes=function(a,b,c){for(var d=c||a.length,e=b||0;d>e;e++)this.writeByte(a[e])};var d,e,f,g,h,i,j,k,l,m={},n=null,o=-1,p=0,q=!1,r=new Array,s=7,t=-1,u=!1,v=!0,w=!1,x=1,y=null,z=(m.setDelay=function(a){p=Math.round(a/10)},m.setDispose=function(a){a>=0&&(t=a)},m.setRepeat=function(a){a>=0&&(o=a)},m.setTransparent=function(a){n=a},m.addFrame=function(a,b){if(null==a||!q||null==g)throw new Error("Please call start method before calling addFrame");var c=!0;try{b?h=a:(h=a.getImageData(0,0,a.canvas.width,a.canvas.height).data,w||A(a.canvas.width,a.canvas.height)),D(),B(),v&&(G(),I(),o>=0&&H()),E(),F(),v||I(),K(),v=!1}catch(d){c=!1}return c},m.finish=function(){if(!q)return!1;var a=!0;q=!1;try{g.writeByte(59)}catch(b){a=!1}return a},function(){f=0,h=null,i=null,j=null,l=null,u=!1,v=!0}),A=(m.setFrameRate=function(a){15!=a&&(p=Math.round(100/a))},m.setQuality=function(a){x=Math.max(1,a)},m.setSize=function(a,b){(!q||v)&&(d=a,e=b,1>d&&(d=320),1>e&&(e=240),w=!0)}),B=(m.setNeuquant=function(a,b){y=a,l=b},m.start=function(){z();var b=!0;u=!1,g=new a;try{g.writeUTFBytes("GIF89a")}catch(c){b=!1}return q=b},m.cont=function(){z();var b=!0;return u=!1,g=new a,q=b},function(){var a=i.length,b=a/3;j=[];var c;y&&l?(c=new NeuQuant,c.load(y)):(c=new NeuQuant(i,a,x),l=c.process());for(var d=0,e=0;b>e;e++){var g=c.map(255&i[d++],255&i[d++],255&i[d++]);r[g]=!0,j[e]=g}i=null,k=8,s=7,null!=n&&(f=C(n))}),C=function(a){if(null==l)return-1;for(var b=(16711680&a)>>16,c=(65280&a)>>8,d=255&a,e=0,f=16777216,g=l.length,h=0;g>h;){var i=b-(255&l[h++]),j=c-(255&l[h++]),k=d-(255&l[h]),m=i*i+j*j+k*k,n=h/3;r[n]&&f>m&&(f=m,e=n),h++}return e},D=function(){var a=d,b=e;i=[];for(var c=h,f=0,g=0;b>g;g++)for(var j=0;a>j;j++){var k=g*a*4+4*j;i[f++]=c[k],i[f++]=c[k+1],i[f++]=c[k+2]}},E=function(){g.writeByte(33),g.writeByte(249),g.writeByte(4);var a,b;null==n?(a=0,b=0):(a=1,b=2),t>=0&&(b=7&t),b<<=2,g.writeByte(0|b|0|a),J(p),g.writeByte(f),g.writeByte(0)},F=function(){g.writeByte(44),J(0),J(0),J(d),J(e),g.writeByte(v?0:128|s)},G=function(){J(d),J(e),g.writeByte(240|s),g.writeByte(0),g.writeByte(0)},H=function(){g.writeByte(33),g.writeByte(255),g.writeByte(11),g.writeUTFBytes("NETSCAPE2.0"),g.writeByte(3),g.writeByte(1),J(o),g.writeByte(0)},I=function(){g.writeBytes(l);for(var a=768-l.length,b=0;a>b;b++)g.writeByte(0)},J=function(a){g.writeByte(255&a),g.writeByte(a>>8&255)},K=function(){var a=new LZWEncoder(d,e,j,k);a.encode(g)};return m.stream=function(){return g},m.setProperties=function(a,b){q=a,v=b},m},LZWEncoder=function(){var a,b,c,d,e,f,g,h,i,j,k,l,m={},n=-1,o=12,p=5003,q=o,r=1<<o,s=new Array,t=new Array,u=p,v=0,w=!1,x=0,y=0,z=[0,1,3,7,15,31,63,127,255,511,1023,2047,4095,8191,16383,32767,65535],A=[],B=m.LZWEncoder=function(e,f,g,h){a=e,b=f,c=g,d=Math.max(2,h)},C=function(a,b){A[l++]=a,l>=254&&G(b)},D=function(a){E(u),v=j+2,w=!0,J(j,a)},E=function(a){for(var b=0;a>b;++b)s[b]=-1},F=m.compress=function(a,b){var c,d,e,f,m,o,p;for(i=a,w=!1,g=i,h=H(g),j=1<<a-1,k=j+1,v=j+2,l=0,f=I(),p=0,c=u;65536>c;c*=2)++p;p=8-p,o=u,E(o),J(j,b);a:for(;(e=I())!=n;)if(c=(e<<q)+f,d=e<<p^f,s[d]!=c){if(s[d]>=0){m=o-d,0==d&&(m=1);do if((d-=m)<0&&(d+=o),s[d]==c){f=t[d];continue a}while(s[d]>=0)}J(f,b),f=e,r>v?(t[d]=v++,s[d]=c):D(b)}else f=t[d];J(f,b),J(k,b)},G=(m.encode=function(c){c.writeByte(d),e=a*b,f=0,F(d+1,c),c.writeByte(0)},function(a){l>0&&(a.writeByte(l),a.writeBytes(A,0,l),l=0)}),H=function(a){return(1<<a)-1},I=function(){if(0==e)return n;--e;var a=c[f++];return 255&a},J=function(a,b){for(x&=z[y],y>0?x|=a<<y:x=a,y+=g;y>=8;)C(255&x,b),x>>=8,y-=8;if((v>h||w)&&(w?(h=H(g=i),w=!1):(++g,h=g==q?r:H(g))),a==k){for(;y>0;)C(255&x,b),x>>=8,y-=8;G(b)}};return B.apply(this,arguments),m},NeuQuant=function(){var a,b,c,d,e,f={},g=128,h=499,i=491,j=487,k=503,l=3*k,m=g-1,n=4,o=100,p=16,q=1<<p,r=10,s=10,t=q>>s,u=q<<r-s,v=g>>3,w=6,x=1<<w,y=v*x,z=30,A=10,B=1<<A,C=8,D=1<<C,E=A+C,F=1<<E,G=new Array,H=new Array,I=new Array,J=new Array,K=f.NeuQuant=function(a,f,h){if(a&&f&&h){var i,j;for(b=a,c=f,d=h,e=new Array(g),i=0;g>i;i++)e[i]=new Array(4),j=e[i],j[0]=j[1]=j[2]=(i<<n+8)/g,I[i]=q/g,H[i]=0}},L=function(){for(var a=[],b=new Array(g),c=0;g>c;c++)b[e[c][3]]=c;for(var d=0,f=0;g>f;f++){var h=b[f];a[d++]=e[h][0],a[d++]=e[h][1],a[d++]=e[h][2]}return a},M=function(){var a,b,c,d,f,h,i,j;for(i=0,j=0,a=0;g>a;a++){for(f=e[a],c=a,d=f[1],b=a+1;g>b;b++)h=e[b],h[1]<d&&(c=b,d=h[1]);if(h=e[c],a!=c&&(b=h[0],h[0]=f[0],f[0]=b,b=h[1],h[1]=f[1],f[1]=b,b=h[2],h[2]=f[2],f[2]=b,b=h[3],h[3]=f[3],f[3]=b),d!=i){for(G[i]=j+a>>1,b=i+1;d>b;b++)G[b]=a;i=d,j=a}}for(G[i]=j+m>>1,b=i+1;256>b;b++)G[b]=m},N=function(){var e,f,g,m,p,q,r,s,t,u,v,x,A,C;for(l>c&&(d=1),a=30+(d-1)/3,x=b,A=0,C=c,v=c/(3*d),u=v/o,s=B,q=y,r=q>>w,1>=r&&(r=0),e=0;r>e;e++)J[e]=s*((r*r-e*e)*D/(r*r));for(t=l>c?3:c%h!=0?3*h:c%i!=0?3*i:c%j!=0?3*j:3*k,e=0;v>e;)if(g=(255&x[A+0])<<n,m=(255&x[A+1])<<n,p=(255&x[A+2])<<n,f=R(g,m,p),Q(s,f,g,m,p),0!=r&&P(r,f,g,m,p),A+=t,A>=C&&(A-=c),e++,0==u&&(u=1),e%u==0)for(s-=s/a,q-=q/z,r=q>>w,1>=r&&(r=0),f=0;r>f;f++)J[f]=s*((r*r-f*f)*D/(r*r))},O=(f.save=function(){var a={netindex:G,netsize:g,network:e};return a},f.load=function(a){G=a.netindex,g=a.netsize,e=a.network},f.map=function(a,b,c){var d,f,h,i,j,k,l;for(j=1e3,l=-1,d=G[b],f=d-1;g>d||f>=0;)g>d&&(k=e[d],h=k[1]-b,h>=j?d=g:(d++,0>h&&(h=-h),i=k[0]-a,0>i&&(i=-i),h+=i,j>h&&(i=k[2]-c,0>i&&(i=-i),h+=i,j>h&&(j=h,l=k[3])))),f>=0&&(k=e[f],h=b-k[1],h>=j?f=-1:(f--,0>h&&(h=-h),i=k[0]-a,0>i&&(i=-i),h+=i,j>h&&(i=k[2]-c,0>i&&(i=-i),h+=i,j>h&&(j=h,l=k[3]))));return l},f.process=function(){return N(),O(),M(),L()},function(){var a;for(a=0;g>a;a++)e[a][0]>>=n,e[a][1]>>=n,e[a][2]>>=n,e[a][3]=a}),P=function(a,b,c,d,f){var h,i,j,k,l,m,n;for(j=b-a,-1>j&&(j=-1),k=b+a,k>g&&(k=g),h=b+1,i=b-1,m=1;k>h||i>j;){if(l=J[m++],k>h){n=e[h++];try{n[0]-=l*(n[0]-c)/F,n[1]-=l*(n[1]-d)/F,n[2]-=l*(n[2]-f)/F}catch(o){}}if(i>j){n=e[i--];try{n[0]-=l*(n[0]-c)/F,n[1]-=l*(n[1]-d)/F,n[2]-=l*(n[2]-f)/F}catch(o){}}}},Q=function(a,b,c,d,f){var g=e[b];g[0]-=a*(g[0]-c)/B,g[1]-=a*(g[1]-d)/B,g[2]-=a*(g[2]-f)/B},R=function(a,b,c){var d,f,h,i,j,k,l,m,o,q;for(m=~(1<<31),o=m,k=-1,l=k,d=0;g>d;d++)q=e[d],f=q[0]-a,0>f&&(f=-f),h=q[1]-b,0>h&&(h=-h),f+=h,h=q[2]-c,0>h&&(h=-h),f+=h,m>f&&(m=f,k=d),i=f-(H[d]>>p-n),o>i&&(o=i,l=d),j=I[d]>>s,I[d]-=j,H[d]+=j<<r;return I[k]+=t,H[k]-=u,l};return K.apply(this,arguments),f},self.onmessage=function(b){var d=b.data,e=d.task;switch(e){case"encode":c(d);break;case"quantize":a(d);break;case"close":self.close()}}}.toString(),")()"],{type:"application/javascript"}));
+\ No newline at end of file
diff --git a/package.json b/package.json
index 8aa641a..b187cc0 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,17 @@
 {
-	"name": "dither",
-	"version": "0.0.4",
-	"devDependencies": {
-		"grunt": "~0.4.1",
-		"grunt-contrib-concat": "~0.3.0",
-		"grunt-contrib-uglify": "~0.2.5",
-		"grunt-contrib-watch": "~0.5.3"
-	}
+  "name": "dither",
+  "version": "0.9.9",
+  "repository": {
+    "type": "git",
+    "url": "git://ghghgh.us/dither.git"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-concat": "~0.3.0",
+    "grunt-contrib-uglify": "~0.2.5",
+    "grunt-contrib-watch": "~0.5.3",
+    "grunt-contrib-clean": "~0.5.0",
+    "grunt-contrib-copy": "~0.5.0",
+    "grunt-dentist": "~0.3.3"
+  }
 }
diff --git a/shader-animate.html b/shader-animate.html
index 6591d6d..82b841b 100644
--- a/shader-animate.html
+++ b/shader-animate.html
@@ -19,6 +19,7 @@ delay <input type="text" id="delay" value="60">
 <button id="render" disabled>render</button>
 <button id="demo">demo</button>
 <button id="dither-demo">dither</button>
+<span id="status"></span>
 <br>
 <br>
 <textarea id="shader">
@@ -62,6 +63,7 @@ function run(el){
 	$("#shader").html(s)
 	shader_build()
 }
+function status(s){$("#status").html(s)}
 
 </script>
 <script type="text/javascript-shader" id="first">
diff --git a/shader-api.html b/shader-api.html
index aa9d1a6..dc96762 100644
--- a/shader-api.html
+++ b/shader-api.html
@@ -16,6 +16,13 @@ form { display: inline-block; }
 #shader-name { width: 75px; }
 #shader-id { width: 40px; }
 a { color: #00f; }
+#help { float: right; }
+.dragging { cursor: -webkit-grabbing !important; }
+#instructions { position: absolute;top:20px;right:20px; width:190px;height:465px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
+#instructions iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
+#instructions.dragging iframe { pointer-events: none; }
+#instructions .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
+
 </style>
 </head>
 <body>
@@ -35,6 +42,7 @@ a { color: #00f; }
 -->
 
 <div id="shader-api">
+	<button id="help">help</button>
 	<button id="new-shader"><b>new shader</b></button>
 	<input type="text" id="shader-id" disabled><button id="fetch-info" disabled>info</button>
 	<button id="fetch-history" disabled>history</button>
@@ -71,9 +79,11 @@ a { color: #00f; }
 
 <div id="workspace"></div>
 
+<div id="instructions"><iframe src="instructions.html"></iframe><button class="close">&times;</button></div>
 </body>
 <script type="text/javascript" src="js/vendor/acorn.js"></script>
 <script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
 <script type="text/javascript" src="js/vendor/canvasquery.js"></script>
 <script type="text/javascript" src="js/vendor/FileSaver/FileSaver.js"></script>
 <script type="text/javascript" src="js/vendor/dataUriToBlob.js"></script>
@@ -86,6 +96,7 @@ a { color: #00f; }
 <script type="text/javascript" src="js/render.js"></script>
 <script type="text/javascript" src="js/shader.js"></script>
 <script type="text/javascript" src="js/error.highlight.js"></script>
+<script type="text/javascript" src="js/help.js"></script>
 <script type="text/javascript" src="js/api/gallery.js"></script>
 <script type="text/javascript" src="js/api/get.js"></script>
 <script type="text/javascript" src="js/api/set.js"></script>
@@ -109,6 +120,7 @@ function init(){
 	$("#pause").click(pause)
 
 	user.init()
+	help.init()
 	shader_gallery.init()
 	
 	document.getElementById('shader').addEventListener('input', shader_build);
diff --git a/shader-cam.html b/shader-cam.html
new file mode 100644
index 0000000..7aea288
--- /dev/null
+++ b/shader-cam.html
@@ -0,0 +1,190 @@
+<!doctype html>
+<html>
+<head>
+<title>Shader</title>
+<style type="text/css">
+html,body { margin: 0; padding: 0; }
+#url { width: 450px; }
+#width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; }
+#shader { width: 100%; height: 247px; font-family: fixed; }
+#controls { width: 450px; }
+#frames { width: 435px; max-height: 150px; overflow: auto; border: 1px solid #ddd; line-height: 0; }
+#frames div { margin: 1px; padding: 0; position: relative; border: 1px solid #eee; cursor: -webkit-grab; }
+.dragging { cursor: -webkit-grabbing !important; }
+.ui-sortable-helper { cursor: -webkit-grabbing !important; }
+#frames canvas { display: block }
+#frames .remove { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
+.paused { background: black; color: white; border-width: 1px; padding: 1px 3px 2px 4px; outline: 0 !important; }
+.active { background: black; color: white; border-width: 1px; padding: 1px 4px 2px 4px; outline: 0 !important; }
+div { display: inline-block; padding: 10px;}
+#gallery,#controls,#workspace,#rendered{ float: left; }
+#rendered img { display: block; }
+#render,#save { font-weight: bold; }
+#render { float: right; }
+#commands { position: absolute;top:20px;right:20px; width:190px;height:465px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
+#commands iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
+#commands.dragging iframe { pointer-events: none; }
+#commands .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
+.close,.remove { cursor: pointer; }
+#uploaded-url { display: none; width: 300px; }
+form { display: inline-block; }
+#gallery { clear: right; width:100%; padding: 0; }
+#gallery-images { display: block; max-height: 210px; overflow-y: auto; }
+#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; }
+#username { width: 40px; }
+a { color: #00f; }
+</style>
+</head>
+<body>
+<div id="gallery">
+	<div id="gallery-form">
+		<form id="gallery-search">
+			<input type="text" id="dumpfm-search-query" value="duck bill">
+			<button id="gallery-search">DUMP SEARCH</button>
+		</form>
+		<button id="gallery-random">IM RANDOM</button>
+		<button id="camera">CAMERA</button>
+		<span class="status"></span>
+	</div>
+	<div id="gallery-images"></div>
+</div>
+
+<div id="controls">
+
+	<input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png">
+	<br>
+	<br>
+
+	<textarea id="shader"></textarea>
+	<br>
+	<br>
+
+	frames <input type="text" id="framecount" value="1">
+	interval <input type="text" id="frameinterval" value="0.1s">
+	<button id="add-frame">+add frame</button>
+	<button id="remove-all-frames">clear</button>
+	<button id="render" disabled>render</button>
+	<br>
+	reorder:
+	<button id="weave-frames">weave</button>
+	<button id="shuffle-frames">shuffle</button>
+	<button id="reverse-frames">reverse</button>
+	<button id="sort-frames">sort</button>
+	
+	<div id="frames"></div>
+	<br>
+	<br>
+
+	gif delay <input type="text" id="framedelay" value="0.06s">
+	background <input type="text" id="background" value="#fff">
+	your name here &rarr; <input type="text" id="username" value="">
+	<br>
+	<br>
+	<button id="show-commands">help</button>
+	&nbsp;
+	<button id="add-shader">+</button>
+	<button id="remove-shader">&times;</button>
+	&nbsp;
+	<span id="shaders"></span>
+	<br>
+	<br>
+	<a href="http://asdf.us/im/gallery/?tag=shader" target="_blank">Photoblaster Gallery</a>
+</div>
+
+<div id="workspace"></div>
+
+<div id="rendered">
+	<button id="reset">reset</button>
+	<button id="pause">pause</button>
+	<button id="step-forward">&gt;&gt;</button>
+	<span class="status"></span>
+	<button id="save" disabled>save</button>
+	<button id="upload" disabled>upload</button>
+	<br>
+	<input type="text" id="uploaded-url">
+</div>
+
+<div id="commands"><iframe src="commands.html"></iframe><button class="close">&times;</button></div>
+</body>
+<script type="text/javascript" src="js/vendor/gif-encode/util.js"></script>
+<script type="text/javascript" src="js/vendor/gif-encode/tube.js"></script>
+<script type="text/javascript" src="js/vendor/gif-encode/client.js"></script>
+<script type="text/javascript" src="js/vendor/gif.js"></script>
+<script type="text/javascript" src="js/vendor/FileSaver/FileSaver.js"></script>
+<script type="text/javascript" src="js/vendor/dataUriToBlob.js"></script>
+<script type="text/javascript" src="js/vendor/acorn.js"></script>
+<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
+<script type="text/javascript" src="js/vendor/canvasquery.js"></script>
+<script type="text/javascript" src="js/canvasquery.dither.js"></script>
+<script type="text/javascript" src="js/api/localstorage.js"></script>
+<script type="text/javascript" src="js/error.highlight.js"></script>
+<script type="text/javascript" src="js/asdf.js"></script>
+<script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="js/camera.js"></script>
+<script type="text/javascript" src="js/gallery.js"></script>
+<script type="text/javascript" src="js/color.js"></script>
+<script type="text/javascript" src="js/frames.js"></script>
+<script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="js/user.js"></script>
+<script type="text/javascript" src="js/render.js"></script>
+<script type="text/javascript" src="js/shader.js"></script>
+<script type="text/javascript" src="js/save.js"></script>
+<script type="text/javascript" src="js/util.js"></script>
+<script type="text/javascript" src="js/help.js"></script>
+<script type="text/javascript" src="shaders.json"></script>
+
+<script type="text/html" id="frame-template">
+<button class="remove">x</button>
+<span class="frame"></span>
+</script>
+
+<script type="text/javascript">
+
+var cc = cq(0,0).appendTo("#workspace")
+var w, h
+var lastGif
+
+$(init)
+
+var mousex, mousey
+
+function init(){
+	$("#url").change(load)
+	$("#reset").click(reset)
+	$("#pause").click(pause)
+	$("#step-forward").click(step_forward)
+	$(document).on("mousemove", function(e) {
+		mousex = e.pageX
+		mousey = e.pageY
+	})
+
+	$("#background").change(function(){
+		document.body.style.backgroundColor = $("#background").string()
+	})
+	
+	frame_editor.init()
+	help.init()
+	load()
+
+	gallery.init(choose)
+
+	user.init()
+	if (user.username.length) {
+		console.log("signed in as", user.username)
+	}
+
+	local_shaders.init()
+	local_shaders.loadLastAccessed()
+
+	document.getElementById('shader').addEventListener('input', shader_build);
+	shader_build()
+
+	requestAnimationFrame(animate)
+	
+	$("#camera").trigger("click")
+}
+
+</script>
+</html>
+
diff --git a/shader-combo.html b/shader-combo.html
new file mode 100644
index 0000000..54f4329
--- /dev/null
+++ b/shader-combo.html
@@ -0,0 +1,294 @@
+<!doctype html>
+<html>
+<head>
+<title>Shaderblaster</title>
+<style type="text/css">
+body { background: #fbfbfb; font-size: 14px; }
+div { float: left; padding: 10px;}
+form { display: inline-block; }
+a { color: #00f; }
+
+#url { width: 250px; }
+#width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; text-align: right; }
+#background { text-align: left; }
+#username { width: 55px; }
+#shader-name { width: 75px; }
+#shader-id { width: 40px; }
+#shader { width: 400px; height: 247px; font-family: fixed; }
+#uploaded-url { display: none; width: 400px; }
+#uploaded-url + br { display: none; }
+
+#header { width:calc(100% - 10px); padding: 0; font-size: 12px; position: fixed; bottom:0; left: 0; padding: 5px; background: rgba(255,255,255,0.9); box-shadow: 0 0 10px #888; z-index: 2;}
+.gallery { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; border-bottom: 1px solid #ccc; margin-top: 10px; }
+.gallery::-webkit-scrollbar { -webkit-appearance: none; width: 7px; }
+.gallery::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 1px rgba(255,255,255,.5); }
+#shader-gallery img,#shader-gallery canvas,#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 0 5px; cursor: pointer; clear: right; }
+.shader { width: 100px; padding-top: 0; padding-bottom: 20px;}
+.shader span { display: block }
+
+.dragging { cursor: -webkit-grabbing !important; }
+.ui-sortable-helper { cursor: -webkit-grabbing !important; }
+
+#commands { top:40px;right:20px; width:190px;height:calc(95% - 230px); }
+#tutorial { top:40px;right:30px; width:290px;height:360px; display: block;}
+.iframe { position: absolute; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
+.iframe iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
+.iframe.dragging iframe { pointer-events: none; }
+.iframe .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
+
+#frames { display: block; width: 404px; max-height: 150px; overflow: auto; border: 1px solid #ddd; line-height: 0; }
+#frames div { margin: 1px; padding: 0; position: relative; border: 1px solid #eee; cursor: -webkit-grab; }
+#frames canvas { display: block }
+#frames .remove { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
+
+.paused { background: black; color: white; border-width: 1px; padding: 1px 3px 2px 4px; outline: 0 !important; }
+.active { background: black; color: white; border-width: 1px; padding: 1px 4px 2px 4px; outline: 0 !important; }
+
+.hidden { display: none; }
+.form { display: none; border-left: 1px solid #ddd; padding-left: 5px; margin-left: 2px; }
+.bold { font-weight: bold; }
+.close,.remove { cursor: pointer; }
+
+.status { font-size: 12px; }
+
+#render,#save,#upload,#save-shader { font-weight: bold; }
+#save[disabled],#upload[disabled] { font-weight: normal; }
+
+#logo { display: inline; position: relative; top: 2px; font-size: 18px; font-family: georgia; font-weight: bold; font-style: italic; margin: 0px; color: #243; }
+#corner { position: fixed; top: -5px; right: 0px; }
+.right { position: absolute; right: 0; }
+#links { margin-right: 20px; }
+
+</style>
+</head>
+<body>
+
+<div id="corner">
+	<button id="show-tutorial">help</button>
+	<button id="show-commands">commands</button>
+	<select id="examples">
+		<option>examples</option>
+	</select>
+</div>
+
+<div id="header">
+	<span class="right">
+	<h1 id="logo">&nbsp;shaderblaster&nbsp;&nbsp;</h1>
+	<button id="toggle-shaders">shaders</button>
+	<button id="toggle-images">images</button>
+  <select id="links">
+		<option value="http://asdf.us/im/">Photoblaster</option>
+		<option value="http://asdf.us/im/gallery/">Photoblaster Gallery</option>
+		<option value="http://asdf.us/im/gallery/?tag=shader">Shader Gallery</option>
+		<option value="http://asdf.us/imgradient/">Gradient Generator</option>
+		<option value="http://asdf.us/imgrid/">Grid Generator</option>
+		<option value="http://asdf.us/imbreak/">Fotofucker</option>
+		<option value="http://asdf.us/dither/">Dither</option>
+    <option value="">--------------</option>
+    <option selected value="default">links</option>
+  </select>
+	</span>
+	<button class="toggle-off">x</button>
+<!--
+	<button id="new-shader"><b>new shader</b></button>
+-->
+<!--
+	<input type="text" id="shader-id" disabled><button id="fetch-info" disabled>info</button>
+	<button id="fetch-history" disabled>history</button>
+	|
+	<button id="fetch-originals" disabled>originals</button>
+	<button id="fetch-all">all</button>
+-->
+	<span class="status"></span>
+
+	<span id="shader-api-form" class="form">
+		<input type="checkbox" id="persist-image" checked>
+		<label for="persist-image">load image</label>
+		<button id="fetch-latest">latest</button>
+		<button id="fetch-next-page" class="hidden">&rarr;</button>
+		<select id="pick-user">
+			<option>fetching users..</option>
+		</select>
+		<div id="shader-gallery" class="gallery"></div>
+	</span>
+	<span id="gallery-form" class="form">
+		<button id="gallery-random">asdf random</button>
+		<form id="gallery-search">
+			<input type="text" id="dumpfm-search-query" value="webcam">
+			<button id="gallery-search">search dump</button>
+		</form>
+		<div id="gallery-images" class="gallery"></div>
+	</span>
+</div>
+
+<div id="controls">
+	<input type="text" id="url" placeholder="paste a url here">
+	<input type="text" id="username" placeholder="username">
+	<input type="text" id="shader-name" placeholder="shader name">
+	<br>
+	<br>
+
+	<textarea id="shader"></textarea>
+	<br>
+	<input type="text" id="uploaded-url">
+	<br>
+	<button id="render">render gif</button>
+	<button id="save" disabled>save gif</button>
+	<button id="upload" disabled>upload gif</button>
+	<button id="reset">reset</button>
+	<button id="pause">pause</button>
+	<br>
+	<button id="save-shader">save shader</button>
+	<input type="text" id="width" placeholder="width" value="0">
+	<input type="text" id="height" placeholder="height" value="0">
+	<span class="status"></span>
+	<!--<button id="step-forward">&gt;&gt;</button>-->
+	<br>	
+	<br>
+	<span id="frame-controls">
+		frames <input type="text" id="framecount" value="20">
+		rate <input type="text" id="framedelay" value="0.06s">
+		bg <input type="text" id="background" value="#fff">
+		<button id="add-frame">+add</button>
+		<select id="reorder-frames">
+			<option value="">reorder</option>
+			<option value="weave-frames">weave</button>
+			<option value="shuffle-frames">shuffle</button>
+			<option value="reverse-frames">reverse</button>
+			<option value="sort-frames">sort</button>
+		</select>
+		<!--<button id="remove-all-frames">clear</button>-->
+		<br>
+		<span id="frames"></span>
+	</span>
+</div>
+
+<div id="workspace"></div>
+
+<div class="iframe" id="tutorial"><iframe src="tutorial.html"></iframe><button class="close">&times;</button></div>
+<div class="iframe" id="commands"><iframe src="commands.html"></iframe><button class="close">&times;</button></div>
+<script type="text/javascript" src="js/vendor/acorn.js"></script>
+<script type="text/javascript" src="js/vendor/gif.js"></script>
+<script type="text/javascript" src="js/vendor/gif-encode.min.js"></script>
+<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
+<script type="text/javascript" src="js/vendor/canvasquery.js"></script>
+<script type="text/javascript" src="js/vendor/FileSaver/FileSaver.js"></script>
+<script type="text/javascript" src="js/vendor/dataUriToBlob.js"></script>
+<script type="text/javascript" src="js/util.js"></script>
+<script type="text/javascript" src="js/color.js"></script>
+<script type="text/javascript" src="js/asdf.js"></script>
+<script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="js/user.js"></script>
+<script type="text/javascript" src="js/gallery.js"></script>
+<script type="text/javascript" src="js/frames.js"></script>
+<script type="text/javascript" src="js/render.js"></script>
+<script type="text/javascript" src="js/save.js"></script>
+<script type="text/javascript" src="js/shader.js"></script>
+<script type="text/javascript" src="js/error.highlight.js"></script>
+<script type="text/javascript" src="js/help.js"></script>
+<script type="text/javascript" src="js/api/gallery.js"></script>
+<script type="text/javascript" src="js/api/get.js"></script>
+<script type="text/javascript" src="js/api/set.js"></script>
+<script type="text/javascript" src="shaders.json"></script>
+
+<script type="text/html" id="shader-gallery-template">
+<span><img src="{thumbnail_url}"></span>
+{name} - {username}
+</script>
+
+<script type="text/html" id="frame-template">
+<button class="remove">x</button>
+<span class="frame"></span>
+</script>
+
+<script type="text/javascript">
+
+var cc = cq(0,0).appendTo("#workspace")
+var w = 400, h = 400
+var lastGif
+var mousex, mousey
+
+var firsttime = true
+var shader_gallery_template = $("#shader-gallery-template").html()
+
+$(init)
+
+function init(){
+	$("#url").change(load)
+	$("#reset").click(reset)
+	$("#pause").click(pause)
+	$("#step-forward").click(step_forward)
+
+	$(document).on("mousemove", function(e) {
+		mousex = e.pageX
+		mousey = e.pageY
+	})
+
+	$("#toggle-shaders").click(function(){
+		$("#header .form").hide()
+		$("#shader-api-form").show()
+		$(".bold").removeClass("bold")
+		$(this).addClass("bold")
+	}).trigger("click")
+	$("#toggle-images").click(function(){
+		$("#header .form").hide()
+		$("#gallery-form").show()
+		$(".bold").removeClass("bold")
+		$(this).addClass("bold")
+		if (! asdf.fetched) {
+			$("#gallery-random").trigger("click")
+		}
+	})
+	$(".toggle-off").click(function(){
+		$("#header .form").hide()
+		$(".bold").removeClass("bold")
+	})
+	$("#width").change(function(){
+		w = abs(parseInt(this.value,10)) || 1
+		cc.canvas.width = w
+		cc.canvas.height = h
+	})
+	$("#height").change(function(){
+		h = abs(parseInt(this.value,10)) || 1
+		cc.canvas.width = w
+		cc.canvas.height = h
+	})
+	$("#reorder-frames").change(function(){
+		var order = $(this).val()
+		console.log(order)
+		switch (order) {
+			case "weave-frames": weave_frames(); break;
+			case "shuffle-frames": shuffle_frames(); break;
+			case "reverse-frames": reverse_frames(); break;
+			case "sort-frames": sort_frames(); break;
+			default: return;
+		}
+		render()
+	})
+
+  $("#links").change(function(e){
+    var url = $(this).val()
+    if (url.match("http://")) {
+      var win = window.open(url, '_blank');
+      if (win == null || typeof(win) == "undefined" || (win == null && win.outerWidth == 0) || (win != null && win.outerHeight == 0) || win.test == "undefined"){
+        window.location.href = url;
+        $(this).val("default")
+      }
+    }
+  })
+
+	load()
+	help.init()
+	user.init()
+	frame_editor.init()
+	shader_gallery.init()
+	gallery.init(choose)
+
+	document.getElementById('shader').addEventListener('input', shader_build);
+
+	requestAnimationFrame(animate)
+}
+</script>
+</body>
+</html>
diff --git a/shader-gif.html b/shader-gif.html
index 1369225..1f944c9 100644
--- a/shader-gif.html
+++ b/shader-gif.html
@@ -67,7 +67,7 @@ div { display: inline-block; padding: 10px;}
   <button id="reset">reset</button>
   <button id="pause">pause</button>
   <button id="step-forward">&gt;&gt;</button>
-  <span id="status"></span>
+  <span class="status"></span>
   <button id="save" disabled>save</button>
   <button id="upload" disabled>upload</button>
   <br>
@@ -337,7 +337,7 @@ function render (){
 }
 
 function status(s){
-  $("#status").html(s)
+  $(".status").html(s)
 }
 
 var encoder = new GifEncoder()
diff --git a/shader-localstorage.html b/shader-localstorage.html
index 923f1b6..48c5184 100644
--- a/shader-localstorage.html
+++ b/shader-localstorage.html
@@ -125,6 +125,7 @@ a { color: #00f; }
 <script type="text/javascript" src="js/user.js"></script>
 <script type="text/javascript" src="js/render.js"></script>
 <script type="text/javascript" src="js/shader.js"></script>
+<script type="text/javascript" src="js/save.js"></script>
 <script type="text/javascript" src="js/util.js"></script>
 <script type="text/javascript" src="shaders.json"></script>
 <script type="text/javascript">
diff --git a/shader-pepper.html b/shader-pepper.html
new file mode 100644
index 0000000..6e22dc1
--- /dev/null
+++ b/shader-pepper.html
@@ -0,0 +1,558 @@
+<!doctype html>
+<html>
+<head>
+<title>Shader</title>
+<style type="text/css">
+html,body { margin: 0; padding: 0; }
+#url { width: 450px; }
+#width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; }
+#shader { width: 100%; height: 247px; font-family: fixed; }
+#controls { width: 450px; }
+#frames { width: 435px; max-height: 150px; overflow: auto; border: 1px solid #ddd; line-height: 0; }
+#frames div { margin: 1px; padding: 0; position: relative; border: 1px solid #eee; cursor: -webkit-grab; }
+.dragging { cursor: -webkit-grabbing !important; }
+.ui-sortable-helper { cursor: -webkit-grabbing !important; }
+#frames canvas { display: block }
+#frames .remove { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
+.paused { background: black; color: white; border-width: 1px; padding: 1px 3px 2px 4px; outline: 0 !important; }
+.active { background: black; color: white; border-width: 1px; padding: 1px 4px 2px 4px; outline: 0 !important; }
+div { display: inline-block; padding: 10px;}
+#gallery,#controls,#workspace,#rendered{ float: left; }
+#rendered img { display: block; }
+#render,#save, #save_shader { font-weight: bold; }
+#render { float: right; }
+#instructions { position: absolute;top:20px;right:20px; width:190px;height:465px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
+#instructions iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
+#instructions.dragging iframe { pointer-events: none; }
+#instructions .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
+.close,.remove { cursor: pointer; }
+#uploaded-url { display: none; width: 300px; }
+form { display: inline-block; }
+#gallery { clear: right; width:100%; padding: 0; }
+#gallery-images { display: block; max-height: 210px; overflow-y: auto; }
+#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; }
+#username { width: 40px; }
+a { color: #00f; }
+</style>
+</head>
+<body>
+<div id="gallery">
+  <div id="gallery-form">
+    <form id="gallery-search">
+      <input type="text" id="dumpfm-search-query" value="duck bill">
+      <button id="gallery-search">DUMP SEARCH</button>
+    </form>
+    <button id="gallery-random">IM RANDOM</button>
+    <span class="status"></span>
+  </div>
+  <div id="gallery-images"></div>
+</div>
+
+<div id="controls">
+
+  <input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png">
+  <br>
+  <br>
+
+  <textarea id="shader"></textarea>
+  <br>
+  <br>
+
+  frames <input type="text" id="framecount" value="1">
+  interval <input type="text" id="frameinterval" value="0.1s">
+  <button id="add-frame">+add frame</button>
+  <button id="remove-all-frames">clear</button>
+  <button id="render" disabled>render</button>
+  <br>
+  reorder:
+  <button id="weave-frames">weave</button>
+  <button id="shuffle-frames">shuffle</button>
+  <button id="reverse-frames">reverse</button>
+  <button id="sort-frames">sort</button>
+  
+  <div id="frames"></div>
+  <br>
+  <br>
+
+  gif delay <input type="text" id="framedelay" value="0.06s">
+  background <input type="text" id="background" value="#fff">
+  your name here &rarr; <input type="text" id="username" value="">
+  <br>
+  <br>
+  <button id="help">help</button>
+  &nbsp;
+  <button id="add-shader">+</button>
+  <button id="remove-shader">&times;</button>
+  &nbsp;
+  <span id="shaders"></span>
+  <br>
+  <br>
+  <a href="http://asdf.us/im/gallery/?tag=shader" target="_blank">Photoblaster Gallery</a>
+</div>
+
+<div id="workspace"></div>
+
+<div id="rendered">
+  <button id="reset">reset</button>
+  <button id="pause">pause</button>
+  <button id="step-forward">&gt;&gt;</button>
+  <span class="status"></span>
+  <button id="save" disabled>save</button>
+  <button id="save_shader" >save shader</button>
+  <button id="upload" disabled>upload</button>
+  <br>
+  <input type="text" id="uploaded-url">
+</div>
+
+<div id="instructions"><iframe src="instructions.html"></iframe><button class="close">&times;</button></div>
+</body>
+<script type="text/javascript" src="js/vendor/gif-encode/util.js"></script>
+<script type="text/javascript" src="js/vendor/gif-encode/tube.js"></script>
+<script type="text/javascript" src="js/vendor/gif-encode/client.js"></script>
+<script type="text/javascript" src="js/vendor/gif.js"></script>
+<script type="text/javascript" src="js/vendor/FileSaver/FileSaver.js"></script>
+<script type="text/javascript" src="js/vendor/dataUriToBlob.js"></script>
+<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
+<script type="text/javascript" src="js/vendor/canvasquery.js"></script>
+<script type="text/javascript" src="js/canvasquery.dither.js"></script>
+<script type="text/javascript" src="js/asdf.js"></script>
+<script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="js/gallery.js"></script>
+<script type="text/javascript" src="js/color.js"></script>
+<script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="js/user.js"></script>
+<script type="text/javascript" src="js/shader.js"></script>
+<script type="text/javascript" src="js/util.js"></script>
+<script type="text/javascript" src="shaders.json"></script>
+<script type="text/javascript">
+
+var cc = cq(0,0).appendTo("#workspace")
+var w, h
+var lastGif
+
+$(init)
+
+var mousex, mousey
+
+function init(){
+  $("#url").change(load)
+  $("#reset").click(reset)
+  $("#pause").click(pause)
+  $("#step-forward").click(step_forward)
+  $("#add-frame").click(add_frame)
+  $("#frames").sortable({
+    start: drag_start,
+    stop: drag_stop
+  });
+  $(document).on("mousemove", function(e) {
+    mousex = event.pageX
+    mousey = event.pageY
+  })
+  $(document).on("click","#frames .remove",remove_frame)
+  $("#framecount").change(function(){
+    var val = $(this).int()
+    if (val < 1 || isNaN(val)) $(this).val(val = 1)
+    if (val == 1) $("#add-frame").html("+add frame")
+    else $("#add-frame").html("+add frames")
+  })
+  $("#background").change(function(){
+    document.body.style.backgroundColor = $("#background").string()
+  })
+  $("#frames").disableSelection();
+  $("#remove-all-frames").click(remove_all_frames)
+  $("#weave-frames").click(weave_frames)
+  $("#shuffle-frames").click(shuffle_frames)
+  $("#reverse-frames").click(reverse_frames)
+  $("#sort-frames").click(sort_frames)
+
+  $("#render").click(render)
+  $("#save").click(save)
+  $("#save_shader").click(save_shader)
+  $("#upload").click(upload)
+  $("#help,#instructions .close").click(function(){ $("#instructions").toggle() })
+  $("#instructions").draggable({
+    start: drag_start,
+    stop: drag_stop
+  })
+  $("#instructions").disableSelection();
+
+  load()
+  $(window).on("scroll DOMMouseScroll mousewheel", function(){ scrolling = true })
+
+  gallery.choose = choose
+  gallery.init()
+
+  user.init()
+  if (user.username.length) {
+    console.log("signed in as", user.username)
+  }
+
+  user.shaders.init()
+  user.shaders.loadLastAccessed()
+  
+  $("#test-js").click(function(){
+    var script = $("#shader").val()
+    var params = {script: script, verbose: 1}
+    $.post("/cgi-bin/js/test_javascript.py", params, function(data){
+      $("pre").remove()
+      $("#rendered").show()
+      var $pre = $("<pre>")
+      $pre.html(data)
+      $("#rendered").append($pre)
+      console.log(data)
+    })
+  })
+  
+  document.getElementById('shader').addEventListener('input', shader_build);
+  shader_build()
+
+  requestAnimationFrame(animate)
+}
+function choose (){
+  imageURL = this.src
+  loading = true
+  $("#url").val(imageURL)
+  loadImage(imageURL, ready)
+}
+function load(){
+  loading = true
+  var imageURL = $("#url").val()
+  loadImage(imageURL, ready)
+}
+
+function drag_start(){ dragging = true; $(this).addClass("dragging") }
+function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") }
+
+function reset(){
+  start_t = old_t
+  pause_t = 0
+  pause(false)
+  $("#rendered img").remove()
+  draw(0)
+}
+function pause(state){
+  $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused).html(paused ? "paused" : "pause")
+}
+function step_forward(){
+  var step = $("#framedelay").float() * 1000 || 100
+  old_t += step
+  draw(old_t)
+  pause(true)
+}
+var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0
+var paused = false, dragging = false, rendering = false, scrolling = false, deferring = false, scrollTimeout = null;
+var fps = 30;
+function animate(t){
+  raf_id = requestAnimationFrame(animate);
+
+  var step_t = t - old_t
+  old_t = t
+  
+  if (paused || dragging || rendering || scrolling || deferring) {
+    pause_t += step_t
+    if (scrolling) {
+      scrolling = false
+      deferring = true
+    }
+    else {
+      deferring = false
+    }
+    return
+  }
+
+  // var timing = +(new Date())
+  draw(t)
+  // timing = +(new Date()) - timing
+  fps = avg(fps, 1000/step_t, 4)
+  status(~~(fps) + " fps")
+}
+function draw(t) {
+  t -= start_t
+  t -= pause_t
+  frame = giveFrame(t)
+  shade(frame, t)
+}
+
+var frame, img_frame;
+function giveFrame(t){
+  if (window.gif) {
+    if (gif.currentFrame) {
+      return gif.frames[gif.currentFrame(t)]
+    }
+    else {
+      return gif.frames[0]
+    }
+  }
+  else if (window.img) {
+    return img_frame
+  }
+  else {
+    return cq(w, h)
+  }
+}
+
+function ready(){
+  loading = false
+  if (window.gif) {
+    frame = gif.frames[0]
+    w = cc.canvas.width = frame.ctx.canvas.width
+    h = cc.canvas.height = frame.ctx.canvas.height
+    for (var i=0, f; f=gif.frames[i]; i++){
+      f.cloneData = f.ctx.getImageData(0,0,w,h)
+    }
+  }
+  else {
+    fc = cq(img.width, img.height)
+    fc.drawImage(img, 0, 0)
+    frame = img_frame = { ctx: fc.context }
+    w = cc.canvas.width = frame.ctx.canvas.width
+    h = cc.canvas.height = frame.ctx.canvas.height
+    frame.cloneData = frame.ctx.getImageData(0,0,w,h)
+  }
+}
+
+function add_frame(){
+  var frame_count = $("#framecount").int()
+  if (frame_count < 2) {
+    add_single_frame()
+  }
+  else {
+    add_frames(frame_count)
+  }
+}
+function add_single_frame(){
+  var $el = $("<div>")
+  $el.html( $("#frame-template").html() )
+  $el.attr('index', $("#frames div").length)
+  var frame = cc.clone().appendTo($el.find(".frame")[0])
+  frame.canvas.className = "fullsize"
+  frame.canvas.style.display = "none"
+  var thumb = cc.clone().resize(100,100).appendTo($el.find(".frame")[0])
+  $("#frames").append($el)
+  $("#render").enable()
+}
+function add_frames(frame_count){
+  rendering = true
+  var t = old_t - start_t - pause_t
+  var frame_delay = $("#frameinterval").float() * 1000
+  var frame
+  for (var i = 0; i < frame_count; i++) {
+    frame = giveFrame(t)
+    t += frame_delay
+    shade(frame, t)
+    add_single_frame()
+  }
+  rendering = false
+}
+function remove_frame(){
+  $(this).closest("div").remove()
+  if ($("#frames div").length == 0) {
+    $("#render").disable()
+  }
+}
+function remove_all_frames(){
+  $("#frames").empty()
+}
+function shuffle_frames(){
+  var shuffled = []
+  var $frames = $("#frames div")
+  $("#frames").empty().append(shuffle($frames))
+}
+function reverse_frames(){
+  var $frames = $("#frames div")
+  $("#frames").empty().append(reverse($frames))
+}
+function weave_frames(){
+  var $frames = $("#frames div")
+  $("#frames").empty().append(weave($frames))
+}
+function sort_frames(){
+  var $frames = $("#frames div")
+  var sorted = $frames.map(function(i,el){ console.log(i,el); return [[ el.getAttribute('index'), el ]] })
+                     .sort(function(a,b){ return a[0]-b[0] })
+                     .map(function(i,e){ console.log( e ); return e[1] })
+  $("#frames").empty().append(sorted)
+}
+
+function render (){
+  if (rendering) return
+  rendering = true
+  encoder.reset()
+  var delay = $("#framedelay").float() * 1000 || 100
+  $("#frames canvas.fullsize").each(function(){
+    var frame = cq(this.width, this.height).fillStyle($("#background").string()).fillRect(0,0,this.width, this.height).drawImage(this,0,0)
+    encoder.addFrame(frame.canvas, delay)
+  })
+  $("#pause,#render,#add-frame").disable()
+  $("#rendered").find("img").remove()
+  $("#rendered").show()
+  // really bad results with neuquant?
+  // status("quantizing")
+  // encoder.quantize()
+  status("encoding")
+  try {
+    encoder.encode()
+  } catch (e) {
+    $("#pause,#render,#add-frame").enable()
+    rendering = false
+    status(e)
+    throw e
+  }
+  $("#render").html("rendering")
+}
+
+function status(s){ $(".status").html(s) }
+
+var encoder = new GifEncoder()
+
+encoder.on("quantized", function(url){
+  status("encoding")
+  encoder.encode()
+})
+
+encoder.on("encoded-frame", function(done,count){
+  status("encoded " + done + " / " + count)
+})
+
+encoder.on("rendered", function(bytes){
+  status(filesize(bytes.length))
+})
+
+encoder.on("rendered-url", function(url){
+  var image = new Image ()
+  lastGif = image.src = url
+  $("#rendered").append(image)
+  $("#uploaded-url").hide().val("")
+  $("#save,#upload,#rendered").show()
+  $("#pause,#render,#add-frame,#save,#upload").enable()
+  $("#render").html("render")
+  rendering = false
+  pause(true)
+})
+
+function get_filename(){
+  var basename = $("#url").val().replace(/^.*\//,"").replace(/\..*$/,"").replace(/[^-_ a-zA-Z0-9]/g,"")
+  var username = user.username
+  var filename = basename + "-" + username + "-" + (+new Date()) + ".gif"
+  return filename.replace(/ /g,"_").replace(/-+/g,"-")
+}
+function save_shader(){
+    typeof shader_id_root == 'undefined' ? shader_id_root = "" : shader_id_root
+    var params = {
+      script : $("#shader").val(),
+      image_url : $("#url").val(),
+      username : user.username,
+      shader_id : shader_id_root 
+    }
+    
+    console.log(params)
+    $.post("/cgi-bin/im/shader/save", params, function(resp){
+      console.log(resp);
+      data = JSON.parse(resp)
+      if (data.ERROR ){
+        alert(data.ERROR)
+        return false
+      }
+      if (! shader_id_root) {
+        shader_id_root = data.id;
+      }
+      var blob = dataUriToBlob(cc.clone().resize(200,200).canvas.toDataURL("image/png"))
+      var form = new FormData();
+  
+      form.append("id", data.id);
+      form.append("qqfile", blob);
+      $.ajax({
+        url: "/cgi-bin/im/shader/thumbnail_upload",
+        type: "POST",
+        data: form,
+        processData: false,
+        contentType: false,
+      }).done(function(resp){
+        if (! resp) { console.log("nope") }
+        console.log(resp);
+      });
+
+    })
+    //maintain the shader_id_root...
+    return shader_id_root; 
+}
+function save (){
+  if (! lastGif) return;
+  var filename = get_filename()
+  var blob = dataUriToBlob(lastGif)
+  saveAs(blob, filename);
+}
+function saveJSON (data, filename) {
+  var bytes = JSON.stringify(data)
+  var buf = new ArrayBuffer(bytes.length);
+  var arr = new Uint8Array(buf);
+  for (var i = 0; i < bytes.length; i++) {
+    arr[i] = bytes.charCodeAt(i);
+  }
+
+  var blob = new Blob([arr], { type: "text/json" });
+  blob.slice = blob.slice || blob.webkitSlice;
+  
+  saveAs(blob, filename);
+}
+
+function upload(){
+  var filename = get_filename()
+  var username = user.username
+  var blob = dataUriToBlob(lastGif)
+  uploadImage({
+    blob: blob,
+    filename: filename,
+    username: username,
+    success: function(data){
+    
+      // data.url
+      // data.filesize
+      // data.success
+
+      console.log(data);
+      status("uploaded");
+      $("#uploaded-url").show().focus().val(data.url)
+    },
+    error: function(data){
+      console.log(data)
+      status("error uploading: " + data.error)
+    }
+  });
+}
+
+</script>
+<script type="text/html" id="frame-template">
+<button class="remove">x</button>
+<span class="frame"></span>
+</script>
+<script type="text/javascript-shader" id="first">
+
+u = x + t/10
+v = y * sin(b/100)
+
+rgbpixel(d,u,v)
+
+</script>
+<script type="text/javascript-shader" id="second">
+xx = x, yy = y
+
+var d = ((x % 2) + 2 * (y % 2)) - 2
+
+x += w/2
+y -= h/2
+t/=-200
+y/=96
+x/=50
+v = (Math.sin(t+x*y) + 1.0) / 2
+v = (0.6) * v - 0.4 + Math.random()
+
+v = clamp( v*64 + 128 , 0, 255)
+v += d*32
+if (a == 0) r = g = b = xx/w * 255
+a = v > 128 ? v:0
+
+</script>
+</html>
+
diff --git a/shader-picker.html b/shader-picker.html
index d0d2625..87aea23 100644
--- a/shader-picker.html
+++ b/shader-picker.html
@@ -21,10 +21,10 @@ div { display: inline-block; padding: 10px;}
 #rendered img { display: block; }
 #render,#save { font-weight: bold; }
 #render { float: right; }
-#instructions { position: absolute;top:20px;right:20px; width:190px;height:465px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
-#instructions iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
-#instructions.dragging iframe { pointer-events: none; }
-#instructions .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
+#commands { position: absolute;top:20px;right:20px; width:190px;height:465px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
+#commands iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
+#commands.dragging iframe { pointer-events: none; }
+#commands .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
 .close,.remove { cursor: pointer; }
 #uploaded-url { display: none; width: 300px; }
 form { display: inline-block; }
@@ -79,7 +79,7 @@ a { color: #00f; }
 	your name here &rarr; <input type="text" id="username" value="">
 	<br>
 	<br>
-	<button id="help">help</button>
+	<button id="show-commands">help</button>
 	&nbsp;
 	<button id="add-shader">+</button>
 	<button id="remove-shader">&times;</button>
@@ -103,7 +103,7 @@ a { color: #00f; }
 	<input type="text" id="uploaded-url">
 </div>
 
-<div id="instructions"><iframe src="instructions.html"></iframe><button class="close">&times;</button></div>
+<div id="commands"><iframe src="commands.html"></iframe><button class="close">&times;</button></div>
 </body>
 <script type="text/javascript" src="js/vendor/gif-encode/util.js"></script>
 <script type="text/javascript" src="js/vendor/gif-encode/tube.js"></script>
@@ -127,8 +127,16 @@ a { color: #00f; }
 <script type="text/javascript" src="js/user.js"></script>
 <script type="text/javascript" src="js/render.js"></script>
 <script type="text/javascript" src="js/shader.js"></script>
+<script type="text/javascript" src="js/save.js"></script>
 <script type="text/javascript" src="js/util.js"></script>
+<script type="text/javascript" src="js/help.js"></script>
 <script type="text/javascript" src="shaders.json"></script>
+
+<script type="text/html" id="frame-template">
+<button class="remove">x</button>
+<span class="frame"></span>
+</script>
+
 <script type="text/javascript">
 
 var cc = cq(0,0).appendTo("#workspace")
@@ -154,19 +162,10 @@ function init(){
 	})
 	
 	frame_editor.init()
-
-	$(window).on("scroll DOMMouseScroll mousewheel", function(){ scrolling = true })
-	$("#help,#instructions .close").click(function(){ $("#instructions").toggle() })
-	$("#instructions").draggable({
-		start: drag_start,
-		stop: drag_stop
-	})
-	$("#instructions").disableSelection();
-
+	help.init()
 	load()
 
-	gallery.choose = choose
-	gallery.init()
+	gallery.init(choose)
 
 	user.init()
 	if (user.username.length) {
@@ -181,13 +180,7 @@ function init(){
 
 	requestAnimationFrame(animate)
 }
-function drag_start(){ dragging = true; $(this).addClass("dragging") }
-function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") }
 
 </script>
-<script type="text/html" id="frame-template">
-<button class="remove">x</button>
-<span class="frame"></span>
-</script>
 </html>
 
diff --git a/shaders.json b/shaders.json
index 0653237..1ab66f6 100644
--- a/shaders.json
+++ b/shaders.json
@@ -1 +1 @@
-window.SHADERS = [{"name":"red","shader":"r = 255"},{"name":"demo","shader":"\n\nu = x + t/10\nv = y * sin(b/100)\n\nrgbpixel(d,u,v)\n\n"},{"name":"dither","shader":"\nxx = x, yy = y\n\nvar d = ((x % 2) + 2 * (y % 2)) - 2\n\nx += w/2\ny -= h/2\nt/=-200\ny/=96\nx/=50\nv = (sin(t+x*y) + 1.0) / 2\nv = (0.6) * v - 0.4 + random()\n\nv = clamp( v*64 + 128 , 0, 255)\nv += d*32\nif (a == 0) r = g = b = xx/w * 255\na = v > 128 ? v:0\n\n"},{"name":"rotozoom","shader":"u = (x * sin(t/10000)) - (y / cos(t/1000))\nv =  (x / cos(t/1000)) + (y * sin(t/10000))\nrgbpixel(d,u,v)"},{"name":"donjuan","shader":"t /= 500\nif (a == 0) { r = g = b = 0; t /= -3 }\nr *= (sin(t*x/y) + 1)/2\ng *= (cos(t*y/x) + 0.4)/2\nb *= (sin(t) + 1.5)/2\na = b/9"},{"name":"barber","shader":"t/=10\noo = (y+x+t) % 100\nr *= 1/sin(oo/100)\ng *= 1/sin(oo/100)\nb *= 1/sin(oo/100)"},{"name":"redsmear","shader":"r = x\nz = 10\nr += random()*z\ng += random()*z\nb += random()*z"},{"name":"colorcycle","shader":"\nt /= 5000\nr = hsl2rgb( b/255 + t%2-1, 1.0, 0.5)[0]\n"},{"name":"tvfuzz","shader":"t /= 500\nif (a == 0) { r = g = b = x; t /= -3 }\nvar waveWidth = ((cos(t)/sin(t) - 0.5) * 100) /4\n\nlineSize = 5.0\nvar color = sin(t)*100;\nr -= color * abs(sin((x - (t * 50.0) - (sin(t * 0.2) * 60.0)) * 0.2))\ng -= color * abs(sin(((x + (2.0 * 3.14)) - (t * 50.0) - (sin(t * 0.4) * 60.0)) * 0.2))\nb -= color * abs( sin(  (  x - (2.0 * 3.14) - (t * 50.0) - (sin(t * 1.0) * 60.0))  * 0.2  )  );\nif(r&g&b){a = abs(sin(y)*1000)+t}else{a=1000}\n//if(r&g&b){a = abs(sin(y)*1000)-t}else{a=1000}"},{"name":"pepper","shader":"t/=6000000\npx = x/100 - 1\npy = y/(100) -1\nsx = 0.8 * px -py * sin( abs(sin(x/abs(sin(t)))) * px - 5000. * t);\ndy = 1./  (abs(py  - sx) );\ndy +=  (py - (px))*50;\nr += (px + 0.5) * dy \ng = abs(sin(t))*0.9 * dy \nb = dy\na =1000"}]
+window.EXAMPLE_SHADERS = [{"name":"red","shader":"r = 255"},{"name":"demo","shader":"\n\nu = x + t/10\nv = y * sin(b/100)\n\nrgbpixel(d,u,v)\n\n"},{"name":"dither","shader":"\nxx = x, yy = y\n\nvar d = ((x % 2) + 2 * (y % 2)) - 2\n\nx += w/2\ny -= h/2\nt/=-200\ny/=96\nx/=50\nv = (sin(t+x*y) + 1.0) / 2\nv = (0.6) * v - 0.4 + random()\n\nv = clamp( v*64 + 128 , 0, 255)\nv += d*32\nif (a == 0) r = g = b = xx/w * 255\na = v > 128 ? v:0\n\n"},{"name":"rotozoom","shader":"u = (x * sin(t/10000)) - (y / cos(t/1000))\nv =  (x / cos(t/1000)) + (y * sin(t/10000))\nrgbpixel(d,u,v)"},{"name":"donjuan","shader":"t /= 500\nif (a == 0) { r = g = b = 0; t /= -3 }\nr *= (sin(t*x/y) + 1)/2\ng *= (cos(t*y/x) + 0.4)/2\nb *= (sin(t) + 1.5)/2\na = b/9"},{"name":"barber","shader":"t/=10\noo = (y+x+t) % 100\nr *= 1/sin(oo/100)\ng *= 1/sin(oo/100)\nb *= 1/sin(oo/100)"},{"name":"redsmear","shader":"r = x\nz = 10\nr += random()*z\ng += random()*z\nb += random()*z"},{"name":"colorcycle","shader":"\nt /= 5000\nr = hsl2rgb( b/255 + t%2-1, 1.0, 0.5)[0]\n"},{"name":"tvfuzz","shader":"t /= 500\nif (a == 0) { r = g = b = x; t /= -3 }\nvar waveWidth = ((cos(t)/sin(t) - 0.5) * 100) /4\n\nlineSize = 5.0\nvar color = sin(t)*100;\nr -= color * abs(sin((x - (t * 50.0) - (sin(t * 0.2) * 60.0)) * 0.2))\ng -= color * abs(sin(((x + (2.0 * 3.14)) - (t * 50.0) - (sin(t * 0.4) * 60.0)) * 0.2))\nb -= color * abs( sin(  (  x - (2.0 * 3.14) - (t * 50.0) - (sin(t * 1.0) * 60.0))  * 0.2  )  );\nif(r&g&b){a = abs(sin(y)*1000)+t}else{a=1000}\n//if(r&g&b){a = abs(sin(y)*1000)-t}else{a=1000}"},{"name":"pepper","shader":"t/=6000000\npx = x/100 - 1\npy = y/(100) -1\nsx = 0.8 * px -py * sin( abs(sin(x/abs(sin(t)))) * px - 5000. * t);\ndy = 1./  (abs(py  - sx) );\ndy +=  (py - (px))*50;\nr += (px + 0.5) * dy \ng = abs(sin(t))*0.9 * dy \nb = dy\na =1000"},{"name":"bouncy","shader":"\nu=(x + sin(t/100+y/20)*10)\nv=(y + sin(t/100+x/20)*10)\nrgbpixel(d,u,v)"}]
diff --git a/tutorial.html b/tutorial.html
new file mode 100644
index 0000000..3b4a58b
--- /dev/null
+++ b/tutorial.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<head>
+<title>tutorial</title>
+<style type="text/css">
+html,body{margin:0;padding:0; padding: 5px;}
+article { font-family: serif; font-size: 14px; margin:0;padding:0;}
+u{ color: #866; }
+i{ color: #666; }
+a{ color: #a39; }
+</style>
+</head>
+<body>
+<article id="pre">Shaders are procedures that draw a picture by coloring each pixel individually.  Use shaders on gifs and images to make new effects.
+
+Your basic variables are position (x, y),
+time (t), and color (r, g, b, a).
+
+Many math functions such as <i>cos</i> and <i>sqrt</i> are available, along with functions from GLSL like <i>step</i> and <i>mix</i>.  You can see a full list by clicking "commands" above.  When you make a cool effect, render a gif and save the shader for others to use.
+
+You can apply these shaders to any image.  Click "images" below to search <a href="http://dump.fm/">Dumpfm</a> and <a href="http://asdf.us/im/" target="_blank">Photoblaster</a>, or enter a URL at top left.
+
+See more: <a href="http://asdf.us/dither/" target="_blank">Dither</a>
+</article>
+</body>
+<script>
+pre.innerHTML = pre.innerHTML.replace(/\(/g,"(<i>").replace(/\)/g,"</i>)").replace(/\n/g,"<br>")
+</script>
+</html>
author	Jules Laplace <jules@okfoc.us>	2014-11-22 23:19:36 -0500
committer	Jules Laplace <jules@okfoc.us>	2014-11-22 23:19:36 -0500
commit	070b5e6d9d3c7e23c06f0ae0b75026923529c24d (patch)
tree	89c430dd17ca54ff60f885ecd99cf6cfa0f0b7ff
parent	04537ed34d443d0610b77420d1dbef64bc05fbfa (diff)
parent	1631cdf643283fc71bc9d70b5dcbce03ab9c2386 (diff)