Difference between revisions of "Planet Clock"
Jump to navigation
Jump to search
| Line 2: | Line 2: | ||
[[File:AnalougeClockWithPlanets.png|thumb]] | [[File:AnalougeClockWithPlanets.png|thumb]] | ||
'''Description:''' | '''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. | |
<pre> | <pre> | ||
| Line 45: | Line 45: | ||
); | ); | ||
</pre> | </pre> | ||
| + | '''See more:''' | ||
| + | * [https://wiki.zcubes.com/Array.jq() Array.jq()] | ||
Revision as of 13:40, 4 June 2025
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 more: