From 96fd8423cc0793d47cab9117b0167fe19041cdea Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Tue, 10 Dec 2013 02:29:03 -0500
Subject: dither demo

---
 shader-demo.html | 35 +++++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

(limited to 'shader-demo.html')

diff --git a/shader-demo.html b/shader-demo.html
index 8a75b2b..8631ad0 100644
--- a/shader-demo.html
+++ b/shader-demo.html
@@ -13,8 +13,9 @@ div { float: left; padding: 10px;}
 w/h <input type="text" id="width" value="250">x<input type="text" id="height" value="320">
 frames <input type="text" id="frames" value="7">
 delay <input type="text" id="frames" value="20">
-<button id="render">render</button>
+<button id="render" disabled>render</button>
 <button id="demo">demo</button>
+<button id="dither-demo">dither</button>
 <br>
 <br>
 <textarea id="shader">
@@ -29,13 +30,19 @@ delay <input type="text" id="frames" value="20">
 <script type="text/javascript">
 $.fn.int = function(){ return parseInt($(this).val(),10) }
 $.fn.float = function(){ return parseFloat($(this).val()) }
+function clamp(n,a,b){ return n<a?a:n<b?n:b }
 
-$(demo)
+$("#width,#height").change(resize)
+$("#demo").click(function(){ demo("#first") })
+$("#dither-demo").click(function(){ demo("#second") })
+$(function(){ demo('#second') })
+//$("#shader").keyup(draw)
+//$("#render").click(drawFrame)
 
 var cc = cq(0,0).appendTo("#workspace")
 var w, h
-function demo(){
-  $el = $("#first")
+function demo(el){
+  $el = $(el)
   w = $el.data().width
   h = $el.data().height
   s = $el.html()
@@ -44,9 +51,6 @@ function demo(){
   $("#shader").html(s)
   resize()
 }
-$("#width,#height").change(resize)
-//$("#shader").keyup(draw)
-//$("#render").click(drawFrame)
 
 function resize(){
   w = $("#width").int()
@@ -63,7 +67,6 @@ function draw(t){
   animate(t)
 }
 draw()
-function clamp(n,a,b){n<a?a:n>b?b:n}
 function animate(t){
   try {
     var f = $("#shader").val()
@@ -108,6 +111,22 @@ y/=10
 x/=100
 r=g=b= Math.sin(t+x*y)*255
 
+</script>
+<script type="text/javascript-shader" id="second" data-width="600" data-height="400">
+
+var d = ((x % 2) + 2 * (y % 2)) - 2
+
+x -= w/2
+y -= h/2
+t/=-100
+y/=10
+x/=100
+v = Math.sin(t+x*y) + 0.1
+
+v = clamp( v*64 + 128 , 0, 255)
+v += d*32
+r=g=b= v > 128 ? 255:0
+
 </script>
 </html>
 
-- 
cgit v1.2.3-70-g09d2