diff --git a/app/react-components/ecs.jsx b/app/react-components/ecs.jsx index 2d96e29..5b438f4 100644 --- a/app/react-components/ecs.jsx +++ b/app/react-components/ecs.jsx @@ -1,13 +1,10 @@ -import {Texture} from '@pixi/core'; import {Container} from '@pixi/react'; -import {Sprite} from '@pixi/sprite'; import {useEffect, useState} from 'react'; import {RESOLUTION} from '@/constants.js'; import {usePacket} from '@/context/client.js'; import {useEcs, useEcsTick} from '@/context/ecs.js'; import {useMainEntity} from '@/context/main-entity.js'; -import {bresenham, createNoise2D, TAU} from '@/util/math.js'; import Entities from './entities.jsx'; import TargetingGhost from './targeting-ghost.jsx'; @@ -17,8 +14,6 @@ import Water from './water.jsx'; const NIGHTNESS = 0.1; -const simplex2D = createNoise2D(); - function calculateDarkness(hour) { let darkness = 0; if (hour >= 21 || hour < 4) { @@ -33,53 +28,6 @@ function calculateDarkness(hour) { return Math.floor(darkness * 1000) / 1000; } -function createLayerMask(layer) { - const {area, hulls, tileSize} = layer; - const canvas = window.document.createElement('canvas'); - if (0 === hulls.length) { - return Texture.from(canvas); - } - [canvas.width, canvas.height] = [area.x * tileSize.x, area.y * tileSize.y]; - const ctx = canvas.getContext('2d'); - ctx.fillStyle = 'rgba(0, 0, 0, 1)'; - ctx.fillRect(0, 0, canvas.width, canvas.height); - ctx.fillStyle = 'rgba(255, 255, 255, 1)'; - for (let i = 0; i < hulls.length; ++i) { - const hull = [...hulls[i]]; - hull.push(hull[0]); - ctx.beginPath(); - ctx.moveTo(hull[0].x, hull[0].y); - for (let j = 0; j < hull.length - 1; j++) { - const p0 = hull[j + 0]; - const p1 = hull[j + 1]; - const points = bresenham(p0, p1); - const isReversed = ( - (p0.x > p1.x && points[0].x < points[points.length - 1].x) - || (p0.y > p1.y && points[0].y < points[points.length - 1].y) - ); - for ( - let k = (isReversed ? points.length - 1 : 0); - (isReversed ? k >= 0 : k < points.length); - k += (isReversed ? -1 : 1) - ) { - const {x, y} = points[k]; - const ANGLE_SCALE = 1000; - const WALK_SCALE = 10; - const MAGNITUDE = ((tileSize.x + tileSize.y) / 2) * simplex2D(x * 100, y * 100); - const w = simplex2D(x * WALK_SCALE, y * WALK_SCALE); - const r = TAU * simplex2D(x * ANGLE_SCALE, y * ANGLE_SCALE) - ctx.lineTo( - x + Math.cos(r) * w * MAGNITUDE, - y + -Math.sin(r) * w * MAGNITUDE, - ); - } - } - ctx.closePath(); - ctx.fill(); - } - return Texture.from(canvas); -} - export default function Ecs({applyFilters, scale}) { const [ecs] = useEcs(); const [entities, setEntities] = useState({}); @@ -87,7 +35,6 @@ export default function Ecs({applyFilters, scale}) { const [mainEntity] = useMainEntity(); const [hour, setHour] = useState(10); const [night, setNight] = useState(); - const [mask, setMask] = useState(); useEffect(() => { async function buildNightFilter() { const {ColorMatrixFilter} = await import('@pixi/filter-color-matrix'); @@ -133,12 +80,6 @@ export default function Ecs({applyFilters, scale}) { if (update.Time) { setHour(Math.round(ecs.get(1).Time.hour * 60) / 60); } - if (update.TileLayers) { - const layer1 = ecs.get(1).TileLayers.layer(1); - if (layer1) { - setMask(new Sprite(createLayerMask(layer1))); - } - } } updatedEntities[id] = ecs.get(id); if (update.Emitter?.emit) { @@ -190,7 +131,6 @@ export default function Ecs({applyFilters, scale}) { /> {layer1 && ( @@ -198,7 +138,6 @@ export default function Ecs({applyFilters, scale}) { {WaterEcs && ( diff --git a/app/util/noise.js b/app/util/noise.js new file mode 100644 index 0000000..7bbca90 --- /dev/null +++ b/app/util/noise.js @@ -0,0 +1,56 @@ +// import {Texture} from '@pixi/core'; +// import {Sprite} from '@pixi/sprite'; + +import {bresenham, createNoise2D, TAU} from '@/util/math.js'; + +const simplex2D = createNoise2D(); + +// TODO - 3d noise around a circumference of length polygon perimeter + +export function createLayerMask(layer) { + const {area, hulls, tileSize} = layer; + const canvas = window.document.createElement('canvas'); + if (0 === hulls.length) { + return Texture.from(canvas); + } + [canvas.width, canvas.height] = [area.x * tileSize.x, area.y * tileSize.y]; + const ctx = canvas.getContext('2d'); + ctx.fillStyle = 'rgba(0, 0, 0, 1)'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = 'rgba(255, 255, 255, 1)'; + for (let i = 0; i < hulls.length; ++i) { + const hull = [...hulls[i]]; + hull.push(hull[0]); + ctx.beginPath(); + ctx.moveTo(hull[0].x, hull[0].y); + for (let j = 0; j < hull.length - 1; j++) { + const p0 = hull[j + 0]; + const p1 = hull[j + 1]; + const points = bresenham(p0, p1); + const isReversed = ( + (p0.x > p1.x && points[0].x < points[points.length - 1].x) + || (p0.y > p1.y && points[0].y < points[points.length - 1].y) + ); + for ( + let k = (isReversed ? points.length - 1 : 0); + (isReversed ? k >= 0 : k < points.length); + k += (isReversed ? -1 : 1) + ) { + const {x, y} = points[k]; + const ANGLE_SCALE = 1000; + const WALK_SCALE = 10; + const MAGNITUDE = ((tileSize.x + tileSize.y) / 2) * simplex2D(x * 100, y * 100); + const w = simplex2D(x * WALK_SCALE, y * WALK_SCALE); + const r = TAU * simplex2D(x * ANGLE_SCALE, y * ANGLE_SCALE) + ctx.lineTo( + x + Math.cos(r) * w * MAGNITUDE, + y + -Math.sin(r) * w * MAGNITUDE, + ); + } + } + ctx.closePath(); + ctx.fill(); + } + return Texture.from(canvas); +} +