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
130
131
132
|
var frame, img_frame;
var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0
var paused = false, dragging = false, rendering = false, scrolling = false, deferring = false, scrollTimeout = null;
var fps = 30;
function choose (){
imageURL = this.src
loading = true
$("#url").val(imageURL)
loadImage(imageURL, ready)
}
function load(){
var imageURL = $("#url").val()
loading = true
loadImage(imageURL, ready)
}
function ready(){
loading = false
if (window.gif) {
frame = gif.frames[0]
w = cc.canvas.width = frame.ctx.canvas.width
h = cc.canvas.height = frame.ctx.canvas.height
for (var i=0, f; f=gif.frames[i]; i++){
f.cloneData = f.ctx.getImageData(0,0,w,h)
}
}
else if (window.img) {
fc = cq(img.width, img.height)
fc.drawImage(img, 0, 0)
frame = img_frame = { ctx: fc.context }
w = cc.canvas.width = frame.ctx.canvas.width
h = cc.canvas.height = frame.ctx.canvas.height
frame.cloneData = frame.ctx.getImageData(0,0,w,h)
}
else {
cc.canvas.width = w
cc.canvas.height = h
shader_build()
}
displayWidthHeight(w, h)
}
function displayWidthHeight(width, height){
$("#width").val(width)
$("#height").val(height)
}
$("#width").change(function(){
w = abs(parseInt(this.value,10)) || 1
cc.canvas.width = w
cc.canvas.height = h
})
$("#height").change(function(){
h = abs(parseInt(this.value,10)) || 1
cc.canvas.width = w
cc.canvas.height = h
})
function giveFrame(t){
if (window.gif) {
if (gif.currentFrame) {
return gif.frames[gif.currentFrame(t)]
}
else if (gif.frames) {
return gif.frames[0]
}
}
if (window.img) {
return img_frame
}
else {
return empty_frame()
}
}
function empty_frame(){
w = w || 400
h = h || 266
var cx = cq(w, h).fillStyle("rgba(255,255,255,255)").fillRect(0,0,w,h)
return { ctx: cx.context, cloneData: cx.getImageData(0,0,w,h) }
}
function reset(){
start_t = old_t
pause_t = 0
pause(false)
$("#rendered img").remove()
draw(0)
}
function pause(state){
$("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused).html(paused ? "paused" : "pause")
}
function step_forward(){
var step = $("#framedelay").float() * 1000 || 100
old_t += step
draw(old_t)
pause(true)
}
function animate(t){
raf_id = requestAnimationFrame(animate);
var step_t = t - old_t
old_t = t
if (paused || dragging || rendering || scrolling || deferring) {
pause_t += step_t
if (scrolling) {
scrolling = false
deferring = true
}
else {
deferring = false
}
return
}
// var timing = +(new Date())
draw(t)
// timing = +(new Date()) - timing
fps = avg(fps, 1000/step_t, 4)
// status(~~(fps) + " fps")
}
function draw(t) {
t -= start_t
t -= pause_t
frame = giveFrame(t)
shade(frame, t)
}
|
