Everything Racket: All Posts

Drawing Bezier Curves

2013-06-27T21:25:40Z

This blog post shows to use the racket/draw library to draw Bezier curves.

A Bezier curve connects two points, so we need a way to represent points.

<pt-definition> ::=

(struct pt (x y))

A Bezier curve from p0 to p3 with control points p1 and p2 is represented by a bez structure:

<bez-definition> ::=

(struct bez (p0 p1 p2 p3))

The curve leaves p0 in the direction towards p1. The curve approaches p3 in the direction from p2.

Given these structure definitions we can now represent Picasso’s Dachshund (see Jeremy Kun’s Blog).

<dachshund> ::=

(define dachshund

(list

(bez (pt 180 280) (pt 183 263) (pt 186 256) (pt 189 244))

(bez (pt 191 244) (pt 290 244) (pt 300 230) (pt 339 245))

(bez (pt 340 246) (pt 350 290) (pt 360 300) (pt 355 210))

(bez (pt 353 210) (pt 370 207) (pt 380 196) (pt 375 193))

(bez (pt 375 193) (pt 310 220) (pt 190 220) (pt 164 205))

(bez (pt 164 205) (pt 135 194) (pt 135 265) (pt 153 275))

(bez (pt 153 275) (pt 168 275) (pt 170 180) (pt 150 190))

(bez (pt 149 190) (pt 122 214) (pt 142 204) (pt 85 240))

(bez (pt 86 240) (pt 100 247) (pt 125 233) (pt 140 238))))

The racket/draw library represents Bezier curves (or rather zero or more closed subpaths and one open subpath) as dc-path% objects. The function bez->dc-path converts the representation of a Bezier curve from a bez structure into dc-path%.

<conversion> ::=

(define (bez->dc-path b)

(match-define (bez (pt x0 y0) (pt x1 y1) (pt x2 y2) (pt x3 y3)) b)

(define p (new dc-path%))

(send p move-to x0 y0)

(send p curve-to x1 y1 x2 y2 x3 y3)

It is now trivial to define a function, that draws a Bezier curve using a given drawing context, dc:

<draw-bez> ::=

(define (draw-bez dc b)

(send dc draw-path (bez->dc-path b)))

The dachshund is drawn piece by piece:

<draw-dachshund> ::=

(define (draw-dachshund dc)

(for ([b dachshund])

(draw-bez dc b)))

Using drawing contexts allow to use the same draw-dachshund function to draw the dachshund on pdfs, bitmaps, and, more. Let’s draw the dachshund on a bitmap.

<example> ::=

(define bm (make-object bitmap% 400 100))

(define dc (new bitmap-dc% [bitmap bm]))

(send dc set-smoothing 'smoothed)

(send dc set-pen "red" 1 'solid)

(send dc translate 0 -185)

(draw-dachshund dc)

To run the code in this blog post, the pieces must be assembled in this order.

<*> ::=

(require racket racket/draw)

(provide bm)

Summer Project: Meta(font|post) in Racket

2013-06-21T12:38:51Z

The summer holiday is getting closer. This means there is time to focus on hacking. Last year my summer project was to implement a matrix library and a number theory library.

This year I have decided to write a graphics library inspired by the approach taken by Metafont, Metapost and Tikz. The basic concept in these libraries is a path. The existing Racket library pict on the other hand is based on pictures.

Bezier curves will be used to draw the paths. Drawing a Bezier curve is straight forward; the builtin graphics library, racket/draw has support for this in the form of curve-to.

What is needed is convenient ways of specifying and manipulating paths.

The first problem will be this: Given points P0, P3, P6, ..., Pn. Draw a "pretty" curve through these points. That is, determine which Bezier curves is to be drawn between P0 and P3, between P3 and P6 etc.

John D. Hobby and Donald Knuth introduced the algorithm now known as "Hobby’s Algorithm" in Metafont to solve this problem. It is the central algorithm of the library.

The second problem is to introduce syntax for specifying paths. There is no doubt that the popularity of MetaPost in TeX circles is the concise syntax - so I’ll see how much it makes sense to steal.

The third problem is to support for specifying points based on linear equations. Luckily the grunt works is already done - the matrix library contains equation solvers.

Breaking large project into chunks help tremendously. Just witness how fast the number of completed Racket tasks went up on RosettaCode.

Draw a Bezier curve using racket/draw
Explain Hobby’s algorithm
Implement Hobby’s algorithm
Design syntax for paths
Implement syntax for paths
Document syntax for paths
Predefinitions for standard paths
Examples - inspration from the Metafontbook and Tikz
Linear expressions and "linear variables"
Syntax for linear expressions and linear variables.
From fonts to paths
Higher order path operations
Bounding boxes for paths
Intersections between curves
Coloration of areas
Bitmaps
Relation to picts?

Running Man

2013-06-21T12:38:51Z

Have you ever noticed the little man in the bottom right corner of DrRacket?

At first sight he looks hand drawn, but the appearance deceives. The little guy is in fact ray traced. Neil Toronto the man behind the ray tracing code, was inspired by the animation of the main character in the Commodore 64 classic Impossible Mission.

Buried in the documentation of the icons library, one finds the function running-stickman-icon. The function can be used to generate frames of a running man animation - it even allows us to change colors and size of the running man.

The first parameter of running-stickman-icon is the time, t, a number between 0 and 1. Let’s see 10 frames of the default running man.

> (require images/icons/stickman)

> (for/list ([t (in-range 0 1 1/10)])

(running-stickman-icon t))

(list )

The default man is a little small, but we can easily change both the size and the colors of the man.

> (require images/icons/stickman)

> (running-stickman-icon 0 #:height 128

#:head-color "white"

#:arm-color "gray"

#:body-color "lightblue")

It is now easy to create an animation of the running man. First we need a function render-man that given a frame number will produce an image. Then the function animate from 2htdp/image can be used to display the animation.

To get a fluent motion we will use N=28 frames in one cycle of the animation. Frame 0, 28, 56 and so forth will be the same. If n is the frame number (of the animation), then (remainder n N) is the frame number in the 0 to N-1 range. Divide by n to get the time t in the interval [0 ,1].

(define N 28)

(define (render-man n)

(define t (/ (remainder n N) N))

(freeze (running-stickman-icon t #:height 128

#:head-color "white"

#:arm-color "gray"

#:body-color "lightblue")))

Since the result of running-stickman-icon is a bitmap% object, we need to "freeze" it in order to use it with 2htdp/universe.

The running man is now ready for action:

(require images/icons/stickman 2htdp/image 2htdp/universe)

(define N 28)

(define (render-man n) ...)

(animate render-man)

Those of you who tried the above in DrRacket are probably not too impressed.

Can you spot the problem?

The animation is slow and stutters. For each frame the ray tracer is activated to produce an image. Since animate shows 28 frames pr second, the function render-man is not allowed to use more than 1/28 second to generate each image - and for large heights the ray tracer is not fast enough.

The solution is to prerender the images of the running man before starting the animation. This way each image is generated only once.

(require images/icons/stickman 2htdp/image 2htdp/universe)

(define N 28)

(define (render-man n) ...)

(define men (for/vector ([n N]) (render-man n)))

(define (man n) (vector-ref men (remainder n N)))

(animate man)