Pixelate Ellipse Shape

[AndJ]

As I was working through a project, I was wondering if there was a way to make a “pixelated ellipse” in Processing (I have provided an example of what I was thinking). I don’t want to have to import an image.

[KevinWho]

You might be able to use PGraphics.

https://processing.org/reference/PGraphics.html

Make a circle on there and scale it up. It may try auto anti-Alias, and you can fix that by putting noSmooth(); in your settings.

[AndJ]

This is the effect that it created for me (animation of the size of the PGraphics object going from 1-100 resized onto an 800x800 canvas). It doesn’t quite have the sharpness of pixels that I was hoping for, but still, a cool experiment and I got to learn how to use the PGraphics class.

Thanks!

Here’s the code that I used if you wanted to test:

PGraphics pg;

void setup() {
  size(800, 800);
  frameRate(10);
}

void draw() {
  int w = frameCount;
  pg = createGraphics(w, w);

  pg.noSmooth();
  pg.beginDraw();
  pg.background(51);
  pg.noStroke();
  pg.fill(255);
  pg.ellipse(w / 2, w / 2, w, w);
  pg.endDraw();
  
  image(pg, 0, 0, width, height);
  //saveFrame("line-######.png");
  if(frameCount > 100) {
    exit();
  }
}

[KevinWho]

This can be fixed if you put this at the top

void settings() {
  noSmooth();  
}

This removes the blurryness/anit-aliasing

Here is the code that gives you the sharp version:

PGraphics pg;

void settings() {
  size(800, 800);
  noSmooth();
}

void setup() {
  frameRate(10);
}

void draw() {
  int w = frameCount;
  pg = createGraphics(w, w);

  pg.noSmooth();
  pg.beginDraw();
  pg.background(51);
  pg.noStroke();
  pg.fill(255);
  pg.ellipse(w / 2, w / 2, w, w);
  pg.endDraw();

  image(pg, 0, 0, width, height);
  //saveFrame("line-######.png");
  if (frameCount > 100) {
    exit();
  }
}

[AndJ]

Exactly what I was looking for!
Thank you so much!

[KevinWho]

You are welcome!

[jeremydouglass]

More as an intellectual exercise, rather than using the internals of scaling you can march across a grid of squares and test them with point-circle collision detection.

• http://www.jeffreythompson.org/collision-detection/point-circle.php

This lets you, for example, customize what a “pixel” is.

/**
 * PixelCircle
 * 2020-04-27 Jeremy Douglass Processing 3.4
 * https://discourse.processing.org/t/pixelate-ellipse-shape/20148/6
 */
void setup() {
  size(400, 400);
}

void draw() {
  background(192);
  PVector circ = new PVector(mouseX, mouseY, mouseY);
  fill(255);
  pixCircle(circ.x, circ.y, circ.z, 10);
  noFill();
  ellipse(circ.x, circ.y, 2*circ.z, 2*circ.z);
}

void pixCircle(float cx, float cy, float cr, float psize) {
  cx = cx-psize/2;
  cy = cy-psize/2;
  float xmax = cx+cr+psize;
  float ymax = cy+cr+psize;
  for (int py=0; py<ymax; py+=psize) {
    for (int px=0; px<xmax; px+=psize) {
      if(pointCircle(px, py, cx, cy, cr)) {
        // pixiel style 1
        if(second()%2==0) rect(px, py, psize, psize);
        // pixel style 2
        else ellipse(px + psize/2.0, py + psize/2.0, psize, psize);
      }
    }
  }
}

boolean pointCircle(float px, float py, float cx, float cy, float r) {
  // http://www.jeffreythompson.org/collision-detection/point-circle.php
  float distX = px - cx;
  float distY = py - cy;
  float distance = sqrt( (distX*distX) + (distY*distY) );
  if (distance <= r) return true;
  return false;
} 

[AndJ]

This is an awesome solution. I’ll defensively keep this in mind for future projects!