flatland

README

flatland

2D graphics library for Go. Targets the web using WASM and WebGL. Offers containerized development setup.
The API is minimalistic by design. Familiarity with web technologies is not required to use this library.

Examples | Docs

Usage

This code produces a bouncing DVD logo. The main function loads an embedded texture and initializes some variables. An animation function is passed to flatland.SetAnimationLoop() which blocks the main thread and calls the function in an endless loop once per frame. The animation loop is where we render and update the scene. In this case we clear the background with a black color and set a tint color that is applied when drawing textures or rectangles. The remaining code ensures the bouncing logo stays within the bounds of the frame producing the iconic 2000s DVD player screensaver.

package main

import (
	"embed"
	"image/color"
	"math/rand/v2"

	fl "github.com/bernhardfritz/flatland"
)

type Vec2 struct {
	X float64
	Y float64
}

func randomColor() color.RGBA {
	return color.RGBA{uint8(rand.Uint32()), uint8(rand.Uint32()), uint8(rand.Uint32()), 255}
}

//go:embed resources/*
var ASSETS embed.FS

func init() {
	fl.AddFileSystem(ASSETS)
}

func main() {
	dvdLogo := fl.LoadTexture("resources/DVD_video_logo.png")
	position := Vec2{0, 0}
	velocity := Vec2{0.2, 0.2}
	color := randomColor()

	animate := func() {
		fl.ClearBackground(0, 0, 0, 255)
		fl.SetTintColor(color.R, color.G, color.B, color.A)
		fl.DrawTexture2f(dvdLogo, position.X, position.Y)

		position.X += velocity.X * fl.DeltaTime
		position.Y += velocity.Y * fl.DeltaTime

		if position.X+dvdLogo.Width >= fl.Width {
			velocity.X = -velocity.X
			position.X = fl.Width - dvdLogo.Width
			color = randomColor()
		} else if position.X <= 0 {
			velocity.X = -velocity.X
			position.X = 0
			color = randomColor()
		}

		if position.Y+dvdLogo.Height >= fl.Height {
			velocity.Y = -velocity.Y
			position.Y = fl.Height - dvdLogo.Height
			color = randomColor()
		} else if position.Y <= 0 {
			velocity.Y = -velocity.Y
			position.Y = 0
			color = randomColor()
		}
	}

	fl.SetAnimationLoop(animate)
}

Documentation

Overview

A simple 2D graphics library

Index

• Variables
• func AddFileSystem(efs fs.FS)
• func ClearBackground(r, g, b, a uint8)
• func DrawRectangle(x, y, width, height float64)
• func DrawText(font Font, text string, x, y float64, size int)
• func DrawTexture2f(texture Texture, dx, dy float64)
• func DrawTexture4f(texture Texture, dx, dy, dWidth, dHeight float64)
• func DrawTexture8f(texture Texture, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight float64)
• func SetAnimationLoop(animate func())
• func SetTintColor(r, g, b, a uint8)
• func SetTransform(a, b, c, d, e, f float64)
• type Font
  • func LoadFont(cssFont string) Font
• type Texture
  • func LoadTexture(fileName string) Texture

Variables

var DeltaTime float64

milliseconds it took to draw last frame

var Height float64

clientHeight of the canvas

var MouseButtons int

buttons being pressed (if any)

var MouseX float64

X coordinate of the mouse pointer

var MouseY float64

Y coordinate of the mouse pointer

var Width float64

clientWidth of the canvas

Functions

func AddFileSystem

func AddFileSystem(efs fs.FS)

Copy embed.FS to wasm memory. This must be called before loading assets pass it an embed.FS

func ClearBackground

func ClearBackground(r, g, b, a uint8)

Clears the background with color specified by red, green, blue and alpha channel values between 0 and 255.

func DrawRectangle

func DrawRectangle(x, y, width, height float64)

Draws a color-filled rectangle

func DrawText

func DrawText(font Font, text string, x, y float64, size int)

Draws color-filled monospaced text

func DrawTexture2f

func DrawTexture2f(texture Texture, dx, dy float64)

Draws a texture onto the canvas where dx and dy specify the coordinates of the top-left corner.

func DrawTexture4f

func DrawTexture4f(texture Texture, dx, dy, dWidth, dHeight float64)

Draws a texture of width dWidth and height dHeight onto the canvas where dx and dy specify the coordinates of the top-left corner.

func DrawTexture8f

func DrawTexture8f(texture Texture, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight float64)

Draws a texture of width dWidth and height dHeight onto the canvas where dx and dy specify the coordinates of the top-left corner and parameters sx, sy, sWidth and sHeight define a texture subsection to read from.

func SetAnimationLoop

func SetAnimationLoop(animate func())

Sets the function to call when it's time to update your animation for the next repaint

func SetTintColor

func SetTintColor(r, g, b, a uint8)

Sets the color to tint textures with specified by red, green, blue and alpha channel values between 0 and 255.

func SetTransform

func SetTransform(a, b, c, d, e, f float64)

Sets the matrix to transform all following instances by.

Types

type Font

type Font struct {
	// contains filtered or unexported fields
}

Font, struct literals can be created with LoadFont and passed to DrawText

func LoadFont

func LoadFont(cssFont string) Font

LoadFont - Load monospaced font from a CSS font string into GPU memory (VRAM)

type Texture

type Texture struct {
	Width  float64
	Height float64
	// contains filtered or unexported fields
}

Texture, tex data stored in GPU memory (VRAM)

func LoadTexture

func LoadTexture(fileName string) Texture

LoadTexture - Load texture from file into GPU memory (VRAM)