*{
  margin : 0;
}

var px, py;
var stepsize = 10;

function setup(){
  createCanvas(windowWidth, windowHeight);
  background(0,0,0)
  frameRate(10)
  px= width/2;
  py = height/2;
}

function draw(){
  const rnd = Math.random() * 2 * Math.PI
  const dx = Math.cos(rnd)
  const dy = Math.sin(rnd)
  x = px + dx * stepsize
  y = py + dy * stepsize
  
  stroke(0,0,0)
  textSize(16);
  textFont('monospace');
  fill(0, 0, 0)
  rect(0, 0, 100, 100);
  fill(200, 200, 200)
  text('dx: ' + (dx > 0 ? '+' : '-') + (Math.abs(dx) < 0.95 ? '0' : '') + Math.abs(Math.round(dx * 10)), 10, 20)
  text('dy: ' + (dy > 0 ? '+' : '-') +  (Math.abs(dy) < 0.95 ? '0' : '') + Math.abs(Math.round(dy * 10)), 10, 20+32)
  
  if(x<0 || px < 0)
    {x =!x; px = !px;}
  
  if(y<0 || py < 0)
    {y =!y; py = !py;}
  

  stroke (x,y,px);
  if ((x >10 && x <width-10) && (y>10 && y <height-10) )
  line(px, py, x,y);
    

    
  px=x;
  py=y;
}