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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<!doctype html>
<html>
<head>
<title>Dither</title>
<style>
form { display: inline-block; }
#gallery-images img { max-width: 200px; height: 90px; margin: 5px; }
</style>
</head>
<body>
<div id="gallery">
<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 id="status"></span>
<div id="gallery-images"></div>
</div>
<div id="dither">
<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>
<div id="images"></div>
</body>
<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/vendor/canvasquery.js"></script>
<script type="text/javascript" src="js/vendor/gif.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">
var algo = 'random';
var url = "img/abyss.png";
var imgs = []
var anim = []
var complete = 0
var viewport = cq(100, 100)
$("#images").append(viewport.canvas)
var ui = function(){}
ui.init = function(){
gallery.choose = ui.choose
gallery.init()
ui.bind()
ui.animate()
asdf.random()
}
ui.bind = function(){
var buttons = $("#dither button")
for (var i = 0; i < buttons.length; i++) {
(function(n){
buttons[n].onclick = function(){
algo = buttons[n].id;
ui.build()
}
})(i)
}
}
ui.choose = function(){
loadImage( this.src, ui.ready );
}
ui.ready = function(){
loading = false
if (window.gif) {
frames = gif.frames
}
else {
fc = cq(img.width, img.height)
fc.drawImage(img, 0, 0)
frames = [ { ctx: fc.context } ]
}
w = viewport.canvas.width = frames[0].ctx.canvas.width
h = viewport.canvas.height = frames[0].ctx.canvas.height
ui.build()
}
ui.build = function (){
anim = []
for (var i in frames) {
anim.push( ui.dither(frames[i].ctx).context )
}
}
ui.animate = function(t){
requestAnimationFrame(ui.animate)
if (! anim.length) return;
if (window.gif && window.gif.currentFrame) {
var idx = gif.currentFrame(t)
var frame = anim[idx]
}
else {
var frame = anim[0]
}
viewport.clearRect(0,0,w,h).drawImage(frame.canvas, 0, 0, w, h);
}
ui.dither = function (frame){
var cc = cq(w, h)
cc.drawImage(frame.canvas, 0, 0, w, h);
cc[algo + "Dither"]( )
return cc
}
function status(s){ $("#status").html(s); console.log(s) }
$(ui.init)
</script>
</html>
|
