Matematik med JS

Här finns en del program i p5.js som behandlar delar av avsnitt från grundskolans matematik. Om du är ny på programmering i p5.js rekommenderas introduktionen först.

Det finns fler online editors att använda. I p5.js introduktion finns en beskrivning för att komma igång med p5.js editor

Följande program finns på sidan:

  1. Omkrets och Area av rektangel/kvadrat

  2. Procent, Andelen, delen och det hela

  3. For loop

  4. Koordinatsystem

  5. Rätvinkliga trianglar

  6. Polygoner

  7. Räta linjens ekvation

Program 1
Omkrets och Area av rektangel/kvadrat

Två rektanglar ska ritas på canvasen. Vi börjar med att skapa några variabler som innehåller deras respektive bredd och längd.
Variabler för att beräkna omkretsen skapas också. Omkretsen är 2*(bredd +höjd).
I setup-funktionen skapas canvasen.

I draw-funktionen sätts bakgrunden till (150). ett värde inom parentesen ger R =150, G= 150 och B = 150. När alla färger har samma värde (förutom 0 (svart) och 255(vit)) så blir färgen grå (i olika nyanser beroende av hur högt/lågt värde).
Nästa del av koden är att skapa rektanglarna, en röd och en grön.

Resterande kod handlar om den text som ska visas på canvasen.
Textens storlek ska vara 22 pixlar. Färgen är röd (det val som finns ovan gäller tills ny färg anges).  I texten ska det stå omkrets och ett mellanslag (skrivs in innanför citattecknen), variabeln omkretsGreen och texten ska skrivas ut på x=60, y =50.  Sen byter vi färg och skriver oden för den gröna texten på samma sätt.

Nu har vi ett program som ritar ut rektanglar och skriver ut deras bredd och höjd och räknar ut omkretsen och arean.

Lägg märke till att rektanglarna har samma omkrets men olika area. Ändra måtten på den röda rektangeln för att få maximal area men med samma omkrets.

Ändra storleken på rektanglarna och se hur det uppdateras på skärmen.




Program 2
Procent. Andelen, delen och det hela

För att räkna ut hur stor andelen är i procent används delen/det hela. Vi skapar variabler för delen och det hela och en variabel för andelen. I setup-funktionen skapas canvasen.

I draw-funktionen sätts bakgrunden till 200 ( en grå nyans).
En grön rektangel ritas ut. Som bredd-värde har den variabeln "detHela" vilket gör att dess längd kommer att variera beroende av värdet på variabeln.
En röd rektangel ritas ut med bredd-värde "delen" vilket gör att den kommer att variera i längd beroende av hur stor delen är.
Till sist skapas den text som ska synas på canvasen.

text("andel" +andel + " \nandel i procent " + andel*100 + " %", 10, 50);

Först visas värdet av variabeln andel, sen kommer en radbrytning (\n), därefter texten andel i procent med andel*100 (för att få rätt format), och sen ett procenttecken(%). Texten ska ritas ut på x=10, y = 50.

Ändra värdena på delen och det hela och se hur staplarna (rektangarna) ändrar längd. Lägg till text som visar vad staplarna är och deras värde.

Som extra utmaning kan liknande program skapas för
delen= andelen*detHela  och
detHela = delen/andelen

 



Program 3
For loop

För att undvika att skriva kod om och om igen kan loopar användas. I en loop körs programmet det antal gånger som man specificerat. Vi ska skapa ett synligt koordinatsystem på canvasen där det går streck både horisontalt och vertikalt med avstånd på 50. vid strecken ska det finnas text som anger x- respektive y-värdet.

Om all kod för det skulle skrivas ut skulle det se ut så här:
line(0,50,400,50);
text("50", 0,50);
line(0,100,400,100);
text("100", 0,100);
line(0,150,400,150);
text("150", 0,150);
line(0,200,400,200);
text("200", 0,200);
line(0,250,400,250);
text("250", 0,250);
line(0,300,400,300);
text("300", 0,300);
line(0,350,400,350);
text("350", 0,350);
line(50,0,50,400);
text("50", 50,20);
line(100,0,100,400);
text("100", 100,20);
line(150,0,150,400);
text("150", 150,20);
line(200,0,200,400);
text("200", 200,20);
line(250,0,250,400);
text("250",250,20);
line(300,0,300,400);
text("300", 300,20);
line(350,0,350,400);
text("350", 350,20);
Alla horisontella linjer har x-värdena 0 och 400 och y-värdena är lika och ökar med 50 för varje linje.
Alla vertikala linjer har y-värdena 0 och 400 och x-värdena är lika och ökar med 50 för varje linje.
Då man kan se att det finns ett återkommande mönster i koden är det bättre att försöka göra en loop.

