Matematik med JS

Här finns en del program i p5.js som behandlar delar av avsnitt från högstadiets 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 repl.it.

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.
Första textens storlek ska vara 32 pixlar. Färgen är grön (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=50, y =50. Därefter kommer en mindre text(12 pixlar). Sen byter vi färg och skriver oden för den röda 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.

Ändra storleken på rektanglarna och se hur det uppdateras på skärmen.
Lägg till variabel och text för Area

 

var breddRed = 100;
var hojdRed = 150;
var omkretsRed = 2*(breddRed + hojdRed);

var breddGreen = 50;
var hojdGreen = 50;
var omkretsGreen = 2*(breddGreen + hojdGreen);

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

function draw() {
    background(150);
    fill(255,0,0);
    rect(250,110,breddRed,hojdRed);//Red rect
    fill(0,255,0);
    rect(100,110,breddGreen,hojdGreen);//Green rect
    textSize(32);
    text("omkrets "+ omkretsGreen, 50,50);
    textSize(12);
    text("bredd " + breddGreen + " höjd " + hojdGreen, 50,370);
    fill(255,0,0);
    textSize(32);
    text("omkrets "+ omkretsRed, 250,50);
    textSize(12);
    text("bredd " + breddRed + " höjd "+ hojdRed, 250,370);
}

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 + " \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

var delen = 15;
var detHela = 150;
var andel = delen/detHela;

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

function draw(){
  background(200);
  fill(0,255,0);
  rect(100,100,detHela,20);
  fill(255,0,0, 230);
  rect(100, 130, delen,20);
  textSize(24);
  text(andel + " \nandel i procent " + andel*100 + " %", 10, 50);
}

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 nästa program där vi kommer att rita trianglar.

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

function draw(){
  background("Cyan");
  fill("darkBlue");
  for(var i=50; i<400; i=i+50){
    line(0,i,400,i);
    line(i,0,i,400);
    text(i, 0,i);
    text(i, i,20);
  }
}