pixelated circle

3 min read 21-10-2024

Crafting Pixelated Circles: A Deep Dive

The pixelated circle, a simple yet captivating visual, is a staple in retro gaming, pixel art, and even modern design trends. But how do you create one in a digital world where pixels reign supreme? This article delves into the fascinating world of pixelated circles, exploring the techniques and tools used to craft these iconic shapes.

Understanding the Challenge

Before we jump into the creation process, it's important to understand the inherent challenge of creating a perfect circle with pixels. Unlike smooth curves, circles in pixel art rely on a series of discrete dots, making perfect roundness impossible to achieve. The goal then, is to create a convincing approximation, a circle that, while not perfectly smooth, still evokes the essence of the shape.

Methods for Pixelated Circle Creation

1. The "Bresenham's Line Algorithm" Approach:

This algorithm, widely used in computer graphics, provides a computationally efficient way to draw lines. But it can be adapted to create circles, as highlighted in this GitHub code snippet from the libgdx library:

  public void circle (float x, float y, float radius) {
    float r = radius;
    float r2 = r * r;
    int x0 = (int)x;
    int y0 = (int)y;
    int x1 = x0 + (int)Math.ceil(r);
    int y1 = y0;
    int dx = 1;
    int dy = 0;
    int err = (int)(dx - 2 * r);

    while (x0 >= y0) {
      plot(x0, y0);
      plot(x0, y1);
      plot(x1, y0);
      plot(x1, y1);

      x0--;
      y0++;
      y1--;
      if (err < 0) {
        err += 2 * dx + 1;
      } else {
        err += 2 * (dx - dy) + 1;
        dy = dx;
        dx = -dy;
      }
    }

    x1 = y0;
    y0 = x0;
    dx = 1;
    dy = 0;
    err = (int)(dx - 2 * r);

    while (y0 >= x0) {
      plot(x0, y0);
      plot(x0, y1);
      plot(x1, y0);
      plot(x1, y1);

      x0++;
      y0--;
      y1++;
      if (err < 0) {
        err += 2 * dx + 1;
      } else {
        err += 2 * (dx - dy) + 1;
        dy = dx;
        dx = -dy;
      }
    }
  }

This code snippet cleverly iterates through pixel coordinates, drawing points based on the calculated error. It's a powerful method, but requires careful understanding of the underlying algorithm.

2. The "Midpoint Circle Algorithm" Approach:

This method offers a more intuitive approach, utilizing the concept of a circle's midpoint to determine pixel placement. It's beautifully illustrated in this GitHub repository:

import matplotlib.pyplot as plt
import numpy as np

def midpoint_circle(xc, yc, radius):
    x = radius
    y = 0
    d = 1 - radius

    plt.plot(xc + x, yc + y, 'ro')
    plt.plot(xc - x, yc + y, 'ro')
    plt.plot(xc + x, yc - y, 'ro')
    plt.plot(xc - x, yc - y, 'ro')
    plt.plot(xc + y, yc + x, 'ro')
    plt.plot(xc - y, yc + x, 'ro')
    plt.plot(xc + y, yc - x, 'ro')
    plt.plot(xc - y, yc - x, 'ro')

    while x > y:
        y += 1
        if d < 0:
            d += 2 * y + 1
        else:
            x -= 1
            d += 2 * (y - x) + 1
        
        plt.plot(xc + x, yc + y, 'ro')
        plt.plot(xc - x, yc + y, 'ro')
        plt.plot(xc + x, yc - y, 'ro')
        plt.plot(xc - x, yc - y, 'ro')
        plt.plot(xc + y, yc + x, 'ro')
        plt.plot(xc - y, yc + x, 'ro')
        plt.plot(xc + y, yc - x, 'ro')
        plt.plot(xc - y, yc - x, 'ro')

    plt.axis('equal')
    plt.show()

midpoint_circle(0, 0, 5)

This Python script, using the midpoint circle algorithm, draws a circle on a matplotlib plot. It highlights the elegance of the method, as it iteratively calculates the next pixel location based on the current midpoint position.

3. The "Manual" Approach:

For smaller circles, or those requiring precise pixel control, manual placement offers an artistic approach. This GitHub repository showcases a hand-drawn pixelated circle, demonstrating the artistry possible through meticulous pixel manipulation.

Beyond the Basic Circle

Once you have a fundamental understanding of creating pixelated circles, you can experiment with variations. You can create "wobbly" circles, circles with different thicknesses, or even circles with specific pixel patterns to create interesting visual effects. These variations offer unique possibilities for creating distinct and captivating pixel art.