processing- Web graphic applications with Processing.

Safe HaskellNone




A Monoid models figures in the plane. Then, figures are displayed or animated using a Processing script.

For example, this expression represents a circle of radius 10 centered at the origin:

 Circle (0,0) 10

The origin will be represented at the center of the screen. As opposed to the other modules, y-coordinates increase to the top, while x-coordinates still increase to the right.

This is a red rectangle with top-left corner at the origin, 10 points height and 10 points width:

 FillColor (Color 255 0 0 255) $ Rectangle (0,0) 10 10

To display several figures together, use the Monoid instance:

 Circle (0,0) 10 <> Circle (0,20) 10

If you just want to display this figure in the target canvas, use displayFigure. If you want to animate it, use animateFigure. Animations depend on the number of frames since the beginning of the execution, instead of in the time spent.

Once you have created a processing script (a value of type ProcScript), use renderFile to write it to a file. See also the Graphics.Web.Processing.Html module.

The default filling color and line color are white and black respectively. Use FillColor and LineColor to change these colors. Colors are in RGBA format, meaning that they may be transparent (with an alpha value of 0), opaque (with an alpha value of 255) or something in between. Use a fully transparent color to indicate that a Figure should not be filled.

You can apply transformations like translation, rotation and scaling. If p is a point and f a figure, Translate p f will draw f with p as the origin of coordinates. Rotations and scalings are always done in respect to the origin, but note that you can modify where the origin is using Translate.



data Color Source

RGBA colors. Values must be between 0 and 255, including in the alpha channel.




redc :: Proc_Int

Red channel.

bluec :: Proc_Int

Blue channel.

greenc :: Proc_Int

Green channel.

alphac :: Proc_Int

Alpha channel (opacity). 0 means transparent, and 255 opaque.

type Proc_Point = (Proc_Float, Proc_Float)Source

A point as a pair of floating point numbers.

type Path = [Proc_Point]Source

A path is just a list of points.

Figure type

data Figure Source

The monoid of plane figures.


Line Path

Line joining a list of points.

Polygon Path

Polygon given a list of vertex.

Ellipse Proc_Point Proc_Float Proc_Float

Ellipse centered at the given point, with width and height also specified.

Circle Proc_Point Proc_Float

Circle centered at the given point and with the specified radius.

Arc Proc_Point Proc_Float Proc_Float Proc_Float Proc_Float

Arc. The arc is drawn following the line of an ellipse between two angles. The first argument is the center of the ellipse. The next two arguments are the width and height of the ellipse. The last two arguments are the initial and end angles of the arc.

Rectangle Proc_Point Proc_Float Proc_Float

Rectangle such that the top-left corner is at the specified point, and its width and height are specified by the other two arguments.

Bezier Proc_Point Proc_Point Proc_Point Proc_Point

Bezier curve. First and last arguments are the initial and end points of the curve. The other points are control points.

Text Proc_Point Proc_Text


LineColor Color Figure

Set the line color of a figure.

FillColor Color Figure

Set the filling color of a figure.

Translate Proc_Point Figure

Translate a figure in the direction of a vector.

Rotate Proc_Float Figure

Rotate a figure by the given angle in radians.

Scale Proc_Float Proc_Float Figure

Scale a figure by the given x and y factors.

Figures [Figure]

List of figures.



A re-export of the Data.Monoid module is provided. You may be using it to join different Figures into one.




:: Maybe Int

Width (if none, takes as much as is available).

-> Maybe Int

Height (if none, takes as much as is available).

-> Color

Background color.

-> Figure

Figure to display.

-> ProcScript 

Display a figure using a Processing script.



:: Maybe Int

Width (if none, takes as much as is available).

-> Maybe Int

Height (if none, takes as much as is available).

-> Int

Frame rate.

-> Color

Background color.

-> (Proc_Int -> Figure)

Function to produce the next frame of animation, given the current frame number.

-> ProcScript 

Create a Processing animation from a Figure-valued function.




:: CustomValue w 
=> Maybe Int

Width (if none, takes as much as is available).

-> Maybe Int

Height (if none, takes as much as is available).

-> Int

Frame rate.

-> w

Initial state.

-> (w -> Figure)

How to print the state.

-> (w -> Color)

Background color, depending on the current state.

-> (Proc_Int -> w -> w)

Function to step the world one iteration. It is passed the number of frames from the beginning.

-> (Proc_Point -> w -> w)

Function called each time the mouse is clicked.

-> [(Key, w -> w)]

Key events. List of pairs, where the first component is a Key and the second component is the reaction to that Key.

-> ProcScript 

Framework to create interactive scripts.

Note that is required for the state to be an instance of CustomValue. More info on how to instantiate a type in the CustomValue class in the Graphics.Web.Processing.Mid.CustomVar module.


data Key Source

Keyboard keys recognized by Processing.

data ArrowKey Source

Arrow keys.



data KeyModifier Source

Key modifiers.



data SpecialKey Source

Special keys.



Custom values

Module re-export for convenience.