diff --git a/js/mobius.js b/js/mobius.js index ecdc09b..0e4af06 100644 --- a/js/mobius.js +++ b/js/mobius.js @@ -1,3 +1,6 @@ +var buffer; +var gl; +var canvas; function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) { @@ -53,25 +56,24 @@ function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) { } function add_vector_field(){ - var canvas = document.createElement('canvas'); + canvas = document.createElement('canvas'); canvas.style.border = "1px solid"; canvas.id = 'canvas' canvas.height = 600; canvas.width = 600 ctx = canvas.getContext('2d'); - + document.body.appendChild(canvas); + height = canvas.height; width = canvas.width; - return canvas; } //update based on id function update_vector_field(a,b,c,d){ - canvas = document.getElementById('canvas') - ctx = canvas.getContext('2d') + ctx = canvas.getContext('2d'); ctx.moveTo(0,0); - ctx.clearRect(0,0,600,600) + ctx.clearRect(0,0,600,600); for(var i = 0;i<10;i++){ for(var j = 0;j<10;j++){ x = remap(i,0,10,-2,2); @@ -95,8 +97,16 @@ function render(a,b,c,d){ b = $(document.getElementById('b')).data('complex'); c = $(document.getElementById('c')).data('complex'); d = $(document.getElementById('d')).data('complex'); - update_vector_field(a,b,c,d) + update_vector_field(a,b,c,d); + +} + +function renderGL() { + window.requestAnimationFrame(render, canvas); + + gl.clearColor(1.0, 0.0, 0.0, 1.0); + gl.clear(gl.COLOR_BUFFER_BIT); } var Complex = function(_re,_im){ @@ -142,7 +152,7 @@ $(function () {//document is ready, setup everything //Create GUI div guibox = document.createElement('div'); - guibox.id = "gui-box" + guibox.id = "gui-box"; document.body.appendChild(guibox); add_2d_ctrl($(guibox),a,"a",-1,1,-1,1); @@ -150,8 +160,12 @@ $(function () {//document is ready, setup everything add_2d_ctrl($(guibox),c,"c",-1,1,-1,1); add_2d_ctrl($(guibox),d,"d",-1,1,-1,1); + add_vector_field(); - canvas = add_vector_field() - document.body.appendChild(canvas); + gl = canvas.getContext('experimental-webgl'); + + gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); + renderGL(); }); +