Rätvinkliga trianglar

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  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  = c2  Dä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äkningen av hypotenusan på följande sätt:
var 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 consollen 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  övningen (for loop för indelning av canvas) används.

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

Kom ihåg att skriva höjd med o istället för ö. Å, ä och ö fungerar inte i för mat namnge variabler i JavaScript

var x1 = 100;
var y1= 300;
var x2 = 200;
var y2= 300;
var x3 = 100;
var y3= 100;
var bas = x2-x1;
var hojd = y1-y3;
var area = bas * hojd /2;
var hypotenusa = Math.sqrt(Math.pow(bas, 2) + Math.pow(hojd, 2));

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. därefter ritas linjer och text ut på canvasen

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

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

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

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

stroke("Red");
 strokeWeight(3);
 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 =        ;