hsml_composition.html

<!DOCTYPE HSML>
<hsml>
  <environment>

    <!-- complex shapes -->
    <cube style="texture-color: rgba(255,255,255,0.5)">
      <surface orient="bottom">
        <pyramid sides="4" style="direction: 0,-1,0; texture-color: rgba(255,0,0,1.0); scale: 0.75%">
          <surface>
            this pyramid is inside the half-translucent cube
            the `direction` parameter is relative to a normal projecting from the parent surface
            "y" is the vertical axis
          </surface>
        </pyramid>
      </surface>
    </cube>

    <!-- a trash-can -->
    <cylinder style="radius-top: 3u; radius-bottom: 2u">
      <surface orient="top" style="display: none">
        <cylinder style="direction: 0,-1,0; radius-bottom: 3u; radius-bottom: 1.5u; height: 90%; force: push 0,-9.8mpss,0">
          <surface orient="top">
            <!-- TODO: no collision intent-triggering mechanism actually exists yet -->
            <intent action="http://layer1.com/intents/delete" type="*/*" />
          </surface>
        </cylinder>
      </surface>
    </cylinder>

    <!-- a structural form -->
    <plane edges="4">
      <surface>
        <h1>File-mailer</h1>
        <form action="/mail/outbox" method="post">
          To: <input type="text" name="recp" /><br/>
          Subject: <input type="text" name="subject" /><br/>
          <textarea name="message"></textarea><br/>
          <cylinder style="radius: 50%; height: 3u; texture-color: rgba(0,0,128,0.5);
                           chemistry: embed schema(isFile,url)"> 
            <!-- `chemistry` establishes interactions with other shapes -->
            <!-- `chemistry-reaction: embed` means a colliding object will attach to the structure and embed its form -->
            <!-- `chemistry-selector: schema(isFile,url)` means this reaction occurs with structures that contain a form defining that schema -->
          </cylinder>
        </form>
    </plan>
    <plane edges="4"> <!-- connecting this plane to the cylinder would embed its form -->
      <surface>
        <form>
          <img src="/files/images/family_vacation.png" />
          <input type="hidden" name="isFile" value="true" />
          <input type="hidden" name="url" value="/files/images/family_vacation.png" />
        </form>
      </surface>
    </plane>

  </environment>
</hsml>