Drawing Archives - "Where to now?"

Doodle Drawer – Brushes

January 7, 2013 / Jan Rabe / 0 Comments

At my Doodle Drawer app, I’ve played with a couple of “brushes”. The idea is to treat the connection lines differently.

shaded

sketched

fur

Basically the difference is that the line connections are drawn closer or further away from each line based on the formula of Harmony.

The ‘shaded brush’ looks like this:

@Override
    public void addConnections(Point nextPoint, int color, float strokeWidth) {
        ArrayList<Point> points = PointsList.points;
        for (int i = 0; i < points.size(); ++i) {
            Point curPoint = points.get(i);
            float b = curPoint.x - nextPoint.x;
            float a = curPoint.y - nextPoint.y;
            float distance = b * b + a * a;
            if (distance < 2000f * Config.DEVICE_DISPLAY_METRICS.density) {
                int alpha =  255-((int) (225f / 2000f * Config.DEVICE_DISPLAY_METRICS.density * distance));
                int newColor = Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color));
                LineList.connections.add(new Line(nextPoint, curPoint, newColor, strokeWidth * Config.BRUSH_PRESSURE * 0.5f));
            }
        }
    }

@Override

public void addConnections(Point nextPoint, int color, float strokeWidth) {

ArrayList<Point> points = PointsList.points;

for (int i = 0; i < points.size(); ++i) {

Point curPoint = points.get(i);

float b = curPoint.x - nextPoint.x;

float a = curPoint.y - nextPoint.y;

float distance = b * b + a * a;

if (distance < 2000f * Config.DEVICE_DISPLAY_METRICS.density) {

int alpha = 255-((int) (225f / 2000f * Config.DEVICE_DISPLAY_METRICS.density * distance));

int newColor = Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color));

LineList.connections.add(new Line(nextPoint, curPoint, newColor, strokeWidth * Config.BRUSH_PRESSURE * 0.5f));

}

The sketched brush looks like this:

    @Override
    public void addConnections(Point nextPoint, int color, float strokeWidth) {
        ArrayList points = PointsList.points;
        for (int i = 0; i &lt; points.size(); ++i) {
            Point curPoint = points.get(i);
            float b = curPoint.x - nextPoint.x;
            float a = curPoint.y - nextPoint.y;
            float distance = b * b + a * a;
            if (distance &lt; 10000 * Config.DEVICE_DISPLAY_METRICS.density &amp;&amp; Math.random() &gt; (distance / 10000 * Config.DEVICE_DISPLAY_METRICS.density)) {
                int alpha = 255 - ((int) ((225f / 2000f * Config.DEVICE_DISPLAY_METRICS.density) * distance));
                int newColor =  Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color));
                final float c = 0.2f;
                LineList.connections.add(new Line(new Point(nextPoint.x + (b * c), nextPoint.y + (a * c)), new Point(curPoint.x - (b * c), curPoint.y - (a * c)),newColor, strokeWidth * 0.5f * Config.BRUSH_PRESSURE));
            }
        }
    }

@Override

public void addConnections(Point nextPoint, int color, float strokeWidth) {

ArrayList points = PointsList.points;

for (int i = 0; i < points.size(); ++i) {

Point curPoint = points.get(i);

float b = curPoint.x - nextPoint.x;

float a = curPoint.y - nextPoint.y;

float distance = b * b + a * a;

if (distance < 10000 * Config.DEVICE_DISPLAY_METRICS.density && Math.random() > (distance / 10000 * Config.DEVICE_DISPLAY_METRICS.density)) {

int alpha = 255 - ((int) ((225f / 2000f * Config.DEVICE_DISPLAY_METRICS.density) * distance));

int newColor = Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color));

final float c = 0.2f;

LineList.connections.add(new Line(new Point(nextPoint.x + (b * c), nextPoint.y + (a * c)), new Point(curPoint.x - (b * c), curPoint.y - (a * c)),newColor, strokeWidth * 0.5f * Config.BRUSH_PRESSURE));

}

And the ‘fur brush’ looks like this:

    @Override
    public void addConnections(Point nextPoint, int color, float strokeWidth) {
        ArrayList points = PointsList.points;
        for (int i = 0; i &lt; points.size(); ++i) {
            Point curPoint = points.get(i);
            float b = curPoint.x - nextPoint.x;
            float a = curPoint.y - nextPoint.y;
            float distance = b * b + a * a;
            if (distance &lt; 4000f * Config.DEVICE_DISPLAY_METRICS.density &amp;&amp; Math.random() &gt; distance / 4000f * Config.DEVICE_DISPLAY_METRICS.density) {
                final float c = 0.5f;
                LineList.connections.add(new Line(new Point(nextPoint.x + (b * c), nextPoint.y + (a * c)), new Point(nextPoint.x - (b * c), nextPoint.y - (a * c)), color, strokeWidth * Config.BRUSH_PRESSURE * 0.5f));
            }
        }
    }

