Staaarter Tools

Integer Circle Drawer

Draws a square ASCII grid of size (2*radius+1), filling the cells whose distance from the grid's center is close enough to the given radius with consecutive integers (0, 1, 2, ...) in row-major scan order, tracing a ring; all other cells show as ".". Uses a simple per-cell distance threshold rather than a true circle-drawing algorithm. A free online tool from Staaarter, right in your browser.

Runs locallyUpdated 2026-07-27
integerascii-artgenerator

Overview

Introduction

This tool draws a simple ASCII ring shape by filling the cells of a square grid that sit close enough to a given radius from the center, numbering them consecutively as it scans row by row.

It deliberately trades circle-drawing precision for simplicity: a plain distance-threshold test decides which cells are 'on' the ring, rather than a proper circle-rasterization algorithm.

What Is Integer Circle Drawer?

An ASCII-art generator that draws a ring pattern of consecutive integers inside a (2*radius+1)-by-(2*radius+1) square grid.

Cells whose distance from the grid's center is within a small threshold of the chosen radius are filled with the next integer in row-major scan order; every other cell shows as ".".

How Integer Circle Drawer Works

For a chosen radius, the grid size is 2*radius+1, so the center cell sits at coordinates (radius, radius).

Every cell's Euclidean distance from that center is computed, and the cell is considered 'on' the ring if the absolute difference between that distance and the radius is less than 0.75, a simple fixed threshold rather than a proper rasterization algorithm.

The grid is then scanned row by row, left to right, assigning consecutive integers (0, 1, 2, ...) to every 'on' cell in that scan order; every cell, filled or blank, is padded to the width of the largest index used so columns stay aligned.

When To Use Integer Circle Drawer

Use it for decorative ASCII art or a quick visual ring pattern for a text-based diagram or demo.

It's also a simple, readable illustration of how a distance-threshold test can approximate a circle without implementing a full rasterization algorithm.

Often used alongside Integer Diamond Drawer, Integer Box Drawer and Integer Spiral Drawer.

Features

Advantages

  • Simple to understand: a single distance-from-center comparison decides every cell, no specialized circle-drawing algorithm required.
  • Deterministic: the same radius always produces the exact same ring pattern and numbering.
  • Column alignment is preserved automatically regardless of how many digits the ring's numbers need.

Limitations

  • Uses a simple `Math.abs(distanceFromCenter - radius) < 0.75` threshold rather than a true midpoint-circle (Bresenham) algorithm, so the ring's thickness can be visibly uneven at some angles, particularly for small radii.
  • Only supports radii from 3 to 20; smaller radii don't leave enough room for a recognizable ring, and larger ones would produce an unwieldy grid.
  • Purely decorative ASCII art; the numbering is just a row-major counting sequence, not a mathematically meaningful labeling.

Examples

A radius-3 ring

Input

3

Output

 .  0  1  2  3  4  .
 5  6  .  .  .  7  8
 9  .  .  .  .  . 10
11  .  .  .  .  . 12
13  .  .  .  .  . 14
15 16  .  .  . 17 18
 . 19 20 21 22 23  .

A 7x7 grid (2*3+1) with the ring cells (those within 0.75 of distance 3 from center) numbered 0 through 23 in row-major order.

Grid size scales with radius

Input

4

Output

 .  .  0  1  2  3  4  .  .
 .  5  6  .  .  .  7  8  .
 9 10  .  .  .  .  . 11 12
13  .  .  .  .  .  .  . 14
15  .  .  .  .  .  .  . 16
17  .  .  .  .  .  .  . 18
19 20  .  .  .  .  . 21 22
 . 23 24  .  .  . 25 26  .
 .  . 27 28 29 30 31  .  .

A radius of 4 grows the grid to 9x9 (2*4+1) and yields 32 ring cells, numbered 0 through 31 in row-major order.

Best Practices & Notes

Best Practices

  • Expect a slightly imperfect ring shape at small radii; the simplified threshold test is most visually convincing at moderate-to-large radii.
  • View the output in a monospace font/context so the grid's columns stay visually aligned.

Developer Notes

Deliberately uses a simple per-cell threshold test, `Math.abs(distanceFromCenter - radius) < 0.75`, instead of a true midpoint-circle (Bresenham) rasterization algorithm; this is a documented simplification that trades some ring evenness for a much simpler, easier-to-read implementation, consistent with this category's other honestly-simplified ASCII-art drawers.

Integer Circle Drawer Use Cases

  • Decorative ASCII art for a text file, README, or comment block
  • Illustrating a simple distance-threshold approach to circle approximation
  • Generating a quick ring-shaped placeholder pattern for a mockup

Common Mistakes

  • Expecting a mathematically perfect circle; the simplified threshold test can produce a slightly uneven ring, especially at small radii.
  • Viewing the output in a proportional font, where the grid's columns won't visually align.
  • Assuming the numbering follows the ring's angular order; it follows row-major scan order instead, so consecutive numbers aren't necessarily adjacent on the ring.

Tips

  • Try a radius of 8-12 for a ring that reads clearly as circular despite the simplified threshold test.
  • Compare a few different radii side by side to see how the ring's evenness improves as the radius grows.

References

Frequently Asked Questions