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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
var frame, img_frame;
var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0, frame_t = 0
var paused = false, dragging = false, rendering = false, scrolling = false, deferring = false, scrollTimeout = null
var fps = 30
var preserve_dimensions = false;
function choose (){
loading = true
preserve_dimensions = false
$("#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 = cc.canvas.width = frame.ctx.canvas.width
actual_h = cc.canvas.height = frame.ctx.canvas.height
if (! preserve_dimensions) {
w = actual_w
h = actual_h
}
for (var i=0, f; f=gif.frames[i]; i++){
f.cloneData = f.ctx.getImageData(0,0,actual_w,actual_h)
}
}
else if (window.img) {
fc = cq(img.width, img.height)
fc.drawImage(img, 0, 0)
frame = img_frame = { ctx: fc.context }
actual_w = cc.canvas.width = frame.ctx.canvas.width
actual_h = cc.canvas.height = frame.ctx.canvas.height
if (! preserve_dimensions) {
w = actual_w
h = actual_h
}
frame.cloneData = frame.ctx.getImageData(0,0,actual_w,actual_h)
}
else {
cc.canvas.width = actual_w = w
cc.canvas.height = actual_h = h
shader_build()
}
displayWidthHeight(w, h)
preserve_dimensions = false;
}
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 if (window.cam) {
return camera_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 camera_frame(){
var cx = cq(w, h).drawImage(cam, 0, 0, w, h)
return { ctx: cx.context, cloneData: cx.getImageData(0,0,w,h) }
}
function reset(){
start_t = old_t
pause_t = 0
frame_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_t++
frame = giveFrame(t)
shade(frame, t)
}
|
