Wave provides a versatile API for rendering vector graphics (SVG) backed by data buffers.
Use the graphics card ui.graphics_card() to render graphics.
Stages and scenes
The graphics card has two attributes that control how graphics are rendered:
- A stage holds static shapes that are rendered as part of the background (literally, behind the scene).
- A scene holds shapes whose attributes need to be animated (causing a re-render, or, literally, cause a scene).
ui.scene() to create the stage and the scene:
ui.stage()creates a packed, static representation of its shapes (recall that the stage is not supposed to change).
ui.scene()declares a data buffer to efficiently update its shapes if changed (recall that the scene is animated).
Here's an example that draws a clock with a circular
face placed on the
sec hands placed in the
Use drawing functions to add shapes to the stage or scene:
|arc()||Circular or annular sector, as in a pie or donut chart|
|spline()||Curves (including radial curves) using various algorithms: basis, cardinal, smooth, linear, monotone, natural, step.|
path() function is special: it can draw arbitrary shapes. This is because SVG path elements support an attribute called
d which holds drawing commands.
Here's a path that represents a red square:
The above snippet produces:
The drawing commands in the above example work like this:
m 25 25: Move 25px left, 25px down
h 50: Draw a line 50px right
v 50: Draw a line 50px down
h -50: Draw a line 50px left
z: Close the path (going back to where we started)
The little drawing syntax above is part of the SVG specification, not something unique to Wave.
path() drawing commands by hand is tedious, so Wave provides two utilities to make it easier:
Drawing with paths
p() creates a path generator with convenience methods to draw step by step. For example, the following two lines are equivalent:
|Horizontal line, absolute|
|Vertical line, absolute|
|Elliptical arc, absolute|
|Cubic Bézier curve, absolute|
|Cubic Bézier curve, smooth, absolute|
|Quadratic Bézier curve, absolute|
|Quadratic Bézier curve, smooth, absolute|
|Horizontal line, relative|
|Vertical line, relative|
|Elliptical arc, relative|
|Cubic Bézier curve, relative|
|Cubic Bézier curve, smooth, relative|
|Quadratic Bézier curve, relative|
|Quadratic Bézier curve, smooth, relative|
|Serialize this path's commands into SVG path data.|
|Create a SVG path element|
The upper-cased commands use absolute coordinates. The lower-cased commands use relative coordinates. For example,
L(4,2) means "draw a line to (4,2)", but
l(4,2) means "draw a line 4px right, 2px down from the current position".
Drawing with a turtle
turtle() creates a path generator (similar to
p()), but using Turtle Geometry.
|Set the turtle's position|
|Set the turtle's orientation|
|Serialize this turtle's movements into SVG path data|
|Create a SVG path element|
Here is an example from Python's turtle module:
Here is the above example recreated in Wave:
Turtle graphics is not just kid stuff: See Turtle Geometry by Harold Abelson and Andrea diSessa.