Organic Quads
Helper class to create hexagonal shapes filled with organic looking quads.
Usage:
import OrganicQuads from "@fforw/organic-quads";
const og = new OrganicQuads(config);Configuration
const DEFAULT_CONFIG = {
// coordinate width
width: 0,
// coordinate height
height: 0,
// number of rings in the hexagon / number of base intersections of hexaxgon
numberOfRings: 5,
// how many percent of the edges shall we attempt to remove?
removeEdges: 50,
// if true, the graph will be layouted a bit with every render. If false, the graph relaxation happens at creation
animatedEasing: true,
};The graph will be centered in the window given by width/height and scaled so that it fits the smaller dimension height.
Number of Rings
The diagram shows a graph with "removeEdges" set to 0 and "numberOfRings" set to 1.
I marked triangles of the initial ring and the one additional ring in the first sector of the hexagon.
Each base face is divided once to have only quads. Every triange here is subdivided into 3 quads.
Every removed edge turns two base triangles into one base quad which is then subdivided into 4 quads.
Relaxing the graph after removing the edges gives it the organic shape.