Axes #

Axes draws three 3D orthogonal lines which can be used as a reference point when rotating or moving an object.

Params #

Name	PropType	description
size	number	Axes size, each axis has the same length
bits	number	Bitmask that can be used to indicate which axis to show

Bitmask #

The bits parameter which axis to show. Even though this param is a number, it works as a Bitmask (Similar chmod’s numerical permissions in GNU/Linux). This bitmask allows different options to be chosen in a sigle parameter. p5.treegl adds the Tree object which allows easy access to all the necesary bits to mark different options. Each option is ordered as follows:

Description	Value in Tree	Binary
Draws the X axis	Tree.X	0000001
Draws the Y axis	Tree.Y	0000010
Draws the Z axis	Tree.Z	0000100
Draws the -X axis	Tree._X	0001000
Draws the -Y axis	Tree._Y	0010000
Draws the -Z axis	Tree._Z	0100000
Draws labels that help identify each axis	Tree.LABELS	1000000

Showcase #

Click and drag to move the camera arround!

code #

sketch.js

var easycam;

var size = 200;
var LABELS = true;
var bits = ['default', 'X Y Z', '-X -Y -Z', 'everything'];

var gui;

function setup() {
	createCanvas(400, 400, WEBGL);
	setAttributes('antialias', true);

	easycam = createEasyCam();
	easycam.setZoomScale(false);

	gui = createGui('Double click to close');
	gui.addGlobals('size', 'bits');
}

function draw() {
	rotateX(-0.5);
	rotateY(-0.5);

	background(255);

	let selectedBits = 0;

	switch (bits) {
		case 'X Y Z':
			selectedBits = Tree.X | Tree.Y | Tree.Z;
			break;

		case '-X -Y -Z':
			selectedBits = Tree._X | Tree._Y | Tree._Z;
			break;

		case 'everything':
			selectedBits = Tree.X | Tree.Y | Tree.Z | Tree.LABELS | Tree._X | Tree._Y | Tree._Z;
			break;

		default:
			selectedBits = Tree.X | Tree.Y | Tree.Z | Tree.LABELS;
			break;
	}

	push();
	axes({ size: size, bits: selectedBits });
	pop();
}