Räta linjens ekvation
Om du vill börja med en enklare variant på att skapa linjen y = kx + m kan du klicka här
I det här programmet ska vi skapa ett program som låter användaren ange k-värdet för en rät linje som går genom två slumpmässigt utplacerade punkter i ett koordinatsystem. Programmet ska kontrollera svaret och ange m-värdet samt rita ut en linje mellan punkterna
Den räta linjens ekvation kan skrivas som:
y = kx + m
där k är linjens lutningskoefficient, och m är y-värdet där linjen skär y-axeln.
Först skapas fyra variabler vilka ska hålla reda på x och y-värdena för de två punkter som ska slumpas fram. För att beräkna k (lutningskoefficienten) för en rät linje används ekvationen:
let x1; let x2; let y1; let y2;
k = (y2 – y1) / (x2 – x1)
I setup() skapas en canvas med måtten 400*400. Bakgrundsfärgen sätts till ljusgrå. Därefter ritas två linjer med tjocklek (strokeWeight) 3. De linjerna representerar x och y axlarna i koordinatsystemet. Därefter används en for-loop till att rita ut de tunnare linjerna samt de korta linjerna vilka representerar ett steg på axlarna.
function setup() {
createCanvas(400, 400);
background(220);
strokeWeight(3);
line(200,0,200,400);
line(0,200,400,200);
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)
}
}
Före setup() funktionen skapas en array med värden som ska användas för att placera ut två punkter i koordinatsystemet. Canvasen har sin nollpunkt (origo) uppe i vänstra hörnet (se program om koordinatsystem för mer info). Vi väljer då att lägga in värden vilka representerar de streck som vi satt ut på x och y-axlarna (50 till 350).
let myArray=[50,100,150,200,250,300,350];
I setup() sätter vi variablerna x1, x2, y1 och y2 till ett slumpmässigt värde från myArray.
random(myArray) returnerar ett slumpmässigt värde från myArray
x1 = random(myArray); x2 = random(myArray); y1 = random(myArray); y2 = random(myArray);
För att undvika att punkterna hamnar på samma koordinater så används en if-sats vilken säger att: Om x1 är lika med x2 så ska värdet x1 ökas med 50.
if(x1==x2){
x1=x1+50;
}
Värdet för respektive variabel skrivs ut i konsolen.
På den här sidan syns inte konsolen men om koden skrivs i p5.js editor så kan man se den. Värdena för variablerna konverteras med hjälp av ekvationen (x1-200)/50) för att visa ett värde mellan -3 och 3 i konsolen. Det görs för att underlätta för användaren att beräkna k- värdet. Streck på axlarna i koordinatsystemet motsvarar alltså värden från -3 till 3. Origo (där x och y-axel möts) har koordinaterna x = 0, y = 0.
console.log("x1 : "+ (x1-200)/50);
console.log("y1 : "+ (y1-200)/-50);
console.log("x2 : "+ (x2-200)/50);
console.log("y2 : "+ (y2-200)/-50);
Koden ska se ut så här och om du kör den i p5.js editor kommer du att se värden för x1, y1, x2 och y2
I funktion draw() ritas två punkter ut och texten uppe till vänster skrivs ut. Texten visar att grön punkt har koordinaterna (x1, y1) och röd punkt har koordinaterna (x2, y2)
function draw() {
fill(0,255,0);
textSize(16);
ellipse(x1, y1, 10,10);
text("x1,y1", 20,20);
fill(255,0,0);
ellipse(x2, y2, 10,10);
text("x2,y2", 80,20);
}
Efter draw() skapar vi en ny funktion som heter mousePressed(). Det är en funktion som finns skapad i p5.js och som kör koden i den så snart användaren av programmet klickar på musen (eller klickar på skärmen om det är en mobil enhet). När användaren klickar på musen kommer en prompt upp som ber användaren ange värdet för k . Värdet som anges lagras i variabeln k.
Eftersom data från prompt är text (string) så måste vi konvertera värdet till ett tal. Detta görs med k = Number(k); Sen skrivs användarens svar ut i konsolen.
function mousePressed(){
let k = prompt("Ange värdet för k");
k = Number(k);
console.log("ditt svar " + k);
}
I funktionen mousePressed() skapas en variabel med namnet avrundat och den ska innehålla det uträknade k värdet skrivet med två decimaler.
let avrundat = round(((y2-y1)/(x2-x1)*100))/-100;
Låt oss anta att y2-y1 = 2 och x2-x1 = 3 då blir k 0,66666666... . Målet är att avrunda till 0.67
Funktionen round() avrundar till närmaste heltal och i det här fallet skulle det bli 1.
Om hela talet först multipliceras med 100 (blir då 66,6666666) och sen avrundas till närmaste heltal så blir det 67. För att sen få det till 0,67 måste vi dividera med 100. Här är det dividerat med minus 100 och det beror på att vårt koordinatsystem är omvandlat från origo i övre vänstra hörnet till origo i mitten. Läs mer på program koordinatsystem för mer info.
Efter att variabeln skapats görs en jämförelse mellan användarens angivna värde och det korrekta k-värdet genom en if-sats. Om värdet som användaren angett är rätt ska en alert() komma på skärmen med meddelandet GREAT.
if(k===avrundat){
console.log("k =" + avrundat);
alert("GREAT");
}
Därefter kommer en kod för att räkna ut m-värdet m = y - k * x Här går det bra att använda vilken av punkterna man vill. Det viktiga är att x och y-värden kommer från samma punkt.
Igen används -200/50 för att få värden som passar in i det koordinatsystem som vi använder.
Efter att variabeln m skapats så ritas en linje ut mellan punkterna x1,y1 och x2, y2 och värdet för m skrivs ut med två decimaler.
let m = ((y1-200)/-50-avrundat*(x1-200)/50);
stroke(0,0,255);
line(x1,y1,x2,y2);
noStroke();
alert("m = " + round(m*100)/100);
Så här ser hela koden ut. Lägg märke till att i koden nedan är den annan kod för att beräkna det slumpmässiga värdet för variablerna x1, x2, y1 och y2.
I koden nedan står:
x1 = myArray[Math.floor(Math.random() * myArray.length)]
istället för
x1 = random(myArray);
Anledningen till det är att den editor som finns inbäddad på den här sidan fungerar lite annorlunda än den editor som finns på p5.js sida. För att få programmet att fungera kunde inte p5.js funktion användas. Ni kan använda x1 = random(myArray); i er kod.
Ändra i koden så att det står att k-värdet ska anges med två decimaler när första prompten kommer upp för användaren.
Använd programmet för att träna på att beräkna k-värdet för en rät linje
Tröttnat på att sitta och räkna ut k-värdet? Låt programmet göra det genom att skapa en kod som visar k-värdet på canvasen
tips: I koden finns det en uträkning för det korrekta avrundade k-värdet. Skapa en variabel i funktionen draw() och sätt den till den uträkningen. Skapa sen en text med variabeln vid koordinaterna 300,300.