diff options
49 files changed, 2253 insertions, 334 deletions
@@ -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; @@ -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 Binary files differindex 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 Binary files differindex 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 Binary files differindex 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 Binary files differnew file mode 100644 index 0000000..39c134f --- /dev/null +++ b/img/palette.gif @@ -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">⚛</button> +<button id="upload">→</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, "&").replace(/</g, "<").replace(/>/g, ">").replace(/\"/g, """); +} +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) + } + }); } @@ -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) } @@ -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,"") } @@ -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">×</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 → <input type="text" id="username" value=""> + <br> + <br> + <button id="show-commands">help</button> + + <button id="add-shader">+</button> + <button id="remove-shader">×</button> + + <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">>></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">×</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"> shaderblaster </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">→</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">>></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">×</button></div> +<div class="iframe" id="commands"><iframe src="commands.html"></iframe><button class="close">×</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">>></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 → <input type="text" id="username" value=""> + <br> + <br> + <button id="help">help</button> + + <button id="add-shader">+</button> + <button id="remove-shader">×</button> + + <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">>></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">×</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 → <input type="text" id="username" value=""> <br> <br> - <button id="help">help</button> + <button id="show-commands">help</button> <button id="add-shader">+</button> <button id="remove-shader">×</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">×</button></div> +<div id="commands"><iframe src="commands.html"></iframe><button class="close">×</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> |
