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

patterns.js 4.2KB

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