better index on dither

author: Jules <jules@asdf.us> 2014-02-07 11:04:30 -0500
committer: Jules <jules@asdf.us> 2014-02-07 11:04:30 -0500
commit: 06c870fda93d19474e84be998ab94c804b189d23 (patch)
tree: 49bb626e8061b144e62778acded73509b18ebcb2
parent: 8a10efc7e57db2c187aa2b008e524441cd29cedb (diff)
2 files changed, 209 insertions, 2 deletions
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">&#9883;</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-localstorage.html"><button>shader-localstorage</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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;");
+}
+function scrollToBottom (el) {
+	try { $(el).scrollTop( $(el)[0].scrollHeight ) }
+	catch (err) { }
+}
+var Trig = {
+  distanceBetween2Points: function ( point1, point2 ) {
+    var dx = point2.x - point1.x;
+    var dy = point2.y - point1.y;
+    return Math.sqrt( Math.pow( dx, 2 ) + Math.pow( dy, 2 ) );
+  },
+  angleBetween2Points: function ( point1, point2 ) {
+    var dx = point2.x - point1.x;
+    var dy = point2.y - point1.y;
+    return Math.atan2( dx, dy );
+  },
+  magnitude: function (point) {
+    return Math.sqrt( Math.pow( point.x, 2 ) + Math.pow( point.y, 2 ) );
+  }
+}
+
+function fib (f) { for (var i = 1, n = 1; n < 200; i++, n += i) f(n) }
+function random() { return Math.random() }
+function rand(x) { return Math.random() * x }
+function randint(x) { return Math.floor(Math.random() * x) }
+function clamp(x,a,b) { return Math.min(Math.max(x,a),b) }
+function choice(a){ return a[ randint(a.length) ] }
+
+
+//
+// main
+
+var palette = document.querySelector("#palette")
+palette.addEventListener("load", load)
+if (palette.complete) load()
+
+function load(){
+	console.log("hello");
+	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>
author	Jules <jules@asdf.us>	2014-02-07 11:04:30 -0500
committer	Jules <jules@asdf.us>	2014-02-07 11:04:30 -0500
commit	06c870fda93d19474e84be998ab94c804b189d23 (patch)
tree	49bb626e8061b144e62778acded73509b18ebcb2
parent	8a10efc7e57db2c187aa2b008e524441cd29cedb (diff)