Make corners smooth & correct bg color

cyyyu · Oct 31, 2019 · 3e3b739 · 3e3b739
1 parent d53ffe3
commit 3e3b739
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 15 deletions.
diff --git a/Line.ts b/Line.ts
@@ -1,4  1,4 @@
-import { getProperBounds, LTTB, createLinearScale } from "./util";
 import { getProperBounds, LTTB, createLinearScale, makeSmooth } from "./util";
 import { Data, RawData, Color } from "./types";
 import { vec2, vec3, mat4 } from "gl-matrix";
 import Shader from "./Shader";
@@ -19,9  19,9 @@ const LINE_COLOR: Color = {
   b: 78
 };
 const BG_COLOR: Color = {
-  r: 248,
-  g: 248,
-  b: 248
   r: 250,
   g: 250,
   b: 250
 };
 
 const DefaultOptions: Partial<Options> = {
@@ -119,7  119,7 @@ export default class Line {
   ): Data[] {
     const isOneDemensionData = typeof rawData[0] === "number";
 
-    const result: Data[] = [];
     let result: Data[] = [];
 
     if (isOneDemensionData)
       rawData.forEach((item, index) =>
@@ -128,13  128,17 @@ export default class Line {
     else rawData.forEach(item => result.push({ x: item[0], y: item[1] }));
 
     if (typeof downsample == "number" || downsample)
-      return LTTB(
       result = LTTB(
         result,
         typeof downsample === "number"
           ? downsample
           : this.calThreshold(result, width)
       );
-    else return result;
 
     // make corners smooth
     result = makeSmooth(result);
 
     return result;
   }
 
   private createShaders() {
@@ -150,8  154,8 @@ export default class Line {
     `;
     const lineFShaderSrc = `
       precision highp float;
-      vec3 lineColor = vec3(${color!.r / 255.0}, ${color!.g / 255.0}, ${color!
-      .b / 255.0});
       vec3 lineColor = vec3(${color!.r / 250.0}, ${color!.g / 250.0}, ${color!
       .b / 250.0});
       void main() {
         gl_FragColor = vec4(lineColor, 1.0);
       }
@@ -169,11  173,11 @@ export default class Line {
     const overlayFShaderSrc = `
       precision mediump float;
       uniform vec2 resolution;
-      vec3 bg = vec3(${backgroundColor!.r / 255.0}, ${backgroundColor!.g /
-      255.0}, ${backgroundColor!.b / 255.0});
       vec3 bg = vec3(${backgroundColor!.r / 250.0}, ${backgroundColor!.g /
       250.0}, ${backgroundColor!.b / 250.0});
       void main() {
         vec2 st = gl_FragCoord.xy / resolution;
-        float c = smoothstep(1.6, 0.0, st.y);
         float c = smoothstep(1.2, 0.0, st.y);
         gl_FragColor = vec4(c * bg, 1.0);
       }
     `;
@@ -486,9  490,9 @@ export default class Line {
     const { backgroundColor } = this.options;
 
     gl.clearColor(
-      backgroundColor.r / 255.0,
-      backgroundColor.g / 255.0,
-      backgroundColor.b / 255.0,
       backgroundColor.r / 250.0,
       backgroundColor.g / 250.0,
       backgroundColor.b / 250.0,
       1
     );
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

diff --git a/util.ts b/util.ts
@@ -53,6  53,62 @@ function min(data: Data[]): number {
   return min;
 }
 
 // make corners smooth
 export function makeSmooth(data: Data[]): Data[] {
   let res: Data[] = [];
   res.push(data[0]);
   for (let i = 1; i < data.length - 1; i  ) {
     const prePoint = data[i - 1];
     const curPoint = data[i];
     const nextPoint = data[i   1];
 
     const p1: Data = {
       x: (9 * curPoint.x   prePoint.x) / 10,
       y: (9 * curPoint.y   prePoint.y) / 10
     };
     const p2: Data = {
       x: (9 * curPoint.x   nextPoint.x) / 10,
       y: (9 * curPoint.y   nextPoint.y) / 10
     };
     res.push(...getPoints(5, p1, curPoint, p2));
   }
   res.push(data[data.length - 1]);
   return res;
 }
 
 function getPoints(divisions: number = 5, p0: Data, p1: Data, p2: Data) {
   const points: Data[] = [];
   for (let i = 0; i < divisions; i  ) {
     const t = i / divisions;
     points.push({
       x: QuadraticBezier(t, p0.x, p1.x, p2.x),
       y: QuadraticBezier(t, p0.y, p1.y, p2.y)
     });
   }
   return points;
 }
 
 function QuadraticBezier(t: number, p0: number, p1: number, p2: number) {
   return (
     QuadraticBezierP0(t, p0)  
     QuadraticBezierP1(t, p1)  
     QuadraticBezierP2(t, p2)
   );
 }
 
 function QuadraticBezierP0(t: number, p: number) {
   const k = 1 - t;
   return k * k * p;
 }
 
 function QuadraticBezierP1(t: number, p: number) {
   return 2 * (1 - t) * t * p;
 }
 
 function QuadraticBezierP2(t: number, p: number) {
   return t * t * p;
 }
 
 // Largest triangles three buckets data dowmsampling algorithm
 // Based on Sveinn Steinarsson's 2013 paper: https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf
 export function LTTB(data: Data[], threshold: number): Data[] {