gubatron/random_squares.html

## random_squares.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      const max_x = 2048
      const max_y = 2048
      const bgcolor = 'rgb(0,0,0)'
      const fgcolor0 = 'rgb(200, 0, 0)'
      const fgcolor1 = 'rgba(0, 0, 250, 0.5)'
      const fgcolor2 = 'rgb(0, 255, 0)'
      const fgcolor3 = 'rgb(255, 255, 0)'

      function createSquare(fillStyle_, x_, y_, w_, h_, vx_, vy_) {
        return {
          fillStyle : fillStyle_,
          x : x_,
          y : y_,
          w : w_,
          h : h_,
          vx : vx_,
          vy : vy_
        }
      }

      function copySquare(sq) {
        return createSquare(sq.fillStyle, sq.x, sq.y, sq.w, sq.h, sq.vx, sq.vy)
      }

      function drawSquare(ctx, sq) {
        ctx.fillStyle = sq.fillStyle
        ctx.fillRect(sq.x, sq.y, sq.w, sq.h)
      }

      function eraseSq(ctx, sq) {
        var bgSq = copySquare(sq)
        bgSq.fillStyle = bgcolor
        drawSquare(ctx, bgSq)
      }

      function moveSquare(ctx, sq) {
        eraseSq(ctx, sq)
        sq.x = sq.x + sq.vx
        sq.y = sq.y + sq.vy
        // y direction change
        if ((sq.x <= 0 && sq.vx < 0) || (sq.x > (max_x - sq.w) && sq.vx > 0)) {
          sq.vx = sq.vx * -1
        }
        // x right border
        if (sq.x > (max_x - sq.w) && sq.vx > 0) {
          sq.y = max_y
        }
        // x left border
        if (sq.x <= 0 && sq.vx < 0) {
          sq.x = 0
        }

        // y direction change
        if ((sq.y < 0 && sq.vy < 0) || (sq.y > (max_y - sq.h) && sq.vy > 0)) {
          sq.vy = sq.vy * -1
        }
        // y bottom border
        if (sq.y > (max_y - sq.h) && sq.vy > 0) {
          sq.y = max_y
        }
        // y top border
        if (sq.y < 0 && sq.vy < 0) {
          sq.y = 0
        }
        drawSquare(ctx, sq)
      }

      function moveSquares(ctx, squares) {
        squares.forEach( (s) => {
          moveSquare(ctx, s)
        }
        )
      }

      function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
      }

      const sq0 = createSquare(fgcolor0, 10, 10, getRandomInt(20,100), getRandomInt(20,100), 8, 3)
      const sq1 = createSquare(fgcolor1, 30, 30, 100, 100, 4, 6)
      const sq2 = createSquare(fgcolor2, 80, 00, 200, 200, -8, -6)

      const squares = []
      const colors = [ fgcolor0, fgcolor1, fgcolor2, fgcolor3 ]
      const maxSpeed = 50
      const MAX_SQUARES = 200


      function initSquares() {
        for (var i=0; i < MAX_SQUARES; i++) {
          let w = getRandomInt(30,200)
          let y = getRandomInt(30,200)
          let sq = createSquare(colors[getRandomInt(0,4)],
            max_x/2, max_y/2,
            w,y,
            getRandomInt(-maxSpeed,maxSpeed), getRandomInt(-maxSpeed,maxSpeed)
          )
          squares.push(sq)
        }
      }

      function renderLoop(timestamp) {
        moveSquares(renderLoop.ctx, squares)
        window.requestAnimationFrame(renderLoop)
      }

      function draw() {
        initSquares()
        var canvas = document.getElementById('tutorial')
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d')
          renderLoop.ctx = ctx
        }
        renderLoop(0)
      }

    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
      body {
        background-color: rgb(0, 0, 0);
      }
      canvas {
        margin-left:10px;
        background-color: rgb(0, 0, 0);
      }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="2048" height="2048"></canvas>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Canvas tutorial</title>
	<script type="text/javascript">
	const max_x = 2048
	const max_y = 2048
	const bgcolor = 'rgb(0,0,0)'
	const fgcolor0 = 'rgb(200, 0, 0)'
	const fgcolor1 = 'rgba(0, 0, 250, 0.5)'
	const fgcolor2 = 'rgb(0, 255, 0)'
	const fgcolor3 = 'rgb(255, 255, 0)'

	function createSquare(fillStyle_, x_, y_, w_, h_, vx_, vy_) {
	return {
	fillStyle : fillStyle_,
	x : x_,
	y : y_,
	w : w_,
	h : h_,
	vx : vx_,
	vy : vy_
	}
	}

	function copySquare(sq) {
	return createSquare(sq.fillStyle, sq.x, sq.y, sq.w, sq.h, sq.vx, sq.vy)
	}

	function drawSquare(ctx, sq) {
	ctx.fillStyle = sq.fillStyle
	ctx.fillRect(sq.x, sq.y, sq.w, sq.h)
	}

	function eraseSq(ctx, sq) {
	var bgSq = copySquare(sq)
	bgSq.fillStyle = bgcolor
	drawSquare(ctx, bgSq)
	}

	function moveSquare(ctx, sq) {
	eraseSq(ctx, sq)
	sq.x = sq.x + sq.vx
	sq.y = sq.y + sq.vy
	// y direction change
	if ((sq.x <= 0 && sq.vx < 0) \|\| (sq.x > (max_x - sq.w) && sq.vx > 0)) {
	sq.vx = sq.vx * -1
	}
	// x right border
	if (sq.x > (max_x - sq.w) && sq.vx > 0) {
	sq.y = max_y
	}
	// x left border
	if (sq.x <= 0 && sq.vx < 0) {
	sq.x = 0
	}

	// y direction change
	if ((sq.y < 0 && sq.vy < 0) \|\| (sq.y > (max_y - sq.h) && sq.vy > 0)) {
	sq.vy = sq.vy * -1
	}
	// y bottom border
	if (sq.y > (max_y - sq.h) && sq.vy > 0) {
	sq.y = max_y
	}
	// y top border
	if (sq.y < 0 && sq.vy < 0) {
	sq.y = 0
	}
	drawSquare(ctx, sq)
	}

	function moveSquares(ctx, squares) {
	squares.forEach( (s) => {
	moveSquare(ctx, s)
	}
	)
	}

	function getRandomInt(min, max) {
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
	}

	const sq0 = createSquare(fgcolor0, 10, 10, getRandomInt(20,100), getRandomInt(20,100), 8, 3)
	const sq1 = createSquare(fgcolor1, 30, 30, 100, 100, 4, 6)
	const sq2 = createSquare(fgcolor2, 80, 00, 200, 200, -8, -6)

	const squares = []
	const colors = [ fgcolor0, fgcolor1, fgcolor2, fgcolor3 ]
	const maxSpeed = 50
	const MAX_SQUARES = 200


	function initSquares() {
	for (var i=0; i < MAX_SQUARES; i++) {
	let w = getRandomInt(30,200)
	let y = getRandomInt(30,200)
	let sq = createSquare(colors[getRandomInt(0,4)],
	max_x/2, max_y/2,
	w,y,
	getRandomInt(-maxSpeed,maxSpeed), getRandomInt(-maxSpeed,maxSpeed)
	)
	squares.push(sq)
	}
	}

	function renderLoop(timestamp) {
	moveSquares(renderLoop.ctx, squares)
	window.requestAnimationFrame(renderLoop)
	}

	function draw() {
	initSquares()
	var canvas = document.getElementById('tutorial')
	if (canvas.getContext) {
	var ctx = canvas.getContext('2d')
	renderLoop.ctx = ctx
	}
	renderLoop(0)
	}

	</script>
	<style type="text/css">
	canvas { border: 1px solid black; }
	body {
	background-color: rgb(0, 0, 0);
	}
	canvas {
	margin-left:10px;
	background-color: rgb(0, 0, 0);
	}
	</style>
	</head>
	<body onload="draw();">
	<canvas id="tutorial" width="2048" height="2048"></canvas>
	</body>
	</html>