---
contentHash: sha256:1c9575229ecd5b2867a299e411c92cb1ca2086c9e811dd1d223fda154887fddb
documentId: guide:for-agents-example-scripting
kind: guide
schemaVersion: 1
skenraVersion: 0.1.0-alpha.1
---
# Scripting

<a id="overview"></a>

## Overview

Nodes are DOM elements: a <script> selects the scene with standard DOM (there is no injected scene variable), creates spheres with document.createElement, positions them through IDL properties (canonical numeric units — radians, world units), and appends them. A lowercase onclick handler mutates a property per click.

Demonstrates: dynamic node creation, IDL properties vs attributes, event handler.

Script APIs exercised: `SceneNode.h`, `SceneNode.x`, `SceneNode.z`.

<a id="scene"></a>

## Scene

```sk
<sk-scene style="width: 100%; height: 420px;">
    <sk-camera-orbit-control fit-targets="auto" fit-margin="0.2"
        azimuth="30deg" elevation="35deg" orient-toward-pivot></sk-camera-orbit-control>
    <sk-perspective-camera focal-length="30"></sk-perspective-camera>
    <sk-directional-light intensity="1" p="70deg" h="30deg"></sk-directional-light>

    <sk-plain-material id="hub-mat" base-color="#d8a24a"></sk-plain-material>
    <sk-plain-material id="ring-mat" base-color="#7fa8d8"></sk-plain-material>
    <sk-plain-material id="line-mat" base-color="#1c1c1c"></sk-plain-material>

    <!-- Event handlers are lowercase one-token attributes. IDL properties use
         canonical numeric units: h is radians from script (the attribute form
         would be h="45deg"). -->
    <sk-cube id="hub" size="1.2" style="cursor: pointer;"
             onclick="this.h += Math.PI / 4;">
        <sk-surface-paint material="#hub-mat"></sk-surface-paint>
        <sk-edge-paint material="#line-mat"></sk-edge-paint>
    </sk-cube>

    <!-- Nodes are DOM elements: create, configure, append. There is no
         injected scene variable; select the scene with standard DOM. -->
    <script>
        const scene = document.querySelector('sk-scene');
        for (let i = 0; i < 8; i++) {
            const orb = document.createElement('sk-sphere');
            const angle = (i / 8) * Math.PI * 2;
            orb.setAttribute('radius', '0.3');
            orb.x = Math.cos(angle) * 2.6;
            orb.z = Math.sin(angle) * 2.6;
            const paint = document.createElement('sk-surface-paint');
            paint.setAttribute('material', '#ring-mat');
            orb.appendChild(paint);
            scene.appendChild(orb);
        }
    </script>
</sk-scene>
```

---

Related records: [`element:sk-camera-orbit-control`](elements/sk-camera-orbit-control.md), [`element:sk-cube`](elements/sk-cube.md), [`element:sk-directional-light`](elements/sk-directional-light.md), [`element:sk-edge-paint`](elements/sk-edge-paint.md), [`element:sk-perspective-camera`](elements/sk-perspective-camera.md), [`element:sk-plain-material`](elements/sk-plain-material.md), [`element:sk-scene`](elements/sk-scene.md), [`element:sk-surface-paint`](elements/sk-surface-paint.md), [`guide:for-agents`](guides/for-agents.md)