Skip to main content
100%

wfc with edge labels in clingo

✓ Published0🌍 Public
Aaman-tiwari
Last edited Nov 17, 2017
Created on Nov 17, 2017

This visualization generates a 3×3 tile grid using Answer Set Programming in Clingo, where each cell is assigned a tile pattern (straight, corner, or empty) with edge labels indicating path or empty connections. The grid must satisfy adjacency constraints so that neighboring tile edges are connectable, and every pattern appears at least once. The logic program defines tile rotations, legal neighbor relationships via the `legal/4` predicate, and enforces consistency through integrity constraints. The example demonstrates constraint-based procedural generation of a complete, valid wfc-style layout without external rendering libraries.

AI-generated description

Similar vizzes

Loading thumbnail…

wfc in clingo?

This example shows a constraint-solving approach to generating a grid of tiles, where each cell is assigned one of two patterns (a or b) so that adjacent cells follow a set of legal pairings. It encodes the Wave Function Collapse algorithm as an answer-set program in Clingo, using a 5×5 grid defined by `cell(1..n, 1..n)` and rules that generate exactly one assignment per cell. The constraints check every adjacent pair via `dx` offsets and forbid any neighbor combination not listed in the `legal` facts. The output is the `assign/3` relation, which reveals the resulting tile layout.

Aaman-tiwari
84% match
Loading thumbnail…

asp map generation with connectivity constraints

An Answer Set Programming (ASP) constraint solver generates a 5x5 tile map where each cell is assigned a path tile (straight, corner, plus, or empty), subject to edge-matching and global connectivity rules. The visualization renders the resulting tile grid and highlights edges between walkable adjacent tiles, using the ASP solver to enforce that all tiles appear and that the top-left and bottom-right corners are connected through a continuous path.

Aaman-tiwari
62% match
Loading thumbnail…

Gist 51c01feaecb233e0500851a1bb5ee30b

This visualization displays the 93 isohedral tilings classified by their wallpaper group and tile shape. Each entry is represented as a small, clickable tile diagram, arranged in a grid. The code uses SVG paths to draw the geometric patterns and labels each with its IH number and group. The data comes from the provided TSV file, which is loaded and parsed to generate the layout.

Aandybak
56% match
Loading thumbnail…

Gist 2bba23d8eda3ce767e87a6a491773372

The visualization is a scatterplot-style mosaic representing a 1000x1000 grid, plotting the positions and sizes of 234 rectangular claims from an Advent of Code puzzle. Overlapping rectangles accumulate, creating a dense heatmap-like field of colored blocks on a dark background. Built with Processing, the sketch loads the claim data from `aoc3_1.txt` and renders each rectangle using `rect()`, varying color intensity based on overlap count. The code uses `loadStrings()` to parse the input file and calls `noLoop()` to draw the static result once.

BBBischof
55% match
Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel
54% match
Loading thumbnail…

Pseudo Waffle Chart

This pseudo waffle chart displays a grid of rounded rectangular cells, with purple cells in the lower-left portion and gray cells filling the remainder. The visualization mimics the appearance of a waffle chart without using a dedicated charting library, instead rendering directly through SVG elements defined in the HTML. The React framework structures the component, while the SVG markup handles the visual output, positioning each 30x30 pixel rectangle with explicit coordinates and fill colors to create the patterned composition.

Hhquazza@gmail.com
54% match
Loading thumbnail…

box-edges

This example demonstrates a computational process that densely packs a set of progressively smaller squares onto a canvas. Starting from a single edge, the algorithm iteratively adds new squares by placing them adjacent to existing edges, checking for intersections, and splitting overlapping edges into new segments. The visualization updates at regular intervals, with the final layout rendered as a network of black lines. The code uses D3.js for SVG rendering and animation, along with utility functions from the lodash library (`_.sortBy`) and a custom tooltip system.

11wheel
53% match
Loading thumbnail…

Cellular automata

A one-dimensional cellular automaton stands at the center of this visualization, which arranges all 256 possible nearest-neighbor rules in a grid. The display uses a tile-based procedural map via Polymaps, with a worker script (`cell-worker.js`) computing each rule’s evolution from a random initial state. Color intensity indicates cell state, and zooming reveals the structure of individual rules. The rendering leverages Polymaps’ `po.map`, `po.procedural`, and `po.hash` APIs, while the worker handles the pixel-level computation and postMessage communication, following the example from MathWorld.

Mmbostock
53% match