Visualizing Rhythm

index.html

<canvas id="circle"></canvas>

<!-- 
 for finding the end point of the arcs:
 
 http://stackoverflow.com/questions/12342102/html5-get-coordinates-of-arcs-end
-->

script.js

var canvas = document.getElementById('circle');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 120;
var allBeatCoordinates;
var beatCoordinates;
var curBeatX;
var curBeatY;


// let's subdivide the circle for depending on the number of beats!
var bpm = 100;
var beatsPerSecond = bpm / 60;
console.log("bps = " beatsPerSecond);

var beats = 8;

// Circle stuff
var arcAngle = ( 360 / beats );
var arc = 2 * Math.PI * radius * ( arcAngle / 360 );
var segment = ( arc / ( beats * arc ) ) * 2;
var arcOffset = segment * Math.PI;
var curAngle;

// I know ... this is pretty lazy, shhh...
document.write('<p class="stats">1 segment = 'segment'</p>');

// var bpmVal = document.getElementById('bpmInput').value = bpm;

var getCoordinates = function(i, centerX, centerY, curAngle, radius) {
  allBeatCoordinates = [];
  
  curBeatX = centerX+Math.sin(curAngle)*radius;
  curBeatY = centerY+Math.cos(curAngle)*radius;
  
  allBeatCoordinates[i] = [curBeatX , curBeatY];
  
  return allBeatCoordinates;
  return curBeatY;
  return curBeatX;
};


context.beginPath();
for ( i = 0 ; i < beats ; i ++ ) {
	var segmentStart = segment * i;
  var segmentEnd = ( segment * i ) + segment;
  curAngle = arcAngle * i; 
  
  getCoordinates(i, centerX, centerY, curAngle, radius);
  
  console.log(allBeatCoordinates[i]);
  
  context.arc( centerX, centerY, radius, segmentStart, segmentEnd, true );
  // context.arc( allBeatCoordinates[i][1], allBeatCoordinates[i][2], 30, 0*Math.PI, 2*Math.PI, true);
 
} 
	context.lineWidth = 5;
	//context.rotate( 25 * Math.PI / 180);
  context.strokeStyle = '#ffffff';
  context.shadowColor = '#222';
  context.shadowBlur = 3;
  context.shadowOffsetY = 2;
  context.stroke();

style.css

body {
  background-image: url(http://subtlepatterns.com/patterns/mochaGrunge.png);
  padding: 0;
  margin: 0;
}

canvas {
  box-sizing: border-box;
  //border: 1px solid rgba(255, 0, 255, .9);

}

.stats {
  position: absolute;
  top: 0;
  color: rgba(150, 60, 30, 1);
  background: rgba(240, 140, 70, .5);
  border: 1px solid rgba(150, 60, 30, 1);
  font-weight: 100;
  font-family: 'Helvetica neue', Helvetica, Arial, sans-serif;
  font-size: 24px;
  padding: 8px 18px;
  border-radius: 5px;
  transition: background .2s;
}

stats:hover {
  background: rgba(180, 70, 0, 0);
  transition: background .2s;
}

Visualizing-Rhythm.markdown

Visualizing Rhythm

Visualizing Rhythm

I stumbled upon this great TED Ed presenation about reimagining rhythm visualization and of course the wheels in my mind began to turn. I had never worked with canvas but I decided that this would be the perfect project to start learning with.

"I'm not a math major"

I'm willing to admit that walking into this I had no idea how to calculate the pieces of this circle. I just knew that I wanted to do it so ... I googled until I got it right.

I found helpful tips and formulae here:

• W3 Schools
• Math Open Reference
• General HTML 5 Canvas info

These may be helpful in the future

• calculating points around the circle

A Pen by Dominick Washburn on CodePen.

License.