Examples
hex color function
A function that creates random hex color values by concatenating random hex color components.
allows to adjust the colors for specific ranges in their channels.
Geometrical Shape
Adapted from Geometrical Shape, created by Julia Hilt.
Connected diagonals divide a square into shapes that can be read as lines, triangles, or one complete figure. This GIC adaptation demonstrates the law of continuity.
Pyramid
Adapted from Pyramid, created by Julia Hilt.
Two adjoining triangles form a simple pyramid whose contrasting faces suggest depth. This GIC adaptation demonstrates spatial form with shared edges and tonal contrast.
Proximity
Adapted from Proximity, created by Fabian Morón Zirfas.
Regular gaps divide one circle grid into several perceived groups. This GIC adaptation demonstrates the law of proximity with nested repetition and coordinate conditions.
Similarity
Adapted from Similarity, created by Fabian Morón Zirfas.
Alternating filled and outlined circles form horizontal groups within one regular grid. This GIC adaptation demonstrates the law of similarity through repeated shape and style.
Phyllotaxis
Adpated from https://jagi.studio/posts/phyllotaxis/.
In botany, phyllotaxis or phyllotaxy is the arrangement of leaves on a plant stem. Phyllotactic spirals form a distinctive class of patterns in nature.
Radial Arcs
Adapted from Arcs, created by Fabian Morón Zirfas.
Four heavy arc segments occupy one circular path, separated by narrow, evenly spaced gaps. Their degree-based rotation demonstrates closure: the eye completes the ring even though no full circle is drawn.
Triangle and Quad
Adapted from Triangle and Quad, created by Fabian Morón Zirfas.
Two outlined triangles overlap to suggest a skewed quadrilateral, yet each complete triangle remains the stronger perceived form. The fixed composition retains the source study's tension between closure and ambiguity.
Kanizsa's Triangle
Adapted from Kanizsa's Triangle, created by Fabian Morón Zirfas.
Three dark circular inducers are opened toward the same empty space, making a white triangle appear without drawing its edges. The composition demonstrates how closure turns carefully placed gaps into a convincing figure.
Rotate Rect
Adapted from Rotate Rect, created by Fabian Morón Zirfas.
The user-defined
rotate(x, y, width, height, angle)function draws a rectangle rotated around the canvas center. Itsxandydescribe the rectangle's center relative to that pivot, whileangleis measured in degrees. Sine and cosine calculate the four corners beforequaddraws the shape.A call at 13 degrees places a large white rectangle against a black ground. Its cropped edges make the tilted form read as a figure passing through the canvas. Change the angle in the call to explore the rotation.
corridor
Adapted from corridor, created by Julia Hilt.
Two mirrored fans narrow toward a short central passage. This GIC adaptation uses converging grid lines to explore the illusion of space through vanishing points.
Fishing Net
Adapted from Fishing Net, created by Edmundo Mejía Galindo.
Evenly spaced horizontal and vertical lines grow heavier across the canvas. This GIC adaptation preserves the fishing-net grid and its linear sense of vertigo.
Law of Clousure and Multistable Perception in a grid
Adapted from Law of Clousure and Multistable Perception in a grid, created by Edmundo Mejía Galindo.
Matching horizontal and vertical lines compress toward one corner and open into larger cells across the canvas. This seeded GIC adaptation explores shifting perceptions of proximity and depth in a grid.
Law of Symetry and Figured-Ground
Adapted from Law of Symetry and Figured-Ground, created by Edmundo Mejía Galindo.
Horizontal lines form a large diagonal field while a central square trades blank and vertically ruled halves across the same boundary. This GIC adaptation highlights symmetry, contrast, and figure-ground reversal.
Law of Symetry and chance
Adapted from Law of Symetry and chance, created by Edmundo Mejía Galindo.
Evenly spaced diagonals converge along one edge of a small outlined square, making a static construction appear to fold inward and move.
Hidden Room
Adapted from Hidden Room, created by Edmundo Mejía Galindo.
A regular field of horizontal lines stops around a centered square. The interruption turns empty space into a room-like figure.
lines
Adapted from lines, created by Julia Hilt.
Concentric outlines expand from opposite edges and overlap into a curved grid. Their dense intersections make a quieter rectangular region appear at the center.
Vision
Adapted from Vision, created by Fabian Morón Zirfas.
A heavy grid of vertical, horizontal, and diagonal strokes hides a regular pattern of small circles. Viewing the composition from farther away makes the circles easier to find.
Groups
Adapted from Groups, created by Fabian Morón Zirfas.
A random choice selects one of six discrete grid scales. Four larger squares form a short diagonal group, demonstrating how similar size makes repeated elements appear related.
Hidden Circles
Adapted from Hidden Circles, created by Natalie Schreiber.
A regular field of vertical lines is progressively concealed by expanding white outlines, leaving a rounded pattern visible through negative space. This static GIC adaptation demonstrates repetition and the law of connected elements.
10 PRINT
Based on Fabian's 10 PRINT sketch, this drawing makes a 20 by 20 field of diagonal strokes. Nested
repeatblocks visit each 5-pixel cell, while a seeded random choice selects the diagonal direction. Compare the regular grid with the unpredictable path.
Splatter
Adapted from Splatter, created by Fabian Morón Zirfas.
One hundred tiny circles vary in size and gather within a narrow range around a randomly selected point. This static GIC adaptation uses
randomSeed(1326)to make the chance-based composition deterministic.
Dancing Triangles
Adapted from Fabian's dancing triangles sketch, this composition places 100 irregular triangles across a dark square. A randomly rotated triangle uses irregular 100–120 degree gaps; a shared x/y jitter is rotated along with each vertex. Its radius follows the source's reciprocal random scale, giving radii from 4 to 20, and translucent pastel OKLCH fills retain the full 0–100 alpha range. Default black outlines remain. The original tall format is composed for GIC's square canvas.
Dashed Line
Based on Fabian's dashed-line sketch, ten short line segments form a 45-degree diagonal dash pattern. Their start points follow the original translated and rotated coordinates, stepping five pixels of dash and five pixels of gap in local space.
Polar Grid Rectangles
Adapted from Fabian's grid of rectangles sketch, this 9 by 9 grid turns each square's four corners around its center with sine and cosine. The rotation angle changes by column, from 0 to 80 degrees. Each corner uses the square's diagonal radius and a 45-degree base angle plus its column rotation, expressing the shape directly in polar coordinates. Default black outlines remain visible.
Nested-loop Bubbles
Based on Fabian's nested-loop bubbles sketch, nested repeats place 225 circles on a regular grid. Their radii scale from the original 25–70 pixel diameters to GIC radii of 3.125–8.75; translucent OKLCH hues range from 30 to 230. Black outlines are retained at quarter width to match the scaled source. The original 400-pixel square grid is scaled to fit the 100-pixel GIC canvas.
Checker Weave
Adapted from Fabian's weave-pattern sketch, this 5 by 5 checkerboard alternates cells of three horizontal lines with cells of three vertical lines. The cell index determines both its position and orientation, while one-pixel black strokes keep the weave crisp.
Adventskranz
Based on Fabian's polar-coordinate Adventskranz, seven passes draw 360 marks each around one ring, for 2,520 branches in total. Each position comes from a degree angle and radius; independently randomized local endpoints create varied branch directions and lengths. OKLCH strokes preserve the original 40–100 lightness and 260–350 hue ranges. The original 400-pixel ring is compacted for the square canvas.
Perspective Through Contrast
Adapted from Fabian's through-contrast sketch, a gray field and a lighter top band extending to 74 pixels frame two black-and-white rectangles at y=27 with a height of 66 pixels. The rectangles overlap both regions, so their contrast changes across the horizontal boundary. Their positions and sizes preserve the source's normalized composition on GIC's square canvas.
Cosine Graph
Based on Fabian's cosine-graph sketch, ten points trace one cosine cycle across the canvas. The gray horizontal and vertical lines are axes, and the curve's amplitude is reduced to 20 pixels so it fits the square surface. This is a static drawing of the source's cosine-only curve.
Circle bubbles
Adapted from Circles bubbles by Edmundo Mejía Galindo.
Expanding circle outlines overlap along a diagonal, retaining the original study of space, volume, and implied movement through changing scale.
House
Adapted from Fabian's house-relative sketch, this small scene uses a light-goldenrod background for a coral sun centered at (25, 50), a layered roof, house walls, and a two-color horizon at y=55. The shared ground line shows how related positions create a coherent composition.
Dots
Adapted from dots by Julia Hilt.
Three seeded rows vary their spacing and vertical position while preserving a clear left-to-right reading direction.
Perspective Through Shadow
Based on Fabian's shadow sketch, a small black triangle touches the lower-right corner of a white square. Their aligned edges make the triangle read as a cast shadow against a neutral gray ground.
Hairy Story
Adapted from Hairy Story by Edmundo Mejía Galindo.
A deterministic accumulation of oversized ellipse outlines creates a static irregular grid of arcs, preserving the original contrast between chaotic crossings and structured corners.
Mice Nip
Adapted from mice-nip, created by Julia Hilt.
Small circles take uneven bites from every edge of a dark square. This GIC adaptation uses seeded positional variation to preserve the original's playful, chance-shaped silhouette.
Random Circles
Adapted from the closely related p5.js Random Circles and Processing Random Circles, both created by Fabian Morón Zirfas.
Both originals express the same teaching idea with equivalent loop structure. This GIC adaptation follows the Processing version's opaque gray ground and outlined circles, with randomly chosen radii that vary between runs.
Popup Circles
Adapted from Popup Circles, created by Daniele Maselli.
A coherent purple selection holds a regular circle grid together while seeded, bounded diameters give every position a small crackle of variation.
OKLCH Triadic
Adapted from HSB, created by Fabian Morón Zirfas.
Three equal vertical fields hold chroma and lightness constant while shifting hue by 120 degrees. The study isolates hue contrast through fixed CSS colors and a simple triptych structure.
