Merge pull request #9 from vivek-30/gradient-brush

feat: Add Rainbow Brush

Author: harshkhandeparkar

README.md

@@ -229,7 +229,7 @@ See [example](https://harshkhandeparkar.github.io/gpujs-real-renderer).
 - `brushColor` (*array*): The color of the brush in the corm `[red, green, blue]` where each of
 `red`, `green` and `blue` are between 0 and 1.
 - `eraserSize` (*number*): Size of the eraser.
-- `tool` ('brush' | 'eraser' | 'line'): The current tool used on the board. This tool can be set in the options or using the `changeTool` method.
+- `tool` ('brush' | 'rainbow_brush' | 'eraser' | 'line'): The current tool used on the board. This tool can be set in the options or using the `changeTool` method.
 
 ##### Options
 Since this is a child class of `RealRenderer`, all the options of `RealRender` are applicable here as well.
@@ -245,7 +245,7 @@ Apart from those, the following are additional options that can be passed on to
 
 - `maxUndos`(*Number*) (Default: `15`): Determines the maximum possible undos. (Use a smaller number on devices with less RAM)
 
-- `tool` (*'brush' | 'draw' | 'line'*) (Default: `'brush'`): Determines which tool to use.
+- `tool` (*'brush' | 'rainbow_brush' | 'eraser' | 'line'*) (Default: `'brush'`): Determines which tool to use.
 
 ##### Methods
 Since this is a child class of `RealRenderer`, all the methods of `RealRender` are available here as well.

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="rainbow_brush">Rainbow Brush</option>
             <option value="eraser">Eraser</option>
             <option value="line">Line</option>
           </select>

src/renderers/RealDrawBoard/tools/rainbow_brush.ts

@@ -0,0 +1,53 @@
+import { RealDrawBoard } from '../RealDrawBoard';
+import { Texture } from 'gpu.js';
+import { convertHSLToRGB } from '../../../util/convertHSLToRGB';
+
+let hue: number = 0;
+let gradientColors: [number, number, number] = [1, 1, 1]; 
+
+export const name = 'rainbow_brush';
+
+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._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 rainbow_brush from './rainbow_brush';
 
 export const tools = {
   brush,
+  rainbow_brush,
   eraser,
   line
 }
 
-export type Tool = 'brush' | 'eraser' | 'line';
+export type Tool = 'brush' | 'rainbow_brush' | 'eraser' | 'line';

src/util/convertForm.ts

@@ -13,11 +13,11 @@ 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)
   ]
-}
+}

src/util/convertHSLToRGB.ts

@@ -0,0 +1,44 @@
+/**
+ * Convert hsl Color into RGB color.
+ * @param h color value ranges from 0 to 360.
+ * @param s saturation value.
+ * @param l brightness level.
+ * @return array containing r g and b value
+ */
+export function convertHSLToRGB(h: number, s: number, l: number): [number, number, number] {
+
+  s /= 100;
+  l /= 100;
+  
+  let c: number = (1 - Math.abs(2 * l - 1)) * s;
+  let x: number = c * (1 - Math.abs((h / 60) % 2 - 1));
+  let m: number = l - c/2;
+  let r: number = 0;
+  let g: number = 0;
+  let 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 = (r + m);
+  g = (g + m);
+  b = (b + m);
+ 
+  return [r, g, b];
+}