diff --git a/client/sample-wave.js b/client/sample-wave.js index d34a6d0f..cbb2a477 100644 --- a/client/sample-wave.js +++ b/client/sample-wave.js @@ -1 +1 @@ -module.exports = [[0.509,0.509],[0.264,0.264],[0.321,0.321],[0.377,0.377],[0.377,0.377],[0.34,0.34],[0.415,0.415],[0.245,0.245],[0.377,0.377],[0.792,0.792],[1,1],[0.585,0.585],[0.736,0.736],[0.679,0.679],[0.434,0.434],[0.208,0.208],[0.151,0.151],[0.396,0.396],[0.679,0.679],[0.604,0.604],[0.377,0.377],[0.226,0.226],[0.321,0.321],[0.283,0.283],[0.679,0.679],[0.623,0.623],[0.623,0.623],[0.113,0.113],[0.151,0.151],[0.943,0.943],[0.981,0.981],[0.509,0.509],[0.415,0.415],[0.34,0.34],[0.566,0.566],[0.283,0.283],[0.453,0.453],[0.547,0.547],[0.547,0.547],[0.415,0.415],[0.434,0.434],[0.962,0.962],[0.698,0.698],[0.434,0.434],[0.491,0.491],[0.491,0.491],[0.453,0.453],[0.434,0.434],[0.434,0.434],[0.698,0.698],[0.698,0.698],[0.283,0.283],[0.283,0.283],[0.302,0.302],[0.321,0.321],[0.321,0.321],[0.925,0.925],[0.943,0.943],[0.264,0.264],[0.226,0.226],[0.415,0.415],[0.264,0.264],[0.358,0.358],[0.245,0.245],[0.396,0.396],[0.566,0.566],[0.566,0.566],[0.679,0.679],[0.585,0.585],[0.472,0.472],[0.415,0.415],[0.528,0.528],[0.528,0.528],[0.358,0.358],[0.151,0.151],[0.358,0.358],[0.34,0.34],[0.302,0.302],[0.208,0.208],[0.377,0.377],[0.094,0.094],[0.208,0.208],[0.849,0.849],[0.943,0.943],[0.283,0.283],[0.358,0.358],[0.132,0.132],[0.321,0.321],[0.321,0.321],[0.509,0.509],[0.208,0.208],[0.226,0.226],[0.226,0.226],[0.491,0.491],[0.491,0.491],[0.151,0.151],[0.321,0.321],[0.377,0.377],[0.849,0.849],[0.792,0.792],[0.208,0.208],[0.302,0.302],[0.34,0.34],[0.302,0.302],[0.415,0.415],[0.491,0.491],[0.189,0.189],[0.245,0.245],[0.245,0.245],[0.453,0.453],[0.434,0.434],[0.226,0.226],[0.245,0.245],[0.434,0.434],[0.755,0.755],[0.509,0.509],[0.396,0.396],[0.226,0.226],[0.453,0.453],[0.623,0.623],[0.396,0.396],[0.208,0.208],[0.226,0.226],[0.132,0.132],[0.302,0.302],[0.321,0.321],[0.415,0.415],[0.377,0.377]]; +module.exports = [[0.151,-0.123],[0.287,0.157],[0.801,0.764],[0.555,0.476],[0.226,0.182],[0.33,-0.313],[0.493,-0.454],[0.336,-0.301],[0.099,0.067],[0.096,0.076],[0.112,-0.099],[0.252,-0.234],[0.281,-0.271],[0.155,-0.13],[0.23,0.108],[0.636,0.657],[0.376,0.295],[0.107,0.057],[0.372,-0.352],[0.455,-0.434],[0.191,-0.114],[0.226,0.236],[0.101,0.06],[0.102,-0.079],[0.358,-0.365],[0.256,0.077],[0.435,0.417],[0.165,0.08],[0.498,0.482],[0.284,0.233],[0.121,-0.093],[0.296,-0.278],[0.327,-0.286],[0.333,-0.334],[0.132,0.121],[0.096,-0.008],[0.147,-0.124],[0.204,-0.208],[0.109,-0.066],[0.097,0.092],[0.072,0.018],[0.089,0.011],[0.299,0.27],[0.223,0.194],[0.103,0.099],[0.262,-0.221],[0.327,-0.3],[0.208,-0.178],[0.363,0.137],[0.818,0.844],[0.146,-0.067],[0.171,0.222],[0.49,-0.498],[0.286,-0.155],[0.069,0.066],[0.313,0.295],[0.365,0.33],[0.175,-0.035],[0.455,-0.463],[0.241,-0.174],[0.245,-0.277],[0.399,0.399],[0.235,0.046],[0.189,-0.159],[0.26,-0.23],[0.288,-0.275],[0.093,0.08],[0.047,0.005],[0.224,0.216],[0.191,0.148],[0.11,-0.079],[0.207,-0.126],[0.628,0.699],[0.23,-0.267],[0.262,0.317],[0.365,-0.387],[0.189,0.124],[0.148,-0.122],[0.082,0.033],[0.159,-0.118],[0.297,-0.307],[0.227,0.1],[0.33,0.318],[0.385,0.329],[0.303,0.067],[0.342,-0.324],[0.4,-0.362],[0.247,-0.052],[0.174,0.139],[0.082,-0.076],[0.161,-0.131],[0.291,-0.281],[0.179,-0.144],[0.089,-0.095],[0.137,0.006],[1,0.968],[0.615,0.39],[0.26,0.301],[0.517,-0.473],[0.37,-0.193],[0.085,0.045],[0.092,0.08],[0.101,0.036],[0.413,-0.424],[0.158,-0.019],[0.209,-0.255],[0.2,0.243],[0.119,-0.163],[0.297,0.31],[0.216,0.17],[0.162,0.154],[0.3,-0.204],[0.41,-0.366],[0.109,-0.085],[0.105,0.044],[0.112,0.086],[0.136,-0.135],[0.236,-0.201],[0.406,-0.43],[0.724,0.851],[0.177,-0.055],[0.424,0.424],[0.206,-0.255],[0.303,0.318],[0.211,-0.072],[0.149,-0.068],[0.469,-0.479],[0.248,0.025]]; diff --git a/renderer/patterns.js b/renderer/patterns.js index 611ca309..dbe47347 100644 --- a/renderer/patterns.js +++ b/renderer/patterns.js @@ -1,15 +1,17 @@ var d3 = require("d3"); module.exports = { - wave: curve(d3.curveCardinal.tension(0.1)), - pixel: curve(d3.curveStep), + wave: filledPath(d3.curveCardinal.tension(0.1)), + pixel: filledPath(d3.curveStep), roundBars: bars(true), bars: bars(), bricks: bricks(), - equalizer: bricks(true) + equalizer: bricks(true), + line: strokedPath(), + curve: strokedPath(d3.curveCardinal.tension(0.1)) }; -function curve(interpolator) { +function filledPath(interpolator) { return function drawCurve(context, data, options) { @@ -18,9 +20,12 @@ function curve(interpolator) { context.lineWidth = 3; var line = d3.line() - .curve(interpolator) .context(context); + if (interpolator) { + line.curve(interpolator); + } + var waveHeight = options.waveBottom - options.waveTop; var baseline = options.waveTop + waveHeight / 2; @@ -110,7 +115,7 @@ function bars(round) { } function bricks(rainbow) { - return function (context, data, options) { + return function(context, data, options) { context.fillStyle = options.waveColor; @@ -147,3 +152,38 @@ function bricks(rainbow) { }; } + +function strokedPath(interpolator) { + return function(context, data, options) { + + context.fillStyle = options.waveColor; + context.strokeStyle = options.waveColor; + context.lineWidth = 3; + + var line = d3.line() + .context(context); + + if (interpolator) { + line.curve(interpolator); + } + + var x = d3.scalePoint() + .padding(0.1) + .domain(d3.range(data.length)) + .range([options.waveLeft, options.waveRight]); + + var y = d3.scaleLinear() + .domain([-1, 1]) + .range([options.waveBottom, options.waveTop]); + + var points = data.map(function(d, i){ + return [x(i), y(d[1])]; + }); + + // Fill waveform + context.beginPath(); + line(points); + context.stroke(); + + } +}