Skip to content

Add "Talking Planets" interactive example#459

Open
tracygardner wants to merge 3 commits intomainfrom
claude/new-flockxr-demo-U0LsF
Open

Add "Talking Planets" interactive example#459
tracygardner wants to merge 3 commits intomainfrom
claude/new-flockxr-demo-U0LsF

Conversation

@tracygardner
Copy link
Contributor

@tracygardner tracygardner commented Mar 23, 2026

Summary

Added a new interactive example called "Talking Planets" that allows users to explore the Solar System by clicking on planets to hear facts about them in different voices.

Key Changes

  • New example file: examples/talking_planets.flock - A comprehensive Blockly-based project featuring:

    • 6 celestial bodies (Sun, Mercury, Venus, Earth, Mars, Jupiter) rendered as 3D spheres with realistic colors and sizes
    • Continuous rotation animations for each planet with varying speeds
    • Click-to-speak functionality where each planet has unique voice characteristics (pitch, rate, volume)
    • Instructional text and workspace comments to guide users
    • Dark space-themed background with a green ground plane
  • UI Integration: Updated all locale files (en, de, es, fr, it, pl, pt, sv) to add the "🔭 Talking Planets" example to the examples dropdown menu

  • HTML: Added the new example option to the examples selector in index.html

Implementation Details

  • Each planet is created as a sphere with appropriate dimensions and positioning to represent relative sizes and orbital distances
  • Voice parameters are customized per planet (e.g., Mercury has higher pitch/rate to sound "faster", Mars uses a male voice)
  • Uses the speak block with asynchronous audio playback to allow multiple interactions
  • Demonstrates use of rotation animations, 3D object creation, text display, and text-to-speech features

https://claude.ai/code/session_01LW6oNJHFgseCVXWVJZoL94

Summary by CodeRabbit

  • New Features

    • Added "Talking Planets" — an interactive 3D solar-system demo with a rotating Sun and planets that play spoken descriptions when clicked.
    • Added a "🔭 Talking Planets" option to the examples menu for quick access.
  • Localization

    • UI label "🔭 Talking Planets" added and localized in English, German, Spanish, French, Italian, Polish, Portuguese, and Swedish.

New demo showcasing the speak (text-to-speech) block, which was
previously unused in any demo. Features 6 spinning celestial bodies
(Sun + 5 planets) built from spheres with rotate_anim_seconds (LOOP)
animations. Clicking each planet triggers it to speak a fun fact about
itself in its own voice using different PITCH/RATE settings per planet.

Unique features demonstrated:
- speak block (TTS) with varied voice, pitch, and rate per object
- rotate_anim_seconds with LOOP=true for continuous spinning
- Dark deep-space sky and floor aesthetic
- Educational interactivity (click-to-learn)

https://claude.ai/code/session_01LW6oNJHFgseCVXWVJZoL94
@coderabbitai
Copy link

coderabbitai bot commented Mar 23, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9bb2c678-b3bd-4ddb-9c1a-5bb84aa06d11

📥 Commits

Reviewing files that changed from the base of the PR and between 4b1d06e and 6f689b9.

📒 Files selected for processing (1)
  • examples/talking_planets.flock
✅ Files skipped from review due to trivial changes (1)
  • examples/talking_planets.flock

📝 Walkthrough

Walkthrough

Adds a new "Talking Planets" example workspace that builds a solar-system scene with rotating meshes and per-object click triggers that run speech synthesis; also updates the examples dropdown and locale files to surface the new example in the UI.

Changes

Cohort / File(s) Summary
New Talking Planets Example
examples/talking_planets.flock
New workspace: sets sky/map/material, creates Sun (+separate particle effect) and planets (Mercury→Saturn) with Saturn rings, stores mesh/model IDs in workspace variables, starts looping rotate animations, and defines when_clicked triggers that call speak with per-object voice/language/rate/pitch/volume.
UI Integration
index.html
Inserted a new <option> into the examples selector: value="examples/talking_planets.flock" with data-i18n="talking_planets", labeled “🔭 Talking Planets”.
Localization Strings
locale/en.js, locale/de.js, locale/es.js, locale/fr.js, locale/it.js, locale/pl.js, locale/pt.js, locale/sv.js
Added talking_planets_ui: "🔭 Talking Planets" to each locale export to display the new example in supported languages.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped to the sky where the planets hum,
I spun the sun and gave each one some drum.
Click a globe, hear its tale in delight—
A rabbit’s small chorus beneath starlit night. 🚀

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title directly and accurately summarizes the main change: adding a new interactive example called 'Talking Planets' to the codebase.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/new-flockxr-demo-U0LsF

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
index.html (1)

