summaryrefslogtreecommitdiff
path: root/js/render.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/render.js')
-rw-r--r--js/render.js106
1 files changed, 106 insertions, 0 deletions
diff --git a/js/render.js b/js/render.js
new file mode 100644
index 0000000..fdb0125
--- /dev/null
+++ b/js/render.js
@@ -0,0 +1,106 @@
+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(){
+ loading = true
+ var imageURL = $("#url").val()
+ 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 {
+ 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)
+ }
+}
+
+function giveFrame(t){
+ if (window.gif) {
+ if (gif.currentFrame) {
+ return gif.frames[gif.currentFrame(t)]
+ }
+ else {
+ return gif.frames[0]
+ }
+ }
+ else if (window.img) {
+ return img_frame
+ }
+ else {
+ return cq(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)
+}
+
+function status(s){ $("#status").html(s); console.log(s) }