Turn audio into a shareable video. forked from nypublicradio/audiogram

patterns.js 3.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. var d3 = require("d3");
  2. module.exports = {
  3. wave: curve(d3.curveCardinal.tension(0)),
  4. pixel: curve(d3.curveStep),
  5. roundBars: bars(true),
  6. bars: bars(),
  7. bricks: bricks(),
  8. equalizer: bricks(true)
  9. };
  10. function curve(interpolator) {
  11. return function drawCurve(context, data, options) {
  12. context.fillStyle = options.waveColor;
  13. context.strokeStyle = options.waveColor;
  14. context.lineWidth = 3;
  15. var line = d3.line()
  16. .curve(interpolator)
  17. .context(context);
  18. var waveHeight = options.waveBottom - options.waveTop;
  19. var baseline = options.waveTop + waveHeight / 2;
  20. var x = d3.scalePoint()
  21. .padding(0.1)
  22. .domain(d3.range(data.length))
  23. .rangeRound([0, options.width]);
  24. var height = d3.scaleLinear()
  25. .domain([0, 1])
  26. .range([0, waveHeight / 2]);
  27. var top = data.map(function(d,i){
  28. return [x(i), baseline - height(d)];
  29. });
  30. var bottom = data.map(function(d,i){
  31. return [x(i), baseline + height(d)];
  32. }).reverse();
  33. top.unshift([0, baseline]);
  34. top.push([options.width, baseline]);
  35. // Fill waveform
  36. context.beginPath();
  37. line(top.concat(bottom));
  38. context.fill();
  39. // Stroke waveform edges / ensure baseline
  40. [top, bottom].forEach(function(path){
  41. context.beginPath();
  42. line(path);
  43. context.stroke();
  44. });
  45. }
  46. }
  47. function bars(round) {
  48. return function(context, data, options) {
  49. context.fillStyle = options.waveColor;
  50. var waveHeight = options.waveBottom - options.waveTop;
  51. var baseline = options.waveTop + waveHeight / 2;
  52. var barX = d3.scaleBand()
  53. .paddingInner(0.5)
  54. .paddingOuter(0.01)
  55. .domain(d3.range(data.length))
  56. .rangeRound([0, options.width]);
  57. var height = d3.scaleLinear()
  58. .domain([0, 1])
  59. .range([0, waveHeight / 2]);
  60. var barWidth = barX.bandwidth();
  61. data.forEach(function(val, i){
  62. var h = height(val),
  63. x = barX(i);
  64. context.fillRect(x, baseline - h, barWidth, h * 2);
  65. if (round) {
  66. context.beginPath();
  67. context.arc(x + barWidth / 2, baseline - h, barWidth / 2, 0, 2 * Math.PI);
  68. context.moveTo(x + barWidth / 2, baseline + h);
  69. context.arc(x + barWidth / 2, baseline + h, barWidth / 2, 0, 2 * Math.PI);
  70. context.fill();
  71. }
  72. });
  73. }
  74. }
  75. function bricks(rainbow) {
  76. return function (context, data, options) {
  77. context.fillStyle = options.waveColor;
  78. var waveHeight = options.waveBottom - options.waveTop;
  79. var barX = d3.scaleBand()
  80. .paddingInner(0.1)
  81. .paddingOuter(0.01)
  82. .domain(d3.range(data.length))
  83. .rangeRound([0, options.width]);
  84. var height = d3.scaleLinear()
  85. .domain([0, 1])
  86. .range([0, waveHeight]);
  87. var barWidth = barX.bandwidth(),
  88. brickHeight = 10,
  89. brickGap = 3,
  90. maxBricks = Math.max(1, Math.floor(waveHeight / (brickHeight + brickGap)));
  91. data.forEach(function(val, i){
  92. var bricks = Math.max(1, Math.floor(height(val) / (brickHeight + brickGap))),
  93. x = barX(i);
  94. d3.range(bricks).forEach(function(b){
  95. if (rainbow) {
  96. context.fillStyle = d3.interpolateWarm(1 - (b + 1) / maxBricks);
  97. }
  98. context.fillRect(x, options.waveBottom - (brickHeight * (b+1)) - brickGap * b, barWidth, brickHeight);
  99. });
  100. });
  101. };
  102. }