496-500: ⚠️ Potential issue | 🔴 Critical

Fix the malformed HTML comment around the Portuguese language item.

The comment closes before </li>, leaving a live closing list tag in the document. That matches the current Prettier failure and blocks this file from parsing cleanly.

🛠️ Minimal fix
-                    <!--li>
-                      <a href="#" data-lang="pt" role="menuitem" tabindex="-1"
-                        >Português</a
-                      -->
-                    </li>
+                    <!--li>
+                      <a href="#" data-lang="pt" role="menuitem" tabindex="-1"
+                        >Português</a
+                      >
+                    </li-->
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@index.html` around lines 496 - 500, The commented Portuguese list item is
malformed because the HTML comment closes before the closing </li>, leaving an
unmatched closing tag; fix by commenting out the entire <li> ... </li> block (or
remove the stray </li>) so the comment encompasses both the opening anchor and
the closing list item — locate the commented block around the Portuguese menu
item (the commented <a href="#" data-lang="pt" ...>Português</a> and the
trailing </li>) and adjust the comment boundaries so the </li> is inside the
comment.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@examples/talking_planets.flock`:
- Line 9: Update the teaching copy so it doesn't call the Sun a planet: edit the
"text" string (the JSON key "text" in examples/talking_planets.flock) to say
"Click on any body" or "Click on any object" (or explicitly "Click on any planet
or the Sun") instead of "Click on any planet", and make the same change where
the text is duplicated around lines 156-157; ensure both instances consistently
distinguish the Sun from planets and keep the rest of the explanatory text
(voice, speed, pitch) unchanged.

In `@locale/fr.js`:
- Line 1015: Translate the English example title value for the key
talking_planets_ui into French so the examples dropdown is fully localized;
replace "🔭 Talking Planets" with an appropriate French phrase (e.g., "🔭
Planètes parlantes" or another agreed-upon translation) by updating the
talking_planets_ui entry in locale/fr.js.

In `@locale/pt.js`:
- Line 1007: The localized Portuguese file currently has the example title for
key talking_planets_ui in English ("🔭 Talking Planets"); update the value to a
natural Portuguese translation (e.g., "🔭 Planetas Falantes" or "🔭 Planetas que
Falam") so the examples list is fully localized under the talking_planets_ui
key.

---

Outside diff comments:
In `@index.html`:
- Around line 496-500: The commented Portuguese list item is malformed because
the HTML comment closes before the closing </li>, leaving an unmatched closing
tag; fix by commenting out the entire <li> ... </li> block (or remove the stray
</li>) so the comment encompasses both the opening anchor and the closing list
item — locate the commented block around the Portuguese menu item (the commented
<a href="#" data-lang="pt" ...>Português</a> and the trailing </li>) and adjust
the comment boundaries so the </li> is inside the comment.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 31af793d-a1be-4950-b2e7-89598bf79a0e

📥 Commits

Reviewing files that changed from the base of the PR and between 76861b8 and 197e6d3.

📒 Files selected for processing (10)
  • examples/talking_planets.flock
  • index.html
  • locale/de.js
  • locale/en.js
  • locale/es.js
  • locale/fr.js
  • locale/it.js
  • locale/pl.js
  • locale/pt.js
  • locale/sv.js

"id": "tp_comment_instructions",
"x": 430,
"y": 10,
"text": "🔭 Talking Planets\n\nExplore our Solar System!\nClick on any planet to hear\nfacts about it in its own voice.\n\nTry changing the voice, speed\nand pitch in the speak block!"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Avoid calling the Sun a planet in the teaching copy.

Both messages tell learners to click a “planet”, but the Sun is clickable too. In an educational example that’s a small scientific inaccuracy and can be confusing.

✏️ Suggested wording
-      "text": "🔭 Talking Planets\n\nExplore our Solar System!\nClick on any planet to hear\nfacts about it in its own voice.\n\nTry changing the voice, speed\nand pitch in the speak block!"
+      "text": "🔭 Talking Planets\n\nExplore our Solar System!\nClick on a planet or the Sun to hear\nfacts in its own voice.\n\nTry changing the voice, speed\nand pitch in the speak block!"
-                          "TEXT": "Click a planet to hear it speak! 🪐"
+                          "TEXT": "Click a planet or the Sun to hear it speak! 🪐"

Also applies to: 156-157

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@examples/talking_planets.flock` at line 9, Update the teaching copy so it
doesn't call the Sun a planet: edit the "text" string (the JSON key "text" in
examples/talking_planets.flock) to say "Click on any body" or "Click on any
object" (or explicitly "Click on any planet or the Sun") instead of "Click on
any planet", and make the same change where the text is duplicated around lines
156-157; ensure both instances consistently distinguish the Sun from planets and
keep the rest of the explanatory text (voice, speed, pitch) unchanged.

tree_jump_ui: "🌳 Saut d’arbre",
shape_push_ui: "🔶 Pousser la forme",
alien_planet_ui: "👽 Planète alien",
talking_planets_ui: "🔭 Talking Planets",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Localize this example title in French.

Everything else in this examples section is translated, so leaving the new label in English will make the dropdown partially untranslated for French users.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@locale/fr.js` at line 1015, Translate the English example title value for the
key talking_planets_ui into French so the examples dropdown is fully localized;
replace "🔭 Talking Planets" with an appropriate French phrase (e.g., "🔭
Planètes parlantes" or another agreed-upon translation) by updating the
talking_planets_ui entry in locale/fr.js.

tree_jump_ui: "🌳 Salto da árvore",
shape_push_ui: "🔶 Empurrar forma",
alien_planet_ui: "👽 Planeta alienígena",
talking_planets_ui: "🔭 Talking Planets",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Localize this example title in Portuguese.

This section already translates the other example names, so keeping the new one in English creates a mixed-language examples list.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@locale/pt.js` at line 1007, The localized Portuguese file currently has the
example title for key talking_planets_ui in English ("🔭 Talking Planets");
update the value to a natural Portuguese translation (e.g., "🔭 Planetas
Falantes" or "🔭 Planetas que Falam") so the examples list is fully localized
under the talking_planets_ui key.

Three visual improvements to make the demo much more engaging:

1. Surface textures on all spheres so rotation is actually visible:
   - Sun: swirl.png (orange-yellow, looks like plasma)
   - Mercury: rough.png (grey, cratered surface feel)
   - Venus: swirl.png (golden, swirling cloud tops)
   - Earth: gridxy.png (blue, grid lines make spin obvious)
   - Mars: rough.png (red, rugged surface texture)
   - Jupiter/Saturn: stripes.png (tan bands, spin is very clear)
   - Jupiter also gets a slightly oblate shape (wider than tall)

2. Saturn with tilted rings using create_cylinder (height 0.12,
   diameter 4.5) + rotate_model_xyz to tilt 25° toward the viewer,
   making Saturn instantly recognisable

3. Sun fire particle effect using create_particle_effect with
   flame_texture.png, orange→red, 40 particles/sec, no gravity

Also adds Saturn speak block (deep voice, 0.7 pitch) with a fact
about its 146 moons and iconic ring system.

https://claude.ai/code/session_01LW6oNJHFgseCVXWVJZoL94
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Mar 23, 2026

Deploying flockdev with  Cloudflare Pages  Cloudflare Pages

Latest commit: 6f689b9
Status: ✅  Deploy successful!
Preview URL: https://64f476e5.flockdev.pages.dev
Branch Preview URL: https://claude-new-flockxr-demo-u0ls.flockdev.pages.dev

View logs

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
examples/talking_planets.flock (1)

860-890: Consider adding a click handler for Saturn's rings.

The rings cylinder (saturnrings) is visually prominent but has no when_clicked handler. Users clicking the rings will get no response, which may be confusing. Consider adding a handler that either plays Saturn's speech or a separate message about the rings.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@examples/talking_planets.flock` around lines 860 - 890, Add a new
when_clicked handler for the rings mesh (e.g., with id like
tp_click_saturnrings) that uses the same MODEL_VAR (tp_v_saturn) and either
invokes the existing speak block (tp_speak_saturn) or a new speak block that
references the rings (mesh name "saturnrings") so clicks on the rings produce
speech; ensure the TRIGGER is "OnPickTrigger" and include the same
TEXT/RATE/PITCH/VOLUME inputs or a short rings-specific message.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@examples/talking_planets.flock`:
- Around line 479-512: The rings (block id tp_blk_srings, variable tp_v_srings,
and its tilt block tp_blk_tilt_rings using rotate_model_xyz) are a separate mesh
and not parented to the Saturn sphere, so they do not inherit Saturn's rotation;
fix by either parenting tp_v_srings to Saturn's sphere model (if the framework
supports a parent/child relationship) or add a matching rotate_model_xyz
animation for tp_v_srings with the same rotation axes and duration used by
Saturn's rotation animation so the rings rotate in sync.

---

Nitpick comments:
In `@examples/talking_planets.flock`:
- Around line 860-890: Add a new when_clicked handler for the rings mesh (e.g.,
with id like tp_click_saturnrings) that uses the same MODEL_VAR (tp_v_saturn)
and either invokes the existing speak block (tp_speak_saturn) or a new speak
block that references the rings (mesh name "saturnrings") so clicks on the rings
produce speech; ensure the TRIGGER is "OnPickTrigger" and include the same
TEXT/RATE/PITCH/VOLUME inputs or a short rings-specific message.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e82b6990-2bf8-4e18-9aaf-5bdd1280415b

📥 Commits

Reviewing files that changed from the base of the PR and between 197e6d3 and 4b1d06e.

📒 Files selected for processing (1)
  • examples/talking_planets.flock

Comment on lines +479 to +512
"type": "create_cylinder",
"id": "tp_blk_srings",
"extraState": "<mutation xmlns=\"http://www.w3.org/1999/xhtml\" has_do=\"false\"></mutation>",
"fields": { "ID_VAR": { "id": "tp_v_srings" } },
"inputs": {
"COLOR": {
"shadow": {
"type": "colour",
"id": "tp_shd_srings_col_s",
"fields": { "COLOR": "#e8cc88" }
}
},
"HEIGHT": { "shadow": { "type": "math_number", "id": "tp_shd_srings_h", "fields": { "NUM": 0.12 } } },
"DIAMETER_TOP": { "shadow": { "type": "math_number", "id": "tp_shd_srings_dt", "fields": { "NUM": 4.5 } } },
"DIAMETER_BOTTOM": { "shadow": { "type": "math_number", "id": "tp_shd_srings_db", "fields": { "NUM": 4.5 } } },
"TESSELLATIONS": { "shadow": { "type": "math_number", "id": "tp_shd_srings_tess", "fields": { "NUM": 32 } } },
"X": { "shadow": { "type": "math_number", "id": "tp_shd_srings_x", "fields": { "NUM": 40 } } },
"Y": { "shadow": { "type": "math_number", "id": "tp_shd_srings_y", "fields": { "NUM": 5 } } },
"Z": { "shadow": { "type": "math_number", "id": "tp_shd_srings_z", "fields": { "NUM": -1 } } }
},
"next": {
"block": {
"type": "rotate_model_xyz",
"id": "tp_blk_tilt_rings",
"fields": {
"MODEL": { "id": "tp_v_srings" }
},
"inputs": {
"X": { "shadow": { "type": "math_number", "id": "tp_shd_tilt_x", "fields": { "NUM": 25 } } },
"Y": { "shadow": { "type": "math_number", "id": "tp_shd_tilt_y", "fields": { "NUM": 0 } } },
"Z": { "shadow": { "type": "math_number", "id": "tp_shd_tilt_z", "fields": { "NUM": 10 } } }
}
}
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Saturn's rings won't rotate with Saturn.

The rings cylinder is a separate mesh and is not parented to the Saturn sphere. When Saturn's rotation animation runs (line 643-658), only the sphere rotates—the tilted rings remain stationary, creating a visual disconnect.

Consider either:

  1. Parenting the rings to Saturn (if supported by the framework), or
  2. Adding a matching rotation animation to the rings with the same duration.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@examples/talking_planets.flock` around lines 479 - 512, The rings (block id
tp_blk_srings, variable tp_v_srings, and its tilt block tp_blk_tilt_rings using
rotate_model_xyz) are a separate mesh and not parented to the Saturn sphere, so
they do not inherit Saturn's rotation; fix by either parenting tp_v_srings to
Saturn's sphere model (if the framework supports a parent/child relationship) or
add a matching rotate_model_xyz animation for tp_v_srings with the same rotation
axes and duration used by Saturn's rotation animation so the rings rotate in
sync.

Flock positions objects by placing their bounding box bottom at the given Y,
not their geometric center. Saturn sphere (diameter=1.6) at Y=5 has center at
Y=5.8. Ring cylinder (height=0.12) needed Y=5.74 so its center (5.74+0.06)
also lands at Y=5.8, making the ring appear centered around Saturn's equator.

https://claude.ai/code/session_01LW6oNJHFgseCVXWVJZoL94
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants