| |
(5 mellanliggande versioner av samma användare visas inte)
|
| Rad 4: |
Rad 4: |
| | Kombineras flera koordinataxlar får man ett koordinatsystem som används för att beskriva positioner. Exempelvis används ett koordinatsystem med latitud och longitud för att beskriva positioner på jorden. Inom matematiken är det ''kartesiska'' koordinatsystemet vanligt. Det består av två axlar, vanligen kallade $x$- och $y$-axel, som är [[Rät vinkel *Wordlist*|vinkelräta]] mot varandra och skär i punkten [[Origo *Wordlist*|origo]]. För varje [[Punkt *Wordlist*|punkt]] i ett koordinatsystem kan man läsa av värdena på axlarna – dessa kallas $x$- och $y$-koordinater och skrivs $(x,y).$</translate> | | Kombineras flera koordinataxlar får man ett koordinatsystem som används för att beskriva positioner. Exempelvis används ett koordinatsystem med latitud och longitud för att beskriva positioner på jorden. Inom matematiken är det ''kartesiska'' koordinatsystemet vanligt. Det består av två axlar, vanligen kallade $x$- och $y$-axel, som är [[Rät vinkel *Wordlist*|vinkelräta]] mot varandra och skär i punkten [[Origo *Wordlist*|origo]]. För varje [[Punkt *Wordlist*|punkt]] i ett koordinatsystem kan man läsa av värdena på axlarna – dessa kallas $x$- och $y$-koordinater och skrivs $(x,y).$</translate> |
| | | | |
| − | <jsxgpre id="koordinatsystemGraf293"> | + | <jsxgpre id="koordinatsystem_animation"> |
| − | var b = mlg.board(mlg.bb.equal(6.5),{grid:false}); | + | xMax = 6.5; |
| | + | xMin = -6.5; |
| | + | yMax = 6.5; |
| | + | yMin = -6.5; |
| | + | |
| | + | var padding = 0.5; |
| | + | var border = 0.5; |
| | + | |
| | + | var b = mlg.board([xMin,yMax,xMax,yMin],{desktopSize:'medium'}); |
| | var xax = b.xaxis(1,0); | | var xax = b.xaxis(1,0); |
| − | var yax = b.yaxis(1,0); | + | var yax = b.yaxis(1,0); |
| − | var p1 = b.point(3,4,{fixed:false}); | + | |
| − | var xOffset = 0.5;
| + | var p1 = b.point(3,4, {fixed:false}); |
| − | var yOffset = 0.5;
| + | |
| − | var flip1 = 1;
| + | var pullMe = b.txt(4.1, 4.5, 'Dra mig!', {mathMode:false}); |
| − | var flip2 = 1; | + | |
| − | var flyttaMig = b.textA(0,0.5,'<translate><!--T:3-->
| + | var calc = b.txt(-4,function() { |
| − | Flytta mig</translate>',{anchor:p1});
| + | if (p1.Y() > 4) { |
| − | var xArrowPoint = b.node(3,4); | + | if (p1.X() < -2) { |
| − | var yArrowPoint = b.node(3,4);
| + | return -5; |
| − | var xArrow = b.arrow(p1,xArrowPoint);
| + | } |
| − | var yArrow = b.arrow(p1,yArrowPoint);
| + | } |
| − | var calc = b.text(-4,5,'(x,y)',{flag:true});
| + | else { |
| | + | return 5; |
| | + | } |
| | + | },'(3.0,4.0)',{flag:true,fontsize:1.1}); |
| | $(b.getDiv(calc)).css({ | | $(b.getDiv(calc)).css({ |
| | "text-align":"center", | | "text-align":"center", |
| | "padding":"2px" | | "padding":"2px" |
| | }); | | }); |
| − | var xVal,yVal; | + | |
| − | b.hide([xArrow,yArrow]); | + | |
| − | p1.on('drag',function(){ | + | var nx = b.node(3,0); |
| | + | var ny = b.node(0,4); |
| | + | |
| | + | var xArrow = b.segment(p1, nx, {touchLastPoint:false,lastArrow:true}); |
| | + | var yArrow = b.segment(p1, ny, {touchLastPoint:false,lastArrow:true}); |
| | + | |
| | + | p1.on('drag', function() { |
| | + | b.hide([xArrow, yArrow, pullMe]); |
| | + | b.changeText(calc, '(x,y)'); |
| | | | |
| − | b.changeText(calc, '(x,y)'); | + | if (p1.X() - xMin < border) { |
| − | b.hide(flyttaMig); | + | p1.moveTo([xMin+border, p1.Y()]); |
| − | b.hide([xArrow,yArrow]); | + | } |
| − | | + | if (xMax - p1.X() < border) { |
| − | if(p1.X()<0){ | + | p1.moveTo([xMax-border, p1.Y()]); |
| − | offset = -0.5; | + | } |
| | + | if (p1.Y() - yMin < border) { |
| | + | p1.moveTo([p1.X(), yMin+border]); |
| | + | } |
| | + | if (yMax - p1.Y() < border) { |
| | + | p1.moveTo([p1.X(), yMax-border]); |
| | } | | } |
| − | });
| + | |
| − | p1.on('up',function(){
| + | if (Math.abs(nx.Y() - p1.Y()) < padding) { |
| − | if (p1.X() > 0) {
| + | xArrow.setAttribute({lastArrow:false}); |
| − | flip1 = 1; | |
| | } | | } |
| | else { | | else { |
| − | flip1 = -1; | + | xArrow.setAttribute({lastArrow:true}); |
| | } | | } |
| − | if (p1.X() > 0) { | + | if (Math.abs(ny.X() - p1.X()) < padding) { |
| − | flip2 = 1; | + | yArrow.setAttribute({lastArrow:false}); |
| | } | | } |
| | else { | | else { |
| − | flip2 = -1; | + | yArrow.setAttribute({lastArrow:true}); |
| | } | | } |
| − | xArrowPoint.moveTo([p1.X()+(0.4*flip1),p1.Y()]);
| |
| − | yArrowPoint.moveTo([p1.X(),p1.Y()+(0.4*flip2)]);
| |
| | }); | | }); |
| − | mlg.af("koordinatsystemGraf293.animate", function(){
| + | |
| − | setTimeout(function(){b.show([xArrow,yArrow]);},200); | + | p1.on('up', function() { |
| − | | + | var tempText = '(' + p1.X().toFixed(1) + ',' + p1.Y().toFixed(1) + ')'; |
| − | xArrowPoint.moveTo([0,xArrowPoint.Y()],500); | + | tempText = tempText.replace(/-/g, '\\text{-}'); |
| − | yArrowPoint.moveTo([yArrowPoint.X(),0],500);
| + | var hasCallback = false; |
| − | setTimeout(function(){
| + | if (Math.abs(p1.Y()) > padding) { |
| − | xVal = p1.X().toFixed(1);
| + | nx.moveTo([p1.X(),p1.Y() - Math.sign(p1.Y())*padding]); |
| − | yVal = p1.Y().toFixed(1); | + | nx.moveTo([p1.X(), 0],500, {callback:function() {b.changeText(calc,tempText);}}); |
| − | if(xVal % 1 === 0){
| + | hasCallback = true; |
| − | xVal=parseInt(xVal,10);
| + | } |
| − | } | + | else { |
| − | if(yVal % 1 === 0){ | + | nx.moveTo([p1.X(), 0]); |
| − | yVal=parseInt(yVal,10);
| + | } |
| − | }
| + | if (Math.abs(p1.X()) > padding) { |
| − | if(p1.X()<0){ | + | ny.moveTo([p1.X() - Math.sign(p1.X())*padding,p1.Y()]); |
| − | xVal= '\\text{-}'+Math.abs(xVal); | + | if (hasCallback) { |
| − | }
| + | ny.moveTo([0,p1.Y()],500); |
| − | if(p1.Y()<0){ | + | } |
| − | yVal= '\\text{-}'+Math.abs(yVal);
| + | else { |
| | + | ny.moveTo([0,p1.Y()],500, {callback:function() {b.changeText(calc,tempText);}}); |
| | } | | } |
| − | b.changeText(calc, '('+xVal+','+yVal+')');
| |
| − | },500);
| |
| − |
| |
| − | });
| |
| − |
| |
| − | xArrow.point2.coords.on('update',function(){
| |
| − | if(xArrow.L()<0.5){
| |
| − | b.hide(xArrow);
| |
| − | }else{
| |
| − | b.show(xArrow);
| |
| | } | | } |
| − | });
| + | else { |
| − | yArrow.point2.coords.on('update',function(){
| + | if (!hasCallback) { |
| − | if(xArrow.L()<0.5){ | + | b.changeText(calc,tempText); |
| − | b.hide(yArrow);
| + | } |
| − | }else{
| + | ny.moveTo([0,p1.Y()]); |
| − | b.show(yArrow); | |
| | } | | } |
| | + | b.show([xArrow, yArrow]); |
| | }); | | }); |
| | </jsxgpre> | | </jsxgpre> |
| − |
| |
| − | <div class='jsx-btn-container'>
| |
| − | <jsxbtn onclick='mlg.cf("koordinatsystemGraf293.animate")'><translate><!--T:4-->
| |
| − | Läs av koordinater</translate></jsxbtn>
| |
| − | </div>
| |
| | | | |
| | [[Kategori:Funktioner]] | | [[Kategori:Funktioner]] |
