complete RealLineGraph

Author: Mr. X

src/renderers/RealLineGraph.js

@@ -11,31 +11,54 @@ class RealLineGraph extends RealRenderer {
     this.progressiveAxis = this.progressiveAxis.toLowerCase();
     this.progressionMode = options.progressionMode || 'overflow'; // overflow -> Only progresses when completely filled; continous -> Always progresses;
     this.progressInterval = options.progressInterval || 1; // Progress once every interval time units; Only works with continous progressionMode
+
     this.brushSize = options.brushSize || 2; // 1 unit radius
     this.brushColor = options.brushColor || [1, 1, 1];
+
+    this.lineThickness = options.lineThickness || 0.05;
+    this.lineColor = options.lineColor || [0, 0.5, 0];
     // *****DEFAULTS*****
 
     this._progressGraph = getProgressGraphKernel(this.gpu, this.dimensions, this.progressiveAxis, this.xOffset, this.yOffset, this.axesColor, this.bgColor);
     this._lastProgress = 0; // Time when the graph last progressed. Internal variable
+    this._numProgress = 0; // Number of times the graph has progressed
 
-    this._dataIndex = 0; // Number of plots
+    this._dataIndex = 1; // Number of plots
     this._lastData = 0; // (Value) To display lines
 
-    this._addData = getAddDataKernel(this.gpu, this.dimensions, this.brushSize, this.brushColor, this.xScaleFactor, this.yScaleFactor, this.xOffset, this.yOffset);
+    this._addData = getAddDataKernel(this.gpu, this.dimensions, this.brushSize, this.brushColor, this.xScaleFactor, this.yScaleFactor, this.xOffset, this.yOffset, this.lineThickness, this.lineColor);
+
+    this.limits = { // Final ranges of x and y
+      x: [
+        0 - (this.yOffset / 100) * (this.dimensions[0] / this.xScaleFactor), // lower limit
+        this.dimensions[0] / this.xScaleFactor - (this.yOffset / 100) * (this.dimensions[0] / this.xScaleFactor) // upper limit
+      ],
+      y: [
+        0 - (this.xOffset / 100) * (this.dimensions[1] / this.yScaleFactor),
+        this.dimensions[1] / this.yScaleFactor - (this.xOffset / 100) * (this.dimensions[1] / this.yScaleFactor)
+      ]
+    }
   }
 
   addData(value) {
-    this.graphPixels = this._addData(this._cloneTexture(this.graphPixels), value, this._dataIndex++, this._lastData);
-    this._display(this.graphPixels);
-
+    this.graphPixels = this._addData(this._cloneTexture(this.graphPixels), value, this._dataIndex++, this._lastData, this._numProgress);
     this._lastData = value;
+    
+    // Overflow
+    if (this._dataIndex >= this.limits.x[1] && this.progressionMode != 'continous') {
+      this.graphPixels = this._progressGraph(this._cloneTexture(this.graphPixels), Math.ceil(this.xScaleFactor))
+      this._numProgress += Math.ceil(this.xScaleFactor);
+    }
+    
+    this._display(this.graphPixels);
     return this;
   }
 
   _drawFunc(graphPixels, time) {
     if (this.progressionMode == 'continous' && (time - this._lastProgress >= this.progressInterval)) {
       this._lastProgress = time;
-      return this._progressGraph(this._cloneTexture(graphPixels));
+      this._numProgress++;
+      return this._progressGraph(this._cloneTexture(graphPixels), 1);
     }
     else return graphPixels;
   }

src/renderers/RealRenderer.js

@@ -7,7 +7,7 @@ class RealRenderer {
     // *****DEFAULTS*****
     this.canvasTag = options.canvasTag;
     this.dimensions = options.dimensions || {x: 1000, y:1000};
-    this.xScaleFactor = options.xScaleFactor || 1;
+    this.xScaleFactor = options.xScaleFactor || 10;
     this.yScaleFactor = options.yScaleFactor || 1;
     this.bgColor = options.bgColor || [0, 0, 0];
     this.axesColor = options.axesColor || [1, 1, 1];
@@ -34,7 +34,8 @@ class RealRenderer {
 
     this.gpu = new options.GPU({
       canvas: this.canvas,
-      mode: 'gpu'
+      mode: 'gpu',
+      tactic: 'precision'
     })
 
     this._blankGraph = getBlankGraphKernel(this.gpu, this.dimensions, this.xOffset, this.yOffset, this.bgColor, this.axesColor);