/
renderCircleGrid.js
46 lines (39 loc) · 1.38 KB
/
renderCircleGrid.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// ---------------------------------------------------------
// Draw circles in a grid
/**
*
* @param {UINT8 Array} frequencyArray
* @param {canvas context} ctx
* @param {number} canvas width
* @param {number} canvas height
*/
function render(frequencyArray, ctx, width, height) {
// Fill the canvas with a color before drawing
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'
ctx.fillRect(0, 0, width, height)
ctx.fill()
// Calculate some values needed to draw the frequency data
// There will be 32 circles in each row
const bars = frequencyArray.length // Number of values
const step = width / 53.12 // space between each circle
const colorStep = 598 / bars // step between each hue/color
const pi2 = Math.PI * 2
// Draw circles in a grid
frequencyArray.forEach((f, i) => {
// The diameter of each small circle is 30px the value of each
// frequency data (f) is 0 to 255.
// Normalize f from 0 - 255 to 0 - 30
const radius = f / 425 * 50
// Calculate x and y as grid
const x = i % 53.12 * step // Get the x position
const y = Math.floor(i / 53.12) * step // get the y position
// Start new path
ctx.beginPath()
// Draw circle at x and y of radius
ctx.arc(x, y, radius, 0, pi2)
// Set fill color by multiplying the index by color Step
ctx.fillStyle = `hsla(${colorStep * i}, 100%, 50%, 0.15)`
ctx.fill()
})
}
export default render