TagCanvas cloud shapes

« Return to TagCanvas page

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.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
One Two Three Four Five Six Seven Eight Nine Ten

« Back to top of page Centre callback function »

This site uses cookies - details here.