Pythagoras sats Grafiskt

Hur Pythagoras sats förklaras av kvadrater

Till att börja med ska vi göra ett program som räknar ut hypotenusan av en rätvinklig triangel.

Först skapas 7 variabler som innehåller koordinaterna för triangelns hörn och en variabel för hypotenusan

var x1 = 40;
var y1 = 40;
var x2 = 120;
var y2 = 40;
var x3 = 40;
var y3 = 160;
var hypotenusa;

I setup() skapas en canvas som är 400 * 400 pixlar. Variabeln hypotenusa sätts till  roten ur (kateterA i kvadrat + kateterB i kvadrat).

sqrt() är funktionen för roten ur
sq() är funktionen för att kvadrera

hypotenusan skrivs sen ut i consolen

function setup() {
createCanvas(400, 400);
hypotenusa = sqrt(sq(x2 - x1) + sq(y3 - y2));
console.log(hypotenusa);
}

I draw () sätts här bakgrund till en grå nyans. Det går bra att välja vilken färg man vill. En for-loop används för att rita ut linjer och siffror på canvasen. till slut ritas triangeln ut.

function draw() {
background(220);
for (var i = 40; i < 400; i = i + 40) {
line(0, i, 400, i);
line(i, 0, i, 400);
text(i, 0, i);
text(i, i, 20);
}
triangle(x1, y1, x2, y2, x3, y3);
}


 Använd programmet till att rita ut egna rätvinkliga trianglar. Var noga med att se till att det finns en rät vinkel i triangeln.
Programmet har en bugg för det räknar ut hypotenusan även om det inte finns en rät vinkel. Vi åtgärdar inte buggen här då det här bara är ett träningsredskap för att rita ut rätvinkliga trianglar med hjälp av koordinater. Du kan rita ut en triangel som inte har en rät vinkel och göra en beräkning av hypotenusan för att se om det stämmer.

Pythagoras sats med kvadrater

Här ska vi skapa ett program som visar att Pythagoras sats stämmer. Pythagoras sats säger att en hypotenusan(c) är lika med kateder (a) i kvadrat plus kateder (b) i kvadrat för en rätvinklig triangel.  En rätvinklig triangel är en triangel där en av vinklarna är 90 grader. Pythagoras sats gäller bara för rätvinkliga trianglar.
Om tre kvadrater ritas ut på ett sätt så att det bildas en rätvinklig triangel mellan dem kan man se att
För att bevisa satsen kan 3 kvadrater skapas med sidorna a, b och c. Variablerna x och y skapas också för att bestämma var på canvasen kvadraterna ska ritas.

var a = 70;
var b = 100;
var c;
var x = 150;
var y = 100;

I setup() skapas en canvas som är 400 * 400 pixlar. Nästa funktion är angleMode().  Angle betyder vinkel och vinklar kan anges på olika sätt. Ni kanske är vana vid grader men när man programmerar( och i andra matematiska sammanhang) används något som heter radianer. Radianer är en väldigt enkelt sätt att räkna vinklar. Vi kommer tillbaka till radianer senare.
För att det här programmet ska vara något ni känner igen så bestämmer vi att vinklar ska räknas i grader  genom att i setup() skriva:

angleMode(DEGREES);

Observera att det är STORA bokstäver när man ändrar något som är standard (men ändå en option) för det bibliotek man använder (här p5.js):

I setup() ska också den ekvation som används för att beräkna c anges

 c = sqrt(sq(a) + sq(b));

sqrt() betyder roten ur det som skrivs inom parenteserna.
sq() betyder att det som skriva inom parenteserna kvadreras. Med  text på tangentbord på dator skrivs det som(a^2). a^2 betyder alltså att a ska kvadreras( upphöjas till 2).
Översatt till pseudokod (text som är snarlik kod men ändå lättare för oss att läsa, så det är inte riktig syntax) står alltså:
c är lika med: lägg ihop kvadraten av a och kvadraten av b och ta roten ur den summan.

I draw() ska nu kvadrater ritas ut.

background(220);
fill(255, 0, 0, 150);
rect(x, y, c, c);
fill(0, 255, 0);

en bakgrund som är en nyans av grå ritas ut. Därefter sätts färgen till en röd nyans och en kvadrat som är beroende av tidigare angivna variabler ritas ut.

Nu kommer kod som är inneslutna i två funktioner som heter push() och pop(). All kod som finns inom dessa två funktioner sker bara där. push() och pop() används alltid i par. Efter push() skrivs kod som ändrar stil och transformation. När kodblocket avslutas med pop() så återgår alla inställningar till det som var innan.

För den gröna kvadraten

push();
translate(x, y + c);
rotate(acos(a / c));
fill(0, 255, 0);
rect(0, 0, a, a);
pop();

För den blå kvadraten

push();
translate(x + c, y + c);
rotate(asin(b / c));
fill(0, 0, 255);
rect(0, 0, b, b);
pop();

Till sist kommer kod för den text som ska skrivas ut på canvasen. \n som står gör att det blir ny rad.

I koden för text för den röda kvadraten finns formeln round(c*100)/100. När sidan c beräknas  kan c bli ett decimaltal med väldigt många decimaler. För a = 70 och b = 100 ger c = 122.06555615733703 . Om c multipliceras med 100 och sen rundas av fås 12207. Dividera med 100 så fås 122,07

fill(0);
textSize(16);
text('längd på sida i röd(c) kvadrat: ' + round(c*100)/100 + 
'\nlängd på sida i grön(a) kvadrat: ' + a +
'\nlängd på sida i blå(b) kvadrat: ' + b, 20,20);


  Ändra värden för variablerna a och b och få andra kvadrater. Lägg till kod som beräknar areorna på kvadraterna och bekräfta att c^2 = a^2 + b^2