let d,r;

let c=0;

let hw,hh;

let speed=3;

function setup() {

  createCanvas(400, 400);

  background(220);

  angleMode(DEGREES);

  // frameRate(12);

  hw=width/2;

  hh=height/2

  x=hw-50;

  y=hh+random(50,100);

  // let v = p5.Vector.random2D();

  // v.normalize();

  // v/=2;

  vx=0;

  vy=speed;

  colorMode(HSB);

  d=width;

  r=d/2;

}

function draw() {

  background(220);

  noFill();

  circle(hw,hh,d);

  fill(c,255,255);

  circle(x,y,20);

  x+=vx;

  y+=vy;

  //noraml

  let n = createVector(map(x,0,width,1,-1),map(y,0,height,1,-1));

  n.normalize();

  strokeWeight(10)

  point(map(n.x,1,-1,0,width),map(n.y,1,-1,0,height));

  strokeWeight(1);

  line(map(n.x,1,-1,0,width),map(n.y,1,-1,0,height),map(n.x,1,-1,0,width)+cos(n.heading())*10,map(n.y,1,-1,0,height)+sin(n.heading())*10);

  // translate(hw,hh);

  // rotate(n.heading());

  //   line(0,0,n.mag()*50,0);

  // rotate(0);

  // translate(0,0);

  //ball's vector

  let v = createVector(vx,vy);

  v.normalize();

  v.mult(-1);

  //perpendicular

  let u=p5.Vector.dot(v,n)*n.heading();

  // parallel

  let w=v.heading()-(u*2);

  // console.log(w);

  // translate(hw,hh);

  // rotate(n);

  //   line(0,0,50,0);

  // rotate(0);

  // translate(0,0);

  line(x-vx,y-vy,x+cos(u)*20,y+sin(u)*20);

  stroke(50,100,100);

  strokeWeight(3);

  line(x-vx,y-vy,x+cos(w)*20,y+sin(w)*20);

  strokeWeight(1);

  stroke(0,0,0);

  // let n = createVector(1,0)

  if (dist(x,y,hw,hh)>min(hw,hh)) {

    // let nv = w-u;

    vx=speed*cos(w);

    vy=speed*sin(w);

    // console.log(w.heading());

    x+=vx;

    y+=vy;

    // vx=v.x*speed;

    // vy=v.y*speed;

  }

  c++;

  c%=360;

}