From f17fca66f25c1b8ad2f572d803473fbeab915d1e Mon Sep 17 00:00:00 2001 From: Jules Date: Fri, 7 Feb 2014 10:21:11 -0500 Subject: actual index on /dither .. fix shader-animate --- index.html | 67 ++++++++++++++++---------------------------------------------- 1 file changed, 17 insertions(+), 50 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index f622cce..9041c3d 100644 --- a/index.html +++ b/index.html @@ -5,57 +5,24 @@

- - - - - - - - - +

dither

+ +... + + + + +

shader

+ +... + + + + + +

+ - - - -- cgit v1.2.3-70-g09d2 From 8a10efc7e57db2c187aa2b008e524441cd29cedb Mon Sep 17 00:00:00 2001 From: Jules Date: Fri, 7 Feb 2014 10:26:22 -0500 Subject: status --- index.html | 2 +- shader-animate.html | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'index.html') diff --git a/index.html b/index.html index 9041c3d..293ed24 100644 --- a/index.html +++ b/index.html @@ -16,11 +16,11 @@ ... - + diff --git a/shader-animate.html b/shader-animate.html index e63a728..82b841b 100644 --- a/shader-animate.html +++ b/shader-animate.html @@ -19,6 +19,7 @@ delay +

-- 
cgit v1.2.3-70-g09d2

From 06c870fda93d19474e84be998ab94c804b189d23 Mon Sep 17 00:00:00 2001
From: Jules <jules@asdf.us>
Date: Fri, 7 Feb 2014 11:04:30 -0500
Subject: better index on dither

---
 index.html        | 209 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 shader-combo.html |   2 +-
 2 files changed, 209 insertions(+), 2 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index 293ed24..6aa271b 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,26 @@
 <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; }
+
+</style>
 </head>
 <body>
-<div>
+
+<div id="colors">
+</div>
+
+<div id="body">
+<img src="img/palette.gif" id="palette">
+<button id="dice">⚛</button>
+
 <h1>dither</h1>
 <a target="_blank" href="dither-picker.html"><button>dither-picker</button></a>
 ...
@@ -21,8 +38,198 @@
 <a target="_blank" href="shader-picker.html"><button>shader-picker</button></a>
 
 <a target="_blank" href="shader-api.html"><button>shader-api</button></a>
+
+<br><br>
+<a target="_blank" href="/gif-recorder/"><button>gif-recorder</button></a>
+<a target="_blank" href="/neighbor/"><button>neighbor</button></a>
+<br><br>
 </div>
 
+<script type="text/javascript" src="js/vendor/canvasquery.js"></script>
+<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript">
+
+//
+// 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];
+  }
+}
+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;
+	}
+}
+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");
+	var offset = $("#palette").offset();
+	var paletteImg = $("#palette")[0];
+	var palette = cq(paletteImg);
+	var pattern, mask;
+	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 ).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","green","cyan","peru","yellow"])].onclick()
+	}
+	$("#dice").click(dice)
+	dice()
+}
+$("#dice").focus()
+</script>
 </body>
 </html>
 
