if(c.length==2) return function(t){return [c[0][0]+t*(c[1][0]-c[0][0]),c[0][1]+t*(c[1][1]-c[0][1])]}

  else return function(t){return Bezier([Bezier(c.slice(0,-1))(t),Bezier(c.slice(1))(t)])(t)}

}

​

function Bezier2(f1,f2){

  return function(t){return Bezier([f1(t),f2(t)])(t)}

}

​

//============================================

var c = null

var settings = {'guide':{'show':[true,true,true,true], 'color':['#EEEEEE','#00FF00','#0000FF','#FF00FF'], 'width':[10,1,1,1]}, 'curve':{'show':[false,false,false,false], 'color':['#EEEEEE','#00FF00','#0000FF','#FF00FF'], 'width':[10,3,3,3]}, 'main':{'show':true, 'color':'#FF0000', 'width':10}, 'sample': 100, 'steps':100, 'stepTime':10, 'mode':'Bezier', 'coords':[[0,500],[125,450],[125,0],[500,0]]}

var itv = 0

​

window.addEventListener('load',function(){

  c = $('c').getContext('2d')

  c.lineCap = 'round'

  c.lineJoin = 'round'

  draw(settings.coords,1)

},true)

​

function get(k,i){

  var t = settings

  if(k.constructor == Array) k.forEach(function(e){t = t[e]})

  return t.length>i ? t[i] : t.slice(-1)[0]

}

​

function frame(coords){

  c.strokeStyle = settings.curve.color[0]

  c.lineWidth = settings.guide.width[0]

  c.beginPath()

  c.moveTo.apply(c,coords[0])

  coords.slice(1).forEach(function(e){c.lineTo.apply(c,e)})

  c.stroke()

}

​

function transf(c){

  var t = []

  c.forEach(function(e){t.push([e[0]+5,e[1]+5])})

  return t

}

//============================================

function drawBezier(coords,t){

  if(t===undefined) t = 1

  coords = transf(coords)

  c.clearRect(0,0,510,510)

  frame(coords)

  c.beginPath()

  c.strokeStyle = settings.main.color

  c.lineWidth = settings.main.width

  c.moveTo.apply(c,coords[0])

  for(var i=0;i<=t*settings.sample;i++) c.lineTo.apply(c,Bezier(coords)(i/settings.sample))

  c.stroke()

}

​

function animateBezier(coords){

  var s = settings.steps

  var cur = ($('t').value==1 ? ($('t').value=$('T').innerHTML=(0).toFixed(3))*1 : $('t').value*s)+1

  var b = drawBezier(coords,$('t').value*1)

  itv = setInterval(function(){

    $("T").innerHTML = ($("t").value = cur/s).toFixed(3)

    drawBezier(coords,cur++/s,b)

    if(cur>s) clearInterval(itv)

  },settings.stepTime)

}

//============================================

function drawBezier2(coords,t){

  if(t===undefined) t = 1

  c.beginPath()

  c.strokeStyle = get(['curve','color'],coords.length-1)

  c.lineWidth = get(['curve','width'],coords.length-1)

  c.moveTo.apply(c,coords[0])

  for(var i=0;i<=t*100;i++) c.lineTo.apply(c,Bezier(coords)(i/100))

  c.stroke()

}

​

