haxelib git peote-view-origin https://github.com/maitag/peote-view-origin

"Displaylist"  contains "Element"s
"Element"      use of "Program" / "Image"
"Program"      use of "Texture" / custom shader code
"Texture"      contains "Image"s
"Image"        pixels ;)

	peoteView = new PeoteView();

	peoteView.setTexture({
		texture:  0,          // texture index
		slots:   16,          // amount of image-slots
		w:      512,          // slot width
		h:      512           // slot height
	});

	peoteView.setImage({
		image:    0,           // image index
		texture:  0,           // texture to store image-data inside
		filename: "pixel.png"  // image filename or url to load image from
	});

	peoteView.setProgram({
		program:  0,           // program index
		texture:  0            // images stored here can be used by element
	});

	peoteView.setDisplaylist({
		displaylist:   0,      // displaylist index
		maxElements: 100       // maximum elements to display
	});

	peoteView.setElement({
		element:      0,       // element index
		displaylist:  0,       // displaylist to put in
		program:      0,       // shader (+texture) to use
		image:        0        // image number
	});

	peoteView = new PeoteView({
		
		maxDisplaylists:    10,
		maxPrograms:        50,
		maxTextures:        50,
		maxImages:         100
		// TODO: onError:    function(errorcode, msg) {}
	});

	// --------------------- TEXTURE -------------------- //
	
	peoteView.setTexture({ 

		texture: 0,       // texture index
	
		slots: 16,        // minimum amount of slots to reserve ( default is 1 )

		w:     512,       // slot width
		h:     512,       // slot height
		
		mipmap:true,
		magFilter:1
		minFilter:1
	});

	// --------------------- IMAGE ----------------------- //
	
	peoteView.setImage({

		image:   0,                  // image index
	                                 
		texture: 0,                  // texture to store image-data inside
                                     
		filename: "assets/font.png", // image filename or url to load image from
                                     
		preload: true,               // load images into texture, no matter of usage 
		                             // default behaivor: Image is loaded on first use of element
		
		// to disable automatic insert into free texture-slot:
		// ---------------------------------------------------
		
		slot: 0,                     // manual set texture-slot to load image in
                                     // all images of same texture should define or not define this parameter
		
		// image fitting and aligning inside texture-slot:
		// -----------------------------------------------
		
		fit: "in",                   // "in", "out" or "exact" fitting loaded image into slot size
		
		// or set position/size directly to create own texture-atlas:
		// ----------------------------------------------------------
		
		x:  10,                      // Position from left
		y:  10,                      // Position from top
		w: 100,                      // new image width
		h: 100,                      // new image height
		keep: true,                  // keep existing pixels in slot (for fit:"in" this works to)
                                     
		r: 0.5, g:0, b:0, a:0.9      // background colors/alpha for border if not exactly fit
	});
	

	var iteration  = [10];
	var somefloats = [2.0, 3.14, 4.1];
	
	// --------------------- PROGRAM --------------------------- //
	peoteView.setProgram({

		program: 0,                           // program index
	
		vshader: "assets/lyapunov_01.vert",   // custom vertex shader
		fshader: "assets/lyapunov_01.frag",   // custom fragment shader
		
		texture: 0,                           // all images stored inside this texture can be used

		// textures:[0,2,1,4]                 // to combine multiple textures with own shadercode
		                                      // max 7 aditional textures available per program
		
		vars: [ "iteration" => iteration,     // custom uniform variable bindings for this program
		        "somefloat" => somefloats
		      ]
	});

	// ------------------------- DISPLAYLIST -------------- //

	peoteView.setDisplaylist({

		displaylist: 0,                 // displaylist index
		
		type:DisplaylistType.RGBA,      // can be combination of .PICKING  .ANIM   .ROTATION...
		
		maxElements:    100,            // maximum elements to set up via setElement()

		// gpu-buffer segmentation (can be potimized for better render performance)
		// maximum number of displayable elements is product of these values:
		
		bufferSegmentSize: 10           // number of elements per segment that shares the same program (one draw-call)
		bufferSegments:    10,          // how much segments of these size will be reserved

		
		x: 150,                         // pixels from left border
		y: 50,                          // pixels from top border
		w: 1000,                        // width
		h: 1000,                        // height
		z: 0,                           // z-order
		
		r: 0.5, g:0, b:0, a:0.9         // background colors/alpha
		
		//renderToTexture: true,        // render content into a texture every frame
		//texture:0,                    // texture index to use (should have same width and height)
		
		//zoom:1                        // zoom level (2.0 is double sized, 0.5 half size)
		//pivotX:0                      // x center of zoom
		//pivotY:0                      // y center of zoom
		
		enable: true
	});

	// ----------------------- ELEMENT --------------------- //
	
	peoteView.setElement({

		element: 0,      // element index

		displaylist: 0,  // displaylist to put in
		
		program: 0,      // shader (+texture) to use
		
		// Position and Size ---------------
		
		x: 10,           // pixels from left displaylist border
		y: 10,           // pixels from top displaylist border
		w: 100,          // width
		h: 100,          // height
		z: 0,            // z-order   ( 0 <= z <= 32767 )
		
		rotation:45      // rotation in degrees (clockwise)
		pivotX:0,        // x center of rotation
		pivotY:0,        // y center of rotation
		
		rgba:0xff0000ff  // color (multiply)
		
		// (for animation -> see samples)
		
		// Texture Mapping ---------------
		
		image: 0,        // image number
		// slot: 0,      // or set texture-slot manual
		                 // without image+slot parameter -> full texturespace
		
		tile:  0,        // (0..255) texture coordinates will be splittet into 16x16 tiles
		
		// tx, ty,       // manual setting texture-coordinate position inside texture(-slot)
		// tw ,th        // manual setting texture-coordinates size
	});