Planet Clock

Planet Clock

Description: This clock image is built using ZCubes' RENDER function, which structures visual elements as arrays where the first row defines SVG-style attribute names (like "type", "coordinates", "fill"), and each following row defines an object using those attributes. Planets are placed at the 12, 3, 6, and 9 o’clock positions using circles filled with NASA images, and clock hands are added as lines centered at the clock's midpoint. Each hand is animated using an animate type with rotation settings that mimic real-world time progression. This modular, table-like approach makes the code highly readable and easy to modify.

clockscene = RENDER( 
    [
        ["type", "coordinates", "r", "fill", "count", "transform-origin", "stroke-width"],
        ["circle", [[100, 20, 0], [100, 180, 0], [180, 100, 0], [20, 100, 0]], 25, "https://photojournal.jpl.nasa.gov/jpeg/PIA02873.jpg", 4, [100, 100], 10]
    ]
);

clockscene = RENDER(
    [
        ["type", "coordinates", "r", "fill", "count", "transform-origin", "stroke-width"],
        ["circle", [[100, 20, 0], [100, 180, 0], [180, 100, 0], [20, 100, 0]], 25,
            [
                "https://photojournal.jpl.nasa.gov/jpeg/PIA02873.jpg",
                "https://images-assets.nasa.gov/image/PIA01253/PIA01253~small.jpg",
                "https://images-assets.nasa.gov/image/PIA16853/PIA16853~small.jpg",
                "https://images-assets.nasa.gov/image/PIA21430/PIA21430~medium.jpg"
            ], 4, [100, 100], 10]
    ]
);

RENDER(
    [
        ["id", "type", "coordinates", "fill", "transform-origin"],
        ["hour", "line", [110, 110, 110, 50], "blue", [110, 110]],
        ["minute", "line", [110, 110, 110, 40], "green", [110, 110]],
        ["second", "line", [110, 110, 110, 20], "red", [110, 110]]
    ],
    clockscene
);

RENDER(
    [
        ["id", "animate", "animationsettings"],
        ["hour", "animate", [["loop", "rotate", "duration", "easing"], [true, 360, 12 * 60 * 60 * 1000, "linear"]]],
        ["minute", "animate", [["loop", "rotate", "duration", "easing"], [true, 360, 60 * 60 * 1000, "linear"]]],
        ["second", "animate", [["loop", "rotate", "duration", "easing"], [true, 360, 60 * 1000, "linear"]]]
    ],
    clockscene
);

See also:

• Array.jq() to learn more about Jquery in Z^3 Code Editor.
• More Render examples()