jjcube.html

jjcube.js generates a perspective projection of an NxNxN cube and is a port of the original PHP code to Javascript. jjcube.js is named after the author of the original PHP code, Josef Jelinek.

jjcube.js is a drop-in replacement for the PHP code.
All images are generated on the client, rather than the server.
Works on any web page. No PHP dependency.
Shims were used to allow easy comparison with original PHP source.

The following changes have been made.

The 'f' parameter, which specifies the image format, is ignored.
The restriction on the maximum dimensions of an image was removed.
Missing or invalid colors in the 'fl' parameter default to 'x' (gray).
The default size was changed to 50 from 100.
The original documentation did not list all available colors.

1. Download jjcube.js

2. Include jjcube.js in your HTML file.

<script src='jjcube.js'></script>

3. Use an img element with the CSS class 'cube'. The filename (e.g. 'cube.png') is optional and is ignored.

A) Define the 'data-src' attribute.

<img class='cube' data-src="cube.png?fl=wwwwwwwwwgggggggggrrrrrrrrr" />

B) Or, define the 'src' attribute. Using the 'src' attribute is discouraged because it causes the browser to attempt to fetch a (non-existent) image from the server. The 'src' attribute is only supported to allow drop-in replacement of the original PHP source.

<img class='cube' src="cube.png?fl=wwwwwwwwwgggggggggrrrrrrrrr" />

Name	Description
fl	String of length (n * n * 3) composed of letters specifing the sticker colors. Available colors: blue (b), lightblue (c), darkgray (d), green (g), black (k), lightgray (l), magenta (m), orange (o), pink (p), red (r), white (w), gray (x), yellow (y). [b, c, d, g, k, l, m, o, p, r, w, x, y] (Default: x)
bg	Hex code of background color. (Default: FFFFFF, white)
size	Image dimensions. (Default: 50)
n	Number of layers in each face. (Default: 3)
m	View angle. [x, y, xy] (Default: none)
f	Format of image. [gif, png, jpeg, jpg] (Default: gif) Ignored in jjcube.js
b	Border width of stickers. [0..200] (Default: 25)
d	Distance between stickers and cube body. [0..100] (Default: 5)

No parameters

fl=wwwwwwgwgogrggggggwrrrrrrrr

fl=............wgrobyk..cpmlxd (13 colors)

m=x, m=y, m=xy

n=2, n=4

bg=a0a0cc

size=25

b=3, b=90

d=0, d=80

jjcube.js

Instructions:

Parameters:

Examples: