TagCanvas cloud shapes
Skip to:
The default shape of the TagCanvas cloud is a sphere - the radiusX,
radiusY and radiusZ options can be used to squash or
stretch it, but the shape option allows you to change the shape for
one of the other types available.
Apart from the overall shape of the cloud, the shape option
accepts additional arguments to fine-tune the shape produced. These are passed
to the shape function as values in parentheses after the shape name, for example:
sphere(0.5).
The sphere shape
Here is the default sphere, filling the canvas on the left. I've used the letters A-Z repeated once to provide enough tags to make the shapes more easy to see.
TagCanvas.Start('tagcanvas1','ptTags', {
shape: "sphere"
});I don't really need the shape: "sphere" here, it will default to
using a sphere if another shape option is not selected.
Arguments
- magic
- Adjusts the angle offset between the tags. Optional.
The vertical cylinder
The "vcylinder" shape creates a cylinder with the same radius as the default sphere and initially aligned vertically.
TagCanvas.Start('tagcanvas2','ptTags', {
shape: 'vcylinder'
});On the main TagCanvas page I have the cylinder shapes locked to keep them
aligned with their axis, but for this example I have left out the
lock option to show the shape better.
Arguments
- magic
- Adjusts the angle offset between the tags. Optional.
The horizontal cylinder
The "hcylinder" shape is the same as the "vcylinder", but aligned horizontally.
TagCanvas.Start('tagcanvas3','ptTags', {
shape: "hcylinder",
lock: "x"
});This time I have set the lock option to prevent movement in the
X direction.
Arguments
- magic
- Adjusts the angle offset between the tags. Optional.
The horizontal ring
The rings take up much less space and would become cramped with the 52 characters of A-Z twice, so I've changed the tag source to something that fits better.
TagCanvas.Start('tagcanvas4','ptTags2', {
shape: "hring",
lock: "x"
});The "horizontal" is referring to the axis that the ring is centred on, to be consistent with the horizontal cylinder. I've locked this one again.
Arguments
- offset
- Moves the ring away from the central axis by an amount proportional to the radius. Optional.
The vertical ring
The vertical ring is the same as the horizontal ring, but the circle is initially centred around the vertical axis.
TagCanvas.Start('tagcanvas5','ptTags2', {
shape: "vring(0.5)",
offsetY: -60,
lock: "x"
});The "hring" and "vring" shapes support an optional argument that moves the ring along the axis by an amount proportional to the radius. Moving the ring away from the centre of the cloud means that it is not completely edge-on to the screen.
I still wanted the cloud to appear in the centre of the canvas, so I've added
in the offsetY option to move it upwards by 60 pixels.
Arguments
- offset
- Moves the ring away from the central axis by an amount proportional to the radius. Optional.
User-defined shapes
From version 2.7 you can supply the name of your own function to create the shape of the cloud.
function DblHelix(n, rx, ry, rz) {
var a = Math.PI / n, i, j, p = [],
z = rz * 2 / n;
for(i = 0; i < n; ++i) {
j = a * i;
if(i % 2)
j += Math.PI;
p.push([rx * Math.cos(j),
rz - z * i,
ry * Math.sin(j)]);
}
return p;
}
TagCanvas.Start('tagcanvas6','ptTags', {
shape: "DblHelix",
lock: "x"
});
The custom shape function takes four standard arguments: n is
the number of tags to position, rx is the X radius, ry
is the Y radius and rz is the Z radius. The function must return
an array containing n entries, each entry being an array of X,Y,Z
coordinates, e.g. for n == 2, the array returned could be
[[1,2,3], [3,1,5]].
Note: for TagCanvas, X is left-right, Y is top-bottom and Z is front-back.
The shape callback function will also be provided with any extra arguments
that are supplied in parentheses to the shape option:
function Myshape(n, rx, ry, rz, size, num) {
if(size == "big") {
// big shape
}
if(num >= 10) {
// do something else
}
// build the array of coordinates
return p;
}
options['shape'] = 'MyShape(big,10)';
The extra arguments are passed to the function as strings without any
processing, so size will be "big" and num
will be "10". Any extra arguments that are not specified in the
shape option will be undefined.