cha0s/silphius
1
1
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: no layer masks for now

Browse Source
This commit is contained in:
cha0s 2024-07-10 16:48:36 -05:00
parent f9bf9096ee
commit 4397011b25
2 changed files with 56 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app/react-components/ecs.jsx
View File

@ -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 && (
<TileLayer
mask={mask}
filters={filters}
tileLayer={layer1}
/>
@ -198,7 +138,6 @@ export default function Ecs({applyFilters, scale}) {
</Container>
{WaterEcs && (
<Water
mask={mask}
tileLayer={layer0}
water={WaterEcs.water}
/>

56
app/util/noise.js Normal file
View File

@ -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);
}