//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(origin, polarToCart(new Vec2(polar.x-20, tip1)));

  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(let i = -width; i <= width; i+=10){

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

  }

​

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

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

  }

}

​

function cerp(y1, y2, mu){

   let mu2 = (1-cos(mu*PI))/2;

   return(y1*(1-mu2)+y2*mu2);

}

​

function dotAt(v){

  let w = posVec(v);

  circle(w.x, w.y, 4);

}

​

function setup() {

  noLoop();

  createCanvas(400, 400);

}

​

function draw() {

  let points = [];

  background(220);

  drawGrid();

  //let origin = new Vec2(0, 0);

  //let trans = new Vec2(0, 100);

  stroke(color(52, 91, 153));

  fill(color(105, 255, 105));

​

  for(let i = -width; i < width; i+= 50){

    let y = (height/2)-random(0, height);

    points.push(new Vec2(i, y));

  }

  let n = 0;

  let v1 = points[n];

  n++;

  let v2 = points[n];

  let mu = 0.0;

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

    //dotAt(new Vec2(i, v1.y*(1-mu)+v2.y*mu));

    //dotAt(new Vec2(i, cerp(v1.y, v2.y, mu)));

    pline(new Vec2(i, cerp(v1.y, v2.y, mu)),

          new Vec2(i + 0.02, cerp(v1.y, v2.y, mu + 0.02)));

    mu += 0.02;

    if (i == v2.x){

      mu=0.0;

      v1 = points[n];

      n++;

      if (n < points.length){

        v2 = points[n]

      }

      else {

        v2 = new Vec2(width, 0);

      }

    }

  }

​

​

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

  fill(color(255, 105, 105));

  for(let i = 0; i < points.length; i++){

    dotAt(points[i]);

  }

  //for(let 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(175, i)));

  //}

}