diff --git a/js/mobius.js b/js/mobius.js index 0e4af06..d646ab2 100644 --- a/js/mobius.js +++ b/js/mobius.js @@ -1,6 +1,3 @@ -var buffer; -var gl; -var canvas; function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) { @@ -21,15 +18,22 @@ function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) { variable.setVals(remap(ui.position.left,0,80,min_x,max_x),remap(ui.position.top,0,80,min_y,max_y)); $(container).data('complex',variable) - imNum.nodeValue = 'im: ' +variable['im'].toFixed(3) - reNum.nodeValue = 're: ' +variable['re'].toFixed(3) + //im_value.nodeValue = variable['im'].toFixed(3) + + if(variable['im']>=0) + im_value.nodeValue = '+'+variable['im'].toFixed(3) + 'i'; + else + im_value.nodeValue = variable['im'].toFixed(3) + 'i'; + re_value.nodeValue = variable['re'].toFixed(3) + + + //method that updates current canvas render(); } }); - slider.addEventListener("drag",function(){console.log('hello')}) container.append(slider); @@ -39,43 +43,55 @@ function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) { container.append(caption); var value = document.createElement('div'); + document.createElement('div') + //var br = document.createElement('br'); + var re = document.createTextNode('re:'); + var re_value = document.createTextNode(variable['re']); - var br = document.createElement('br'); - - var imNum = document.createTextNode('im: '+variable['im']); - - var reNum = document.createTextNode('re: '+variable['re']); + var im = document.createTextNode('im: '); + var im_value; + if(variable['im']>=0) + im_value = document.createTextNode('+'+variable['im']+'i'); + else + im_value = document.createTextNode(variable['im']+'i'); + //value.id = label - value.append(imNum); - value.append(br) - value.append(reNum); + //value.append(im); + + //value.append(br); + //value.append(re); + value.append(re_value); + value.append(im_value); parent.append(value); } function add_vector_field(){ - canvas = document.createElement('canvas'); + var 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){ - ctx = canvas.getContext('2d'); + canvas = document.getElementById('canvas') + ctx = canvas.getContext('2d') ctx.moveTo(0,0); - ctx.clearRect(0,0,600,600); + ctx.clearRect(0,0,600,600) + ctx.fillRect(10,10,1,1); for(var i = 0;i<10;i++){ for(var j = 0;j<10;j++){ + ctx.fillRect(i*60,j*60,1,1); x = remap(i,0,10,-2,2); y = remap(j,0,10,-2,2); res = mobius(a,b,c,d,new Complex(x,y)); @@ -83,9 +99,19 @@ function update_vector_field(a,b,c,d){ pyy = remap(j,0,10,600,0); //flip y rx = remap(res.re,-2,2,0,600); ry = remap(res.im,-2,2,600,0); //flip y + + //draw in points/lines ctx.beginPath(); + + x = resize_point(pxx,rx,.2) + y = resize_point(pyy,ry,.2) + var angle = Math.atan2(y-pyy,x- pxx); + var headlen = 10; // length of head in pixels ctx.moveTo(pxx,pyy); - ctx.lineTo(rx,ry); + ctx.lineTo(x,y); + ctx.lineTo(x-headlen*Math.cos(angle-Math.PI/6),y-headlen*Math.sin(angle-Math.PI/6)); + ctx.moveTo(x, y); + ctx.lineTo(x-headlen*Math.cos(angle+Math.PI/6),y-headlen*Math.sin(angle+Math.PI/6)); ctx.stroke(); } @@ -97,16 +123,8 @@ 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){ @@ -141,6 +159,10 @@ remap = function(x,a,b,c,d){ return (x - a) * (d - c) / (b - a) + c; } +resize_point = function(from,to,proportion){ + diff = to - from; + return from + diff*proportion +} var a = new Complex(0,0); @@ -150,9 +172,21 @@ var d = new Complex(0,0); $(function () {//document is ready, setup everything + title = document.createElement('div'); + + thing = document.createElement('h2'); + thing.appendChild(document.createTextNode('Mobius Transformations')); + authors = document.createElement('h3'); + authors.appendChild(document.createTextNode('By: Tim Henning and Edward Huang')); + title.append(thing); + title.append(authors); + document.body.appendChild(title); + //Create GUI div + document.body.appendChild(title) 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); @@ -160,12 +194,8 @@ $(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(); - gl = canvas.getContext('experimental-webgl'); - - gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); + canvas = add_vector_field() + document.body.appendChild(canvas); - renderGL(); }); - diff --git a/js/render.js b/js/render.js index a6e32ec..549b45f 100644 --- a/js/render.js +++ b/js/render.js @@ -3,6 +3,7 @@ var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHe var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); + document.body.appendChild( renderer.domElement ); var geometry = new THREE.PlaneGeometry( 1, 1, 50, 50 ); diff --git a/style/style.css b/style/style.css index 71b8a80..ad6c240 100644 --- a/style/style.css +++ b/style/style.css @@ -17,6 +17,10 @@ body{ height: 16px; border-radius: 8px; border: 2px solid black; +} +.h2{ + + } #gui-box{ display: inline-block;