riki/rkgk
riki/rkgk
1
Fork 0
Code Issues 57 Pull requests Projects 1 Activity

removing server-side brush rendering

Browse source 
brush rendering is now completely client-side.
the server only receives edits the client would like to do, in the form of PNG images of chunks, that are then composited onto the wall

known issue: it is possible to brush up against the current 256 chunk edit limit pretty easily.
I'm not sure it can be solved very easily though. the perfect solution would involve splitting up the interaction into multiple edits, and I tried to do that, but there's a noticable stutter for some reason that I haven't managed to track down yet.
so it'll be kinda crap for the time being.
This commit is contained in:
りき萌 2025-06-30 00:48:49 +02:00
parent 15a1bf8036
commit bff899c9c0
24 changed files with 613 additions and 1170 deletions
Download patch file Download diff file Expand all files Collapse all files

48
static/painter.js
View file

@ -1,10 +1,20 @@
import { listen } from "rkgk/framework.js";
function* chunksInRectangle(left, top, right, bottom, chunkSize) {
let leftChunk = Math.floor(left / chunkSize);
let topChunk = Math.floor(top / chunkSize);
let rightChunk = Math.ceil(right / chunkSize);
let bottomChunk = Math.ceil(bottom / chunkSize);
function numChunksInRectangle(rect, chunkSize) {
let leftChunk = Math.floor(rect.left / chunkSize);
let topChunk = Math.floor(rect.top / chunkSize);
let rightChunk = Math.ceil(rect.right / chunkSize);
let bottomChunk = Math.ceil(rect.bottom / chunkSize);
let numX = rightChunk - leftChunk;
let numY = bottomChunk - topChunk;
return numX * numY;
}
function* chunksInRectangle(rect, chunkSize) {
let leftChunk = Math.floor(rect.left / chunkSize);
let topChunk = Math.floor(rect.top / chunkSize);
let rightChunk = Math.ceil(rect.right / chunkSize);
let bottomChunk = Math.ceil(rect.bottom / chunkSize);
for (let chunkY = topChunk; chunkY < bottomChunk; ++chunkY) {
for (let chunkX = leftChunk; chunkX < rightChunk; ++chunkX) {
yield [chunkX, chunkY];
@ -12,17 +22,13 @@ function* chunksInRectangle(left, top, right, bottom, chunkSize) {
}
}
export function renderToChunksInArea(wall, renderArea, renderToPixmap) {
for (let [chunkX, chunkY] of chunksInRectangle(
renderArea.left,
renderArea.top,
renderArea.right,
renderArea.bottom,
wall.chunkSize,
)) {
let chunk = wall.getOrCreateChunk(chunkX, chunkY);
let translationX = -chunkX * wall.chunkSize;
let translationY = -chunkY * wall.chunkSize;
export function renderToChunksInArea(layer, renderArea, renderToPixmap) {
for (let [chunkX, chunkY] of chunksInRectangle(renderArea, layer.chunkSize)) {
let chunk = layer.getOrCreateChunk(chunkX, chunkY);
if (chunk == null) continue;
let translationX = -chunkX * layer.chunkSize;
let translationY = -chunkY * layer.chunkSize;
let result = renderToPixmap(chunk.pixmap, translationX, translationY);
chunk.markModified();
if (result.status != "ok") return result;
@ -41,13 +47,19 @@ export function dotterRenderArea(wall, dotter) {
};
}
export function selfController(interactionQueue, wall, event) {
export function selfController(interactionQueue, wall, layer, event) {
let renderArea = null;
return {
async runScribble(renderToPixmap) {
interactionQueue.push({ kind: "scribble" });
if (renderArea != null) {
return renderToChunksInArea(wall, renderArea, renderToPixmap);
let numChunksToRender = numChunksInRectangle(renderArea, layer.chunkSize);
let result = renderToChunksInArea(layer, renderArea, renderToPixmap);
if (!layer.canFitNewChunks(numChunksToRender)) {
console.debug("too many chunks rendered; committing interaction early");
event.earlyCommitInteraction();
}
return result;
} else {
console.debug("render area is empty, nothing will be rendered");
}