From 20e17d5ff6f37dacf733c541190c57af3edb13f8 Mon Sep 17 00:00:00 2001 From: tbh12001 Date: Mon, 13 Nov 2017 11:57:33 -0500 Subject: [PATCH] Add initial slider support. Remove old SVG drawing code to prepare for three.js --- js/mobius.js | 86 ++++++++++++++++++++++++---------------------------- mobius.html | 6 +++- 2 files changed, 44 insertions(+), 48 deletions(-) diff --git a/js/mobius.js b/js/mobius.js index dff3fdc..8bb6783 100644 --- a/js/mobius.js +++ b/js/mobius.js @@ -1,55 +1,33 @@ -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -var RenderHolder = function(a,b,c,d){ - this.render = function(){ - ctx.moveTo(0,0); - 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); - y = remap(j,0,10,-2,2); - res = mobius(a,b,c,d,new Complex(x,y)); - pxx = remap(i,0,10,0,600); - 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 - ctx.beginPath(); - ctx.moveTo(pxx,pyy); - ctx.lineTo(rx,ry); - ctx.stroke(); + +function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) { + var container = document.createElement('div'); + container.className ="slider-container"; + parent.append(container); + + var slider = document.createElement('div'); + slider.className = "sliderHandle"; + $(slider).draggable({ + containment: "parent", + drag: function(event, ui){ + variable.setVals(remap(ui.position.left,0,80,min_x,max_x),remap(ui.position.top,0,80,min_y,max_y)); + console.log(variable); } - } - }; + }); + container.append(slider); + + var caption = document.createElement('p'); + caption.className = "slider-caption"; + $(caption).text(label); + container.append(caption); } -window.onload = function() { - var a = new Complex(0,0); - var b = new Complex(0,0); - var c = new Complex(0,0); - var d = new Complex(0,0); - var rh = new RenderHolder(a,b,c,d); - var gui = new dat.GUI(); - controls = []; - var f1 = gui.addFolder("a"); - controls = controls.concat(f1.add(a, 're', -2, 2).step(0.01)); - controls = controls.concat(f1.add(a, 'im', -2, 2).step(0.01)); - var f2 = gui.addFolder("b"); - controls = controls.concat(f2.add(b, 're', -2, 2).step(0.01)); - controls = controls.concat(f2.add(b, 'im', -2, 2).step(0.01)); - var f3 = gui.addFolder("c"); - controls = controls.concat(f3.add(c, 're', -2, 2).step(0.01)); - controls = controls.concat(f3.add(c, 'im', -2, 2).step(0.01)); - var f4 = gui.addFolder("d"); - controls = controls.concat(f4.add(d, 're', -2, 2).step(0.01)); - controls = controls.concat(f4.add(d, 'im', -2, 2).step(0.01)); - gui.add(rh,'render'); - for (var n = 0; n < controls.length; n++) { - controls[n].onChange(function(value){rh.render()}); - } -}; var Complex = function(_re,_im){ this.im = _im; this.re = _re; + this.setVals = function(re,im){ + this.re = re; + this.im = im; + } this.add = function(cpx){ return new Complex(this.re+cpx.re,this.im+cpx.im) }; @@ -68,4 +46,18 @@ var mobius = function(a,b,c,d,z){ remap = function(x,a,b,c,d){ //maps x from [a,b] to [c,d] return (x - a) * (d - c) / (b - a) + c; -} \ No newline at end of file +} + + + +var a = new Complex(0,0); +var b = new Complex(0,0); +var c = new Complex(0,0); +var d = new Complex(0,0); + +$(function () {//document is ready, setup everything + add_2d_ctrl($('body'),a,"a",-1,1,-1,1); + add_2d_ctrl($('body'),b,"b",-1,1,-1,1); + add_2d_ctrl($('body'),c,"c",-1,1,-1,1); + add_2d_ctrl($('body'),d,"d",-1,1,-1,1); +}); diff --git a/mobius.html b/mobius.html index 4d9f021..5a8dc00 100644 --- a/mobius.html +++ b/mobius.html @@ -4,8 +4,12 @@ Mobius Transforms - + + + + + \ No newline at end of file