- Drag the arrow on the map to set velocity
+ Drag arrow or use sliders • Enable Paint to reshape
`;
document.body.appendChild(popup);
- // Position popup near the plate centroid but in screen coords
- const svgRect = document.querySelector("svg").getBoundingClientRect();
const svgEl = document.querySelector("svg");
const ctm = svgEl.getScreenCTM();
const screenX = centroid[0] * ctm.a + ctm.e;
const screenY = centroid[1] * ctm.d + ctm.f;
-
popup.style.left = Math.min(screenX + 20, window.innerWidth - 220) + "px";
popup.style.top = Math.max(screenY - 60, 10) + "px";
- // Listeners
byId("popupPlateType").addEventListener("change", function () {
plate.isOceanic = this.value === "oceanic";
});
@@ -378,10 +371,8 @@ function redrawArrowForPlate(plate) {
const arrowScale = 30;
const [cx, cy] = centroid;
- const dx = plate.velocity[0] * arrowScale;
- const dy = -plate.velocity[1] * arrowScale;
- const tipX = cx + dx;
- const tipY = cy + dy;
+ const tipX = cx + plate.velocity[0] * arrowScale;
+ const tipY = cy + -plate.velocity[1] * arrowScale;
viewbox.select(`.velocityLine[data-plate="${plate.id}"]`)
.attr("x2", tipX).attr("y2", tipY);
@@ -394,14 +385,140 @@ function closePlatePopup() {
if (popup) popup.remove();
}
+// ---- Paint Mode ----
+
+function togglePaintMode() {
+ tectonicPaintMode = !tectonicPaintMode;
+ updatePaintButtonState();
+
+ if (tectonicPaintMode) {
+ if (tectonicSelectedPlate === -1) {
+ tip("Select a plate first (click on a plate), then paint to expand it", true, "warn");
+ tectonicPaintMode = false;
+ updatePaintButtonState();
+ return;
+ }
+ enterPaintMode();
+ } else {
+ exitPaintMode();
+ }
+}
+
+function updatePaintButtonState() {
+ const btn = byId("tectonicPaintToggle");
+ if (!btn) return;
+ btn.classList.toggle("pressed", tectonicPaintMode);
+ btn.textContent = tectonicPaintMode ? "Paint: ON" : "Paint";
+
+ const brushControls = byId("tectonicBrushControls");
+ if (brushControls) brushControls.style.display = tectonicPaintMode ? "block" : "none";
+}
+
+function enterPaintMode() {
+ tip(`Paint mode: drag on map to assign cells to Plate ${tectonicSelectedPlate}`, true, "warn");
+ viewbox.style("cursor", "crosshair");
+
+ // Add drag handler for painting
+ viewbox.call(
+ d3.drag()
+ .on("start", paintStart)
+ .on("drag", paintDrag)
+ .on("end", paintEnd)
+ );
+}
+
+function exitPaintMode() {
+ viewbox.style("cursor", "default");
+ // Restore default zoom behavior
+ viewbox.on(".drag", null);
+ svg.call(zoom);
+ removeBrushCircle();
+ clearMainTip();
+}
+
+function paintStart() {
+ if (!tectonicPaintMode || tectonicSelectedPlate === -1) return;
+ const [x, y] = d3.mouse(this);
+ paintCellsAt(x, y);
+}
+
+function paintDrag() {
+ if (!tectonicPaintMode || tectonicSelectedPlate === -1) return;
+ const [x, y] = d3.mouse(this);
+ moveBrushCircle(x, y);
+ paintCellsAt(x, y);
+}
+
+function paintEnd() {
+ if (!tectonicPaintMode) return;
+ removeBrushCircle();
+ // Redraw overlay to reflect changes
+ drawPlateOverlay();
+}
+
+function paintCellsAt(x, y) {
+ const r = tectonicBrushRadius;
+ const cellsInRadius = findGridAll(x, y, r);
+ if (!cellsInRadius || cellsInRadius.length === 0) return;
+
+ const generator = window.tectonicGenerator;
+ const plateIds = window.tectonicMetadata.plateIds;
+
+ // Reassign cells on the sphere
+ generator.reassignCells(cellsInRadius, tectonicSelectedPlate);
+
+ // Update grid-level metadata to match
+ for (const gc of cellsInRadius) {
+ plateIds[gc] = tectonicSelectedPlate;
+ }
+
+ // Update visual overlay for painted cells
+ const colors = tectonicPlateColors;
+ const cellGroup = viewbox.select("#plateCells");
+ for (const gc of cellsInRadius) {
+ const poly = cellGroup.select(`polygon[data-cell="${gc}"]`);
+ if (!poly.empty()) {
+ poly.attr("fill", colors[tectonicSelectedPlate])
+ .attr("stroke", colors[tectonicSelectedPlate])
+ .attr("data-plate", tectonicSelectedPlate)
+ .attr("fill-opacity", 0.55);
+ }
+ }
+}
+
+function moveBrushCircle(x, y) {
+ let circle = byId("tectonicBrushCircle");
+ if (!circle) {
+ const svg = viewbox.node().ownerSVGElement;
+ const ns = "http://www.w3.org/2000/svg";
+ circle = document.createElementNS(ns, "circle");
+ circle.id = "tectonicBrushCircle";
+ circle.setAttribute("fill", "none");
+ circle.setAttribute("stroke", tectonicPlateColors[tectonicSelectedPlate] || "#fff");
+ circle.setAttribute("stroke-width", "1.5");
+ circle.setAttribute("stroke-dasharray", "4,3");
+ circle.setAttribute("pointer-events", "none");
+ viewbox.node().appendChild(circle);
+ }
+ circle.setAttribute("cx", x);
+ circle.setAttribute("cy", y);
+ circle.setAttribute("r", tectonicBrushRadius);
+}
+
+function removeBrushCircle() {
+ const circle = byId("tectonicBrushCircle");
+ if (circle) circle.remove();
+}
+
// ---- Actions ----
function regenerateFromEditor() {
const generator = window.tectonicGenerator;
if (!generator) return tip("No tectonic generator available", false, "error");
- tip("Regenerating terrain preview...", true, "warn");
+ if (tectonicPaintMode) { exitPaintMode(); tectonicPaintMode = false; updatePaintButtonState(); }
closePlatePopup();
+ tip("Regenerating terrain preview...", true, "warn");
setTimeout(() => {
try {
@@ -432,6 +549,7 @@ function regenerateFromEditor() {
function applyToMap() {
if (!window.tectonicGenerator) return tip("No tectonic generator available", false, "error");
+ if (tectonicPaintMode) { exitPaintMode(); tectonicPaintMode = false; updatePaintButtonState(); }
closePlatePopup();
closeTectonicEditor();
$("#tectonicEditor").dialog("close");
@@ -520,6 +638,7 @@ function togglePlateOverlay() {
}
function closeTectonicEditor() {
+ if (tectonicPaintMode) { exitPaintMode(); tectonicPaintMode = false; }
closePlatePopup();
viewbox.select("#tectonicOverlay").remove();
d3.select("#tectonicArrowhead").remove();
diff --git a/src/index.html b/src/index.html
index dac015ac..097123af 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4108,10 +4108,17 @@
Click a plate to edit. Drag arrows to set velocity.
+
-
+
+
+
+
+ 10
+
diff --git a/src/modules/tectonic-generator.ts b/src/modules/tectonic-generator.ts
index 7651b984..9e46dc18 100644
--- a/src/modules/tectonic-generator.ts
+++ b/src/modules/tectonic-generator.ts
@@ -221,6 +221,9 @@ export class TectonicPlateGenerator {
private plates: TectonicPlate[] = [];
private boundaries: PlateBoundary[] = [];
+ // Grid→sphere mapping for editor cell reassignment
+ private gridToSphere!: Int32Array;
+
// Seeded PRNG for deterministic elevation pipeline
private elevationSeed: number = 0;
private rng: () => number = Math.random;
@@ -291,6 +294,27 @@ export class TectonicPlateGenerator {
return this.projectAndFinalize();
}
+ // Reassign grid cells to a different plate, propagating to sphere faces
+ reassignCells(gridCells: number[], newPlateId: number): void {
+ if (newPlateId < 0 || newPlateId >= this.plates.length) return;
+
+ for (const gc of gridCells) {
+ if (gc < 0 || gc >= this.numGridCells) continue;
+
+ // Find current plate and remove from it
+ const sphereFace = this.gridToSphere[gc];
+ if (sphereFace >= 0) {
+ const oldPlateId = this.plateAssignment[sphereFace];
+ if (oldPlateId >= 0 && oldPlateId < this.plates.length) {
+ this.plates[oldPlateId].cells.delete(sphereFace);
+ }
+ // Assign to new plate on sphere
+ this.plateAssignment[sphereFace] = newPlateId;
+ this.plates[newPlateId].cells.add(sphereFace);
+ }
+ }
+ }
+
// Get current plates for editor access
getPlates(): TectonicPlate[] {
return this.plates;
@@ -1053,6 +1077,7 @@ export class TectonicPlateGenerator {
// y: 0..gridHeight → lat: π/2..-π/2 (top = north pole, bottom = south pole)
const gridElevations = new Float32Array(this.numGridCells);
const gridPlateIds = new Int8Array(this.numGridCells).fill(-1);
+ this.gridToSphere = new Int32Array(this.numGridCells).fill(-1);
// Build a bucketed spatial index for fast nearest-face lookup
const lonBuckets = 72; // 5° per bucket
@@ -1122,6 +1147,7 @@ export class TectonicPlateGenerator {
gridElevations[gi] = this.elevations[bestFace];
gridPlateIds[gi] = this.plateAssignment[bestFace];
+ this.gridToSphere[gi] = bestFace;
}
// Light smoothing to remove pixelation from sphere→grid sampling