//but I like to implement it for practice

​

class Vec2 {

  constructor(x, y){

    this.x = x;

    this.y = y;

  }

}

​

function posVec(v){

  return new Vec2(v.x + width/2, -v.y + height/2);

}

​

function polarToCart(v){

  return new Vec2(v.x * cos(v.y), v.x * sin(v.y));

}

​

function cartToPolar(v){

  let length = sqrt(v.x * v.x + v.y * v.y);

  return new Vec2(length, atan2(v.y, v.x));

}

​

//Translate the vector v by w

function ptranslate(v, w){

  return new Vec2(v.x + w.x, v.y + w.y);

}

​

function pline(start, end){

  let v = posVec(start);

  let w = posVec(end);

  line(v.x, v.y, w.x, w.y);

}

​

function pvector(p){

  //stoke(

  let origin = new Vec2(0, 0);

  pline(new Vec2(0, 0), p);

  let polar = cartToPolar(p);

  let tip1 = polar.y + PI/50;

  let tip2 = polar.y - PI/50;

  let w = new Vec2(polar.x-20, tip1);

  let u = new Vec2(polar.x-20, tip2);

​

  //stroke(color(0xff, 0x00, 0x00));

  pline(p, polarToCart(w));

  //stroke(color(0x00, 0xff, 0x00));

  pline(p, polarToCart(u));

  //stroke(color(0xff,0,0));

  pline(polarToCart(u), polarToCart(w));

  //pline(polarToCart(w), polarToCart(u));

}

​

function drawGrid(){

  stroke(color(0xaa, 0xaa, 0xaa));

  for(i = -width; i <= width; i+=10){

    pline(new Vec2(i, -height), new Vec2(i, height));

  }

  for(i = -height; i <= height; i+=10){

    pline(new Vec2(-width,i), new Vec2(width, i));

  }

​

  stroke(color(0, 0, 0));

  pline(new Vec2(-width, 1), new Vec2(width, 1));

  pline(new Vec2(1, -height), new Vec2(1, height));

  pline(new Vec2(-width, 0), new Vec2(width, 0));

  pline(new Vec2(0, -height), new Vec2(0, height));

  pline(new Vec2(-width, -1), new Vec2(width, -1));

  pline(new Vec2(-1, -height), new Vec2(-1, height));

​

  for(i = -width; i <= width; i+=10){

    pline(new Vec2(i, -5), new Vec2(i, 5));

  }

​

  for(i = -height; i <= height; i+=10){

    pline(new Vec2(-5,i), new Vec2(5, i));

  }

}

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

  drawGrid();

  let origin = new Vec2(0, 0);

  let trans = new Vec2(0, 100);

  stroke(color(255, 105, 105));

  for(i = 0; i < TWO_PI; i+=PI/50){

    let v = polarToCart(new Vec2(100, i));

    let w = ptranslate(v, polarToCart(new Vec2(10, i)));

    pline(v, w);

  }

​

  for(let i = 0; i < TWO_PI; i+=PI/10){

    stroke(color(82, 145, 255));

​

    pvector(polarToCart(new Vec2(200, i)));

  }

}