Vi skapar canvasen(i setup) med en storlek på 400*400.
I draw sätts färgen till "Cyan". Det här är ett annat sätt att ange färg. Det finns 140 färger som kan anges med namn.  Läs mer om det här:  w3schools.com/colors

Nu kommer vi till for-loopen. For-loopen körs det antal gånger som specificeras inom parenteserna. här skapas först en variabel som heter i. Namnet kan vara vad som helst men i är vanligt att använda i programmering, så då gör vi det här också. i får värdet 50 till att börja med (då vi vill att första linjen ska ritas där x= 50 och där y =50). Det är tre påståenden (statements) i parenteserna. Den första, där vi satte var i = 50; körs direkt när loopen startas första gången. Det andra påståendet i<400; talar om hur länge loopen ska köras, i det här fallet så länge i är mindre än 400. Det tredje påståendet  i = i + 50 körs efter att loppen körts en gång. När loopen körs är alltså i 50, för varje gång den loopar ökar i med 50( 50,100,150,200...) ända tills i är 399.  Varje gång loopen körs kommer koden i den att göra så att streck och siffror skrivs ut. I den första line() sätts y-värdena till i och i den andra line() sätts x-värdena till i. Första gången är de 50, andra gången 100 och så vidare. I första text() sätt texten till värdet i "i" ,  x-värdet till 0 och y-värdet till det värde i har när loopen körs. Nästa text() fungerar på liknande sätt. Om det går att undvika långa program genom att använda loopar så bör man göra det.

Ändra i koden och försök få linjer tätare, till exempel var 25:e pixel.

Koden som skapats här kommer att användas i i program 5 för att rita trianglar.

 


Program 4
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.

Först 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. Därefter ritas en cirkel ut med storleken 10. Cirkel ritas där muspekaren/fingret befinner sig.

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.

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

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å nya 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.

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.

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

var labelX = round(nyX)+ ",";
var 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 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.

 



Program 5
Rätvinkliga trianglar

För att rita trianglar i p5.js används funktionen triangle(). Den behöver 6 parametrar: triangle(x1,y1,x2,y2,x3,y3).
x1, y1  är koordinaterna för första punkten
x2, y2 är koordinaterna för andra punkten
x3, y3 är koordinaterna för tredje punkten
Mellan punkterna ritar funktionen en linje.

Förutsatt att punkterna ritas i den ordning som visas på bilden  <img class="alignleft wp-image-584 size-medium" src="https://media.makeandshape.eu/2018/03/Triangel-300x300.jpg" alt="" width="300" height="300" />kan formler för att beräkna bas och höjd skrivas som:
Bas = x2 - x1
Höjd = y1 – y3
Formel för att beräkna arean av en triangel är:
Basen * höjden /2.
Formel för att räkna längden på hypotenusan i en rätvinklig triangel är: a2+ b2  = cDär a är en sida som längd är känd och b den andra sidan som längd är känd och c är hypotenusan.
Omskrivet blir det:
c = roten ur ( a2+ b2  )

 

I javaScript skrivs beräningen av hypotenusan på följande sätt:
const hypotenusa = Math.sqrt(Math.pow(bas, 2) + Math.pow(hojd, 2));

Math.sqrt() är en funktion som beräknar roten ur det som sätts innanför parenteserna.
Testa Math.sqrt genom att skriva:  console.log(Math.sqrt(16)); längst ner i editorn. I Consol ska det då visas 4.

För att skapa ett program som ritar ut en rätvinklig  triangel och skriver ut basens och höjdens mått och beräknar area och hypotenusa. Koden från förra övningen (Program 3) används.

Först skapas variabler för alla koordinater mellan vilka triangeln ska ritas. Variabler för bas, hojd, area och hypotenusa skapas också.

Först i funktionen draw finns rader för att bestämma färg och form för koordinatsystemet. Detta behöver göras då vi senare i programmet byter färg och tjocklek på linjer som ritas ut. Funktionen draw() körs ju om och om igen och skulle vi inte skriva in färg för koordinatsystemet här så kommer den färg som väljs senare att gälla även för koordinatsystemet.
stroke("darkBlue");
strokeWeight(1);

Efter for-loopen ska färgen ändras så att triangeln får annan linjefärg och tjocklek på linjen
stroke("Red");
strokeWeight(3);

Därefter ritas triangeln med variablerna som parametrar.
triangle(x1, y1, x2, y2, x3, y3);

Längst ner i koden står några console.log() vilka gör att värdena för bas, höjd, area och hypotenusa skrivs ut i Console när programmet körs. När console.log() läggs in efter sista klammerparentesen } för funktionen draw() kommer loggarna bara att skrivas ut en gång. Om koden istället läggs i draw-funktionen kommer loggarna att skrivas ut varje gång draw() körs.

 


Skapa en annan triangel som ser ut som på bilden här bredvid

Ändra i  beräkningarna för bas och höjd (andra koordinater behöver användas för att kunna räkna)
var bas =          ;
var hojd =        ;

