Canvas radioactive

Canvas drawing example with lot of JavaScript ramdomness

by Koss Petroff

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.0.0/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.1.5/css/bootstrap-slider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.1.5/bootstrap-slider.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<header>
  <div class="container-fluid">
    <h1>Canvas radioactive</h1>

    <p>Canvas drawing example with lot of randomness</p>
  </div>
</header>
<div class="container-fluid">
  <div class="row show-grid">
    <div id="draw-container" class="col-lg-8 col-md-7 col-sm-6" style="height: 100%">
      <canvas id='draw'></canvas>
    </div>
    <div id="draw-params" class="col-lg-4 col-md-5 col-sm-6">
      <h3>Draw params</h3>

      <div class="form-group">
        <label class="control-label" for="draws-per-run">Draws per run</label>
        <input id="draws-per-run" value="50" />
      </div>
      <div class="form-group">
        <label class="control-label" for="line-precision">Elements per draw</label>
        <input id="line-precision" value="50" />
      </div>

      <div class="form-group">
        <label class="control-label" for="max-line-width">Max line width</label>
        <input id="max-line-width" value="5" />
      </div>
      <div class="form-group">
        <label class="control-label" for="strokes-probability">Strokes probability</label>
        <input id="strokes-probability" value="0.2" />
      </div>
      <div class="form-group">
        <label class="control-label" for="circle-probability">Circle probability</label>
        <input id="circle-probability" value="0.01" />
      </div>
      <div...

CSS

#draw {
  background: #000
}

.control-label {
  width: 40%;
  padding-right: 1em;
}

JavaScript

$('#draws-per-run').slider({
				  min: 1,
				  max: 500,
				  step: 1,
				  value: 50
				});

				$('#line-precision').slider({
				  min: 1,
				  max: 500,
				  step: 1,
				  value: 50
				});

				$('#max-line-width').slider({
				  min: 1,
				  max: 10,
				  step: 1,
				  value: 5
				});

				$('#strokes-probability').slider({
				  min: 0,
				  max: 0.5,
				  step: 0.01,
				  value: 0.2
				});

				$('#circle-probability').slider({
				  min: 0,
				  max: 0.5,
				  step: 0.001,
				  value: 0.01
				});

				$('#max-circle-size').slider({
				  min: 1,
				  max: 500,
				  step: 1,
				  value: 50
				});

				$('#clear-canvas').click(function(el) {
				  canvas.width = canvas.width;
				});
				$('#draw-run').click(function(el) {
				  drawsCounter = 0;
				  cycledraw();
				});

				$(window).resize(function() {
				  resizeCanvas();
				});

				var canvas = document.getElementById("draw");
				ctx = canvas.getContext('2d');
				resizeCanvas();

				ctx.strokeStyle = '#fff';

				var drawsCounter = 0;
				var elementsCounter = [];

				// start and target point coordinates array
				var linesArray = [];

				function resizeCanvas() {
				  canvas.width = $('#draw-container').width();
				  canvas.height = window.innerHeight - $('header').height() - 50;
				}

				function randomizeLine(lineId) {
				  // allow start end end points to be out of canvas boundaries
				  linesArray[lineId] = ['start', 'end', 'startColor', 'targetColor'];
				  linesArray[lineId]['start'] = ['x', 'y'];
				  linesArray[lineId]['end'] = ['x', 'y'];
				  linesArray[lineId]['start']['x'] = Math.floor(Math.random() * (canvas.width + 300)) - 150;
				  linesArray[lineId]['start']['y'] = Math.floor(Math.random() * (canvas.height + 300)) - 150;
				  linesArray[lineId]['end']['x'] = Math.floor(Math.random() * (canvas.width + 300)) - 150;
				  linesArray[lineId]['end']['y'] = Math.floor(Math.random() * (canvas.height + 300)) - 150;
				 ...