paint - v0.1.0

paint

Types

Angle

opaque </>

An angle in clock-wise direction. See: angle_rad and angle_deg.

pub opaque type Angle

CanvasConfig

</>

The configuration of the “canvas”

pub type CanvasConfig {
  CanvasConfig(width: Float, height: Float)
}

Constructors 

  • CanvasConfig(width: Float, height: Float)

Color

opaque </>

A color. See: color_rgb.

pub opaque type Color

Event

</>

A list of events

pub type Event {
  Tick(Float)
  KeyDown(Key)
  KeyUp(Key)
}

Constructors 

  • Tick(Float)

    Triggered before drawing. Contains the number of milliseconds elapsed.

  • KeyDown(Key)

    Triggered when a key is pressed

  • KeyUp(Key)

    Triggered when a key is released

Key

</> 
pub type Key {
  LeftArrow
  RightArrow
  UpArrow
  DownArrow
  Space
}

Constructors 

  • LeftArrow
  • RightArrow
  • UpArrow
  • DownArrow
  • Space

Picture

opaque </>

A 2D picture

pub opaque type Picture

StrokeProperties

</>

Options for strokes. Either no stroke or a stroke with some given color and line width.

pub type StrokeProperties {
  NoStroke
  SolidStroke(Color, Float)
}

Constructors 

  • NoStroke
  • SolidStroke(Color, Float)

Vec2

</> 
pub type Vec2 =
  #(Float, Float)

Functions

angle_deg

</> 
pub fn angle_deg(degrees: Float) -> Angle

Create an angle expressed in degrees

angle_rad

</> 
pub fn angle_rad(radians: Float) -> Angle

Create an angle expressed in radians

arc

</> 
pub fn arc(radius: Float, start: Angle, end: Angle) -> Picture

An arc with some radius going from some starting angle to some other angle in clock-wise direction

blank

</> 
pub fn blank() -> Picture

A blank image

center

</> 
pub fn center(picture: Picture) -> fn(CanvasConfig) -> Picture

Utility to set the origin in the center of the canvas

circle

</> 
pub fn circle(radius: Float) -> Picture

A circle with some given radius

color_rgb

</> 
pub fn color_rgb(red: Int, green: Int, blue: Int) -> Color

Given three Ints [0-255], create a color

combine

</> 
pub fn combine(pictures: List(Picture)) -> Picture

Combine multiple pictures into one

concat

</> 
pub fn concat(
  picture: Picture,
  another_picture: Picture,
) -> Picture

Concatenate two pictures

display_on_canvas

</> 
pub fn display_on_canvas(
  init: fn(CanvasConfig) -> Picture,
  id: String,
) -> Nil

Display a picture on a HTML canvas element Note: this function may only be called once the page has loaded and the document objects is available.

fill

</> 
pub fn fill(picture: Picture, color: Color) -> Picture

Fill a picture with some given color, see Color.

interact_on_canvas

</> 
pub fn interact_on_canvas(
  init: fn(CanvasConfig) -> a,
  update: fn(a, Event) -> a,
  view: fn(a) -> Picture,
  id: String,
) -> Nil

Make animations and games and display them on the given HTML canvas. Follows the same architecture as Elm/Lustre. The type variable “state” can be anything you want. If you are only making a stateless animation, use Nil. Note: this function may only be called once the page has loaded and the document and window objects are available.

just

</> 
pub fn just(picture: Picture) -> fn(a) -> Picture

Utility function that is useful for cases where you are no interested in the canvas configuration. For example,

display_on_canvas(just(circle(30.0)), "my_canvas")
// instead of...
display_on_canvas(fn(_config) { circle(30.0) }, "my_canvas")

lines

</> 
pub fn lines(points: List(#(Float, Float))) -> Picture

Lines (same as a polygon but not a closed shape)

polygon

</> 
pub fn polygon(points: List(#(Float, Float))) -> Picture

A polygon consisting of a list of 2d points

rectangle

</> 
pub fn rectangle(width: Float, height: Float) -> Picture

A rectangle with some given width and height

rotate

</> 
pub fn rotate(picture: Picture, angle: Angle) -> Picture

Rotate the picture in a clock-wise direction

scale_uniform

</> 
pub fn scale_uniform(picture: Picture, factor: Float) -> Picture

Scale the picture uniformly in horizontal and vertical direction

scale_x

</> 
pub fn scale_x(picture: Picture, factor: Float) -> Picture

Scale the picture in the horizontal direction

scale_y

</> 
pub fn scale_y(picture: Picture, factor: Float) -> Picture

Scale the picture in the vertical direction

square

</> 
pub fn square(length: Float) -> Picture

A square

stroke

</> 
pub fn stroke(
  picture: Picture,
  stroke_properties: StrokeProperties,
) -> Picture

Set properties for the stroke. See StrokeProperties

text

</> 
pub fn text(text: String, font_size_px: Int) -> Picture

Text with some given font size

translate_x

</> 
pub fn translate_x(picture: Picture, x: Float) -> Picture

Translate a picture in the horizontal direction

translate_xy

</> 
pub fn translate_xy(
  picture: Picture,
  x: Float,
  y: Float,
) -> Picture

Translate a picture in horizontal and vertical direction

translate_y

</> 
pub fn translate_y(picture: Picture, y: Float) -> Picture

Translate a picture in the vertical direction

✨ Search Document