Xperimental

Nanjizal has grown to the point where it is useful to have an overview.

Here I collate smaller projects and provide a narative on Nanjizal and the development of concepts through my experiments and helper libraries.

Utilities
Trilateral ( Vectors for GPU )	justDrawing	pixelDrawing
folder	htmlHelper	Nodule ( XML -> LinkedList )	SimpleText

Ports
jsgl	hxSpiro	hxDaedalus	hxRectPack2D
triangulations	hxPolyK

Puzzles/Games
JigsawX	tryflipSpin puzzle	PolyminoTriangles ( tetris )

Code Animations
Zeal of Zebra	L-Systems	LED display	Dot matrix

Interaction
Letters	Monkey

Xperimental
Ascii terminal	Divtastic drawing with div’s	Ellipse SVG parsing	FXG Parrot

Zeal of Zebra

Using my Leaf offset rotations, folders image/file helper and my port of RectPack2D.

• WebGL
• Canvas

Zeal Development

From the Canvas version to the WebGL, with some Texture packing and Ascii art diversions. read more.. >

Code Links:

Canvas	Kha - WebGL
htmlHelper.canvas.Leaf	MainApp
zeal.Zebra

Ascii Art, hxPixel and Ansi

In my exploration of Zeal, and and creating a console Neko texture packer. Was curious about a quick display of images within the terminal window - Ansi and ascii. read more.. >

Code Links:

info	link
Neko Main	Main
folder	folder.Folder

JigsawX

Flexible jigsaw engine where you can adjust aspects of the curve generation and number of rows and columns.

WebGL Kha uses Trilateral mapping textures to the triangulation fill generated, rotation via arrow keys when mouse down. Canvas version uses one per Div piece.

• WebGL mouse down and <- -> to rotate piece.
• Canvas/Dom

Flash, Swing Java, OpenFL, NME ( + android ), Kha and Canvas versions, some with webcam or video.

Trilateral drawing contours with WebGL ( GL ).

Trilateral converts drawing commands into contours built with triangles suitable for rendering vector graphics on the GPU. Mostly tested with Kha’s Haxe toolkit with WebGL examples. Trilateral is Haxe toolkit agnostic, but additional features are to be found both in trilateralXtra library and in trilateralBazaar the examples library.

code

• trilateral ( core generic )
• trilateralXtra ( platform specific and extras )
• trilateralBazaar ( example use cases )

demo

• WebGL simple shape demo

features:

• Different contour rendering from basic overlapping lines, basic triangle corner to complex rounded corners.
• Contour thickness control.
• Simple moveTo, lineTo, quadTo, curveTo.
• Support for basic 2 triangle shapes: line, quad, star.
• Support for basic multiple triangle shapes: polygon, star, diamond, square, rounded rectangle, circle, ellipse.
• Integration with shape fill algorithms basic fill hxPolyK, poly2trihx and hxGeomAlgo’s Tess2.
• SVG path parsing, encluding Ellipses, and support for some simple SVG images.
• FXG, a depreciated adobe Vector format typically used with Flash.
• Complex linear gradient fill of arbitary shapes.
• Image fill of arbitary shapes.
• Dot matrix 5x7 character scrolling.
• Seven Segment LED and 16 Segment LED.
• Triangle HitTesting allowing shape perfect hit testing.
• Tools for scaling, rotating and translating drawings, also useful for manipulating SVG paths.
• Indexing for easy extraction and manipulation of triangulated structures.

Letters

Tetris, triangle crazy.

I was asked if I could make Tetris, implemented it with triangles not an MVC framework! You can define your own shapes in the code easily and it runs on all Haxe toolkits, did add SVG target but meh, also emscriptem via NME. Two versions below. Arrow keys to play.

• WebGL
• Canvas

hxSpiro

Port of Spiro a fancy tool for making intuative curves.

• code pen demo

TODO: upload better version to github as the code pen one move points is broken.

L-Systems

greatly improved this project adding cool examples, animation and implementing color and abstracting for use with both Kha and Luxe rendering or possibly other toolkits.

• L-System animation wait for 2nd page spoiler alert below:

jsgl

Ellipse SVG parsing

hxRectPack2D

Parrot FXG with Trilateral

Dot matrix with Trilateral

SimpleText

Simple Text provides more features than the minimal Kha text. SimpleText parses characters as integers so it’s quite low level and rather ugly inside.

Features:

• Wrapping
• Horizontal justification, LEFT, CENTRE, RIGHT, …
• Highlight of word, character, sentences
• Allows Equations to control x, y, scale coordinates of letters.

tryFlipSpin puzzle

A puzzle where you flip triangles by clicking on thier corners to complete the image.

A puzzle with a similar concept to a slider puzzle but instead of sliding rectangular pieces you flip triangular pieces, very hard to play. Developed in NME/OpenFL/Flash uses lots of BitmapData. It could be useful for triangular grid games in theory but the code is perhaps a bit complex for such reuse.

Nodule

Nodule a library to parse XML to a faster structure.

Nodule does very low level parsing of XML using character codes, so it’s pretty fast but not infinitely robust. Provides a LinkedList firstChild structure with extensive use of abstracts to make access of final structural data easy and flexible. By hooking in Kha’s text it’s possible to provide simple color coded XML render.

Divtastic drawing with just div’s.

JustDrawing

Provides simple draw command API to Canvas, SVG, Swing, Flash and Pixels.

folder

folder provides wrappers for file browsing and getting images as hxPixels and then saving them again, it was originally part of ‘finda’ but I decided it was more useful without graphics as a helper for other projects like RectPack2D.

folder code

^{(folder image from pixabay)}

HtmlHelper

HtmlHelper contains setup code such as basic WebGL and Canvas setup and more.

^{(image from pixabay)}

Monkey

Monkey is really cool, but totally useless, because it’s all one file to run in an early version of Kodegarden with all assets encoded!

Originally a complete rework of Kharira a demo on Kha. Monkey uses hundreds of Suzanne heads with a 100 different textures. It uses Quaternions so that rotation in 3D works well. Due to the number of embedded assets it takes forever to load but runs as smooth as butter.

demo slow to load With key and mouse combinations you have complete control of rotations and translation.

Try alt + arrow up/down for Zoom.

Try Enter + shift + arrow left/right to rotate all heads speed - super crazy!

Monkey Code for the adventurous