adding gradient brush

Author: vivek-30

example/index.html

@@ -48,6 +48,7 @@ <h3># Drawing Board</h3>
           <label for="draw-tool">Tool: </label>
           <select name="draw-tool" id="draw-tool" value="brush">
             <option value="brush">Brush</option>
+            <option value="gradientBrush">Gradient Brush</option>
             <option value="eraser">Eraser</option>
             <option value="line">Line</option>
           </select>

src/renderers/RealDrawBoard/RealDrawBoard.ts

@@ -39,7 +39,7 @@ export class RealDrawBoard extends RealRenderer {
   eraserSize: number;
   tool: Tool = RealDrawBoardDefaults.tool;
   _isDrawing: boolean = false;
-  _: boolean = false; // If a tool is drawing a strwoke
+  _: boolean = false; // If a tool is drawing a stroke
   _snapshots: (number[][][])[] = []; // Undo snapshots
   _currentSnapshotIndex = 0; // Current snapshot
   _maxSnapshots: number;

src/renderers/RealDrawBoard/tools/gradientBrush.ts

@@ -0,0 +1,55 @@
+import { RealDrawBoard } from '../RealDrawBoard';
+import { Texture } from 'gpu.js';
+import { convertHSLToRGB } from '../../../util/convertForm';
+import { type } from 'os';
+
+var hue: number = 0;
+var gradientColors: [number ,number ,number] = [ 1 ,1 ,1 ]; 
+
+export const name = 'gradientBrush';
+
+export function _startStroke(
+  this: RealDrawBoard,
+  coords: [number, number],
+  identifier: string
+) {
+  gradientColors = convertHSLToRGB(hue,90,40);
+  this._doPreview = false;
+  this._plot(coords[0], coords[1], this.brushSize, gradientColors);
+}
+
+export function _endStroke(
+  this: RealDrawBoard,
+  endCoords: [number, number],
+  identifier: string
+) {
+  gradientColors = convertHSLToRGB(hue,90,40);
+  this._plot(endCoords[0], endCoords[1], this.brushSize, gradientColors);
+  this._doPreview = true;
+}
+
+export function _doStroke(
+  this: RealDrawBoard,
+  coords: [number, number],
+  identifier: string
+) {
+  hue = (hue+1)%360;
+  gradientColors = convertHSLToRGB(hue,90,40);
+  // this.changeBrushColor(gradientColors);
+  this._plot(coords[0], coords[1], this.brushSize, gradientColors);
+  this._stroke(coords[0], coords[1], this.brushSize, gradientColors, identifier);
+}
+
+export function _toolPreview(
+  this: RealDrawBoard,
+  coords: [number, number],
+  identifier: string
+): Texture {
+  return <Texture>this._previewPlot(
+    this.graphPixels,
+    coords[0],
+    coords[1],
+    this.brushSize,
+    gradientColors
+  )
+}

src/renderers/RealDrawBoard/tools/tools.ts

@@ -1,11 +1,13 @@
 import * as brush from './brush';
 import * as eraser from './eraser';
 import * as line from './line';
+import * as gradientBrush from './gradientBrush';
 
 export const tools = {
   brush,
+  gradientBrush,
   eraser,
   line
 }
 
-export type Tool = 'brush' | 'eraser' | 'line';
+export type Tool = 'brush' | 'gradientBrush' | 'eraser' | 'line';

src/util/convertForm.ts

@@ -13,11 +13,51 @@ export function convertPolarCartesian(r: number, theta: number) {
 /**
  * Convert Cartesian to polar form.
  * @param x Real Part
- * @param theta Complex Part
+ * @param y Complex Part
  */
 export function convertCartesianPolar(x: number, y: number) {
   return [
     Math.sqrt(x*x + y*y),
     Math.atan2(y, x)
   ]
+}
+
+/**
+ * Convert hsl Color into RGB color.
+ * @param h color value ranges from 0 to 360.
+ * @param s saturation value.
+ * @param l brightness level.
+ * @returns array containing r g and b value
+ */
+export function convertHSLToRGB(h: number, s: number, l: number) :[ number ,number ,number ] {
+
+    s /= 100;
+    l /= 100;
+  
+    var c: number = (1 - Math.abs(2 * l - 1)) * s;
+    var x: number = c * (1 - Math.abs((h / 60) % 2 - 1));
+    var m: number = l - c/2;
+    var r: number = 0;
+    var g: number = 0;
+    var b: number = 0;
+
+    if (0 <= h && h < 60) {
+        r = c; g = x; b = 0;  
+    } else if (60 <= h && h < 120) {
+        r = x; g = c; b = 0;
+    } else if (120 <= h && h < 180) {
+        r = 0; g = c; b = x;
+    } else if (180 <= h && h < 240) {
+        r = 0; g = x; b = c;
+    } else if (240 <= h && h < 300) {
+        r = x; g = 0; b = c;
+    } else if (300 <= h && h < 360) {
+        r = c; g = 0; b = x;
+    }
+    
+    r = Math.round((r + m) * 255);
+    g = Math.round((g + m) * 255);
+    b = Math.round((b + m) * 255);
+
+    return [ r ,g ,b ];
 }