Creating patterns: How can I create a geometric shape that looks like a rectangle with inward-curved circular arcs replacing the corners?

Processing Project Guidance
1

My goal is to create random patterns like you see it at the top of the image.
I want to build this by using separated shapes like it’s shown in the graphic with the red lines.
So there will be circles, rectangles with rounded corners and shapes like the one at the bottom.

Shapes
Shapes1320×3220 265 KB

With this shape at the bottom, I am not sure if it is possible to display in Processing.
I couldn’t find a similar topic, but maybe I just searched for the wrong terms:)

I also thought about importing an SVG, but then I am not flexible later when I want to give the circles more space in between or make them smaller.

Is there a way to display inverted rounded corners?
The arcs are symmetrical and connect the sides of the rectangle, creating a concave effect at the corners. Would Bézier curves or another method be best for this?

Thanks for your help!

2

You can take a look at this code:

void setup() {
  size(400, 400, JAVA2D);
}
void draw() {
  ellipse(20,20,10,10);
  image(generateShape(80,color(0,0,0)), 0, 0);
}
PImage generateShape(int sz, color cl) {
  PGraphics pim;
  pim=createGraphics(sz, sz);
  pim.beginDraw();
  pim.fill(cl);
  pim.rect(0, 0, sz, sz);
  int[] mask=new int[sz*sz];
  for (int i=0; i<sz; i++) for (int j=0; j<sz; j++) if (random(0,10)>4) {//Insert your condition for deletion the pixel at position i,j
    mask[i+sz*j]=0;
  } else mask[i+sz*j]=255;
  pim.mask(mask);
  pim.endDraw();
  return pim;
}

This generates a PGraphics object that contains the shape. You can reuse the shape as often as you want. Just insert the condition of wich pixel to cut out,

3

Is there a way to display inverted rounded corners?

Have you tried using 4 arcs?

int _wndW = 600;
int _wndH = 600;

void drawArc(float x, float y, float radius, int rotation, float penSize) {
  float angle = 0.0;

  pushMatrix();
  translate(x, y);
  rotate(radians(rotation));
  for ( int i = 0; i < 90; i++ ) {
    angle = radians( i );
    x = cos( angle ) * radius;
    y = sin( angle ) * radius;
    fill(0);
    circle(x, y, penSize); // pen is circle
  }
  popMatrix();
}

void setup() {
  size(_wndW, _wndH);
  background(209);
  drawArc(130, 260, 135, -45, 6);
  drawArc(320, 70, 135, 45, 6);
  drawArc(510, 260, 135, 135, 6);
  drawArc(320, 450, 135, 225, 6);
}

void draw() {
}

Output:

arcs
arcs752×544 6.47 KB

4

The shape you want to draw has concave sides so although it is easy to draw its contour it is more challenging to fill the shape with colour. There are a number of techniques you can use

  1. Draw the contour and use a flood fill
    Processing does not have a flood fill function so you would need to create your own.
  2. Use a mask image to control which pixels are painted
    You have to create the mask image which poses the same problem.
  3. Define a clipping region to limit pixels to be painted
    Processing (Java mode) only supports rectangular clipping regions

star4

This image was created using the sketch below and demonstrates one technique Ifor complex shapes and could be combined with (2) to provide a more flexible fill for the shape.

PGraphics s0;
int step = 80; // offset between circle centres
int d = step - 6; // circle diameter

void setup() {
  size(400, 400);
  s0 = getStar4(d, color(0, 0, 192));
}

void draw() {
  background(240);
  noStroke();
  fill(0, 0, 128);
  imageMode(CENTER);
  for (int x = step; x < width - step; x += step)
    for (int y = step; y < height - step; y += step) {
      ellipse(x, y, d, d);
      image(s0, x + step/2, y + step/2);
    }
}

PGraphics getStar4(int s, int c) {
  PGraphics pg = createGraphics(s, s);
  int hs = s/2;
  pg.beginDraw();
  pg.clear();
  pg.noStroke();
  pg.fill(0);
  pg.translate(hs, hs);
  pg.ellipse(hs, hs, s, s);
  pg.ellipse(hs, -hs, s, s);
  pg.ellipse(-hs, hs, s, s);
  pg.ellipse(-hs, -hs, s, s);
  pg.endDraw();
  pg.loadPixels();
  int[] a = pg.pixels;
  for (int i = 0; i < a.length; i++)
    a[i] = (a[i] & 0xFF000000) == 0 ? c : 0;
  pg.updatePixels();
  return pg;
}
3 Likes
5

Thanks quark,

based on your code I now manged to create this, which already brings me a lot closer to my goal.

grafik
grafik645×636 6.7 KB

I tried using masks too as @NumericPrime suggested and feel like it is pretty similar to use.
Using PGraphics for this was a major hint, so thanks for that.

The idea of creating arcs and filling them afterward seems more complicated to me.

6

reminds me of this:

see Shape generator help (Armin Hofmann's 'rubber band' shape generator)

1 Like