From Flat Grid to Radial Pattern: A Design Grammar Tutorial
This tutorial explains why certain flat 2D patterns turn into specific radial shapes when mapped onto a polar (rasmala-style) LED layout — both the plain-language intuition for sketching by hand, and the math behind each one.
1. The Core Idea: Two Coordinate Systems, One Mapping
Picture your flat pattern grid as a rectangle: columns running left to right, rows running top to bottom. In coordinates, that's (x, y):
x= column index (0 to width-1)y= row index (0 to height-1)
Your radial preview uses polar coordinates instead:
angle (θ)= how far around the circleradius (r)= how far from the center
The pattern designer's job is to convert (x, y) → (θ, r). The standard mapping is:
θ = (x / width) * 2π // x sweeps around the full circle
r = r_min + (y / height) * (r_max - r_min) // y sweeps from inner void to outer edge
In plain terms: x becomes angle, y becomes radius. Every pattern rule below is just a consequence of this one mapping.
Put another way, without the formulas: imagine wrapping that flat rectangle into a circle, like rolling a strip of paper into a tube and then flattening it onto a disc.
- Left-to-right (columns) becomes going AROUND the circle. The far-left column and the far-right column touch each other — they become the same spot, like the two ends of the strip glued into a ring.
- Top-to-bottom (rows) becomes going FROM THE CENTER OUT TO THE EDGE. The top row becomes the center of the circle (or the inner void), and the bottom row becomes the outer rim.
A quick way to picture it: hold a paper fan closed flat — that's your rectangle. Now open it into a fan shape. The straight edge you were holding becomes the center point; the curved edge on top becomes the outer rim; and the left and right sides of the paper come together to close the circle. Any mark you made on the flat paper lands in the matching spot once it's fanned open.
2. The Design Grammar, Explained
Vertical stripe (fixed x) → Straight ray
By hand: on your flat grid, draw one plain vertical line — pick one column and color it top to bottom.
Why: a single column means you've picked one fixed spot "around the circle" and colored every distance "from center to edge" at that spot. That's a straight line shooting out from the middle, like a spoke on a wheel.
The math: a vertical stripe holds x constant and lets y vary from top to bottom. Since x maps to angle, holding x fixed means holding θ fixed. Varying y just sweeps r from center to edge. A fixed angle + varying radius is, by definition, a straight line from the center outward — a ray.
How to draw more rays: repeat the same vertical line at evenly spaced columns. Four evenly spaced vertical lines across your grid become 4 rays coming out of the center, like a plus sign or an asterisk.
Horizontal stripe (fixed y) → Ring / band
By hand: on your flat grid, draw one plain horizontal line — pick one row and color it all the way across, left to right.
Why: a single row means you've picked one fixed "distance from center" and colored every position "around the circle" at that distance. That traces a full ring.
The math: a horizontal stripe holds y constant and lets x vary across the full width. Fixed y means fixed r. Varying x across the whole width sweeps θ through the entire 0–2π range at that same radius — which traces a full circle. That's a ring. (In terms of the mapping above: the resulting ring sits at radius r = r_min + (y0/height)*(r_max-r_min).)
How to draw more rings: draw several horizontal lines at different heights (rows). A line near the top of the grid becomes a ring close to the center; a line near the bottom becomes a ring near the outer edge.
Diagonal stripe → Spiral arm
By hand: on your flat grid, draw a line that slopes — starting at the top-left and gradually moving down and to the right as it goes, instead of staying in one column.
Why: as this line moves sideways it's slowly circling around, and at the same time it's moving downward, meaning it's steadily moving outward from center too. Something that circles around while steadily moving outward is a spiral.
The math: a diagonal line has both x and y changing together, proportionally (e.g. y = x, or more generally y = k*x + c). Since x → θ and y → r, a line where r increases steadily as θ increases is the textbook definition of an Archimedean spiral: r = a + b*θ.
How to control the spiral's tightness: a steep, sharp slant (the line drops quickly, i.e. larger k) makes a spiral that winds around several times before reaching the edge — a tight spiral. A gentle, shallow slant (the line drops slowly) makes a spiral that barely curves before reaching the edge — a loose spiral, almost like a single ray.
Zig-zag / triangle wave across x → Petals / points / starburst
By hand: on your flat grid, draw a repeating up-and-down zig-zag that runs left to right — like the peaks and valleys of a mountain range, or a heart-rate monitor line. But instead of just drawing the outline, color in everything underneath each peak (from the top row down to wherever the peak reaches).
Why: each time the wave rises to a peak, you're coloring a spot that reaches further from center at that particular position around the circle. Each time it dips to a valley, that spot pulls back in toward center. Going all the way around, this creates a shape that bulges out repeatedly — petals, points, or a starburst.
The math: a zig-zag or triangle wave repeats a rise-and-fall pattern in y as x increases — think a sawtooth or triangle waveform plotted across the row. Because x becomes angle, that repeating rise-and-fall in y (radius) becomes a repeating rise-and-fall in radius as you go around the circle. Each "peak" of the wave becomes a point that reaches further from center; each "trough" pulls back in — visually, petals or a starburst.
How to control the number of petals: count how many full peaks your zig-zag has across the width of the grid — that number of zig-zag repetitions across the width directly controls the number of petals/points in the radial result. Eight peaks across the grid = an 8-petal flower shape. Fewer, wider peaks give fewer, fatter petals. More, narrower peaks give more, thinner points — more starburst-like.
Radial gradient (color changes with y) → Rings blooming outward
By hand: instead of drawing lines, think about color. Make the top row one color (say, white) and gradually blend it into another color (say, deep red) by the bottom row — and make every column look exactly the same, like one horizontal gradient stripe repeated all the way across.
Why / the math: if color is a function of y only (color = f(y)), and every column has the identical gradient, then color depends only on radius, not angle. Since color depends only on r, you get concentric bands of color — smoothly transitioning rings that "bloom" outward from center to edge, like ripples in a pond, or a flower blooming outward.
Gradient changing with x → Rotating hue wheel
By hand: flip it: make the color change gradually as you move left to right across the grid — say, cycling through the full rainbow — and make every row identical, so top to bottom looks the same at any given column.
Why / the math: if color is a function of x only (color = f(x)), and it's identical for every row, then color depends only on angle, not radius. Since color depends only on θ, you get a full-circle color wheel — same color all the way from center to edge along any given ray, but different from ray to ray. If f(x) is a hue cycle (e.g. hue = x/width, sweeping 0° to 360°), this becomes a classic rotating rainbow hue wheel.
3. Putting It Together: A Cheat Sheet
Plain-language quick reference:
| What you draw on the flat grid | What it looks like once wrapped into a circle |
|---|---|
| One plain vertical line | A single ray/spoke from center to edge |
| Several evenly spaced vertical lines | Multiple rays (like a wheel with spokes) |
| One plain horizontal line | A single ring |
| Several horizontal lines | Multiple concentric rings |
| A slanted diagonal line | A spiral arm |
| A steep diagonal | A tightly wound spiral |
| A shallow diagonal | A loose, barely-curving spiral |
| A zig-zag/triangle wave filled underneath | Petals / points / a starburst |
| More zig-zag peaks packed in | More, thinner petals |
| Top-to-bottom gradient, same in every column | Rings blooming outward from center |
| Left-to-right gradient, same in every row | A spinning rainbow/color wheel |
Technical cheat sheet:
| Which axis varies | Which axis is fixed | Radial result |
|---|---|---|
| y varies, x fixed | angle fixed | Ray |
| x varies, y fixed | radius fixed | Ring |
| both vary proportionally | — | Spiral |
| y oscillates as x sweeps | — | Petals/starburst |
| color = f(y) only | angle irrelevant | Concentric gradient rings |
| color = f(x) only | radius irrelevant | Rotating hue wheel |
The general rule: whatever varies with x repeats around the circle; whatever varies with y extends from center to edge. Once that clicks, you can predict the radial output of almost any flat pattern just by looking at which axis it depends on — which is exactly the kind of rule you'd want baked into a pattern generator's preset library instead of hand-tuning each design by trial and error.
4. The Golden Shortcut
Before drawing anything, ask yourself two questions:
- Does this shape mostly change as I move left-right (across columns)? → It will repeat around the circle (rays, rings-per-angle, petals, color wheels).
- Does this shape mostly change as I move top-bottom (down rows)? → It will extend outward from center to edge (rings, spirals' outward reach, blooming gradients).
Once you can answer those two questions for any doodle, you can predict what it'll look like radially — and design rasmala patterns confidently, without ever needing to see it wrapped into a circle first.
5. Where This Fits Your Pattern Designer
This grammar maps cleanly onto a preset-generator feature for your radial pattern designer:
- A "Ray count" control ↔ number of fixed-x stripes
- A "Ring count" control ↔ number of fixed-y stripes
- A "Spiral tightness" slider ↔ the slope
kof the diagonal - A "Petal count" control ↔ number of zig-zag repetitions
- Two gradient modes (radial vs. angular) ↔ color as f(y) vs. f(x)
Each of these could become a one-click preset that procedurally fills the flat grid using the formulas above, then lets the round preview render the result — no manual pixel painting required for these common motifs.



