summaryrefslogtreecommitdiff
path: root/js/render.js
blob: a22c9feb986d5f9b491b77d3455342042e547f21 (plain)
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
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)
}