lani/fxl.codes.Weather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Working substrate backgrounds

Browse Source
This commit is contained in:
Lani Aung
2025-06-07 18:40:04 -07:00
parent 660dd859d1
commit 28610b0c3b
9 changed files with 128 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+3 -1
View File
@@ -1,6 +1,8 @@
{
"scripts": {
"test-serve": "webpack --config webpack-test.config.js --mode development && jasmine-browser-runner"
"build": "webpack --mode development",
"test-serve": "webpack --config webpack-test.config.js --mode development && jasmine-browser-runner",
"test": "webpack --config webpack-test.config.js --mode development && jasmine-browser-runner runSpecs"
},
"devDependencies": {
"glob": "^11.0.2",
spec/RgbSpec.js
+7
View File
@@ -16,4 +16,11 @@ describe("RGB", () => {
expect(value.green).toEqual(expected[index].green)
})
}
for (let index = 0; index < hexes.length; index++) {
it(`should return the same hex value: ${hexes[index].toString(16)}`, () => {
const value = expected[index].toHex()
expect(value).toEqual(hexes[index])
})
}
})
src/color-schemes.ts
+11 -6
View File
@@ -1,22 +1,27 @@
import HSL from "./hsl"
abstract class Scheme {
export abstract class Scheme {
protected primary: HSL
colors: number[]
protected constructor(initial: number) {
this.primary = HSL.fromHex(initial)
}
colors: number[]
toString(): string {
let values = this.colors.map(color => color.toString(16)).join(",")
return `${this.constructor.name}: ${values}`
}
}
export class Analogous extends Scheme {
constructor(initial: number) {
super(initial)
const left1 = new HSL(this.primary.hue - 60, this.primary.saturation, this.primary.lightness)
const left2 = new HSL(this.primary.hue - 30, this.primary.saturation, this.primary.lightness)
const right1 = new HSL(this.primary.hue + 30, this.primary.saturation, this.primary.lightness)
const right2 = new HSL(this.primary.hue + 60, this.primary.saturation, this.primary.lightness)
const left1 = new HSL(this.primary.hue - 30, this.primary.saturation, this.primary.lightness)
const left2 = new HSL(this.primary.hue - 15, this.primary.saturation, this.primary.lightness)
const right1 = new HSL(this.primary.hue + 15, this.primary.saturation, this.primary.lightness)
const right2 = new HSL(this.primary.hue + 30, this.primary.saturation, this.primary.lightness)
this.colors = [
left1.toHex(),
src/rgb.ts
+6 -8
View File
@@ -6,13 +6,13 @@ export default class RGB {
blue: number
constructor(red: number, green: number, blue: number) {
this.red = red
this.green = green
this.blue = blue
this.red = Math.floor(red < 0 ? 0 : red > 255 ? 255 : red)
this.green = Math.floor(green < 0 ? 0 : green > 255 ? 255 : green)
this.blue = Math.floor(blue < 0 ? 0 : blue > 255 ? 255 : blue)
}
toHex(): number {
return this.red << 16 + this.green << 8 + this.blue
return (this.red << 16) + (this.green << 8) + this.blue
}
// https://en.wikipedia.org/wiki/HSL_and_HSV
@@ -20,12 +20,10 @@ export default class RGB {
let red = 0,
green = 0,
blue = 0
const saturationValue = hsl.saturation / 100,
lightnessValue = hsl.lightness / 100,
chroma = 1 - Math.abs(2 * hsl.lightness - 1) * saturationValue,
const chroma = (1 - Math.abs(2 * hsl.lightness - 1)) * hsl.saturation,
range = hsl.hue / 60,
intermediate = chroma * (1 - Math.abs(range % 2 - 1)),
match = lightnessValue - chroma / 2
match = hsl.lightness - chroma / 2
if (range >= 0 && range < 1) {
red = chroma
src/sand-painter.ts
+1 -1
View File
@@ -7,7 +7,7 @@ export default class SandPainter {
constructor(crack: Crack) {
this.crack = crack
this.color = this.crack.state.getRandomColor()
this.color = this.crack.state.getNextColor()
this.gain = Math.random() / 10
}
src/state.ts
+6 -4
View File
@@ -2,17 +2,18 @@ import Crack from "./crack"
export default class State {
readonly canvas: HTMLCanvasElement
colors: number[]
readonly maxCracks: number
readonly grid: number[][]
colors: number[]
seeds: {x: number, y: number}[]
cracks: Crack[]
colorIndex: number = 0
constructor(colors: number[], maxCracks: number, canvas: HTMLCanvasElement) {
this.canvas = canvas
this.colors = colors
this.maxCracks = maxCracks
this.grid = []
this.colors = colors
this.cracks = []
this.seeds = []
@@ -24,6 +25,7 @@ export default class State {
this.cracks.length = 0
this.grid.length = 0
this.seeds.length = 0
this.colorIndex = 0
const height = this.canvas.height
const width = this.canvas.width
@@ -55,8 +57,8 @@ export default class State {
this.cracks.push(new Crack(this, x, y, angle))
}
getRandomColor(): number {
return this.colors[Math.floor(Math.random() * this.colors.length)]
getNextColor(): number {
return this.colors[this.colorIndex++ % this.colors.length]
}
isWithinBoundary(x: number, y: number): boolean {
src/substrate.ts
+17 -8
View File
@@ -1,6 +1,6 @@
// TS attempt of http://www.complexification.net/gallery/machines/substrate/index.php by laniaung.me
import State from "./state"
import {Analogous, Monochromatic, SplitComplementary, Square, Tetradic, Triadic} from "./color-schemes"
import {Scheme, Analogous, Monochromatic, SplitComplementary, Square, Tetradic, Triadic} from "./color-schemes"
export default class Substrate {
private readonly state: State
@@ -24,25 +24,34 @@ export default class Substrate {
requestAnimationFrame(draw)
}
setInterval(() => me.state.init(me.getRandomColorScheme()), 30 * 1000)
setInterval(() => me.state.init(me.getRandomColorScheme()), 120 * 1000)
draw()
}
getRandomColorScheme(): number[] {
const color = Math.floor(Math.random() * Math.pow(256, 3))
let scheme: Scheme
switch (Math.floor(Math.random() * 6)) {
case 1:
return new Monochromatic(color).colors
scheme = new Monochromatic(color)
break;
case 2:
return new SplitComplementary(color).colors
scheme = new SplitComplementary(color)
break;
case 3:
return new Triadic(color).colors
scheme = new Triadic(color)
break;
case 4:
return new Tetradic(color).colors
scheme = new Tetradic(color)
break;
case 5:
return new Square(color).colors
scheme = new Square(color)
break;
default:
return new Analogous(color).colors
scheme = new Analogous(color)
}
console.info(scheme.toString())
return scheme.colors
}
}
www/main.js
+76 -63
View File
@@ -12,6 +12,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ Analogous: () => (/* binding */ Analogous),
/* harmony export */ Monochromatic: () => (/* binding */ Monochromatic),
/* harmony export */ Scheme: () => (/* binding */ Scheme),
/* harmony export */ SplitComplementary: () => (/* binding */ SplitComplementary),
/* harmony export */ Square: () => (/* binding */ Square),
/* harmony export */ Tetradic: () => (/* binding */ Tetradic),
@@ -34,30 +35,25 @@ var __extends = (undefined && undefined.__extends) || (function () {
};
})();
/*
export enum Scheme {
Analogous,
Monochromatic,
SplitComplementary,
Triadic,
Tetradic,
Square
}
*/
var Scheme = /** @class */ (function () {
function Scheme(initial) {
this.primary = _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL.fromHex(initial);
this.primary = _hsl__WEBPACK_IMPORTED_MODULE_0__["default"].fromHex(initial);
}
Scheme.prototype.toString = function () {
var values = this.colors.map(function (color) { return color.toString(16); }).join(",");
return "".concat(this.constructor.name, ": ").concat(values);
};
return Scheme;
}());
var Analogous = /** @class */ (function (_super) {
__extends(Analogous, _super);
function Analogous(initial) {
var _this = _super.call(this, initial) || this;
var left1 = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue - 60, _this.primary.saturation, _this.primary.lightness);
var left2 = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue - 30, _this.primary.saturation, _this.primary.lightness);
var right1 = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue + 30, _this.primary.saturation, _this.primary.lightness);
var right2 = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue + 60, _this.primary.saturation, _this.primary.lightness);
var left1 = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue - 30, _this.primary.saturation, _this.primary.lightness);
var left2 = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue - 15, _this.primary.saturation, _this.primary.lightness);
var right1 = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue + 15, _this.primary.saturation, _this.primary.lightness);
var right2 = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue + 30, _this.primary.saturation, _this.primary.lightness);
_this.colors = [
left1.toHex(),
left2.toHex(),
@@ -77,10 +73,10 @@ var Monochromatic = /** @class */ (function (_super) {
var delta = _this.primary.lightness / 6;
_this.colors = [
initial,
new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue, _this.primary.saturation, _this.primary.lightness - delta).toHex(),
new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue, _this.primary.saturation, _this.primary.lightness - delta * 2).toHex(),
new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue, _this.primary.saturation, _this.primary.lightness - delta * 3).toHex(),
new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue, _this.primary.saturation, _this.primary.lightness - delta * 4).toHex()
new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue, _this.primary.saturation, _this.primary.lightness - delta).toHex(),
new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue, _this.primary.saturation, _this.primary.lightness - delta * 2).toHex(),
new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue, _this.primary.saturation, _this.primary.lightness - delta * 3).toHex(),
new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue, _this.primary.saturation, _this.primary.lightness - delta * 4).toHex()
];
return _this;
}
@@ -91,11 +87,11 @@ var SplitComplementary = /** @class */ (function (_super) {
__extends(SplitComplementary, _super);
function SplitComplementary(initial) {
var _this = _super.call(this, initial) || this;
var complement = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL((_this.primary.hue + 180) % 360, _this.primary.saturation, _this.primary.lightness);
var complement = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"]((_this.primary.hue + 180) % 360, _this.primary.saturation, _this.primary.lightness);
_this.colors = [
initial,
new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(complement.hue - 30, complement.saturation, complement.lightness).toHex(),
new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(complement.hue + 30, complement.saturation, complement.lightness).toHex()
new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](complement.hue - 30, complement.saturation, complement.lightness).toHex(),
new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](complement.hue + 30, complement.saturation, complement.lightness).toHex()
];
return _this;
}
@@ -108,8 +104,8 @@ var Triadic = /** @class */ (function (_super) {
var _this = _super.call(this, initial) || this;
_this.colors = [
initial,
new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue - 120, _this.primary.saturation, _this.primary.lightness).toHex(),
new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue + 120, _this.primary.saturation, _this.primary.lightness).toHex()
new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue - 120, _this.primary.saturation, _this.primary.lightness).toHex(),
new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue + 120, _this.primary.saturation, _this.primary.lightness).toHex()
];
return _this;
}
@@ -120,9 +116,9 @@ var Tetradic = /** @class */ (function (_super) {
__extends(Tetradic, _super);
function Tetradic(initial) {
var _this = _super.call(this, initial) || this;
var second = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue + 45, _this.primary.saturation, _this.primary.lightness);
var complement = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue + 180, _this.primary.saturation, _this.primary.lightness);
var secondComplement = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(second.hue + 180, _this.primary.saturation, _this.primary.lightness);
var second = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue + 45, _this.primary.saturation, _this.primary.lightness);
var complement = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue + 180, _this.primary.saturation, _this.primary.lightness);
var secondComplement = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](second.hue + 180, _this.primary.saturation, _this.primary.lightness);
_this.colors = [
initial,
second.toHex(),
@@ -138,9 +134,9 @@ var Square = /** @class */ (function (_super) {
__extends(Square, _super);
function Square(initial) {
var _this = _super.call(this, initial) || this;
var second = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue + 90, _this.primary.saturation, _this.primary.lightness);
var third = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(_this.primary.hue + 180, _this.primary.saturation, _this.primary.lightness);
var fourth = new _hsl__WEBPACK_IMPORTED_MODULE_0__.HSL(second.hue + 270, _this.primary.saturation, _this.primary.lightness);
var second = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue + 90, _this.primary.saturation, _this.primary.lightness);
var third = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](_this.primary.hue + 180, _this.primary.saturation, _this.primary.lightness);
var fourth = new _hsl__WEBPACK_IMPORTED_MODULE_0__["default"](second.hue + 270, _this.primary.saturation, _this.primary.lightness);
_this.colors = [
initial,
second.toHex(),
@@ -226,7 +222,7 @@ var Crack = /** @class */ (function () {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ HSL: () => (/* binding */ HSL)
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _rgb__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./rgb */ "./src/rgb.ts");
@@ -236,28 +232,29 @@ var HSL = /** @class */ (function () {
this.saturation = saturation;
this.lightness = lightness;
}
// https://en.wikipedia.org/wiki/RGB_color_model
// https://en.wikipedia.org/wiki/HSL_and_HSV
HSL.fromRgb = function (rgb) {
var redValue = rgb.red / 255, greenValue = rgb.green / 255, blueValue = rgb.blue / 255, lightness = (redValue + greenValue + blueValue) / 3, saturation = 1 - (3 / (redValue + greenValue + blueValue)) * Math.min(redValue, greenValue, blueValue);
var dividend = (redValue - greenValue) + (redValue - blueValue);
var divisor = 2 * Math.sqrt((redValue - greenValue) ^ 2 + (redValue - blueValue) * (greenValue - blueValue));
var hue = (1 / Math.cos(dividend / divisor));
if (greenValue > blueValue)
hue = 360 - hue;
return new HSL(hue, saturation, lightness);
var redValue = rgb.red / 255, greenValue = rgb.green / 255, blueValue = rgb.blue / 255, max = Math.max(redValue, greenValue, blueValue), min = Math.min(redValue, greenValue, blueValue), chroma = max - min, lightness = .5 * (max + min), saturation = 1 - (3 / (redValue + greenValue + blueValue)) * Math.min(redValue, greenValue, blueValue);
var huePrime = 0;
if (chroma != 0) {
if (redValue == max)
huePrime = ((greenValue - blueValue) / chroma) % 6;
else if (greenValue == max)
huePrime = ((blueValue - redValue) / chroma) + 2;
else
huePrime = ((redValue - greenValue) / chroma) + 4;
}
return new HSL(huePrime * 60, saturation, lightness);
};
HSL.fromHex = function (color) {
var red = color >> 16;
var green = (color - (red << 16)) >> 8;
var blue = color - (red << 16) - (green << 8);
return HSL.fromRgb(new _rgb__WEBPACK_IMPORTED_MODULE_0__.RGB(red, green, blue));
return HSL.fromRgb(_rgb__WEBPACK_IMPORTED_MODULE_0__["default"].fromHex(color));
};
HSL.prototype.toHex = function () {
return _rgb__WEBPACK_IMPORTED_MODULE_0__.RGB.fromHsl(this).toHex();
return _rgb__WEBPACK_IMPORTED_MODULE_0__["default"].fromHsl(this).toHex();
};
return HSL;
}());
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (HSL);
/***/ }),
@@ -270,21 +267,21 @@ var HSL = /** @class */ (function () {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ RGB: () => (/* binding */ RGB)
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
var RGB = /** @class */ (function () {
function RGB(red, green, blue) {
this.red = red;
this.green = green;
this.blue = blue;
this.red = Math.floor(red < 0 ? 0 : red > 255 ? 255 : red);
this.green = Math.floor(green < 0 ? 0 : green > 255 ? 255 : green);
this.blue = Math.floor(blue < 0 ? 0 : blue > 255 ? 255 : blue);
}
RGB.prototype.toHex = function () {
return this.red << 16 + this.green << 8 + this.blue;
return (this.red << 16) + (this.green << 8) + this.blue;
};
// https://en.wikipedia.org/wiki/HSL_and_HSV
RGB.fromHsl = function (hsl) {
var red = 0, green = 0, blue = 0;
var saturationValue = hsl.saturation / 100, lightnessValue = hsl.lightness / 100, chroma = 1 - Math.abs(2 * hsl.lightness - 1) * saturationValue, range = hsl.hue / 60, intermediate = chroma * (1 - Math.abs(range % 2 - 1)), match = lightnessValue - chroma / 2;
var chroma = (1 - Math.abs(2 * hsl.lightness - 1)) * hsl.saturation, range = hsl.hue / 60, intermediate = chroma * (1 - Math.abs(range % 2 - 1)), match = hsl.lightness - chroma / 2;
if (range >= 0 && range < 1) {
red = chroma;
green = intermediate;
@@ -311,9 +308,15 @@ var RGB = /** @class */ (function () {
}
return new RGB((red + match) * 255, (green + match) * 255, (blue + match) * 255);
};
RGB.fromHex = function (color) {
var red = color >> 16;
var green = (color - (red << 16)) >> 8;
var blue = color - (red << 16) - (green << 8);
return new RGB(red, green, blue);
};
return RGB;
}());
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RGB);
/***/ }),
@@ -331,7 +334,7 @@ __webpack_require__.r(__webpack_exports__);
var SandPainter = /** @class */ (function () {
function SandPainter(crack) {
this.crack = crack;
this.color = this.crack.state.getRandomColor();
this.color = this.crack.state.getNextColor();
this.gain = Math.random() / 10;
}
SandPainter.prototype.render = function () {
@@ -387,10 +390,11 @@ __webpack_require__.r(__webpack_exports__);
var State = /** @class */ (function () {
function State(colors, maxCracks, canvas) {
this.colorIndex = 0;
this.canvas = canvas;
this.colors = colors;
this.maxCracks = maxCracks;
this.grid = [];
this.colors = colors;
this.cracks = [];
this.seeds = [];
this.init();
@@ -401,6 +405,7 @@ var State = /** @class */ (function () {
this.cracks.length = 0;
this.grid.length = 0;
this.seeds.length = 0;
this.colorIndex = 0;
var height = this.canvas.height;
var width = this.canvas.width;
var context = this.canvas.getContext("2d");
@@ -426,8 +431,8 @@ var State = /** @class */ (function () {
var _a = this.getNewEntry(), x = _a.x, y = _a.y, angle = _a.angle;
this.cracks.push(new _crack__WEBPACK_IMPORTED_MODULE_0__["default"](this, x, y, angle));
};
State.prototype.getRandomColor = function () {
return this.colors[Math.floor(Math.random() * this.colors.length)];
State.prototype.getNextColor = function () {
return this.colors[this.colorIndex++ % this.colors.length];
};
State.prototype.isWithinBoundary = function (x, y) {
return x >= 0 && x < this.canvas.width && y >= 0 && y < this.canvas.height;
@@ -493,25 +498,33 @@ var Substrate = /** @class */ (function () {
}
requestAnimationFrame(draw);
};
setInterval(function () { return me.state.init(me.getRandomColorScheme()); }, 30 * 1000);
setInterval(function () { return me.state.init(me.getRandomColorScheme()); }, 120 * 1000);
draw();
};
Substrate.prototype.getRandomColorScheme = function () {
var color = Math.floor(Math.random() * Math.pow(256, 3));
var scheme;
switch (Math.floor(Math.random() * 6)) {
case 1:
return new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Monochromatic(color).colors;
scheme = new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Monochromatic(color);
break;
case 2:
return new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.SplitComplementary(color).colors;
scheme = new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.SplitComplementary(color);
break;
case 3:
return new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Triadic(color).colors;
scheme = new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Triadic(color);
break;
case 4:
return new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Tetradic(color).colors;
scheme = new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Tetradic(color);
break;
case 5:
return new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Square(color).colors;
scheme = new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Square(color);
break;
default:
return new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Analogous(color).colors;
scheme = new _color_schemes__WEBPACK_IMPORTED_MODULE_1__.Analogous(color);
}
console.info(scheme.toString());
return scheme.colors;
};
return Substrate;
}());
www/main.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long