Bladeren bron

waveLeft/waveRight

Noah 8 jaren geleden
bovenliggende
commit
b0b95531cc
4 gewijzigde bestanden met toevoegingen van 19 en 13 verwijderingen
  1. 4 0
      THEMES.md
  2. 1 1
      package.json
  3. 8 6
      renderer/index.js
  4. 6 6
      renderer/patterns.js

+ 4 - 0
THEMES.md Bestand weergeven

@@ -63,8 +63,12 @@ You can set both a `backgroundColor` and a `backgroundImage`, in which case the
63 63
 * `pattern` - What waveform shape to draw. Current options are `wave`, `bars`, `roundBars`, `pixel`, `bricks`, and `equalizer` (default: `wave`)
64 64
 * `waveTop` - How many pixels from the top edge to start the waveform (default: `0`)
65 65
 * `waveBottom` - How many pixels from the top edge to end the waveform (default: same as `height`)
66
+* `waveLeft` - How many pixels from the left edge to start the waveform (default: `0`)
67
+* `waveRight` - How many pixels from the right edge to start the waveform (default: same as `width`)
66 68
 * `waveColor` - A CSS color, what color the wave should be. The default is black.
67 69
 
70
+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.
71
+
68 72
 ### Additional options
69 73
 
70 74
 * `name` - What name to show in the dropdown menu in the editor (the default is the key)

+ 1 - 1
package.json Bestand weergeven

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

+ 8 - 6
renderer/index.js Bestand weergeven

@@ -12,15 +12,17 @@ module.exports = function(context) {
12 12
   renderer.context = context;
13 13
 
14 14
   renderer.update = function(options) {
15
+
16
+    // TODO cleaner defaults
15 17
     options.backgroundColor = options.backgroundColor || "#fff";
16 18
     options.waveColor = options.waveColor || options.foregroundColor || "#000";
17 19
     options.captionColor = options.captionColor || options.foregroundColor || "#000";
18
-    if (typeof options.waveTop !== "number") {
19
-      options.waveTop = 0;
20
-    }
21
-    if (typeof options.waveBottom !== "number") {
22
-      options.waveBottom = options.height;
23
-    }
20
+
21
+    if (typeof options.waveTop !== "number") options.waveTop = 0;
22
+    if (typeof options.waveBottom !== "number") options.waveBottom = options.height;
23
+    if (typeof options.waveLeft !== "number") options.waveLeft = 0;
24
+    if (typeof options.waveRight !== "number") options.waveRight = options.width;
25
+
24 26
     this.wrapText = textWrapper(context, options);
25 27
     this.options = options;
26 28
     this.waveform = options.waveform || [sample.slice(0, options.samplesPerFrame)];

+ 6 - 6
renderer/patterns.js Bestand weergeven

@@ -1,7 +1,7 @@
1 1
 var d3 = require("d3");
2 2
 
3 3
 module.exports = {
4
-  wave: curve(d3.curveCardinal.tension(0)),
4
+  wave: curve(d3.curveCardinal.tension(0.1)),
5 5
   pixel: curve(d3.curveStep),
6 6
   roundBars: bars(true),
7 7
   bars: bars(),
@@ -28,7 +28,7 @@ function curve(interpolator) {
28 28
     var x = d3.scalePoint()
29 29
       .padding(0.1)
30 30
       .domain(d3.range(data.length))
31
-      .rangeRound([0, options.width]);
31
+      .rangeRound([options.waveLeft, options.waveRight]);
32 32
 
33 33
     var height = d3.scaleLinear()
34 34
       .domain([0, 1])
@@ -46,8 +46,8 @@ function curve(interpolator) {
46 46
 
47 47
     }).reverse();
48 48
 
49
-    top.unshift([0, baseline]);
50
-    top.push([options.width, baseline]);
49
+    top.unshift([options.waveLeft, baseline]);
50
+    top.push([options.waveRight, baseline]);
51 51
 
52 52
     // Fill waveform
53 53
     context.beginPath();
@@ -80,7 +80,7 @@ function bars(round) {
80 80
       .paddingInner(0.5)
81 81
       .paddingOuter(0.01)
82 82
       .domain(d3.range(data.length))
83
-      .rangeRound([0, options.width]);
83
+      .rangeRound([options.waveLeft, options.waveRight]);
84 84
 
85 85
     var height = d3.scaleLinear()
86 86
       .domain([0, 1])
@@ -119,7 +119,7 @@ function bricks(rainbow) {
119 119
       .paddingInner(0.1)
120 120
       .paddingOuter(0.01)
121 121
       .domain(d3.range(data.length))
122
-      .rangeRound([0, options.width]);
122
+      .rangeRound([options.waveLeft, options.waveRight]);
123 123
 
124 124
     var height = d3.scaleLinear()
125 125
       .domain([0, 1])