Fill a shape with pattern?

General Discussion Other

amoeboar

in General Discussion • Other • 8 months ago

Hi forum,

I'm trying to fill a simple shape (like a circle) with a generative pattern. Or, create a pattern and mask off everything that's not within the circle. I haven't made the pattern yet, but before I embark on this journey I want to know if it's do-able. I haven't had much luck in searching for it on the internet.

I'm looking at this post as a reference but what I want to do is simpler than that:

load svg

multiply it in a pattern formation

draw ellipse

mask off extra

draw ellipse

load svg, make pattern

place "inside" ellipse

The effect I'm looking for is similar to this:

Can anyone point me in the right direction? I'm just not sure what functions to use. It has to be simple because I'm not using beginShape() or endShape(), just the simple steps I mentioned above.

Thank you to anyone who knows how to do this.

Replies(1)

tfguy44

Re: Fill a shape with pattern?

8 months ago

In the following example, I create a mask which allows me to only use the specified areas from my pattern image.
How you choose to create your pattern is up to you.

PGraphics s, m;
void setup(){
size(220,220);
// Create a cookie cutter.
// White areas are kept. Black areas are not.
m = createGraphics( width, height, P2D );
m.beginDraw();
m.background(0);
m.fill(255);
m.stroke(255);
m.ellipse(100, 100, 60, 60);
m.endDraw();
// Create a pattern.
s = createGraphics( width, height, P2D );
s.beginDraw();
s.smooth();
s.translate(s.width/2, s.height/2);
s.rotate( radians(35) );
s.background(0,0,255);
s.noStroke();
s.fill( 0,255,0);
for( int i = -300; i < 300; i+=10 ){
s.rect( i, -300, 5, 600);
}
// This line uses the cookie cutter.
s.mask( m.get() );
s.endDraw();
}
void draw(){
background(128,0,0);
image( s.get(), 0, 0);
}

Top Reply