@Override

public void addConnections(Point nextPoint, int color, float strokeWidth) {

ArrayList points = PointsList.points;

for (int i = 0; i < points.size(); ++i) {

Point curPoint = points.get(i);

float b = curPoint.x - nextPoint.x;

float a = curPoint.y - nextPoint.y;

float distance = b * b + a * a;

if (distance < 4000f * Config.DEVICE_DISPLAY_METRICS.density && Math.random() > distance / 4000f * Config.DEVICE_DISPLAY_METRICS.density) {

final float c = 0.5f;

LineList.connections.add(new Line(new Point(nextPoint.x + (b * c), nextPoint.y + (a * c)), new Point(nextPoint.x - (b * c), nextPoint.y - (a * c)), color, strokeWidth * Config.BRUSH_PRESSURE * 0.5f));

}

Parametric Curves and deCasteljau Bezier Curves

December 29, 2012 / Jan Rabe / 2 Comments

Cubic Bezier Curves – Under the Hood from Peter Nowell on Vimeo.

You can drag the markers and open this example in new tab.

The core part of this practise clearly is the bezier curve. To get all points on the curve for 4 control points this would suffice.

/**
 * Computes deCasteljau p(t) for 4 control points.
 * 
 * @param t - portion on the graph, value between 0.0 and 1.0
 * @param cP - 4 control points [x,y]
 * @return point[x,y] - p(t)
 */
this.deCasteljau = function (t, cP) {
    return (1 - t) * (1 - t) * (1 - t) * cP[0][1]
        + 3 * (1 - t) * (1 - t) * t * cP[1][1]
        + 3 * (1 - t) * t * t * cP[2][1]
        + t * t * t * cP[3][1];
};

/**

* Computes deCasteljau p(t) for 4 control points.

* @param t - portion on the graph, value between 0.0 and 1.0

* @param cP - 4 control points [x,y]

* @return point[x,y] - p(t)

this.deCasteljau = function (t, cP) {

return (1 - t) * (1 - t) * (1 - t) * cP[0][1]

+ 3 * (1 - t) * (1 - t) * t * cP[1][1]

+ 3 * (1 - t) * t * t * cP[2][1]

+ t * t * t * cP[3][1];

};

However in order to use an arbitary amount of control points I use the following function. It’s recursively, so potentially it’ll explode the max available stack depth (no clue how much that is in js). But for now it’ll do the job.

/**
 * Computes deCasteljau p(t) for n-control points 
 *
 * @param cp - list of control points [][x,y]
 * @param r - amount points (init value : points.length-1)
 * @param i - start value (init value : 0)
 * @param t - portion on the graph (range between 0.0 and 1.0)
 *
 * @see http://stackoverflow.com/a/6271870 for n-control points
 *
 * @return point[x,y] - point on graph at p(t) 
 */
this.deCasteljau = function (cp, r, i, t) {
    if (r == 0) return cp[i];
    var p1 = this.deCasteljau(cp,r - 1, i, t);
    var p2 = this.deCasteljau(cp,r - 1, i + 1, t);
    return [(1 - t) * p1[0] + t * p2[0], (1 - t) * p1[1] + t * p2[1]];
};

/**

* Computes deCasteljau p(t) for n-control points

* @param cp - list of control points [][x,y]

* @param r - amount points (init value : points.length-1)

* @param i - start value (init value : 0)

* @param t - portion on the graph (range between 0.0 and 1.0)

* @see http://stackoverflow.com/a/6271870 for n-control points

* @return point[x,y] - point on graph at p(t)

this.deCasteljau = function (cp, r, i, t) {

if (r == 0) return cp[i];

var p1 = this.deCasteljau(cp,r - 1, i, t);

var p2 = this.deCasteljau(cp,r - 1, i + 1, t);

return [(1 - t) * p1[0] + t * p2[0], (1 - t) * p1[1] + t * p2[1]];

};

To use the function simply wrap a loop around with your favorite segments amount.

/**
 * Compute Points with deCasteljau.
 * 
 * @param minT - min t (init 0)
 * @param maxT - max t (init 1)
 * @param segments - amount segments, the more the smoother (init 20)
 * @param controlPoints - list of control points [n][x,y]
 * @return points[segments][x,y] points on bezier curve
 */
var computePoints = function(minT, maxT, segments, controlPoints) {
    var points = [segments];
    var t;
    // compute segments + 1 points
    for (var i = 0; i <= segments; ++i) {
        // compute t for t_min and t_max
        t = min_t + i / segments * (min_t + max_t);
        points[i] = this.deCasteljau(controlPoints,controlPoints.length - 1, 0, t);
    }
    return points;
};

/**

* Compute Points with deCasteljau.

* @param minT - min t (init 0)

* @param maxT - max t (init 1)

* @param segments - amount segments, the more the smoother (init 20)

* @param controlPoints - list of control points [n][x,y]

* @return points[segments][x,y] points on bezier curve

var computePoints = function(minT, maxT, segments, controlPoints) {

var points = [segments];

var t;

// compute segments + 1 points

for (var i = 0; i <= segments; ++i) {

// compute t for t_min and t_max

t = min_t + i / segments * (min_t + max_t);

points[i] = this.deCasteljau(controlPoints,controlPoints.length - 1, 0, t);

}

return points;

};

Now simply draw the points.

/**
 * Draw points.
 * 
 * @param context
 * @param points - list of points
 */
var draw = function (context, points) {

    context.beginPath();

    // check all segment lines
    for (var i = 1; i <= this.parameter.segments; ++i) {
        // draw curve [x,y]
        context.moveTo(points[i - 1][0], points[i - 1][1]);
        context.lineTo(points[i][0], points[i][1]);
    }
    context.closePath();

    // set drawing style
    context.lineWidth = 2; 
    context.strokeStyle = "#ff0000"; // line color

    // actually start drawing
    context.stroke();
}

/**

* Draw points.

* @param context

* @param points - list of points

var draw = function (context, points) {

context.beginPath();

// check all segment lines

for (var i = 1; i <= this.parameter.segments; ++i) {

// draw curve [x,y]

context.moveTo(points[i - 1][0], points[i - 1][1]);

context.lineTo(points[i][0], points[i][1]);

}

context.closePath();

// set drawing style

context.lineWidth = 2;

context.strokeStyle = "#ff0000"; // line color

// actually start drawing

context.stroke();

}

Et voilà! The animation idea is inspired by Johan Borgström‘s article about bezier curves.

This is my solution to cg2 exercersise a01.2-1.3.

Android: How to get round stroke corners in canvas

December 26, 2012 / Jan Rabe / 0 Comments

When you draw a path with a bigger line stroke width, you might notice uggly edges.

no round stroke corners

In order to get them round you simply need to change the stroke join to round. Here are some default settings I’m using in my Doodle Drawer app.

private void initPaint() {
	paint = new Paint();
	paint.setAntiAlias(true); // enable anti aliasing
	paint.setColor(Color.WHITE); // set default color to white
	paint.setDither(true); // enable dithering
	paint.setStyle(Paint.Style.STROKE); // set to STOKE
	paint.setStrokeJoin(Paint.Join.ROUND); // set the join to round you want
        paint.setStrokeCap(Paint.Cap.ROUND);  // set the paint cap to round too
	paint.setPathEffect(new CornerPathEffect(getStrokeWidth())); // set the path effect when they join.
}

private void initPaint() {

paint = new Paint();

paint.setAntiAlias(true); // enable anti aliasing

paint.setColor(Color.WHITE); // set default color to white

paint.setDither(true); // enable dithering

paint.setStyle(Paint.Style.STROKE); // set to STOKE

paint.setStrokeJoin(Paint.Join.ROUND); // set the join to round you want

paint.setStrokeCap(Paint.Cap.ROUND); // set the paint cap to round too

paint.setPathEffect(new CornerPathEffect(getStrokeWidth())); // set the path effect when they join.

}

At the end it should look like this:

round stroke corners

Doodle Drawer

December 22, 2012 / Jan Rabe / 0 Comments

Inspired by Harmony from Mr. Doob (Ricardo Cabello) I made a little app called ‘Doodle Drawer’. The basic idea for some brushes is that it connects lines that has been drawn already and in case they’re close enough.

silly doodle

My Tweets

Frequently visiting

My Cloud

Amazing people

Favorite Tools

APIs

Online Tools

Tutorials

My Latest Animes

CategoryDrawing

Doodle Drawer – Brushes

Parametric Curves and deCasteljau Bezier Curves

Android: How to get round stroke corners in canvas

Doodle Drawer