#33 Complete Color class unit tests

.eslintrc

@@ -29,6 +29,8 @@
     "no-empty-function": "off",
     "@typescript-eslint/no-empty-function": "error",
 
+    "@typescript-eslint/no-extraneous-class": ["error", { "allowStaticOnly": true }],
+
     "no-extra-semi": "off",
     "@typescript-eslint/no-extra-semi": "error",
 

examples/color/color-grid.ts

@@ -22,11 +22,11 @@ sketch.draw = (): void => {
     sketch.background(0, 255, 255);
     sketch.rectMode(sketch.CENTER);
 
-    const colorA: Color = new Color(sketch, sketch.color(255));
+    const colorA: Color = new Color(sketch.color(255));
     sketch.fill(colorA.color);
     sketch.rect(0, 0, 250, 250);
 
-    const colorB: Color = new Color(sketch);
+    const colorB: Color = new Color();
     sketch.fill(colorB.color);
     sketch.rect(0, 0, 75, 75);
 }

rollup.config.mjs

@@ -44,7 +44,10 @@ export default {
             extensions: ['.ts']
         }),
         eslint({
-            include: ['./src/**/*.ts'],
+            include: [
+                './src/**/*.ts',
+                './examples/**/*.ts'
+            ],
             throwOnError: true,
             throwOnWarning: true
         }),

src/common/color/color.ts

@@ -15,18 +15,20 @@
  * See the GNU Affero General Public License for more details.
  */
 
-import { P5Dependant, P5Lib } from "p5-lib";
+import { P5Lib } from "p5-lib";
+import { SketchContext } from "p5-lib";
 
 type P5Color = P5Lib.Color;
 
