diff --git a/js/mobius.js b/js/mobius.js index 8dc4ce3..9a6ca3e 100644 --- a/js/mobius.js +++ b/js/mobius.js @@ -1,3 +1,4 @@ + var buffer; var gl; var canvas; @@ -25,15 +26,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,80,0,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); @@ -43,43 +51,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 = 500; canvas.width = 500; 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)); @@ -87,9 +107,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(); } @@ -109,10 +139,10 @@ 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(texture) { @@ -156,6 +186,7 @@ function loadTexture(gl, url) { pixel); const image = new Image(); + image.src = url; image.onload = function() { gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, @@ -175,7 +206,7 @@ function loadTexture(gl, url) { gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); } }; - image.src = url; + return texture; } @@ -236,6 +267,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); @@ -245,10 +280,22 @@ 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); @@ -256,7 +303,7 @@ $(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(); + glCanvas = document.createElement("canvas"); glCanvas.id = 'glcanvas'; 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;