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
133
134
135
136
137
138
139
140
141
|
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 (){
loading = true
$("#url").val(this.src)
loadImage(this.src, ready)
reset()
}
function load(){
var newImageURL = $("#url").val()
loading = true
if (newImageURL != imageURL) {
loadImage(newImageURL, ready)
status("loading")
}
}
function ready(){
loading = false
status("")
if (window.gif) {
frame = gif.frames[0]
actual_w = w = cc.canvas.width = frame.ctx.canvas.width
actual_h = 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 }
actual_w = w = cc.canvas.width = frame.ctx.canvas.width
actual_h = 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(){
actual_w = w = w || 400
actual_h = 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)
$("#workspace img").remove()
$("#workspace canvas").show()
$("#uploaded-url").hide()
$("#uploaded-url + br").show()
remove_all_frames()
draw(0)
}
function pause(state){
paused = typeof state == "boolean" ? state : ! paused
$("#pause").toggleClass("paused", paused).html(paused ? "paused" : "pause")
if (!paused) {
$("#workspace canvas").show()
$("#workspace img").hide()
$("#save,#upload").disable()
}
}
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)
quiet_status(~~(fps) + " fps")
}
function draw(t) {
t -= start_t
t -= pause_t
frame = giveFrame(t)
shade(frame, t)
}
|
