Skip to content
This repository has been archived by the owner on Feb 17, 2021. It is now read-only.

Commit

Permalink
Working line/curve
Browse files Browse the repository at this point in the history
  • Loading branch information
veltman committed Sep 19, 2016
1 parent ebc5963 commit 53db33f
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 7 deletions.
2 changes: 1 addition & 1 deletion client/sample-wave.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

52 changes: 46 additions & 6 deletions renderer/patterns.js
Original file line number Diff line number Diff line change
@@ -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) {

Expand All @@ -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;
Expand Down Expand Up @@ -110,7 +115,7 @@ function bars(round) {
}

function bricks(rainbow) {
return function (context, data, options) {
return function(context, data, options) {

context.fillStyle = options.waveColor;

Expand Down Expand Up @@ -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();

}
}

0 comments on commit 53db33f

Please sign in to comment.