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.
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?
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,
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
Draw the contour and use a flood fill
Processing does not have a flood fill function so you would need to create your own.
Use a mask image to control which pixels are painted
You have to create the mask image which poses the same problem.
Define a clipping region to limit pixels to be painted
Processing (Java mode) only supports rectangular clipping regions
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;
}
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.