Transparent Background

This cube uses a modified version of AnimCube3.js for transparency as described below (check out also abstract background). The mods override the parameters bgcolor, butbgcolor, troughcolor, slidercolor and cubecolor. You can maintain control of the color for any of those in your own customized version of AnimCube by not making the changes that would override the relevant parameters. Facelet borders can also be added as shown on the second cube in each row.


Code mods:

To make the cube background transparent change the first occurrence of fillRect to clearRect in the paint function. To make the trough transparent do the same for the second occurrence. For a transparent slider with only a vertical bar showing progress in a transparent trough, change the whole line for the third occurrence to the following (do not change fillRect to clearRect):

graphics.fillRect(progress-dpr*2, height-progressHeight-dph, dpr*3, progressHeight);

To make the buttonbar transparent change both occurrences of fillRect to clearRect in the drawbuttons function (first one is for clear button only, second one is for full buttonbar). To make the cube color transparent, in the fixblock function add the following line right after where it says: "find and draw black inner faces".

graphics.globalCompositeOperation = 'destination-out';

Also add the following line right before where it says: "draw all visible faces and get dragging regions".

graphics.globalCompositeOperation = 'source-over';

For facelet borders, make the following mod in the fixblock function in section: "draw all visible faces and get dragging regions".

Change:
drawPolygon(graphics, fillX, fillY, colors[cube[i][p * 3 + q]]);
fillPolygon(graphics, fillX, fillY, colors[cube[i][p * 3 + q]]);

To:
fillPolygon(graphics, fillX, fillY, colors[cube[i][p * 3 + q]]);
drawPolygon(graphics, fillX, fillY, darker(colors[cube[i][p * 3 + q]]));

Make a similar mod in the same section for supercube.

For dark backgrounds, some additional mods are needed as shown here.


Close