1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<!doctype html>
<html>
<head>
<title>Shader</title>
<style type="text/css">
#width,#height,#frames {width: 30px; }
#shader { width: 400px; height: 247px; font-family: fixed; }
div { float: left; padding: 10px;}
</style>
</head>
<body>
<div id="controls">
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="demo">demo</button>
<br>
<br>
<textarea id="shader">
</textarea>
</div>
<div id="workspace">
</div>
</body>
<script type="text/javascript" src="vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="canvasquery.js"></script>
<script type="text/javascript" src="canvasquery.dither.js"></script>
<script type="text/javascript">
$.fn.int = function(){ return parseInt($(this).val(),10) }
$.fn.float = function(){ return parseFloat($(this).val()) }
$(demo)
var cc = cq(0,0).appendTo("#workspace")
var w, h
function demo(){
$el = $("#first")
w = $el.data().width
h = $el.data().height
s = $el.html()
$("#width").val(w)
$("#height").val(h)
$("#shader").html(s)
resize()
}
$("#width,#height").change(resize)
//$("#shader").keyup(draw)
//$("#render").click(drawFrame)
function resize(){
w = $("#width").int()
h = $("#height").int()
cc.canvas.width = w
cc.canvas.height = h
}
var timeout = null;
function draw(t){
// clearTimeout(null);
// setTimeout(drawFrame,100)
requestAnimationFrame(draw);
animate(t)
}
draw()
function clamp(n,a,b){n<a?a:n>b?b:n}
function animate(t){
try {
var f = $("#shader").val()
if (!f.length) return;
var shader = new Function('x','y','t', f)
var imageData = cc.getImageData(0,0,w,h)
var data = imageData.data
for (var x = 0; x < w; x++) {
for (var y = 0; y < h; y++) {
r = 0, g = 0, b = 0, a = 255
q = 4*(y*w+x)
result = shader(x,y,t)
data[q] = r
data[q+1] = g
data[q+2] = b
data[q+3] = a
}
}
cc.putImageData(imageData,0,0)
}
catch (e){
console.log(e)
}
}
resize()
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")
}
</script>
<script type="text/javascript-shader" id="first" data-width="600" data-height="400">
x -= w/2
y -= h/2
t/=100
y/=10
x/=100
r=g=b= Math.sin(t+x*y)*255
</script>
</html>
|
