Rät linje, y = kx+m

Skapa ett program som ritar ut en rät linje i ett koordinatsystem

Räta linjer skrivs ofta med formeln y = k x + m  där  x och y är variabler, och k och m är konstanter som avgör sambandet mellan variablerna.
k kallas riktningskoefficient och betecknar lutningen på linjen.
m  bestämmer var linjen skär y-axeln.

Vi börjar med att skapa fyra variabler och bestämmer att k = 1 och m = 50.

let y;
let x;
let k = 1;
let m = 50;

I setup() skapas en canvas som är 400 * 400 pixlar.

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

I draw() bestämmer vi färg på bakgrunden och använder en fördefinierad funktion som heter translate(). Funktionen translate() gör att vi kan flytta origo till annan plats på canvasen. I p5.js är origo placerad i övre vänstra hörnet och här ska vi skapa ett kartesiskt koordinatsystem där origo är i mitten av canvasen.

function draw() {
background(71);
translate(200, 200);

För att tydliggöra koordinatsystemet med linjer och siffror ritas vertikal och horisontella linjer upp med ett avstånd på 50 pixlar. De tunnare linjerna har strokeWeight 0.5 och x- och y-axlar har strokeWeight 3

for (let i = -200; i < 200; i = i + 50) {
  strokeWeight(0.5);
  line(-200, i, 200, i);
  line(i, -200, i, 200);
  fill(255);
  text(-i, 0,i);
  text(i, i,20);
}
stroke(220);
strokeWeight(3);
line(-200, 0, 200, 0);
line(0, 200, 0, -200);

 Lägg gärna lite tid på att förstå hur linjerna ritas ut med for-loopen

För att rita ut en linje(bestående av punkter) för alla punkter på den räta linjen använder vi följande kod:

stroke(255);
strokeWeight(5);
for (let x = -200; x < 200; x++) {
y = k * x + m;
point(x, y);
}

OBS ATT PROGRAMMET VI SKAPAT NEDAN HAR EN BUGG!!

 Kan du hitta buggen?
Titta noga på lutning och var linjen skär y-axeln och jämför med vilka värden variablerna k och m har

Prova med att rita ut en ellipse(100,100,10,10) och se var den hamnar i koordinatsystemet

När vi flyttade origo 200 pixlar i x-led och 200 pixlar i y-led så fick det övre vänstra hörnet koordinaterna (-200,-200). Vad vi skulle vilja var ju att koordinaterna skulle vara (-200, 200).

För att göra  programmet korrekt kan vi  ändra  värdena på k till - k och m till - m i setup().  Då blir programmet DEBUGGAT och fungerar som det var tänkt.