Graphics.Web.Processing.Core.Interface

Variables, commands and functions. The interface to the processing.js API (http://processingjs.org/reference), with some additions, deletions and modifications.

Predefined values

screenWidth :: Proc_Int

Width of the canvas.

screenHeight :: Proc_Int

Height of the canvas.

Commands

General

random

Arguments

:: ProcMonad m

=> Var Proc_Float

Target variable.

-> Proc_Float

Left endpoint of the interval.

-> Proc_Float

Right endpoint of the interval.

-> m c ()

Write a variable with a random number within an interval.

noise :: (ProcMonad m, Monad (m c)) => Proc_Point -> m c Proc_Float

Noise random function.

Drawing

class Drawing a

Class of contexts where the user can draw pictures in the screen.

Instances

Drawing MouseReleased

Drawing MouseClicked

Drawing Draw

Drawing Setup

Colors

data Color

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

Constructors

Color

Fields

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.

stroke :: (ProcMonad m, Drawing c) => Color -> m c ()

Set the drawing color.

fill :: (ProcMonad m, Drawing c) => Color -> m c ()

Set the filling color.

background :: (ProcMonad m, Drawing c) => Color -> m c ()

Fill the screen with a given color.

Stroke settings

strokeWeight :: (ProcMonad m, Drawing c) => Proc_Int -> m c ()

Set the weight of the lines.

Figures

type Proc_Point = (Proc_Float, Proc_Float)

A point as a pair of floating point numbers.

ellipse

Arguments

:: (ProcMonad m, Drawing c)

=> Proc_Point

Center of the ellipse.

-> Proc_Float

Width of the ellipse.

-> Proc_Float

Height of the ellipse.

-> m c ()

Draw a ellipse.

circle

Arguments

:: (ProcMonad m, Drawing c)

=> Proc_Point

Center of the circle.

-> Proc_Float

Radius.

-> m c ()

Draw a circle.

arc

Arguments

:: (ProcMonad m, Drawing c)

=> Proc_Point

Center of the ellipse.

-> Proc_Float

Width of the ellipse.

-> Proc_Float

Height of the ellipse.

-> Proc_Float

Initial angle (in radians).

-> Proc_Float

End angle (in radians).

-> m c ()

Draw an arc.

The arc is drawn following the line of an ellipse between two angles.

line

Arguments

:: (ProcMonad m, Drawing c)

=> Proc_Point

Starting point.

-> Proc_Point

End point.

-> m c ()

Draw a line.

point

Arguments

:: (ProcMonad m, Drawing c)

=> Proc_Point

Location of the point.

-> m c ()

Prints a dot.

quad :: (ProcMonad m, Drawing c) => Proc_Point -> Proc_Point -> Proc_Point -> Proc_Point -> m c ()

A quad is a quadrilateral, a four sided polygon. The first parameter is the first vertex and the subsequent parameters should proceed clockwise or counter-clockwise around the defined shape.

rect

Arguments

:: (ProcMonad m, Drawing c)

=> Proc_Point

Location of the rectangle.

-> Proc_Float

Width of the rectangle.

-> Proc_Float

Height of the rectangle.

-> m c ()

Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. The first parameter set the location, the second sets the width, and the third sets the height.

triangle :: (ProcMonad m, Drawing c) => Proc_Point -> Proc_Point -> Proc_Point -> m c ()

A triangle is a plane created by connecting three points.

bezier

Arguments

:: (ProcMonad m, Drawing c)

=> Proc_Point

Initial point.

-> Proc_Point

First control point.

-> Proc_Point

Second control point.

-> Proc_Point

End point.

-> m c ()

Bézier curve.

polygon :: (ProcMonad m, Monad (m c), Drawing c) => [Proc_Point] -> m c ()

Polygon drawer.

Text

drawtext

Arguments

:: (ProcMonad m, Drawing c)

=> Proc_Text

Text to draw.

-> Proc_Point

Position.

-> Proc_Float

Width.

-> Proc_Float

Height.

-> m c ()

Display a text in the screen. The color is specified by fill.

Setup

size :: ProcMonad m => Proc_Int -> Proc_Int -> m c ()

Set the size of the canvas.

setFrameRate :: ProcMonad m => Proc_Int -> m Setup ()

Specify the number of frames to be displayed every second. The default rate is 60 frames per second.

Transformations

translate

Arguments

:: (ProcMonad m, Drawing c)

=> Proc_Float

Horizontal displacement.

-> Proc_Float

Vertical displacement.

-> m c ()

Move the current position.

rotate :: (ProcMonad m, Drawing c) => Proc_Float -> m c ()

Apply a rotation to the following pictures, centered at the current position.

scale

Arguments

:: (ProcMonad m, Drawing c)

=> Proc_Float

Horizontal scaling.

-> Proc_Float

Vertical scaling.

-> m c ()

Apply a scaling to the following pictures, centered at the current position.

resetMatrix :: (ProcMonad m, Drawing c) => m c ()

Reset the transformation matrix.

Mouse

getMousePoint :: (ProcMonad m, Monad (m c)) => m c Proc_Point

Get the current position of the mouse pointer.

Keyboard

data Key

Keyboard keys recognized by Processing.

Constructors

CharKey Char

SpecialKey SpecialKey

ArrowKey ArrowKey

ModKey KeyModifier Key

data ArrowKey

Arrow keys.

Constructors

UP

DOWN

LEFT

RIGHT

data KeyModifier

Key modifiers.

Constructors

ALT

CONTROL

SHIFT

data SpecialKey

Special keys.

Constructors

BACKSPACE

TAB

ENTER

RETURN

ESC

matchKey :: (ProcMonad m, Monad (m KeyPressed)) => Var Proc_Bool -> Key -> m KeyPressed ()

This function takes a variable of type Proc_Bool and a Key, and sets the variable to true if the key pressed is the given Key. Otherwise, the variable is set to false.

Conditionals

ifM :: ProcMonad m => Proc_Bool -> m c a -> m c b -> m c ()

Conditional execution. When the boolean value is true, it executes the first monadic argument. Otherwise, it executes the other one. In any case, the result is discarded. See also if_.

Others

frameCount :: (ProcMonad m, Monad (m c)) => m c Proc_Int

Frames since the beginning of the script execution.

getFrameRate :: (ProcMonad m, Monad (m c)) => m c Proc_Int

Approximate number of frames per second.

comment :: ProcMonad m => Text -> m c ()

Include a comment in the current position of the code. You normally don't need to read the processing.js code output, but this function can be useful to analyse or debug it.

Processing monads

class ProcMonad m

Types in this instance form a monad when they are applied to a context c. They are used to write Processing code.

Instances

ProcMonad ProcM

When using this instance, please, be aware of the behavior of readVar.

It does not matter when the variable is read. The result will always hold the last value asigned to the variable. For example, this code

 v <- newVar 10
 ten <- readVar v
 writeVar v 20
 point (10,ten)

will draw a point at (10,20).

ProcMonad ScriptM

Events created inside a conditional will be automatically deleted. They must be unconditional.

ProcMonad EventM