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
|
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
var imageURL = ""
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)
}
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 feedback_frame(){
return { ctx: cc.context, cloneData: cc.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)
}
|
