Displaying ./jul15/lines.html

<!DOCTYPE html>
<html>
<head>
 <meta charset='utf-8'>
 <title> Forever loop </title>
 <style>
 #c { border: 1px solid black; }
 </style>
</head>
<body>
<canvas id='c' width=1024 height=768></canvas>
<script>
var lines = [];

function drawline(ctx, x1, y1, x2, y2, color, width) {
  ctx.lineWidth = width;
  ctx.strokeStyle = color;
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.moveTo(x1, y1);  
  ctx.closePath();
  ctx.stroke();
}

function R(a, b) {
  var range = Math.abs(a-b);
  var m = Math.min(a,b);
  return Math.floor(m + (Math.random() * range));
}

var x1 = R(0,1023), x2=R(0,1023), y1 = R(0,767), y2 = R(0,767)
var dx1=R(1,20), dx2=R(1,20), dy1=R(1,20), dy2=R(1,20);

function update() {
  var ctx = document.getElementById("c").getContext("2d");
//  ctx.clearRect(0,0,1024,768);
  var color = "rgb(" + R(0,255) + "," + R(0,255) + "," + R(0,255) + ")";
  drawline(ctx, x1, y1, x2, y2, color, 3);
  lines.push({x1: x1,y1: y1, x2: x2, y2: y2});
  x1 += dx1;
  if (x1 < 0 || x1 >= 1024) dx1 = -dx1;
  x2 += dx2;
  if (x2 < 0 || x2 >= 1024) dx2 = -dx2;

  y1 += dy1;
  if (y1 < 0 || y1 >= 768) dy1 = -dy1;
  y2 += dy2;
  if (y2 < 0 || y2 >= 768) dy2 = -dy2;

  if (lines.length > 100) {
    var l = lines.shift();
    drawline(ctx, l.x1, l.y1, l.x2, l.y2, "white", 5);
  }
  setTimeout(update, 33);
}

setTimeout(update, 33);

</script>
</body>
</html>