Program 6

Polygoner

Polygoner kallas även för månghörningar och är tvådimensionella figurer vars namn beror av hur många sidor och hörn den har.


Här är en bild på fyra regelbundna månghörningar. Med regelbunden menas att alla sidor är lika långa och alla vinklar är lika stora i figuren.

En triangel har vinkelsumman 180 grader (60*3) En kvadrat har vinkelsumman 360 grader (90*4).
Vinkelsumman för en regelbunden polygon kan skrivas med formeln 180*(n-2) där n är antalet hörn.
För en triangel blir det då 180*(3 – 2) = 180
För en kvadrat 180 * (4 – 2) =360   och så vidare.

På bilden nedan är polygonerna indelade i trianglar. Varje triangel har vinkelsumman 180 grader och genom att dela in polygonerna på detta sätt ser man att formeln ovan stämmer.

Polygonerna är ritade inuti en cirkel för att visa att: "För att få en sluten polygon måste figuren ritas ett helt varv dvs 360 grader."

På bilden nedan har en annan vinkel ritats ut. Den vinkeln kallas supplementvinkel. En vinkel sägs vara supplementvinkel till en given vinkel om vinklarnas summa är 180°.

Summan av alla supplementvinklar på polygonen har alltid vinkelsumman 360 grader. När polygoner skapas med datorn är det de supplementvinkeln som anges. Man kan tänka på det som att datorn ritar en rät linje och sen behöver svänga ett visst antal grader för att kunna rita nästa linje i polygonen.

För sexhörningen så kan supplementvinkeln beräknas genom att först beräkna summan av alla inre vinklar 180 * (6-2)= 720    Varje vinkel i figuren är då 120 grader.  Inner vinkel plus supplementvinkel är 180 grader. Supplementvinkeln är 180-120 = 60 grader.
För sexhörningen görs sex vändningar (supplementvinklar) vilket är 6 * 60 = 360 grader.

 

I p5.js används något som heter radianer för att beräkna vinklar. För att istället använda grader måste det anges  genom att skriva:
angleMode(DEGREES);

Polygonen ritas genom att ett antal vertex (hörn) sätts ut vilka sen förbinds till en figur. För att rita med vertex används två funktioner:
beginShape() och endShape()

 

Här kan fler vertex läggas till för att förändra figuren. I funktionen endShape() står CLOSE. Det kommandot gör att figuren sluts med en linje mellan sista och första vertex.
Prova att ta bort CLOSE och se skillnaden

För att kunna rita olika polygoner skapas en funktion med fyra parametrar.

function polygon(x, y, radie, n_punkter){

}

x och y anger var på canvasen centrum på polygonen ska vara, radie är polygonens radie och n_punkter är antal hörn på polygonen.
var vinkel är den vinkel som datorn ska svänga vid varje hörn.  En for-loop skapas som gör något för varje ny vinkel. Variablerna sx och sy (skulle kunna vara vilket variabelnamn som helst) är x resp y- värden för de nya hörn (vertex) som ska ritas ut.
Funktionen skapas efter draw(). I draw kallar man sen på funktionen och anger de parametrar som anger den polygon som man vill rita. polygon(50,50,50,6); I det här fallet ritas en sexhörning.


Använd funktionen för att rita ut olika polygoner. 

Program 7

Räta linjens ekvation

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:

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.

Efter 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 4, koordinatsystem längre upp på denna sida 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). Därefter sätter vi variablerna x1,x2,y1 och y2 till ett slumpmässigt värde från vår array. I p5.js editor kan man skriva x1 = random(myArray); för att variabeln x1 få ett slumpmässigt värde från myArray. Så om du arbetar med den editorn så finns den möjligheten. Här har en annan kod som också är JavaScript använts:
x1 = myArray[Math.floor(Math.random()*myArray.length)]

Math.floor(Math.random() * myArray.length);  returnerar ett slumpmässigt värde mellan 0 och 6

Math.random() är ett slumpmässigt tal mellan 0 och 1
myArray.length är 7
Math.floor() avrundar nedåt till närmaste heltal

När formeln används kommer ett av talen 0, 1, 2, 3, 4, 5 eller 6 att returneras. Det talet används sen för att ta värdet av det tal som står den platsen i myArray och sätta variabeln x1 till värdet. Variabeln kan får ett slumpmässigt värde av värdena  50 , 100, 150, 200, 250, 300 eller 350..

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.

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 x1s värde ökas med 50.

I funktion draw() ritas de två punkterna ut och texten uppe till vänster skrivs ut.

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.

En variabel med namnet avrundat skapas och den ska innehålla det uträknade k värdet skrivet med två decimaler.

var 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 och så vidare.  Målet är nu 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 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 4, koordinatsystem längre upp på denna sida 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.

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.


Ä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.