Roughen/distort an ellipse

Programming Questions

herbert.g..

in Programming Questions • 3 years ago

Hello!

I want to realize a effect similar to the vector effect in Illustrator called roughen.

I've made a screenshot to make clear what i mean:

I want this effect to be dynamic, that the result is a growing/shrinking/pulsing ellipse with distorted outlines. Like a smooth animation of the 5 steps that are shown in the picture. I would be great to get some thoughts how to solve this problem!

Best,

Herbert

Replies(8)

cedrickie..

Re: Roughen/distort an ellipse

3 years ago

This is very similar to one of the programs included in the Generative Gestaltung book.

Just think of a circle that consists of a lot of independent moving particles.
You can take a look at the source here :
http://www.generative-gestaltung.de/P_2_2_3_01

PhiLho

Re: Roughen/distort an ellipse

3 years ago

I made some code to draw irregular circles (using line segments): first shown in causing pixels to fall and then (refined) in PNG from screen with transparent background (both on old forum).
Perhaps you can use that as a base/source for ideas.

herbert.g..

Re: Roughen/distort an ellipse

3 years ago

Thanks for the fast replies. Both suggestions helped me alot!

yelele_br..

Re: Re: Roughen/distort an ellipse

3 years ago

Something like that ?

Copy code

PVector[] tabPoint;
int nbPoint = 50;
int rayon = 100;
void setup() {
size(300,300);
tabPoint = new PVector[nbPoint];
float angle = TWO_PI/(nbPoint);
for(int division=0;division<nbPoint;division++)
{
tabPoint[division] = new PVector(rayon*cos(angle*division),
rayon*sin(angle*division));
}
smooth();
}
void draw()
{
PVector move = new PVector();
background(255);
noFill();
stroke(0);
strokeWeight(5);
translate(width/2,height/2);
beginShape();
curveVertex(tabPoint[0].x,tabPoint[0].y);
for(int division=0;division<nbPoint;division++)
{
curveVertex(tabPoint[division].x,tabPoint[division].y);
}
curveVertex(tabPoint[0].x,tabPoint[0].y);
curveVertex(tabPoint[1].x,tabPoint[1].y);
endShape();
//--- Animation
for(int division=0;division<nbPoint;division++)
{
move.x = tabPoint[division].x;
move.y = tabPoint[division].y;
move.normalize();
move.mult(random(-1,1));
tabPoint[division].x += move.x;
tabPoint[division].y += move.y;
}
}

ignotus

Re: Roughen/distort an ellipse

3 years ago

You can also use the Bezier representation of a circle, which can be done with any number of points. By scaling the distances of the points and changing the control points, you can control the "roughness" of the circle. Here's an example with an evenly divided circle: http://ignotus.com/factory/2010/03/bezier-circle/. You can place the points at irregular intervals, too, you'll just need to calculate the distances from Bezier point (on curve) to control points (off curve) in ratio to the sectors of the circle swept out between Bezier points. You could also start with a regular Bezier representation of a circle or ellipse, use Processing bezierPoint() function to interpolate new points and then displace them outwords or inwards, scale and rotate control points, etc.

Lots of good ways to do this.