Algorithm to create a “scruffy” paper effect for UML Diagrams?
-
08-07-2019 - |
Question
I like the scruffy paper effect of http://yuml.me UML diagrams, is there an algorithm for that preferably not in Ruby but in PHP, java or C#, I would like to see if It's easy to do the same thing in Rebol:
http://reboltutorial.com/blog/easy-yuml-dialect-for-mere-mortals2/
Solution
The effect combines
- a diagonal gradient fill
- a drop shadow
- lines which, rather than being straight, have some small apparently random deviations in them, which gives a 'scruffy' feel.
You can seed your random number generator with a hash of the input so you get the same image each time.
This seems to work OK for scruffing up lines:
public class ScruffyLines {
static final double WOBBLE_SIZE = 0.5;
static final double WOBBLE_INTERVAL = 16.0;
Random random;
ScruffyLines ( long seed ) {
random = new Random(seed);
}
public Point2D.Double[] scruffUpPolygon ( Point2D.Double[] polygon ) {
ArrayList<Point2D.Double> points = new ArrayList<Point2D.Double>();
Point2D.Double prev = polygon[0];
points.add ( prev ); // no wobble on first point
for ( int index = 1; index < polygon.length; ++index ) {
final Point2D.Double point = polygon[index];
final double dist = prev.distance ( point );
// interpolate between prev and current point if they are more
// than a certain distance apart, adding in extra points to make
// longer lines wobbly
if ( dist > WOBBLE_INTERVAL ) {
int stepCount = ( int ) Math.floor ( dist / WOBBLE_INTERVAL );
double step = dist / stepCount;
double x = prev.x;
double y = prev.y;
double dx = ( point.x - prev.x ) / stepCount;
double dy = ( point.y - prev.y ) / stepCount;
for ( int count = 1; count < stepCount; ++count ) {
x += dx;
y += dy;
points.add ( perturb ( x, y ) );
}
}
points.add ( perturb ( point.x, point.y ) );
prev = point;
}
return points.toArray ( new Point2D.Double[ points.size() ] );
}
Point2D.Double perturb ( double x, double y ) {
return new Point2D.Double (
x + random.nextGaussian() * WOBBLE_SIZE,
y + random.nextGaussian() * WOBBLE_SIZE );
}
}
example scruffed up rectangle http://img34.imageshack.us/img34/4743/screenshotgh.png
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow