| |
(16 mellanliggande versioner av 3 användare visas inte)
|
| Rad 2: |
Rad 2: |
| | Koordinatsystem</translate></hbox> | | Koordinatsystem</translate></hbox> |
| | <translate><!--T:2--> | | <translate><!--T:2--> |
| − | 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>
| + | Om flera koordinataxlar kombineras får man ett koordinatsystem. Det kan användas för att beskriva positioner, både inom matematik och andra områden. Positionen beskrivs av punktens koordinater, ofta $x$ och $y,$ och skrivs på formen $(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);
| + | else { |
| − | var calc = b.text(-4,5,'(x,y)',{flag:true});
| + | return 5; |
| | + | } |
| | + | } |
| | + | 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'>
| + | Detta koordinatsystem kallas det ''kartesiska'' koordinatsystemet och punkten där axlarna skär varandra heter [[Origo *Wordlist*|origo]]. |
| − | <jsxbtn onclick='mlg.cf("koordinatsystemGraf293.animate")'><translate><!--T:4-->
| |
| − | Läs av koordinater</translate></jsxbtn>
| |
| − | </div>
| |
| | | | |
| | [[Kategori:Funktioner]] | | [[Kategori:Funktioner]] |
