# Pixelate Ellipse Shape

**URL:** <https://discourse.processing.org/t/pixelate-ellipse-shape/20148>\
**Category:** Coding Questions\
**Created:** [April 25, 2020, 9:29pm UTC](https://discourse.processing.org/t/pixelate-ellipse-shape/20148 "2020-04-25T21:29:30Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![AndJ](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@AndJ](https://discourse.processing.org/u/AndJ)\
**Post date:** [April 25, 2020, 9:29pm UTC](https://discourse.processing.org/t/pixelate-ellipse-shape/20148/1 "2020-04-25T21:29:30Z")

</div>

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.

 ![pixelatedEllipse](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/80da664dacd36e7c24cf7e3fafd0e9fc8e0109b3.png)

---

<div class="post-metadata">

**Author:** ![KevinWho](https://avatars.discourse-cdn.com/v4/letter/k/dbc845/32.png) [@KevinWho](https://discourse.processing.org/u/KevinWho)\
**Post date:** [April 25, 2020, 11:24pm UTC](https://discourse.processing.org/t/pixelate-ellipse-shape/20148/2 "2020-04-25T23:24:22Z")

</div>

You might be able to use PGraphics.

[https://processing.org/reference/PGraphics.html](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.

---

<div class="post-metadata">

**Author:** ![AndJ](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@AndJ](https://discourse.processing.org/u/AndJ)\
**Post date:** [April 27, 2020, 3:41am UTC](https://discourse.processing.org/t/pixelate-ellipse-shape/20148/3 "2020-04-27T03:41:04Z")

</div>

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!

![ezgif.com-resize](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/732a90a2bc13d077162a82cbdc33dc45630b525e.gif)

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

```auto
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();
  }
}

```

---

<div class="post-metadata">

**Author:** ![KevinWho](https://avatars.discourse-cdn.com/v4/letter/k/dbc845/32.png) [@KevinWho](https://discourse.processing.org/u/KevinWho)\
**Post date:** [April 27, 2020, 3:41am UTC](https://discourse.processing.org/t/pixelate-ellipse-shape/20148/4 "2020-04-27T03:41:53Z")

</div>

This can be fixed if you put this at the top

```auto
void settings() {
  noSmooth();  
}

```

This removes the blurryness/anit-aliasing

Here is the code that gives you the sharp version:

```auto
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();
  }
}

```

---

<div class="post-metadata">

**Author:** ![AndJ](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@AndJ](https://discourse.processing.org/u/AndJ)\
**Post date:** [April 27, 2020, 3:46am UTC](https://discourse.processing.org/t/pixelate-ellipse-shape/20148/5 "2020-04-27T03:46:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KevinWho](https://avatars.discourse-cdn.com/v4/letter/k/dbc845/32.png) [@KevinWho](https://discourse.processing.org/u/KevinWho)\
**Post date:** [April 27, 2020, 3:47am UTC](https://discourse.processing.org/t/pixelate-ellipse-shape/20148/6 "2020-04-27T03:47:34Z")

</div>

You are welcome! 🙂

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 27, 2020, 10:32pm UTC](https://discourse.processing.org/t/pixelate-ellipse-shape/20148/7 "2020-04-27T22:32:29Z")

</div>

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](http://www.jeffreythompson.org/collision-detection/point-circle.php)

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

```auto
/**
 * 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;
} 

```

 ![PixelCircle--screenshot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5faa81f188e52a30f54b6b21c0b4736e3e49d115.png) ![PixelCircle--screenshot2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7af252da42141175d263eb99f5c03f2184dc1aee.png)

---

<div class="post-metadata">

**Author:** ![AndJ](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@AndJ](https://discourse.processing.org/u/AndJ)\
**Post date:** [April 27, 2020, 11:49pm UTC](https://discourse.processing.org/t/pixelate-ellipse-shape/20148/8 "2020-04-27T23:49:03Z")

</div>

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