Paste JavaScript directly into the editor; do not add HTML or <script> tags. Names are case-sensitive: Button and button differ. Run one example at a time in a new project. These helpers are ordinary JavaScript, already loaded before your code.

Anyone can test. Saving requires a verified account; child profiles also require confirmed parental permission. Title, brief description, and full description belong to the project. New project starts blank. Stop test removes the running preview.

The preview blocks network requests and external scripts, fonts, and remote images. Use self-contained code and data: or blob: image URLs. Normal page access, account data, and local storage are unavailable to the sandbox. No imports are needed for the seven bundled helpers.

let x = 100;
const keys = new Set();
window.addEventListener("keydown", e => { keys.add(e.key); if(e.key.startsWith("Arrow")) e.preventDefault(); });
window.addEventListener("keyup", e => keys.delete(e.key));
window.addEventListener("blur", () => keys.clear());
let last = performance.now();
function draw(now) {
  const dt = Math.min((now - last) / 1000, 0.05);
  last = now;
  if (keys.has("ArrowRight")) x += 180 * dt;
  if (keys.has("ArrowLeft")) x -= 180 * dt;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#168eac";
  ctx.fillRect(x, 260, 60, 60);
  requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

Despite the filename, this helper draws into a Canvas 2D context, not SVG markup. Every method below has the SVGHelper. prefix. Coordinates and widths are canvas pixels; positive y points down. Shape fill defaults to false. Styles and transforms can persist between calls.

SVGHelper.createContext();
SVGHelper.draw(() => {
  SVGHelper.background_color("#ecfbff");
  SVGHelper.ellipse(mouseX, mouseY, 24, 24, "#168eac", true);
  SVGHelper.text("Follow the pointer", 400, 60, 24, "#16506c");
});

SVGHelper.createContext();
const picture = new Image();
picture.onload = () => SVGHelper.image(picture, 400, 300, 160);
picture.src = "data:image/svg+xml," + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><circle cx="40" cy="40" r="35" fill="skyblue"/></svg>');

UI controls are HTML overlays, not pixels painted into the canvas. Their x/y position is a fraction of the game container: (0,0) is top-left; (0.5,0.5) centers the control. Set x, y, and label explicitly.

// The legacy resize listener expects a global buttons array.
var buttons = [];
let score = 0;
const scoreButton = new Button({
  x: 0.5, y: 0.8, label: "Score: 0",
  style: {width: 0.25, height: 0.08, fontSize: "18px", background: "#087ca2", color: "white", borderRadius: "16px"},
  onPress: button => button.setLabel("Score: " + (++score))
});
buttons.push(scoreButton);
scoreButton.createButton();

For held buttons, call buttons.forEach(button => button.update()) inside your animation loop. The legacy resize listener references buttons directly, so declaring var buttons = [] prevents an undefined-variable resize error. Remove destroyed buttons from that array.

const amount = new Field({
  x: 0.5, y: 0.5, label: "Number of stars", value: "5",
  style: {width: "220px", padding: "16px", background: "#ddf7ff", borderRadius: "12px"},
  onSubmit: value => console.log("Stars:", Number(value))
});
amount.createField();

var buttons = [];
const resume = new Button({x: 0.5, y: 0, label: "Resume", onPress: () => pause.hide()});
buttons.push(resume);
const pause = new Menu({
  title: "Paused", width: "280px", height: "220px",
  items: [new Label({text: "Ready to continue?", style: {color: "#14506a"}}), resume],
  style: {container: {background: "#e8faff", border: "1px solid #72c6db"}, header: {background: "#148eb0"}}
});
pause.create();

Menu/Field positions are computed when created; unlike registered buttons, they do not automatically reposition on resize. Update their DOM position or recreate them if your game changes layout.

let point = {x: 0, y: 0};
discreetGameLoop({
  stepTime: 100,
  step: () => { point = snapToGrid(mouseX, mouseY, 40, 40); },
  draw: () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#168eac";
    ctx.fillRect(point.x, point.y, 20, 20);
  }
});

Initialize WebGL before reading ctx or calling SVGHelper.createContext(). WebGL is browser/device dependent. This library uses WebGL 1, flat color shaders and position-only meshes; it does not provide lighting, texture materials, physics, or a complete game engine.

Current compatibility detail: RenderObject.draw reads cameraController.viewMatrix from its argument and camera.getProjectionMatrix() from a global named camera. A plain Camera instance does not supply viewMatrix. The example supplies both deliberately; use this pattern with the current library.

GL.init(canvas);
GL.enableDepthTest();
GL.createDefaultShaders();
const camera = new Camera({position: {x: 0, y: 0, z: 5}});
const view = {viewMatrix: camera.getViewMatrix()};
const scene = new Scene();
scene.clearColor = {r: 0.85, g: 0.96, b: 1, a: 1};
const cube = new RenderObject({mesh: Mesh.createCube(1.5), color: {r: 0.05, g: 0.55, b: 0.8, a: 1}});
scene.add(cube);
GL.startSceneLoop(scene, view, time => {
  cube.transform.rotation.y = time * 0.001;
  cube.transform.rotation.x = time * 0.0006;
  view.viewMatrix = camera.getViewMatrix();
});

Vec3 uses {x,y,z}; Vec4 uses {x,y,z,w}. Operations return new values. Mat4 is 16 numbers for homogeneous 3D; Mat5 is 25 numbers for homogeneous 4D. Matrix arrays are column-major. In Vec4, w is a fourth spatial coordinate when used with Mat5; in Mat4.multiplyVec4 it is the homogeneous coordinate.

const velocity = Vec3.create(1, 2, 0);
const next = Vec3.add(Vec3.create(0, 0, 0), Vec3.scale(velocity, 0.5));
console.log(next); // {x: 0.5, y: 1, z: 0}
const rotated = Mat5.transformVec4(Mat5.rotationXW(Math.PI / 4), Vec4.create(1, 0, 0, 0));
console.log(rotated);

To adapt the cube example, use Mesh.createTesseract(1.5) and call cube.mesh.updateTesseract(Mat5.rotationXW(time * 0.001), 4) inside its callback. This is geometric projection, not a 4D physics engine.

GL.enablePicking(scene, camera, canvas) installs mouse/touch press handlers and expects scene.pick(camera,x,y). The current Scene class does not implement pick, so this convenience function needs your own scene.pick implementation. It is not a ready-to-use picker. For a simple custom selector, use rays and bounding spheres:

// Add after the WebGL cube example. This chooses the first hit,
// not the nearest object; adapt for overlapping objects.
canvas.addEventListener("pointerdown", () => {
  const ray = camera.screenPointToRay(mouseX, mouseY);
  for (const object of scene.objects) object.transform.updateMatrix();
  const hit = scene.objects.find(object => object.intersectsRay(ray));
  for (const object of scene.objects) object.selected = object === hit;
  if (hit && hit.onClick) hit.onClick(hit);
  console.log(hit ? "Object selected" : "No hit");
});

Rendering currently depends on the global camera/controller adapter explained above. Picking is approximate, has no built-in nearest-hit sorting, and does not automatically change an object’s color when selected. No automatic disposal API exists for Mesh; use Stop test to reset the preview.