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": { "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": { "devDependencies": {
"glob": "^11.0.2", "glob": "^11.0.2",
spec/RgbSpec.js
+7
View File
@@ -16,4 +16,11 @@ describe("RGB", () => {
expect(value.green).toEqual(expected[index].green) 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" import HSL from "./hsl"
abstract class Scheme { export abstract class Scheme {
protected primary: HSL protected primary: HSL
colors: number[]
protected constructor(initial: number) { protected constructor(initial: number) {
this.primary = HSL.fromHex(initial) 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 { export class Analogous extends Scheme {
constructor(initial: number) { constructor(initial: number) {
super(initial) super(initial)
const left1 = 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 - 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 + 30, 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 + 60, this.primary.saturation, this.primary.lightness) const right2 = new HSL(this.primary.hue + 30, this.primary.saturation, this.primary.lightness)
this.colors = [ this.colors = [
left1.toHex(), left1.toHex(),
src/rgb.ts
+6 -8
View File
@@ -6,13 +6,13 @@ export default class RGB {
blue: number blue: number
constructor(red: number, green: number, blue: number) { constructor(red: number, green: number, blue: number) {
this.red = red this.red = Math.floor(red < 0 ? 0 : red > 255 ? 255 : red)
this.green = green this.green = Math.floor(green < 0 ? 0 : green > 255 ? 255 : green)
this.blue = blue this.blue = Math.floor(blue < 0 ? 0 : blue > 255 ? 255 : blue)
} }
toHex(): number { 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 // https://en.wikipedia.org/wiki/HSL_and_HSV
@@ -20,12 +20,10 @@ export default class RGB {
let red = 0, let red = 0,
green = 0, green = 0,
blue = 0 blue = 0
const saturationValue = hsl.saturation / 100, const chroma = (1 - Math.abs(2 * hsl.lightness - 1)) * hsl.saturation,
lightnessValue = hsl.lightness / 100,
chroma = 1 - Math.abs(2 * hsl.lightness - 1) * saturationValue,
range = hsl.hue / 60, range = hsl.hue / 60,
intermediate = chroma * (1 - Math.abs(range % 2 - 1)), intermediate = chroma * (1 - Math.abs(range % 2 - 1)),
match = lightnessValue - chroma / 2 match = hsl.lightness - chroma / 2
if (range >= 0 && range < 1) { if (range >= 0 && range < 1) {
red = chroma red = chroma
src/sand-painter.ts
+1 -1
View File
@@ -7,7 +7,7 @@ export default class SandPainter {
constructor(crack: Crack) { constructor(crack: Crack) {
this.crack = crack this.crack = crack
this.color = this.crack.state.getRandomColor() this.color = this.crack.state.getNextColor()
this.gain = Math.random() / 10 this.gain = Math.random() / 10
} }
src/state.ts
+6 -4
View File
@@ -2,17 +2,18 @@ import Crack from "./crack"
export default class State { export default class State {
readonly canvas: HTMLCanvasElement readonly canvas: HTMLCanvasElement
colors: number[]
readonly maxCracks: number readonly maxCracks: number
readonly grid: number[][] readonly grid: number[][]
colors: number[]
seeds: {x: number, y: number}[] seeds: {x: number, y: number}[]
cracks: Crack[] cracks: Crack[]
colorIndex: number = 0
constructor(colors: number[], maxCracks: number, canvas: HTMLCanvasElement) { constructor(colors: number[], maxCracks: number, canvas: HTMLCanvasElement) {
this.canvas = canvas this.canvas = canvas
this.colors = colors
this.maxCracks = maxCracks this.maxCracks = maxCracks
this.grid = [] this.grid = []
this.colors = colors
this.cracks = [] this.cracks = []
this.seeds = [] this.seeds = []
@@ -24,6 +25,7 @@ export default class State {
this.cracks.length = 0 this.cracks.length = 0
this.grid.length = 0 this.grid.length = 0
this.seeds.length = 0 this.seeds.length = 0
this.colorIndex = 0
const height = this.canvas.height const height = this.canvas.height
const width = this.canvas.width const width = this.canvas.width
@@ -55,8 +57,8 @@ export default class State {
this.cracks.push(new Crack(this, x, y, angle)) this.cracks.push(new Crack(this, x, y, angle))
} }
getRandomColor(): number { getNextColor(): number {
return this.colors[Math.floor(Math.random() * this.colors.length)] return this.colors[this.colorIndex++ % this.colors.length]
} }
isWithinBoundary(x: number, y: number): boolean { 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 // TS attempt of http://www.complexification.net/gallery/machines/substrate/index.php by laniaung.me
import State from "./state" 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 { export default class Substrate {
private readonly state: State private readonly state: State
@@ -24,25 +24,34 @@ export default class Substrate {
requestAnimationFrame(draw) requestAnimationFrame(draw)
} }
setInterval(() => me.state.init(me.getRandomColorScheme()), 30 * 1000) setInterval(() => me.state.init(me.getRandomColorScheme()), 120 * 1000)
draw() draw()
} }
getRandomColorScheme(): number[] { getRandomColorScheme(): number[] {
const color = Math.floor(Math.random() * Math.pow(256, 3)) const color = Math.floor(Math.random() * Math.pow(256, 3))
let scheme: Scheme
switch (Math.floor(Math.random() * 6)) { switch (Math.floor(Math.random() * 6)) {
case 1: case 1:
return new Monochromatic(color).colors scheme = new Monochromatic(color)
break;
case 2: case 2:
return new SplitComplementary(color).colors scheme = new SplitComplementary(color)
break;
case 3: case 3:
return new Triadic(color).colors scheme = new Triadic(color)
break;
case 4: case 4:
return new Tetradic(color).colors scheme = new Tetradic(color)
break;
case 5: case 5:
return new Square(color).colors scheme = new Square(color)
break;
default: 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 */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ Analogous: () => (/* binding */ Analogous), /* harmony export */ Analogous: () => (/* binding */ Analogous),
/* harmony export */ Monochromatic: () => (/* binding */ Monochromatic), /* harmony export */ Monochromatic: () => (/* binding */ Monochromatic),
/* harmony export */ Scheme: () => (/* binding */ Scheme),
/* harmony export */ SplitComplementary: () => (/* binding */ SplitComplementary), /* harmony export */ SplitComplementary: () => (/* binding */ SplitComplementary),
/* harmony export */ Square: () => (/* binding */ Square), /* harmony export */ Square: () => (/* binding */ Square),
/* harmony export */ Tetradic: () => (/* binding */ Tetradic), /* 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 () { var Scheme = /** @class */ (function () {
function Scheme(initial) { 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; return Scheme;
}()); }());
var Analogous = /** @class */ (function (_super) { var Analogous = /** @class */ (function (_super) {
__extends(Analogous, _super); __extends(Analogous, _super);
function Analogous(initial) { function Analogous(initial) {
var _this = _super.call(this, initial) || this; 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 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__.HSL(_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__.HSL(_this.primary.hue + 30, _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__.HSL(_this.primary.hue + 60, _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 = [ _this.colors = [
left1.toHex(), left1.toHex(),
left2.toHex(), left2.toHex(),
@@ -77,10 +73,10 @@ var Monochromatic = /** @class */ (function (_super) {
var delta = _this.primary.lightness / 6; var delta = _this.primary.lightness / 6;
_this.colors = [ _this.colors = [
initial, 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__["default"](_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__["default"](_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__["default"](_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 * 4).toHex()
]; ];
return _this; return _this;
} }
@@ -91,11 +87,11 @@ var SplitComplementary = /** @class */ (function (_super) {
__extends(SplitComplementary, _super); __extends(SplitComplementary, _super);
function SplitComplementary(initial) { function SplitComplementary(initial) {
var _this = _super.call(this, initial) || this; 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 = [ _this.colors = [
initial, initial,
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__.HSL(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; return _this;
} }
@@ -108,8 +104,8 @@ var Triadic = /** @class */ (function (_super) {
var _this = _super.call(this, initial) || this; var _this = _super.call(this, initial) || this;
_this.colors = [ _this.colors = [
initial, 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__["default"](_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()
]; ];
return _this; return _this;
} }
@@ -120,9 +116,9 @@ var Tetradic = /** @class */ (function (_super) {
__extends(Tetradic, _super); __extends(Tetradic, _super);
function Tetradic(initial) { function Tetradic(initial) {
var _this = _super.call(this, initial) || this; 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 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__.HSL(_this.primary.hue + 180, _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__.HSL(second.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 = [ _this.colors = [
initial, initial,
second.toHex(), second.toHex(),
@@ -138,9 +134,9 @@ var Square = /** @class */ (function (_super) {
__extends(Square, _super); __extends(Square, _super);
function Square(initial) { function Square(initial) {
var _this = _super.call(this, initial) || this; 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 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__.HSL(_this.primary.hue + 180, _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__.HSL(second.hue + 270, _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 = [ _this.colors = [
initial, initial,
second.toHex(), second.toHex(),
@@ -226,7 +222,7 @@ var Crack = /** @class */ (function () {
__webpack_require__.r(__webpack_exports__); __webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ HSL: () => (/* binding */ HSL) /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ }); /* harmony export */ });
/* harmony import */ var _rgb__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./rgb */ "./src/rgb.ts"); /* 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.saturation = saturation;
this.lightness = lightness; this.lightness = lightness;
} }
// https://en.wikipedia.org/wiki/RGB_color_model // https://en.wikipedia.org/wiki/HSL_and_HSV
HSL.fromRgb = function (rgb) { 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 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 dividend = (redValue - greenValue) + (redValue - blueValue); var huePrime = 0;
var divisor = 2 * Math.sqrt((redValue - greenValue) ^ 2 + (redValue - blueValue) * (greenValue - blueValue)); if (chroma != 0) {
var hue = (1 / Math.cos(dividend / divisor)); if (redValue == max)
if (greenValue > blueValue) huePrime = ((greenValue - blueValue) / chroma) % 6;
hue = 360 - hue; else if (greenValue == max)
return new HSL(hue, saturation, lightness); huePrime = ((blueValue - redValue) / chroma) + 2;
else
huePrime = ((redValue - greenValue) / chroma) + 4;
}
return new HSL(huePrime * 60, saturation, lightness);
}; };
HSL.fromHex = function (color) { HSL.fromHex = function (color) {
var red = color >> 16; return HSL.fromRgb(_rgb__WEBPACK_IMPORTED_MODULE_0__["default"].fromHex(color));
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));
}; };
HSL.prototype.toHex = function () { 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; return HSL;
}()); }());
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (HSL);
/***/ }), /***/ }),
@@ -270,21 +267,21 @@ var HSL = /** @class */ (function () {
__webpack_require__.r(__webpack_exports__); __webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ RGB: () => (/* binding */ RGB) /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ }); /* harmony export */ });
var RGB = /** @class */ (function () { var RGB = /** @class */ (function () {
function RGB(red, green, blue) { function RGB(red, green, blue) {
this.red = red; this.red = Math.floor(red < 0 ? 0 : red > 255 ? 255 : red);
this.green = green; this.green = Math.floor(green < 0 ? 0 : green > 255 ? 255 : green);
this.blue = blue; this.blue = Math.floor(blue < 0 ? 0 : blue > 255 ? 255 : blue);
} }
RGB.prototype.toHex = function () { 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 // https://en.wikipedia.org/wiki/HSL_and_HSV
RGB.fromHsl = function (hsl) { RGB.fromHsl = function (hsl) {
var red = 0, green = 0, blue = 0; 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) { if (range >= 0 && range < 1) {
red = chroma; red = chroma;
green = intermediate; green = intermediate;
@@ -311,9 +308,15 @@ var RGB = /** @class */ (function () {
} }
return new RGB((red + match) * 255, (green + match) * 255, (blue + match) * 255); 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; return RGB;
}()); }());
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RGB);
/***/ }), /***/ }),
@@ -331,7 +334,7 @@ __webpack_require__.r(__webpack_exports__);
var SandPainter = /** @class */ (function () { var SandPainter = /** @class */ (function () {
function SandPainter(crack) { function SandPainter(crack) {
this.crack = crack; this.crack = crack;
this.color = this.crack.state.getRandomColor(); this.color = this.crack.state.getNextColor();
this.gain = Math.random() / 10; this.gain = Math.random() / 10;
} }
SandPainter.prototype.render = function () { SandPainter.prototype.render = function () {
@@ -387,10 +390,11 @@ __webpack_require__.r(__webpack_exports__);
var State = /** @class */ (function () { var State = /** @class */ (function () {
function State(colors, maxCracks, canvas) { function State(colors, maxCracks, canvas) {
this.colorIndex = 0;
this.canvas = canvas; this.canvas = canvas;
this.colors = colors;
this.maxCracks = maxCracks; this.maxCracks = maxCracks;
this.grid = []; this.grid = [];
this.colors = colors;
this.cracks = []; this.cracks = [];
this.seeds = []; this.seeds = [];
this.init(); this.init();
@@ -401,6 +405,7 @@ var State = /** @class */ (function () {
this.cracks.length = 0; this.cracks.length = 0;
this.grid.length = 0; this.grid.length = 0;
this.seeds.length = 0; this.seeds.length = 0;
this.colorIndex = 0;
var height = this.canvas.height; var height = this.canvas.height;
var width = this.canvas.width; var width = this.canvas.width;
var context = this.canvas.getContext("2d"); 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; 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)); this.cracks.push(new _crack__WEBPACK_IMPORTED_MODULE_0__["default"](this, x, y, angle));
}; };
State.prototype.getRandomColor = function () { State.prototype.getNextColor = function () {
return this.colors[Math.floor(Math.random() * this.colors.length)]; return this.colors[this.colorIndex++ % this.colors.length];
}; };
State.prototype.isWithinBoundary = function (x, y) { State.prototype.isWithinBoundary = function (x, y) {
return x >= 0 && x < this.canvas.width && y >= 0 && y < this.canvas.height; return x >= 0 && x < this.canvas.width && y >= 0 && y < this.canvas.height;
@@ -493,25 +498,33 @@ var Substrate = /** @class */ (function () {
} }
requestAnimationFrame(draw); requestAnimationFrame(draw);
}; };
setInterval(function () { return me.state.init(me.getRandomColorScheme()); }, 30 * 1000); setInterval(function () { return me.state.init(me.getRandomColorScheme()); }, 120 * 1000);
draw(); draw();
}; };
Substrate.prototype.getRandomColorScheme = function () { Substrate.prototype.getRandomColorScheme = function () {
var color = Math.floor(Math.random() * Math.pow(256, 3)); var color = Math.floor(Math.random() * Math.pow(256, 3));
var scheme;
switch (Math.floor(Math.random() * 6)) { switch (Math.floor(Math.random() * 6)) {
case 1: 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: 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: 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: 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: 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: 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; return Substrate;
}()); }());
www/main.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long