diff --git a/shader-combo.html b/shader-combo.html
index e16112c..a7ede26 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -83,7 +83,7 @@ a { color: #00f; }
 		<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/gif-recorder/">Gif Recorder</option>
+		<option value="http://asdf.us/dither/">Dither</option>
     <option value="">--------------</option>
     <option selected value="default">links</option>
   </select>
-- 
cgit v1.2.3-70-g09d2

From 53f8beddffb415c870de6d0497532a79530076e0 Mon Sep 17 00:00:00 2001
From: Jules <jules@asdf.us>
Date: Fri, 7 Feb 2014 11:20:08 -0500
Subject: autofocus on atom

---
 index.html | 1 +
 1 file changed, 1 insertion(+)

(limited to 'index.html')

diff --git a/index.html b/index.html
index 6aa271b..bbba3b3 100644
--- a/index.html
+++ b/index.html
@@ -229,6 +229,7 @@ function load(){
 	dice()
 }
 $("#dice").focus()
+$(window).focus(function(){ $("#dice").focus() })
 </script>
 </body>
 </html>
-- 
cgit v1.2.3-70-g09d2

From f0696c86543e09d2795afc18d62134f5e234c405 Mon Sep 17 00:00:00 2001
From: Jules <jules@asdf.us>
Date: Fri, 7 Feb 2014 14:10:33 -0500
Subject: more links

---
 index.html | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index bbba3b3..f36193a 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,7 @@ html,body{width:100%;height:100%;margin:0;padding:0;}
 <a target="_blank" href="halftone.html"><button>halftone</button></a>
 
 <h1>shader</h1>
-<a target="_blank" href="shader-combo.html"><button>shader-combo</button></a>
+<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>
@@ -39,10 +39,22 @@ html,body{width:100%;height:100%;margin:0;padding:0;}
 
 <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>
+
 <br><br>
 <a target="_blank" href="/gif-recorder/"><button>gif-recorder</button></a>
 <a target="_blank" href="/neighbor/"><button>neighbor</button></a>
-<br><br>
+...
+<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="/sortpixels/"><button>sortpixels</button></a>
+<a target="_blank" href="/strobe/"><button>strobe</button></a>
 </div>
 
 <script type="text/javascript" src="js/vendor/canvasquery.js"></script>
-- 
cgit v1.2.3-70-g09d2

From 2edafcdf77c83743c9835474c3e865cd7f570ac0 Mon Sep 17 00:00:00 2001
From: Jules <jules@asdf.us>
Date: Fri, 7 Feb 2014 23:41:08 -0500
Subject: cq.resizePixel background

---
 index.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index f36193a..5fb7c30 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@ html,body{width:100%;height:100%;margin:0;padding:0;}
 #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>
@@ -39,14 +39,13 @@ html,body{width:100%;height:100%;margin:0;padding:0;}
 
 <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>
 
-<br><br>
+<h1>etc..</h1>
 <a target="_blank" href="/gif-recorder/"><button>gif-recorder</button></a>
 <a target="_blank" href="/neighbor/"><button>neighbor</button></a>
 ...
@@ -59,6 +58,7 @@ html,body{width:100%;height:100%;margin:0;padding:0;}
 
 <script type="text/javascript" src="js/vendor/canvasquery.js"></script>
 <script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="http://asdf.us/neighbor/neighbor.js"></script>
 <script type="text/javascript">
 
 //
@@ -225,7 +225,7 @@ function load(){
 		swatch.onclick = function(){
 			color = $(this).data("color");
 			p = cq(paletteImg);
-			patternURI = pattern.clone().blend( color.toString(), "screen", 1.0 ).canvas.toDataURL("image/png");
+			patternURI = pattern.clone().blend( color.toString(), "screen", 1.0 ).resizePixel(1 << randint(6)).canvas.toDataURL("image/png");
 			document.body.style.backgroundImage = 'url(' + patternURI + ')';
 		}
 	}
@@ -235,7 +235,7 @@ function load(){
 		p.x = randint(palette.canvas.width-20)+20
 		p.y = randint(palette.canvas.height)
 		pick(p)
-		swatches[choice(["red","green","cyan","peru","yellow"])].onclick()
+		swatches[choice(["red","yellow"])].onclick()
 	}
 	$("#dice").click(dice)
 	dice()
-- 
cgit v1.2.3-70-g09d2

From fa3e56f0e4316a20fff33bc9887aa3b3e1fe8c32 Mon Sep 17 00:00:00 2001
From: Jules <jules@asdf.us>
Date: Sat, 8 Feb 2014 00:09:53 -0500
Subject: export background from index

---
 index.html | 16 +++++++++++++++-
 js/save.js | 12 ++++++------
 2 files changed, 21 insertions(+), 7 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index 5fb7c30..7a82b45 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,9 @@ h1 { font-size: 26px; font-weight: normal }
 <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>
@@ -58,7 +61,11 @@ h1 { font-size: 26px; font-weight: normal }
 
 <script type="text/javascript" src="js/vendor/canvasquery.js"></script>
 <script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
-<script type="text/javascript" src="http://asdf.us/neighbor/neighbor.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">
 
 //
@@ -190,10 +197,12 @@ 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);
@@ -239,6 +248,11 @@ function load(){
 	}
 	$("#dice").click(dice)
 	dice()
