Optodrum Testing Sidebar

by Spencer Smith

HTML

<div class="controls">
	<div class="speed">
		<div>0</div>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
</div>
<canvas id="canvas"></canvas>

CSS

body{margin:0;padding:0;font-family:sans-serif;font-weight:300;}
canvas {
  background-color: white;
  float: left;
}
.controls {
	float: left;
	width: 40px;
	height: 100vh;
	background-color: lightgray;
}
.speed{text-align: center;}
.speed div{
	box-sizing: border-box;
	width: 100%;
	padding: 10px 0;
	margin: 5px 0;
	background-color: whitesmoke;
	color: lightgray;
	cursor: pointer;
}
.speed div.current{
	color: #333;
	font-weight: 600;
}

JavaScript

var startingSpeed = 1;
var divisions = 12;
var color = "crimson";

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width = window.innerWidth - $(".controls").width();
ctx.canvas.height = window.innerHeight;
ctx.fillStyle = color;

var w = canvas.width / divisions;
var h = canvas.height;
var offset = w * 2;

var starting = -w * divisions;
var x = starting;
var y = calculateCenterY();
var speed = 0;

function draw(){
	requestAnimationFrame(draw);
  clear();
	
  for(var i = 0; i < (canvas.width / w) + 1; i++){
  	ctx.rect(x + (offset * i), y, w, h);
  }
	ctx.fill();
	
	x += speed * 1.5;
  
  if(x >= 0){
		//console.log(x);
  	x = starting + x;
  }
	
}

draw();

function clear(){
	ctx.beginPath();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function calculateCenterY(){
	return canvas.height / 2 - (h/2);
}

$(".speed div").click(function(){
  speed = $(this).index();
	$(".speed div").removeClass("current");
	$(this).addClass("current");
});

$(".height button").click(function(){
 	h = canvas.height * $(this).val();
  y = calculateCenterY();
});

$(".speed div").eq(startingSpeed).click();