Difference between revisions of "Planet Clock"
Jump to navigation
Jump to search
(Created page with "== Planet Clock == '''Description:''' The following code utilizes ZCubes' `RENDER` function to make a clock where the 12, 3, 6, and 9 o'clock positions are represented by p...") |
|||
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
== Planet Clock == | == Planet Clock == | ||
| − | + | [[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 also:''' | ||
| + | * [https://wiki.zcubes.com/Array.jq() Array.jq()] to learn more about Jquery in Z^3 Code Editor. | ||
| + | * [https://wiki.zcubes.com/RENDER_Examples More Render examples()] | ||
Latest revision as of 14:33, 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 also:
- Array.jq() to learn more about Jquery in Z^3 Code Editor.
- More Render examples()