let tool, wfcTool;

let viewport, viewportCached;

let formulae;

var canvas;

​

​

    // Colors for symbols

    const colors = {

        '@': [255, 0, 0], // Red

        '.': [0, 255, 255] // Cyan

    };

​

​

function setup() {

    canvas = createCanvas(400,400)

    initializeWFC();

​

​

    viewport = {

        x: 0,

        y: int(height * 0.1),

        w: width,

        h: int(height * 0.8)

    };

​

    // Initialize viewportCached with the same values to avoid "no cache" on first run

    viewportCached = { ...viewport };

    frameRate(30);

}

​

function draw() {

    // background(220);

    updateWFC();

​

    // Pass the canvas.elt to use the underlying canvas element with WFCTool2D

    // tool.plotWFCOutput(canvas.elt, viewport, wfc.readout());

  renderWFC()

​

}

​

function initializeWFC() {

    tool = new WFCTool2D();

    // Define tiles

    // tool.addTile('...\n.@@\n...',

    //             {weight: 0.1}); // Open pipe end (for top and bottom rows)

    tool.addTile('.@.\n.@@\n.@.'); // T split

​

    // Define your tiles and transformations

    // tool.addTile('.@.\n.@@\n...');

    // tool.addTile('.@.\n.@.\n.@.', { transformations: ['cw'] });

    tool.addTile('...\n...\n...', { transformations: [], weight: 0.1 });

    // Add colors

    tool.addColor("@", [255, 0, 0]);

    tool.addColor(".", [0, 255, 255]);

​

    // Generate WFC input and initialize WFC with it

    formulae = tool.getTileFormulae()

  print('folrumula1', formulae)

    var wfcInput = tool.generateWFCInput();

    wfc = new WFC(wfcInput);

    // size = 3

    // nomrmally this thing is [-size, -size], -[size,size]

    // be sure to adapt drawTile too when adapting this and dont forget

    // to add 1 to the persumed y difference because idfk

    wfc.expand([-3,-2],[3,2])

    var canvas2 = document.createElement("canvas");

}

​

function updateWFC() {

    let done = false;

    try {

        done = wfc.step();

    } catch (error) {

        console.error("Error in WFC step:", error);

        // Handle error or reset WFC as needed

    }

    if (done) {

        noLoop()

    }

}

​

​

​

function renderWFC() {

    // Example rendering code

    // Replace this with your own rendering logic

    const tiles = wfc.readout();

    const dx = width/6

    const dy = height/5  // idfk why i had to add 1. pisses me off.

    for (let coord in tiles) {

        // Extract coordinates

        let [x, y] = coord.split(',').map(Number);

​

        // Adjust coordinates based on viewport

        x = map(x, -3,3, viewport.x, viewport.x + viewport.w);

        y = map(y, -2,2, viewport.y, viewport.y + viewport.h);

​

        // Draw tiles

        print(formulae[tiles[coord]])

        drawTile(x, y, dx,dy, formulae[tiles[coord]]); // Draw rectangle for each tile

    }

​

}

​

​

function drawTile(x, y, w, h, tileFormula) {

    // Assuming the tile formula is [index, transformation, pattern]

    const pattern = tileFormula[2];

​

    // Size of each cell in the tile

    const cellWidth = w/3

    const cellHeight = h/3

​

    // Draw each cell of the tile

    for (let row = 0; row < 3; row++) {

        for (let col = 0; col < 3; col++) {

            const symbol = pattern[row][col]; // Get the symbol for this cell

​

            // Set the fill color based on the symbol

            fill(colors[symbol][0], colors[symbol][1], colors[symbol][2]);

​

            // Draw the cell

            rect(x + col * cellWidth, y + row * cellHeight, cellWidth, cellHeight);

        }

    }

}

​