​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(255);

  translate(width/2,height/2)

  scale(s,-s);

  strokeWeight(1/s);

​

  lineEq(1,2);

  drawAxis();

  drawBase();

}

​

function lineEq(a,b){ // ax + b = y 

  let minP = a * (-width/2) + b; // calculate min

  let maxP = a * ( width/2) + b; // calculate max

  line(-width/2, minP, width/2, maxP);

}

​

function drawAxis(){

  stroke(0);

  //strokeWeight(0.5/s);

  line(-width/2,0,width/2,0);

  line(0,height/2,0,-height/2);

}

​

function drawBase(){

  strokeWeight(1/s)

  drawArrow(createVector(0,0), createVector(1,0), color(160,122,160));

  drawArrow(createVector(0,0), createVector(0,1), color(130,162,200));

}

​

function drawArrow(base, vec, myColor) {

  strokeWeight(2/s)

  push();

  stroke(myColor);

  fill(myColor);

  translate(base.x, base.y);

  line(0, 0, vec.x, vec.y);

  rotate(vec.heading());

  let arrowSize = 0.1;

  translate(vec.mag() - arrowSize, 0);

  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);

  pop();

}

​