waveLeft/waveRight

THEMES.md

@@ -63,8 +63,12 @@ You can set both a `backgroundColor` and a `backgroundImage`, in which case the
 * `pattern` - What waveform shape to draw. Current options are `wave`, `bars`, `roundBars`, `pixel`, `bricks`, and `equalizer` (default: `wave`)
 * `waveTop` - How many pixels from the top edge to start the waveform (default: `0`)
 * `waveBottom` - How many pixels from the top edge to end the waveform (default: same as `height`)
+* `waveLeft` - How many pixels from the left edge to start the waveform (default: `0`)
+* `waveRight` - How many pixels from the right edge to start the waveform (default: same as `width`)
 * `waveColor` - A CSS color, what color the wave should be. The default is black.
 
+Note that if you change `waveLeft` or `waveRight` to something other than full-width, you'll probably want to tweak `samplesPerFrame` too or else things will get pretty squished.
+
 ### Additional options
 
 * `name` - What name to show in the dropdown menu in the editor (the default is the key)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiogram",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "Turn audio into a shareable video.",
   "main": "index.js",
   "scripts": {

renderer/index.js

@@ -12,15 +12,17 @@ module.exports = function(context) {
   renderer.context = context;
 
   renderer.update = function(options) {
+
+    // TODO cleaner defaults
     options.backgroundColor = options.backgroundColor || "#fff";
     options.waveColor = options.waveColor || options.foregroundColor || "#000";
     options.captionColor = options.captionColor || options.foregroundColor || "#000";
-    if (typeof options.waveTop !== "number") {
-      options.waveTop = 0;
-    }
-    if (typeof options.waveBottom !== "number") {
-      options.waveBottom = options.height;
-    }
+
+    if (typeof options.waveTop !== "number") options.waveTop = 0;
+    if (typeof options.waveBottom !== "number") options.waveBottom = options.height;
+    if (typeof options.waveLeft !== "number") options.waveLeft = 0;
+    if (typeof options.waveRight !== "number") options.waveRight = options.width;
+
     this.wrapText = textWrapper(context, options);
     this.options = options;
     this.waveform = options.waveform || [sample.slice(0, options.samplesPerFrame)];

renderer/patterns.js

@@ -1,7 +1,7 @@
 var d3 = require("d3");
 
 module.exports = {
-  wave: curve(d3.curveCardinal.tension(0)),
+  wave: curve(d3.curveCardinal.tension(0.1)),
   pixel: curve(d3.curveStep),
   roundBars: bars(true),
   bars: bars(),
@@ -28,7 +28,7 @@ function curve(interpolator) {
     var x = d3.scalePoint()
       .padding(0.1)
       .domain(d3.range(data.length))
-      .rangeRound([0, options.width]);
+      .rangeRound([options.waveLeft, options.waveRight]);
 
     var height = d3.scaleLinear()
       .domain([0, 1])
@@ -46,8 +46,8 @@ function curve(interpolator) {
 
     }).reverse();
 
-    top.unshift([0, baseline]);
-    top.push([options.width, baseline]);
+    top.unshift([options.waveLeft, baseline]);
+    top.push([options.waveRight, baseline]);
 
     // Fill waveform
     context.beginPath();
@@ -80,7 +80,7 @@ function bars(round) {
       .paddingInner(0.5)
       .paddingOuter(0.01)
       .domain(d3.range(data.length))
-      .rangeRound([0, options.width]);
+      .rangeRound([options.waveLeft, options.waveRight]);
 
     var height = d3.scaleLinear()
       .domain([0, 1])
@@ -119,7 +119,7 @@ function bricks(rainbow) {
       .paddingInner(0.1)
       .paddingOuter(0.01)
       .domain(d3.range(data.length))
-      .rangeRound([0, options.width]);
+      .rangeRound([options.waveLeft, options.waveRight]);
 
     var height = d3.scaleLinear()
       .domain([0, 1])