# Running a circle pattern inside a given shape

**URL:** https://discourse.processing.org/t/running-a-circle-pattern-inside-a-given-shape/8108
**Category:** Coding Questions
**Created:** [February 4, 2019, 4:47pm UTC](https://discourse.processing.org/t/running-a-circle-pattern-inside-a-given-shape/8108 "2019-02-04T16:47:46Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![TomMoto](https://avatars.discourse-cdn.com/v4/letter/t/a88e57/32.png) [@TomMoto](https://discourse.processing.org/u/TomMoto)
#### Post date: [February 4, 2019, 4:47pm UTC](https://discourse.processing.org/t/running-a-circle-pattern-inside-a-given-shape/8108/1 "2019-02-04T16:47:46Z")

</div>

Hi,  
I am cosidering myself still a beginner, trying to learn as much as I can.  
I would like to realize something but I m stuck. maybe someone has a tip or solution…

Within my sketch I create little circles row by row. they all have the same diameter and distance to each other and a given starting point.  
And I have loaded an .svg shape.

What I would like to achieve is, that that circles start inside this shape (top left corner) fill the first row and when it reaches the right boarder of the shape jumps into the next row, starting there in a way that it is always inside the shape… I wouldn t mind, if the circles arent vertically aligned due to different starting points

Do you know what I mean ?

Any help welcome.  
cheers, Tom!

 ![test-01](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f5608ad687903cf3259c8b2c491ea79125f4a032.jpeg)

```auto

import processing.pdf.*;
PShape s;
float x;
float y;
float xsp = 20;

void setup () {
    size (600, 600);
    s = loadShape("test.svg");
    beginRecord(PDF, "test.pdf");
    background(255);
    smooth();
    noStroke();
    fill(0,250);
    frameRate(5);
    x = 20;
    y = 20;
  }
   
void draw () {
      shape(s, 0, 0, 500, 500);
      x = x + xsp;
      ellipse (x, y, 8, 8);
      fill (0,255);

      if (x > width-40) {
      x = 20;
      y += 15;
      }
    }
    
void keyPressed() {
  if (key == 's') {
    endRecord();
    exit();
  }

    }

```

---

<div class="post-metadata">

### Author: ![companje](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/companje/32/2418_2.png) [@companje](https://discourse.processing.org/u/companje)
#### Post date: [February 4, 2019, 8:37pm UTC](https://discourse.processing.org/t/running-a-circle-pattern-inside-a-given-shape/8108/2 "2019-02-04T20:37:33Z")

</div>

Hi TomMoto,

You can use the ‘get’ function to read the color of a pixel on the screen of the shape you draw on the screen. So what you can do is find the first non-white pixel from the left on the current line and start drawing circles there. Then on the next line search again. etc…

![fill-with-circles](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ebad5033128cdb9d028e881399ffb06e97c71e16.gif)

Like this:

```auto
import processing.pdf.*;
PShape s;
int x = 0;
int y = 25;
int xsp = 25;

void setup () {
  size (600, 600);
  s = loadShape("test.svg");
  beginRecord(PDF, "test.pdf");
  background(255);
  smooth();
  noStroke();
  fill(0, 250);
  frameRate(5);
  shape(s, 0, 0, width, height);

  for (x=0; x<width; x++) { 
    if (get(x, y)!=-1) break; //exit loop on first non-white pixel and remember x value
  }
}

void draw () {
  ellipse (x + 15, y, 10, 10);
  fill (0, 255);

  x = x + xsp;
  if (x > width-28) {
    y += 30;
    for (x=0; x<width; x++) {
      if (get(x, y)!=-1) break; //exit loop on first non-white pixel and remember x value
    }
  }
}

void keyPressed() {
  if (key == 's') {
    endRecord();
    exit();
  }
}

```

Good luck!  
Rick

---

<div class="post-metadata">

### Author: ![TomMoto](https://avatars.discourse-cdn.com/v4/letter/t/a88e57/32.png) [@TomMoto](https://discourse.processing.org/u/TomMoto)
#### Post date: [February 5, 2019, 8:36am UTC](https://discourse.processing.org/t/running-a-circle-pattern-inside-a-given-shape/8108/3 "2019-02-05T08:36:28Z")

</div>

Hi Rick,  
wow !!! Thanks so much for that ! Absolutely makes sense.

Best  
Tom

---

<div class="post-metadata">

### Author: ![agitcelik](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/agitcelik/32/3964_2.png) [@agitcelik](https://discourse.processing.org/u/agitcelik)
#### Post date: [February 15, 2019, 9:54pm UTC](https://discourse.processing.org/t/running-a-circle-pattern-inside-a-given-shape/8108/4 "2019-02-15T21:54:24Z")

</div>

Hi, I need really help and this is my discussion : [Circle Packing. Trying to implement on my project](https://discourse.processing.org/t/circle-packing-trying-to-implement-on-my-project/8368)

I want to pack circles inside of that shapes one by one like this : ![RLeather1After](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f846566863bf64f780587de17814476dc37aa5af.jpeg)

How can I reach just white borders or How can I work with just the shape which is white. Is svg format is work with that ? Could you guys help me ?

Thank you.