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

WIP

Browse Source
This commit is contained in:
Lani Aung
2025-06-04 19:22:19 -07:00
parent 23e5e075cc
commit ef5b289ff0
5 changed files with 61 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/crack.ts
+48
View File
@@ -0,0 +1,48 @@
import SandPainter from "./sand-painter"
import State from "./state"
export default class Crack {
private static padding = .66
private x: number = 0
private y: number = 0
private angle: number = 0
private painter: SandPainter
private state: State
constructor(state: State) {
this.painter = new SandPainter(state)
this.state = state
this.init()
}
init() {
let x = 0, y = 0, found = false, tries = 0
while (!found && tries++ < 1000) {
x = Math.random() * this.state.width
y = Math.random() * this.state.height
found = this.state.crackGrid[y * this.state.height + x] < 10000
}
if (!found) {
console.warn("Unable to start crack due to timeout")
return
}
const negative = Math.random() < 0.5
let value = this.state.crackGrid[y * this.state.height + x]
if (negative) value -= 90 + Math.floor(Math.random() * 4.1 - 2)
else value += 90 + Math.floor(Math.random() * 4.1 - 2)
}
start(x: number, y: number, angle: number) {
this.x = x + .61 * Math.cos(angle * Math.PI / 180)
this.y = y + .61 * Math.sin(angle * Math.PI / 180)
this.angle = angle
}
continue() {
this.x += .42 * Math.cos(this.angle * Math.PI / 180)
this.y += .42 * Math.sin(this.angle * Math.PI / 180)
}
}
src/launch.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import Substrate from "./substrate"
import Weather from "./weather";
import Weather from "./weather"
const background = new Substrate("substrate-canvas", 20)
let weather: Weather
src/sandPainter.ts → src/sand-painter.ts
View File
src/substrate.ts
+9 -53
View File
@@ -1,72 +1,28 @@
// TS attempt of http://www.complexification.net/gallery/machines/substrate/index.php by laniaung.me 2025-06-02
// TS attempt of http://www.complexification.net/gallery/machines/substrate/index.php by laniaung.me
import State from "./state"
import SandPainter from "./sandPainter"
export default class Substrate {
private state: State
private readonly canvas: HTMLCanvasElement
private readonly state: State
constructor(id: string, maxCracks: number, colors?: number[]) {
if (!colors?.length) colors = [ 0x3a1e3e, 0x7c2d3b, 0xb94f3c, 0xf4a462, 0xf9c54e ] // https://colormagic.app/palette/671eeb6c42273fc4c1bb1ac7
let canvas = document.getElementById(id)
let canvas = document.getElementById(id) as HTMLCanvasElement
if (!canvas) {
canvas = document.createElement("canvas")
document.body.appendChild(canvas)
}
this.canvas = canvas
this.state = new State(colors, maxCracks, canvas.clientHeight, canvas.clientWidth)
}
}
class Crack {
private x: number = 0
private y: number = 0
private angle: number = 0
private painter: SandPainter
private state: State
constructor(state: State) {
this.painter = new SandPainter(state)
this.state = state
this.init()
}
init() {
let x = 0, y = 0, found = false, tries = 0
while (!found && tries++ < 1000) {
x = Math.random() * this.state.width
y = Math.random() * this.state.height
found = this.state.crackGrid[y * this.state.height + x] < 10000
}
if (!found) {
console.warn("Unable to start crack due to timeout")
return
}
const negative = Math.random() < 0.5
let value = this.state.crackGrid[y * this.state.height + x]
if (negative) value -= 90 + Math.floor(Math.random() * 4.1 - 2)
else value += 90 + Math.floor(Math.random() * 4.1 - 2)
const context = this.canvas.getContext("2d")
context.fillStyle = "#fff"
context.fillRect(0, 0, this.canvas.width, this.canvas.height)
}
start(x: number, y: number, angle: number) {
this.x = x + .61 * Math.cos(angle * Math.PI / 180)
this.y = y + .61 * Math.sin(angle * Math.PI / 180)
this.angle = angle
}
continue() {
this.x += .42 * Math.cos(this.angle * Math.PI / 180)
this.y += .42 * Math.sin(this.angle * Math.PI / 180)
}
}
declare global {
interface Window {
main: Substrate
}
}
window.main = new Substrate("substrate-canvas", 20)
}
www/main.js
+3 -3
View File
@@ -162,11 +162,11 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _sub
/***/ "./src/sandPainter.ts":
/*!****************************!*\
!*** ./src/sandPainter.ts ***!
!*** ./src/sand-painter.ts ***!
\****************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nvar SandPainter = /** @class */ (function () {\n function SandPainter(state) {\n this.color = state.getRandomColor();\n this.gain = Math.random() / 10;\n }\n return SandPainter;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SandPainter);\n\n\n//# sourceURL=webpack:///./src/sandPainter.ts?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nvar SandPainter = /** @class */ (function () {\n function SandPainter(state) {\n this.color = state.getRandomColor();\n this.gain = Math.random() / 10;\n }\n return SandPainter;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SandPainter);\n\n\n//# sourceURL=webpack:///./src/sand-painter.ts?");
/***/ }),
@@ -186,7 +186,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
\**************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./state */ \"./src/state.ts\");\n/* harmony import */ var _sandPainter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./sandPainter */ \"./src/sandPainter.ts\");\n// TS attempt of http://www.complexification.net/gallery/machines/substrate/index.php by laniaung.me 2025-06-02\n\n\nvar Substrate = /** @class */ (function () {\n function Substrate(id, maxCracks, colors) {\n if (!(colors === null || colors === void 0 ? void 0 : colors.length))\n colors = [0x3a1e3e, 0x7c2d3b, 0xb94f3c, 0xf4a462, 0xf9c54e]; // https://colormagic.app/palette/671eeb6c42273fc4c1bb1ac7\n var canvas = document.getElementById(id);\n if (!canvas) {\n canvas = document.createElement(\"canvas\");\n document.body.appendChild(canvas);\n }\n this.state = new _state__WEBPACK_IMPORTED_MODULE_0__[\"default\"](colors, maxCracks, canvas.clientHeight, canvas.clientWidth);\n }\n return Substrate;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Substrate);\nvar Crack = /** @class */ (function () {\n function Crack(state) {\n this.x = 0;\n this.y = 0;\n this.angle = 0;\n this.painter = new _sandPainter__WEBPACK_IMPORTED_MODULE_1__[\"default\"](state);\n this.state = state;\n this.init();\n }\n Crack.prototype.init = function () {\n var x = 0, y = 0, found = false, tries = 0;\n while (!found && tries++ < 1000) {\n x = Math.random() * this.state.width;\n y = Math.random() * this.state.height;\n found = this.state.crackGrid[y * this.state.height + x] < 10000;\n }\n if (!found) {\n console.warn(\"Unable to start crack due to timeout\");\n return;\n }\n var negative = Math.random() < 0.5;\n var value = this.state.crackGrid[y * this.state.height + x];\n if (negative)\n value -= 90 + Math.floor(Math.random() * 4.1 - 2);\n else\n value += 90 + Math.floor(Math.random() * 4.1 - 2);\n };\n Crack.prototype.start = function (x, y, angle) {\n this.x = x + .61 * Math.cos(angle * Math.PI / 180);\n this.y = y + .61 * Math.sin(angle * Math.PI / 180);\n this.angle = angle;\n };\n Crack.prototype.continue = function () {\n this.x += .42 * Math.cos(this.angle * Math.PI / 180);\n this.y += .42 * Math.sin(this.angle * Math.PI / 180);\n };\n return Crack;\n}());\nwindow.main = new Substrate(\"substrate-canvas\", 20);\n\n\n//# sourceURL=webpack:///./src/substrate.ts?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./state */ \"./src/state.ts\");\n/* harmony import */ var _sandPainter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./sandPainter */ \"./src/sand-painter.ts\");\n// TS attempt of http://www.complexification.net/gallery/machines/substrate/index.php by laniaung.me 2025-06-02\n\n\nvar Substrate = /** @class */ (function () {\n function Substrate(id, maxCracks, colors) {\n if (!(colors === null || colors === void 0 ? void 0 : colors.length))\n colors = [0x3a1e3e, 0x7c2d3b, 0xb94f3c, 0xf4a462, 0xf9c54e]; // https://colormagic.app/palette/671eeb6c42273fc4c1bb1ac7\n var canvas = document.getElementById(id);\n if (!canvas) {\n canvas = document.createElement(\"canvas\");\n document.body.appendChild(canvas);\n }\n this.canvas = canvas;\n this.state = new _state__WEBPACK_IMPORTED_MODULE_0__[\"default\"](colors, maxCracks, canvas.clientHeight, canvas.clientWidth);\n this.init();\n }\n Substrate.prototype.init = function () {\n var context = this.canvas.getContext(\"2d\");\n context.fillStyle = \"#fff\";\n context.fillRect(0, 0, this.canvas.width, this.canvas.height);\n };\n return Substrate;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Substrate);\nvar Crack = /** @class */ (function () {\n function Crack(state) {\n this.x = 0;\n this.y = 0;\n this.angle = 0;\n this.painter = new _sandPainter__WEBPACK_IMPORTED_MODULE_1__[\"default\"](state);\n this.state = state;\n this.init();\n }\n Crack.prototype.init = function () {\n var x = 0, y = 0, found = false, tries = 0;\n while (!found && tries++ < 1000) {\n x = Math.random() * this.state.width;\n y = Math.random() * this.state.height;\n found = this.state.crackGrid[y * this.state.height + x] < 10000;\n }\n if (!found) {\n console.warn(\"Unable to start crack due to timeout\");\n return;\n }\n var negative = Math.random() < 0.5;\n var value = this.state.crackGrid[y * this.state.height + x];\n if (negative)\n value -= 90 + Math.floor(Math.random() * 4.1 - 2);\n else\n value += 90 + Math.floor(Math.random() * 4.1 - 2);\n };\n Crack.prototype.start = function (x, y, angle) {\n this.x = x + .61 * Math.cos(angle * Math.PI / 180);\n this.y = y + .61 * Math.sin(angle * Math.PI / 180);\n this.angle = angle;\n };\n Crack.prototype.continue = function () {\n this.x += .42 * Math.cos(this.angle * Math.PI / 180);\n this.y += .42 * Math.sin(this.angle * Math.PI / 180);\n };\n return Crack;\n}());\nwindow.main = new Substrate(\"substrate-canvas\", 20);\n\n\n//# sourceURL=webpack:///./src/substrate.ts?");
/***/ }),