From 00de7cb59b0f2e71508c8da11f066b47d7bde0f7 Mon Sep 17 00:00:00 2001 From: Sean Lange Date: Thu, 21 Jul 2022 10:30:26 -0400 Subject: [PATCH 1/2] Fixed lightening and added screen blend mode Fixed issue with lightening and darkening color having an effect on the hue of that color, as well as implement the screen color mixing mode. --- src/math.ts | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/math.ts b/src/math.ts index c4e869dea..7c80cd268 100644 --- a/src/math.ts +++ b/src/math.ts @@ -178,11 +178,19 @@ export class Color { } lighten(a: number): Color { - return new Color(this.r + a, this.g + a, this.b + a) + return new Color( + (255 - this.r) * a + this.r, + (255 - this.g) * a + this.g, + (255 - this.b) * a + this.b + ) } darken(a: number): Color { - return this.lighten(-a) + return new Color( + this.r * (1-a), + this.g * (1-a), + this.b * (1-a) + ) } invert(): Color { @@ -196,6 +204,14 @@ export class Color { this.b * other.b / 255, ) } + + screen(other: Color): Color { + return new Color( + 255 - (255-this.r) * (255-other.r) / 255, + 255 - (255-this.g) * (255-other.g) / 255, + 255 - (255-this.b) * (255-other.b) / 255, + ) + } eq(other: Color): boolean { return this.r === other.r From 9757b439d0ff94a3a7a485637d4bdc6b398dd819 Mon Sep 17 00:00:00 2001 From: Sean Lange Date: Thu, 21 Jul 2022 10:40:16 -0400 Subject: [PATCH 2/2] Updated colors class in JSDoc --- src/types.ts | 35 +++++++++++++++++++++++++++++++---- 1 file changed, 31 insertions(+), 4 deletions(-) diff --git a/src/types.ts b/src/types.ts index d98f9d18f..33a353388 100644 --- a/src/types.ts +++ b/src/types.ts @@ -3247,16 +3247,43 @@ export declare class Color { static WHITE: Color static BLACK: Color clone(): Color + /** - * Lighten the color (adds RGB by n). + * Lighten color by a certain percentage + * @param percent Number between 0-1 indicating how light to make color + * @example + * color.lighten(0); // Does nothing + * color.lighten(0.5); // 50% lighter + * color.lighten(1); // White + * @returns Lightened color */ - lighten(n: number): Color + lighten(percent: number): Color /** - * Darkens the color (subtracts RGB by n). + * Darken color by a certain percentage + * @param percent Number between 0-1 indicating how dark to make color + * @example + * color.darken(0); // Does nothing + * color.darken(0.5); // 50% darker + * color.darken(1); // Black + * @returns Darkened color */ - darken(n: number): Color + darken(percent: number): Color invert(): Color + + /** + * Apply multiply blend mode on color + * @param other Color to blend with + * @returns Result of blended colors + */ mult(other: Color): Color + + /** + * Apply screen blend mode on color + * @param other Color to blend with + * @returns Result of blended colors + */ + screen(other: Color): Color + eq(c: Color): boolean toString(): string }