Skip to content

ARCHITECTURE.md

Latest commit

 

History

History
76 lines (49 loc) · 3.69 KB

ARCHITECTURE.md

File metadata and controls

76 lines (49 loc) · 3.69 KB
Raw

High level code structure

The main.effekt file is responsible for the web interface and user interaction.
The Wave Function Collapse implementation is located in the wfc folder.
The FFI and wrappers are located in the lib folder and the ffi.effekt file. \

Some files have a /* Interface */ section at the bottom that lists the main functions that are intended to be used by other files. Each file contains a more detailed description of its contents and purpose, but here is a brief overview of the files:

Web Interface

main.effekt
Contains all the layouting and updating of the web interface See the createWFCContext function for handling of user data & the render function for updating the DOM grid

Wave Function Collapse Implementation

adjacency.effekt
Contains the core logic for rule generation based on a uploaded ruleset image

wfc1.effekt
First, naive implementation of the Wave Function Collapse algorithm. Not used anymore, but kept for reference.
This implementation uses backtracking search to find a valid tiling. Uses a effect handler to generate all valid permutations of tile placements.

wfc2.effekt
Current implementation of the Wave Function Collapse algorithm, using propagation.
See the wfcStateGrid function for initializing a new grid.
See the other functions described below the wfcStateGrid function, like step or solve, to run the algorithm.

FFI and Wrappers

ffi.effekt
This file contains the full ffi to javascript (FFI namespace)
These functions should never be used directly, but rather through the wrappers (see below)

dom.effekt
Wrapper around the ffi functions for DOM manipulation (FFI::DOM namespace)
These functions are mainly used in the main file to layout the web interface. Here are many effects for handling styling and creation of HTML elements (HTMLElement, SetProperty and Attribute) The Popup effect is also defined here to display error messages to the user.

canvas.effekt
Wrapper around the ffi functions for canvas manipulation (FFI::Canvas namespace)
These functions are used to create and manipulate canvas elements and images.
Also used for drawing elements onto a canvas (see Surface2D effect) and extracting pixel data from images.

array.effekt
Wrapper around the ffi functions for array manipulation (FFI::Array namespace)
Used for manipulating arrays of tiles and rules. These wrap existing javascript array methods.
Arrays are mainly used for better speed.

color.effekt
Color utilities. Used to extract rules from images. Uses a String interpolation effect for the css format and the .show() method for debugging.

Maintenance

The core WFC algorithm should be relatively stable, as well as the FFI and the wrappers, as they use stable javascript APIs. As i use buildin Effekt arrays, there might be some problems in the future, when a diffrent array implementation is used, as the FFI functions are tightly coupled to the default javascript array implementation.

WFC Algorithm references & other implementations