Planet Clock - Revision history

Vishwa: /* Planet Clock */

2025-06-04T20:33:09Z

Planet Clock

Vishwa: /* Planet Clock */

2025-06-04T19:41:01Z

Planet Clock

Vishwa: /* Planet Clock */

2025-06-04T19:40:22Z

Planet Clock

Vishwa: /* Planet Clock */

2025-06-04T02:25:05Z

Planet Clock

Vishwa: 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..."

2025-06-03T23:46:07Z

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..."

New page

== 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 planets.

<pre>
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
);
</pre>

@@ Line 45: / Line 45: @@
 );
 </pre>
-'''See more:'''
+'''See also:'''
 * [https://wiki.zcubes.com/Array.jq() Array.jq()] to learn more about Jquery in Z^3 Code Editor.

@@ Line 46: / Line 46: @@
 </pre>
 '''See more:'''
-* [https://wiki.zcubes.com/Array.jq() Array.jq()]
+* [https://wiki.zcubes.com/Array.jq() Array.jq()] to learn more about Jquery in Z^3 Code Editor.

@@ Line 2: / Line 2: @@
 [[File:AnalougeClockWithPlanets.png|thumb]]
 '''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 planets.
+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>
@@ Line 45: / Line 45: @@
 );
 </pre>