guchimon99/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>world</title>
  <style>
    body {
      margin: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <canvas></canvas>
  <script src="main.js"></script>
</body>
</html>

## main.js
var COLOR_BLACK = "rgba(0,0,0,1)";
var COLOR_WHITE = "rgba(255,255,255,1)";
var COLOR_RED = "rgba(255,0,0,1)";

var a, b, c;
var ctx = null;
var canvas = null;
var startedAt = null;
var width = null;
var height = null;
var vmin = null;
var points = null;
var trajectoryLines = null;

function start() {

  points = [];
  trajectoryLines = [];

  for (var i = 0; i < 10; i++) {
    a = Math.random() * Math.PI * 2.0;
    b = Math.sqrt(Math.random());
    c = {
      x: b * Math.cos(a),
      y: b * Math.sin(a),
      color: COLOR_WHITE,
      direction: Math.random() * Math.PI * 2
    };
    points.push(c);
    trajectoryLines.push([{
      x1: c.x,
      y1: c.y,
      x2: c.x,
      y2: c.y,
    }]);
  }

  window.requestAnimationFrame(loop);
}

function ballRadius() {
  return vmin * 0.2;
}

function pointRadius() {
  return 2;
}

function loop() {
  update();
  draw();
  window.requestAnimationFrame(loop);
}

function update() {
  points = points.map(function(point,index){
    var direction = point.direction;
    var x = point.x + Math.cos(direction) * 0.01;
    var y = point.y + Math.sin(direction) * 0.01;
    var color = COLOR_WHITE;

    if (Math.pow(x, 2) + Math.pow(y,2) > Math.pow(1, 2)) {
      color = COLOR_RED;
      direction = direction + Math.PI - Math.asin(y);
      trajectoryLines[index].push({
        x1: x,
        y1: y,
        x2: x,
        y2: y,
      });
    }

    return Object.assign({}, point, {
      x: x,
      y: y,
      direction: direction,
      color: color,
    });
  });

  trajectoryLines = updateTrajectoryLines(trajectoryLines, points);
}

function updateTrajectoryLines (trajectoryLines, points) {
  return trajectoryLines.map(function(lines, index){
    var point = points[index];
    lines[lines.length-1].x2 = point.x;
    lines[lines.length-1].y2 = point.y;
    return lines;
  });
}

function draw () {

  reset(ctx);
  drawBall(ctx);

  trajectoryLines.forEach(function(lines){
    lines.forEach(function(line, index, lines){
      drawTrajectoryLine(ctx, line, index, lines.length);
    });
  });
  points.forEach(function(point){
    drawPoint(ctx, point);
  });
}

function reset(ctx) {
  ctx.beginPath();
  ctx.fillStyle = COLOR_BLACK;
  ctx.fillRect(0, 0, width, height);
}

function drawCircle(ctx, cx, cy, radius) {
  ctx.arc( cx, cy, radius, 0 * Math.PI / 180, 360 * Math.PI / 180, false );
}

function drawBall(ctx) {
  ctx.beginPath();
  drawCircle(ctx, width/2, height/2, ballRadius());
  ctx.strokeStyle = COLOR_WHITE;
  ctx.lineWidth = 1;
  ctx.stroke() ;
}

function drawPoint(ctx, point) {
  ctx.beginPath();
  drawCircle(ctx,
    width/2 + point.x * ballRadius(),
    height/2 + point.y * ballRadius(),
    pointRadius()
  );
  ctx.fillStyle = point.color;
  ctx.fill();
}

function drawTrajectoryLine(ctx, line, index, length) {

  var x1 = width / 2 + line.x1 * ballRadius();
  var y1 = height / 2 + line.y1 * ballRadius();
  var x2 = width / 2 + line.x2 * ballRadius();
  var y2 = height / 2 + line.y2 * ballRadius();
  var alpha = index + 1 / length * 0.5;

  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.strokeStyle = "rgba(255,255,255," + alpha + ")";
  ctx.lineWidth = 1;
  ctx.stroke();
}

function resize() {
  width = window.innerWidth;
  height = window.innerHeight;
  vmin = Math.min(width, height);
  canvas.setAttribute("width", width);
  canvas.setAttribute("height", height);
}

function onResize() {
  resize();
  draw();
}

function onLoad () {

  startedAt = new Date();

  canvas = document.querySelector("canvas");
  ctx = canvas.getContext("2d");

  resize();
  start();
  window.addEventListener("resize", onResize);
}

window.addEventListener("load", onLoad)
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>world</title>
	<style>
	body {
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<canvas></canvas>
	<script src="main.js"></script>
	</body>
	</html>
	var COLOR_BLACK = "rgba(0,0,0,1)";
	var COLOR_WHITE = "rgba(255,255,255,1)";
	var COLOR_RED = "rgba(255,0,0,1)";

	var a, b, c;
	var ctx = null;
	var canvas = null;
	var startedAt = null;
	var width = null;
	var height = null;
	var vmin = null;
	var points = null;
	var trajectoryLines = null;

	function start() {

	points = [];
	trajectoryLines = [];

	for (var i = 0; i < 10; i++) {
	a = Math.random() * Math.PI * 2.0;
	b = Math.sqrt(Math.random());
	c = {
	x: b * Math.cos(a),
	y: b * Math.sin(a),
	color: COLOR_WHITE,
	direction: Math.random() * Math.PI * 2
	};
	points.push(c);
	trajectoryLines.push([{
	x1: c.x,
	y1: c.y,
	x2: c.x,
	y2: c.y,
	}]);
	}

	window.requestAnimationFrame(loop);
	}

	function ballRadius() {
	return vmin * 0.2;
	}

	function pointRadius() {
	return 2;
	}

	function loop() {
	update();
	draw();
	window.requestAnimationFrame(loop);
	}

	function update() {
	points = points.map(function(point,index){
	var direction = point.direction;
	var x = point.x + Math.cos(direction) * 0.01;
	var y = point.y + Math.sin(direction) * 0.01;
	var color = COLOR_WHITE;

	if (Math.pow(x, 2) + Math.pow(y,2) > Math.pow(1, 2)) {
	color = COLOR_RED;
	direction = direction + Math.PI - Math.asin(y);
	trajectoryLines[index].push({
	x1: x,
	y1: y,
	x2: x,
	y2: y,
	});
	}

	return Object.assign({}, point, {
	x: x,
	y: y,
	direction: direction,
	color: color,
	});
	});

	trajectoryLines = updateTrajectoryLines(trajectoryLines, points);
	}

	function updateTrajectoryLines (trajectoryLines, points) {
	return trajectoryLines.map(function(lines, index){
	var point = points[index];
	lines[lines.length-1].x2 = point.x;
	lines[lines.length-1].y2 = point.y;
	return lines;
	});
	}

	function draw () {

	reset(ctx);
	drawBall(ctx);

	trajectoryLines.forEach(function(lines){
	lines.forEach(function(line, index, lines){
	drawTrajectoryLine(ctx, line, index, lines.length);
	});
	});
	points.forEach(function(point){
	drawPoint(ctx, point);
	});
	}

	function reset(ctx) {
	ctx.beginPath();
	ctx.fillStyle = COLOR_BLACK;
	ctx.fillRect(0, 0, width, height);
	}

	function drawCircle(ctx, cx, cy, radius) {
	ctx.arc( cx, cy, radius, 0 * Math.PI / 180, 360 * Math.PI / 180, false );
	}

	function drawBall(ctx) {
	ctx.beginPath();
	drawCircle(ctx, width/2, height/2, ballRadius());
	ctx.strokeStyle = COLOR_WHITE;
	ctx.lineWidth = 1;
	ctx.stroke() ;
	}

	function drawPoint(ctx, point) {
	ctx.beginPath();
	drawCircle(ctx,
	width/2 + point.x * ballRadius(),
	height/2 + point.y * ballRadius(),
	pointRadius()
	);
	ctx.fillStyle = point.color;
	ctx.fill();
	}

	function drawTrajectoryLine(ctx, line, index, length) {

	var x1 = width / 2 + line.x1 * ballRadius();
	var y1 = height / 2 + line.y1 * ballRadius();
	var x2 = width / 2 + line.x2 * ballRadius();
	var y2 = height / 2 + line.y2 * ballRadius();
	var alpha = index + 1 / length * 0.5;

	ctx.beginPath();
	ctx.moveTo(x1, y1);
	ctx.lineTo(x2, y2);
	ctx.strokeStyle = "rgba(255,255,255," + alpha + ")";
	ctx.lineWidth = 1;
	ctx.stroke();
	}

	function resize() {
	width = window.innerWidth;
	height = window.innerHeight;
	vmin = Math.min(width, height);
	canvas.setAttribute("width", width);
	canvas.setAttribute("height", height);
	}

	function onResize() {
	resize();
	draw();
	}

	function onLoad () {

	startedAt = new Date();

	canvas = document.querySelector("canvas");
	ctx = canvas.getContext("2d");

	resize();
	start();
	window.addEventListener("resize", onResize);
	}

	window.addEventListener("load", onLoad)