-class Color extends P5Dependant {
-    private _red: number;
-    private _green: number;
-    private _blue: number;
-    private _alpha: number;
+const p5: P5Lib = SketchContext.p5;
 
-    public constructor(p5: P5Lib, color?: P5Color) {
-        super(p5);
+class Color {
+    private _red: number; // 0-255
+    private _green: number; // 0-255
+    private _blue: number; // 0-255
+    private _alpha: number; // 0-255
+
+    public constructor(color?: P5Color) {
         this._red = 0;
         this._green = 0;
         this._blue = 0;
@@ -37,8 +39,41 @@ class Color extends P5Dependant {
         }
     }
 
+    /**
+     * @param h some number between 0 and 360.
+     * @param s some number between 0 and 100.
+     * @param l some number between 0 and 100.
+     * @param a (optional) some number between 0 and 1.
+     */
+    public static getHSLColor(h: number, s: number, l: number, a?: number): P5Color {
+        let color: P5Color;
+        h = Math.floor(p5.constrain(h, 0, 360));
+        s = Math.floor(p5.constrain(s, 0, 100));
+        l = Math.floor(p5.constrain(l, 0, 100));
+
+        if (a) {
+            a = p5.constrain(a, 0, 1);
+            color = p5.color(`hsla(${h}, ${s}%, ${l}%, ${a})`);
+        } else {
+            color = p5.color(`hsl(${h}, ${s}%, ${l}%)`);
+        }
+
+        return color;
+    }
+
+    /**
+     * @param h some number between 0 and 360.
+     * @param s some number between 0 and 100.
+     * @param l some number between 0 and 100.
+     * @param a some number between 0 and 1.
+     */
+    public static getHSLAColor(h: number, s: number, l: number, a: number): P5Color {
+        return Color.getHSLColor(h, s, l, a);
+    }
+
     public get color(): P5Color {
-        return this.p5.color(this.red, this.green, this.blue, this.alpha);
+        p5.colorMode(p5.RGB);
+        return p5.color(this.red, this.green, this.blue, this.alpha);
     }
 
     public set color(c: P5Color) {
@@ -50,38 +85,38 @@ class Color extends P5Dependant {
     }
 
     public set red(r: number) {
-        this._red = Math.floor(this.p5.constrain(r, 0, 255));
+        this._red = Math.floor(p5.constrain(r, 0, 255));
     }
 
     public get green(): number {
         return this._green;
     }
 
     public set green(g: number) {
-        this._green = Math.floor(this.p5.constrain(g, 0, 255));
+        this._green = Math.floor(p5.constrain(g, 0, 255));
     }
 
     public get blue(): number {
         return this._blue;
     }
 
     public set blue(b: number) {
-        this._blue = Math.floor(this.p5.constrain(b, 0, 255));
+        this._blue = Math.floor(p5.constrain(b, 0, 255));
     }
 
     public get alpha(): number {
         return this._alpha;
     }
 
     public set alpha(a: number) {
-        this._alpha = Math.floor(this.p5.constrain(a, 0, 255));
+        this._alpha = Math.floor(p5.constrain(a, 0, 255));
     }
 
     private setColorValues(color: P5Color): void {
-        this.red = this.p5.red(color);
-        this.green = this.p5.green(color);
-        this.blue = this.p5.blue(color);
-        this.alpha = this.p5.alpha(color);
+        this.red = p5.red(color);
+        this.green = p5.green(color);
+        this.blue = p5.blue(color);
+        this.alpha = p5.alpha(color);
     }
 }
 

src/common/color/factory/rgb/black-color-factory.ts

@@ -29,7 +29,7 @@ class BlackColorFactory extends RGBRangeFactory {
     public override getRandomColor(): Color {
         this.p5.colorMode(this.p5.RGB, 255);
         const gray: number = randomInt(0, 100);
-        return new Color(this.p5, this.p5.color(gray));
+        return new Color(this.p5.color(gray));
     }
 }
 

src/common/color/factory/rgb/rgb-range-factory.ts

@@ -44,13 +44,13 @@ abstract class RGBRangeFactory extends P5Dependant implements RandomColorFactory
 
     public getRandomColor(): Color {
         this.p5.colorMode(this.p5.RGB, 255);
-        let color: Color = new Color(this.p5);
+        let color: Color = new Color();
 
         if (this.redRange && this.greenRange && this.blueRange) {
             const r: number = randomInt(this.redRange.low, this.redRange.high);
             const g: number = randomInt(this.greenRange.low, this.greenRange.high);
             const b: number = randomInt(this.blueRange.low, this.blueRange.high);
-            color = new Color(this.p5, this.p5.color(r, g, b));
+            color = new Color(this.p5.color(r, g, b));
         }
 
         return color;

src/common/p5/index.ts

@@ -15,7 +15,8 @@
  * See the GNU Affero General Public License for more details.
  */
 
-import P5Lib from "p5";
+import P5Lib from 'p5';
 
 export { P5Lib };
-export * from "./p5-dependant";
+export * from './p5-dependant';
+export * from './sketch-context';

src/common/p5/p5-dependant.ts

@@ -17,6 +17,9 @@
 
 import P5Lib from "p5";
 
+/**
+ * @deprecated
+ */
 abstract class P5Dependant {
     protected constructor(private readonly _p5: P5Lib) {
     }

src/common/p5/sketch-context.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2023 Brittni Watkins.
+ *
+ * This file is a part of brittni and the polar bear's Generative Art Project Template,
+ * which is released under the GNU Affero General Public License, Version 3.0.
+ * You may not use this file except in compliance with the license.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. See LICENSE or go to
+ * https://www.gnu.org/licenses/agpl-3.0.en.html for full license details.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * See the GNU Affero General Public License for more details.
+ */
+
+import P5Lib from "p5";
+
+const noP5: P5Lib = new P5Lib((p: P5Lib): void => {
+    p.setup = (): void => {
+        p.createCanvas(0, 0);
+    }
+});
+
+class SketchContext {
+    private static _p5?: P5Lib;
+
+    public static initialize(p5: P5Lib): void {
+        if (!this._p5) {
+            this._p5 = p5;
+        }
+    }
+
+    public static get p5(): P5Lib {
+        return this._p5 ?? noP5;
+    }
+}
+
+export { SketchContext };
+export default SketchContext;

src/sketch.ts

@@ -15,24 +15,25 @@
  * See the GNU Affero General Public License for more details.
  */
 
-import { P5Lib, Color } from "common";
+import {P5Lib, Color, SketchContext} from "common";
 
 import '../assets/styles/sketch.css';
 
 function sketch(p5: P5Lib): void {
     p5.setup = (): void => {
         p5.createCanvas(p5.windowWidth, p5.windowHeight, p5.WEBGL);
+        SketchContext.initialize(p5);
     }
 
     p5.draw = () : void => {
         p5.background(0, 0, 255);
         p5.rectMode(p5.CENTER);
 
-        const colorA: Color = new Color(p5, p5.color(255, 0, 255));
+        const colorA: Color = new Color(p5.color(255, 0, 255));
         p5.fill(colorA.color);
         p5.rect(0, 0, 250, 250);
 
-        const colorB: Color = new Color(p5);
+        const colorB: Color = new Color();
         p5.fill(colorB.color);
         p5.rect(0, 0, 75, 75);
     }