Koordinasystem

Koordinatsystem

Ett koordinatsystem utgörs av två tallinjer som korsar varandra i sina nollpunkter. Tallinjerna är vinkelräta mot varandra. Ett annat ord för dessa linjer är koordinataxlar. X-axeln går horisontellt och Y-axeln vertikalt. Där axlarna möts,  och koordinaterna för respektive axel är noll , kallas origo. På canvasen finns origo i övre vänstra hörnet.

Här ska vi skapa ett program som visar koordinaterna när musen(alternativt fingret) flyttas över canvasen.

Canvasens storlek ska vara 400*400

I draw() skapas en variabel med namnet label. Den ges värdet round(mouseX + “,” +mouseY);
funktionen round() avrundar till närmaste heltal.
mouseX håller värdet för där muspekaren/fingret befinner sig på canvasen. efter mouseX adderas en string innehållande ett kommatecken och därefter mouseY.
Bakgrunden sätts till en grå nyans.

function setup() {
 createCanvas(400, 400);
}
function draw() {
 let label = round(mouseX )+ "," +round(mouseY);
 background(220);
}

Därefter ritas en cirkel ut med storleken 10. Cirkel ritas där muspekaren/fingret befinner sig.

 ellipse(mouseX, mouseY, 10,10);

Textstorlek sätts till 22 pixlar och en text med innehållet i variabel label  ritas ut där muspekaren befinner sig men med en förskjutning om 10 pixlar i x-led. Detta görs för att texten ska synas efter cirkeln som ritas precis där muspekaren befinner sig.

 textSize(22);
 text(label, mouseX+10, mouseY);

Med for-loopen ritas vertikala och horisontella linjer ut på canvasen.

for(let i=50; i<400; i=i+50){
 strokeWeight(0.5);
 line(0,i,400,i);
 line(i,0,i,400);
 }

När muspekaren/fingret rör sig över canvasen visas koordinaterna för x och y (x,y)

Det koordinatsystem som vanligen används i matematiken har origo i mitten av canvasen. För att få till det behöver koden i exemplet modifieras en del.

Vi skapar två  variabler vilka heter nyX och nyY. Då canvasen är 400 pixlar bred och 400 pixlar hög så är mittpunkten (origo) i koordinaterna (200,200).

I det här koordinatsystemet ska varje linje representera 1 steg  istället 50 vilket det var i förra övningen.

För att få till detta så sätts variabel nyX till   nyX= (mouseX-200)/50;
Detsamma görs för nyY men för nyY delas värdet på negativ 50 (-50). Det görs för att det "normala" koordinatsystemet för canvasen har ett y-värde som ökar vid förflyttning uppifrån och nedåt. I det koordinatsystem vi nu ska skapa minskar värdet på y vid förflyttning nedåt.

function setup() {
 createCanvas(400, 400);
}

function draw() {
 let nyX = (mouseX-200)/50;
 let nyY = (mouseY-200)/-50;
 let label = round(nyX)+ "," + round(nyY);
 background(220);
 ellipse(mouseX, mouseY, 10,10); 
 textSize(22);
 text(label, mouseX+10, mouseY);

I variabeln label används då de nya variablerna istället för mouseX respektive mouseY.

Två linjer med strokeWeight(3) läggs till. strokeWeight () används för att ange tjockleken på linjer. De nya linjerna representerar koordinataxlarna x och y.

I for-loopen läggs det till linjer med tjockleken 3 vilka representerar en värdeökning/minskning med ett för varje steg.

 for(let i=50; i<400; i=i+50){
  strokeWeight(0.5);
  line(0,i,400,i);
  line(i,0,i,400);
  strokeWeight(3);
  line(i,190,i,210);
  line(190,i,210,i)
 }
 strokeWeight(3);
 line(200,0,200,400);
 line(0,200,400,200);

När muspekaren/fingret nu rör sig över canvasen kommer koordinaterna för varje punkt att visas .

För att kunna ändra så att koordinater visas med grön textfärg om de är positiva och och röd textfärg om de är negativa behövs vissa ändringa i koden.

 

 Ändra koden så att variabel nyX och nyY har en varsin label

let labelX = round(nyX)+ ",";
let labelY = round(nyY);

Två text måste också skriva ut.

text(labelX, mouseX+10, mouseY);
text(labelY, mouseX+??, mouseY);

 Hitta själv ett värde istället för frågetecknen (i koden ovan) vilket gör att label visas på ett bra sätt på canvasen.

 Skapa en if- sats för när nyX är mindre än noll. Då ska textfärgen vara röd. Text-funktionen för nyX ska läggas in i if-satsen. Lägg till en else som anger att då ska textfärgen vara grön.

 Gör det samma för nyY.

Testa koden och se att byte av färg sker när värdet går från positivt till negativt.