circle : Math.Vector3.Vec3 -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity
Render circle or ellipse
circle : Vec3 -> Float -> SolidShape
circle color r =
Render.circle color
|> SolidShape.shape (r * 2) (r * 2)
shape =
circle (rgb 255 0 0) 50
image : WebGL.Texture.Texture -> Math.Vector2.Vec2 -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity
Render an image
image : Float -> Float -> key -> TexturedShape key
image width height =
AutoTextures.textured
(\t ->
t
|> Texture.size
|> (\( w, h ) -> Math.Vector2.vec2 (toFloat w) (toFloat h))
|> Render.image t
|> AutoTextures.shape width height
)
shape =
image 200 200 "image.png"
ngon : Basics.Float -> Math.Vector3.Vec3 -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity
Render regular polygon
hexagon : Vec3 -> Float -> SolidShape
hexagon color r =
Render.ngon 6 color
|> SolidShape.shape (r * 2) (r * 2)
shape =
hexagon (rgb 255 0 0) 50
rect : Math.Vector3.Vec3 -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity
Rectangle render
rectangle : Vec3 -> Float -> Float -> SolidShape
rectangle color w h =
Render.rect color
|> SolidShape.shape w h
shape =
rectangle (rgb 255 0 0) 20 40
triangle : Math.Vector3.Vec3 -> ( Math.Vector2.Vec2, Math.Vector2.Vec2, Math.Vector2.Vec2 ) -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity
Render triangle with free defined vertexes
triangle : Vec3 -> ( Vec2, Vec2, Vec2 ) -> SolidShape
triangle color data =
Render.triangle color data
|> SolidShape.shape 1 1
shape =
triangle (rgb 41 239 41)
( vec2 -100 0, vec2 0 100, vec2 100 0 )
tile : WebGL.Texture.Texture -> Math.Vector2.Vec2 -> Math.Vector2.Vec2 -> Basics.Int -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity
Show tile from a tileset.
All tiles are fixed size and placed into a grid, where the first tile has a 0 index increasing left to right and top to bottom.
Example: having a 3x3 tileset with each tile of 16x24 pixels
| 0 1 2 |
| 3 4 5 |
| 6 7 8 |
this draws the first tile of the second row
tile : Float -> Float -> key -> Int -> TexturedShape key
tile tileW tileH tileset index =
tileset
|> AutoTextures.textured
(\t ->
Render.tile t (vec2 tileW tileH) (Util.size t) index
|> AutoTextures.shape tileW tileH
)
shape =
tile 16 24 "sprites.png" 3
glyph : WebGL.Texture.Texture -> Math.Vector2.Vec2 -> Math.Vector2.Vec2 -> Math.Vector3.Vec3 -> Basics.Int -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity
Render tile from symmetrical tileset.
Same as tile
, but with color blending.
Used to draw text (font glyph)
msdf : Basics.Float -> WebGL.Texture.Texture -> Math.Vector2.Vec2 -> Math.Vector3.Vec3 -> Math.Vector4.Vec4 -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity
This is a utility for generating signed distance fields from vector shapes and font glyphs, which serve as a texture representation that can be used in real-time graphics to efficiently reproduce said shapes. Although it can also be used to generate conventional signed distance fields best known from this Valve paper and pseudo-distance fields, its primary purpose is to generate multi-channel distance fields, using a method I have developed. Unlike monochrome distance fields, they have the ability to reproduce sharp corners almost perfectly by utilizing all three color channels.
sprite : WebGL.Texture.Texture -> Math.Vector2.Vec2 -> Math.Vector4.Vec4 -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity
Show sprite from a sprite sheet.
Sprites can be placed anywhere in the sprite sheet and each can have different sizes.
Example: this draws a sprite of 16x24 pixels taking it from a sprite sheet,
starting at position 16,0
up to including pixels at 31,23
sprite "sprites.png" { xmin = 16, xmax = 31, ymin = 0, ymax = 23 }
tilemap : Basics.Float -> Basics.Float -> WebGL.Texture.Texture -> WebGL.Texture.Texture -> Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity
Show tilemap from a tileset and a corresponding lookup table stored as a texture.
tilemap : Float -> Float -> key -> key -> TexturedShape key
tilemap tileW tileH tileset lut =
AutoTextures.textured2
(\t1 t2 ->
let
( w2, h2 ) =
Texture.size t2
|> Tuple.mapBoth (toFloat >> (*) tileW) (toFloat >> (*) tileH)
in
Render.tilemap tileW tileH t1 t2
|> AutoTextures.shape w2 h2
)
tileset
lut
Basics.Float
Alias to Opacity property
Translate -> ScaleRotateSkew -> Z -> Opacity -> WebGL.Entity
Render is part of Shape
that converts Shape
into Entity
rect : Vec3 -> Render
rect color uP uT z opacity =
WebGL.entityWith
entitySettings
Shader.vertNone
Shader.fragFill
Shader.mesh
{ color = setAlpha color opacity
, uP = uP
, uT = uT
, z = z
}
Math.Vector4.Vec4
Vec4 representing part of transform matrix
| x y 0 |
| z w 0 |
| 0 0 1 |
Math.Vector2.Vec2
Vec2 representing part of transform matrix
| 1 0 x |
| 0 1 y |
| 0 0 1 |
Basics.Float
Css line z-index
that is passed to the Render
Basics.Float
Alias to Height property
Basics.Float
Alias to Width property
defaultEntitySettings : List WebGL.Settings.Setting
Make me optional and pass it to the each Render
function