+	$("#upload").click(function(){
+		if (patternURI) {
+			upload(patternURI, (+ new Date()) + "-" + user.username + "-dither.png")
+		}
+	})
 }
 $("#dice").focus()
 $(window).focus(function(){ $("#dice").focus() })
diff --git a/js/save.js b/js/save.js
index f54f7d1..40c1838 100644
--- a/js/save.js
+++ b/js/save.js
@@ -24,14 +24,14 @@ function saveJSON (data, filename) {
   saveAs(blob, filename);
 }
 
-function upload(){
-  var filename = get_filename()
-  var username = user.username
-  var blob = dataUriToBlob(lastGif)
+function upload(uri, filename){
+  filename = filename || get_filename()
+  uri = uri || lastGif
+  var blob = dataUriToBlob(uri)
   uploadImage({
     blob: blob,
     filename: filename,
-    username: username,
+    username: user.username,
     success: function(data){
     
       // data.url
@@ -39,9 +39,9 @@ function upload(){
       // data.success
 
       console.log(data);
-      status("uploaded");
       $("#uploaded-url").show().focus().val(data.url)
       $("#uploaded-url + br").show()
+      status && status("uploaded");
     },
     error: function(data){
       console.log(data)
-- 
cgit v1.2.3-70-g09d2

From 3c3c7c840c872ece445ff74eb3095f9f11d4b8d8 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sat, 8 Feb 2014 02:05:01 -0500
Subject: glitchyplop

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index 7a82b45..875460e 100644
--- a/index.html
+++ b/index.html
@@ -55,7 +55,7 @@ h1 { font-size: 26px; font-weight: normal }
 <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="/sortpixels/"><button>sortpixels</button></a>
+<a target="_blank" href="http://glitchyplop.com/"><button>sortpixels</button></a>
 <a target="_blank" href="/strobe/"><button>strobe</button></a>
 </div>
 
-- 
cgit v1.2.3-70-g09d2

From 0c98634db0fe74b8fe7bb18804db91a9c3c59803 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 9 Feb 2014 19:29:22 -0500
Subject: tag superpaint patterns as dither

---
 index.html  | 2 +-
 js/image.js | 1 +
 js/save.js  | 6 ++++--
 3 files changed, 6 insertions(+), 3 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index 875460e..5d51485 100644
--- a/index.html
+++ b/index.html
@@ -250,7 +250,7 @@ function load(){
 	dice()
 	$("#upload").click(function(){
 		if (patternURI) {
-			upload(patternURI, (+ new Date()) + "-" + user.username + "-dither.png")
+			upload(patternURI, (+ new Date()) + "-" + user.username + "-dither.png", "dither")
 		}
 	})
 }
diff --git a/js/image.js b/js/image.js
index ef58f4b..27b5c2c 100644
--- a/js/image.js
+++ b/js/image.js
@@ -67,6 +67,7 @@ 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/shader/upload");
diff --git a/js/save.js b/js/save.js
index 40c1838..44d1e4b 100644
--- a/js/save.js
+++ b/js/save.js
@@ -24,16 +24,18 @@ function saveJSON (data, filename) {
   saveAs(blob, filename);
 }
 
-function upload(uri, filename){
+function upload(uri, filename, tag){
   filename = filename || get_filename()
   uri = 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
-- 
cgit v1.2.3-70-g09d2