function drawConstruction(coords,t,B){

  coords = transf(coords)

  if(t===undefined) t = 0.5

  var b = B===undefined ? [[]] : B

  coords.forEach(function(e){b[0].push(function(t){return e})})

  c.clearRect(0,0,510,510)

  frame(coords)

  for(var i=1;i<coords.length;i++){

    if(B===undefined) b.push([])

    with(c){

      for(var j=0;j<coords.length-i;j++){

        if(B===undefined) b[i].push(Bezier2(b[i-1][j],b[i-1][j+1]))

        if(i!=coords.length-1 && get(['curve','show'],i-1) || i==coords.length-1 && settings.main.show){

          strokeStyle = i==coords.length-1?settings.main.color:get(['curve','color'],i-1)

          lineWidth = i==coords.length-1?settings.main.width:get(['curve','width'],i-1)

          beginPath()

          moveTo.apply(c,b[i][j](0))

          for(var k=0;k<=t*settings.sample;k++) lineTo.apply(c,b[i][j](k/settings.sample))

          stroke()

        }

        if(i && i!=coords.length-1 && get(['guide','show'],i)){

          strokeStyle = i==coords.length-1?settings.main.color:get(['guide','color'],i)

          lineWidth = i==coords.length-1?settings.main.width:get(['guide','width'],i)

          beginPath()

          if(i!=coords.length-1) arc.apply(c,b[i][j](t).concat([settings.curve.width[0]/2,0,2*Math.PI]))

          stroke()

        }

      }

      if(i && i!=coords.length-1 && get(['guide','show'],i)){

        beginPath()

        moveTo.apply(c,b[i][0](t))

        for(var j=1;j<coords.length-i;j++) lineTo.apply(c,b[i][j](t))

        stroke()

      }

    }

  }

  return b

}

​

function animateConstruction(coords){

  var s = settings.steps

  var cur = ($('t').value==1 ? ($('t').value=$('T').innerHTML=(0).toFixed(3))*1 : $('t').value*s)+1

  var b = drawConstruction(coords,$('t').value*1)

  itv = setInterval(function(){

    $("T").innerHTML = ($("t").value = cur/s).toFixed(3)

    drawConstruction(coords,cur++/s,b)

    if(cur>s) clearInterval(itv)

  },settings.stepTime)

}

//============================================

function draw(coords,t){clearInterval(itv); return window['draw'+settings.mode](coords,t)}

function animate(coords){clearInterval(itv); return window['animate'+settings.mode](coords);}

//============================================

function $(id){return document.getElementById(id)}

function v(o,p){

  for(var i in o){

    var k = (p||[]).concat([i]).join('-')

    var t

    if((t = o[i].constructor) == Object || t == Array) v(o[i],[k])

    else if(t = $(k)){

      if(t.type=='checkbox') t.checked = o[i]

      else if(t.type=='radio'){

        for(var j=0, t=document.getElementsByName(t.name); j<t.length; j++) if(t[j].value == o[i]){

          t[j].checked = true

          break

        }

      }else t.value = o[i]

    }else if(t = $((i==0?'x':'y') + p[0].slice(-1))) t.value = o[i]

  }

}

​

window.addEventListener('load',function(){

  v(settings)

  $('t').setAttribute('step',1/settings.steps)

  var t = document.getElementsByTagName('input')

  for(i=0;i<t.length;i++) t[i].addEventListener('change',function(){

    var t

    if((t=this.id.split('-')).length > 1){

      var t1 = function(T){

        var t = 'settings'

        T.forEach(function(e){t += '[' + (isNaN(e)?'"'+e+'"':e) +']'})

        eval(t + '=' + (this.type=='text'?this.value:(this.type=='checkbox'?this.checked:'"'+this.value+'"')))

        $(T.join('-')).value = this.value

      }

      t1.call(this,t)

      if(t[0]=='curve' && t[1]=='color' && $('u').checked==true) t1.call(this,['guide'].concat(t.slice(1)))

    }else if(this.id == 'u'){

      for(i=0;t=$('guide-color-'+i);i++){

        t.disabled = this.checked

        t.value = settings.guide.color[i] = this.checked?settings.curve.color[i]:t.value

      }

    }else if(this.id == 't'){

      $('T').innerHTML = (this.value*1).toFixed(3)

      draw(settings.coords,this.value*1)

    }else if(t = /([xy])(\d+)/.exec(this.id)) settings.coords[t[2]*1][t[1]=='x'?0:1] = this.value*1

    else settings[this.id] = this.value

    if(this.id == 'steps') $("t").setAttribute("step",1/settings.steps)

  },true)

    $('moreGo').addEventListener('click',function(){

        var t = $('more').value.split(';').map(function(e){return e.split(',').map(function(f){return f*1;});});

        animateConstruction(t);

    },true);

},true)