Malkasten & MatrixCanvas technical demos

These demonstrations represent several steps on the way to build a browser game and other capabilities of the included classes.

Press [Space] to pause each demo. Reload each page to start the demo again.

Source Code

gitlab.com/feeela/js-utils

My library without a name – a set of often used JavaScript utilities, helper functions and modules.

gitlab.com/feeela/malkasten

This repository contains classes to paint on a canvas.

Malkasten

Malkasten is the basic canvas wrapper class that uses percentage coordinates to draw on a canvas. It has animation capabilities, stacks contents in layers, uses CSS sizing for the canvas, and scales according to window.devicePixelRatio.

MatrixCanvas

Extends Malkasten and uses an internal 2D array of fields (tiles) to paint objects in a grid.

Utilities

The Malkasten repository also contains classes for simple 2D geometry (Vector, Point), loop distinct pieces of code in a given order (ActionRunner), render text on a canvas (Text, TextBlock & TextBlockWrap), and display a keyboard controllable navigation (Menu).

gitlab.com/feeela/spiele.imstadtpark.de

The repositiory containing the games and examples on this website.

MatrixCanvas & Matrix

Basic grid

• A Malkasten object with a point that moves via a loop. Fakes the Matrix.

• The basic MatrixCanvas. Has a cursor and reacts to user input. The cursor can be moved with arrow keys; but not beyond the canvas edges.

• Demo of the Matrix object; collect things via a keyboard controlled cursor.

• Demo of the Matrix, where the keyboard cursor can be moved beyond the canvas dimensions and will appear on the opposite edge.

• Same as before, but faster reaction for keyboard cursor.

• A marker that randomly wanders around the MatrixCanvas and tracks on often each point it visited.

Matrix objects

MatrixObjects may have one or more behaviors assigned.

• Randomly copy a MatrixObject to unoccupied neighbouring fields.

• Moving MatrixObjects that spawn other moving MatrixObjects.

• Test if MatrixObjects can fade out and disappear.

Matrix based layout with collision detection

• You cannot move through those

• Walls placed by a maze generator;
  You can choose between different algorithms.

Path finding algorithm

• Visualization of different path searching algorithms on randomly genrated mazes.

• Find a path from the top left corner to the current cursor position. (Recalculates when keyboard cursor is moved.)

• The path finding algorithm with handbrake applied to see single steps. Searches through randomly generated mazes.

• Demo of the path finding algorithm used in a MatrixObject.

Perlin noise and pre-game tests

• Uses a Perlin noise algorithm to create a simple map with water, land & mountains.

• You can only see that part of a map, where the cursor already has been.

Miscellaneous demos

Text Block

Print text on a canvas; has colors and backgrounds with padding

Text Block with Webfont

Print text on a canvas; same as above but uses a webfont.

Color

Demo for class Color, which contains color helper functions

Menu

On-canvas menu with keyboard selection

Pixelate

Rasterize a given image

Export

Some Malkasten objects can be serialized as JSON; here's an overview of which objects do describe themselves.

Mouse interaction

Pointer Control

Now you place the walls yourself, click-a-di-click.

Pixel Paint

Paint a pixel graphic by placing or removing single pixels.

Malkasten

The Malkasten is a Canvas class without using the matrix. It provides basic drawing and other helper methods.

Random number demos

• Randomly chooses a neighbour, but only if that neighbour point is not in the internal list (leaves gaps).

• Paint a line to random horizontal and vertical directions.

• Same as Ravel, but stop and spawn a new CanvasObject after a random amount of steps. Channels extraterrestrial cyphers.

• Similar to Cryptic, but also uses diagonal directions and uses lines, curves, circles and gaps. Might look like runes in a magic spell.

• A single Sigil instance, that runs for hundreds of iterations and produces a scribble.

Colony (Random number demos #2)

Colonies are a swarm of points and are storing points as an internal list (array). For each point a full check of each possible neighbour is performed, and as long as there are free neighbouring points a new point will be added (fills up entire screen). A colony has the feature to block points via pushing points to the static class property Colony.doNotStepOn and thus prevent itself and other Colonies from stepping on that same point again.

• As Bacteria 3, but for each point a line is drawn from the start point.

• As Bacteria 3, but for each point a line is drawn from the previously painted point. After all colonies are finished growing, a crpytic symbol is painted.

• As Bacteria 3, but for each point a line is drawn from the previously painted point. After all colonies are finished growing, a crpytic symbol is painted.

Malkasten Helper

• Demo of the polygon class.

• Collision detection between a polygon and other objects.

• Gradients created from a center point and an angle (in degree). Can be animated.

• Demo for Vector.normalize().

Malkasten miscellaneous

• An analog clock built with Malkasten objects.

• Eyes that follow the mouse cursor movement.

• Plot mathematical formulas in a coordinate system.

• Vizusalisation of constructing a cubic Bézier curve.

• Vizusalisation of constructing a quadratic Bézier curve.