ui: migrate remaining shorts to anchor-based positioning

Followup to the anchor commit (01db8ff). The previous commit migrated
uiSystem and uiLayout shorts but missed nine others that also constructed
root UIObjects with manual canvas-relative positions. Those positions
were being overwritten to canvas-center by the new updateTransforms,
breaking each demo's layout.

Migrated shorts:
- music.js, musicPlayer.js: drop redundant constructor center
- sound.js, speak.js, vibrate.js: drop center add in makeButton helper
- piano.js: drop center add in PianoKey constructor
- timers.js: pass center-relative offset directly
- videoPlayer.js: pass center-relative offsets directly
- sequencer.js: convert absolute pixel coords by subtracting canvas
  center (grid was designed around canvas top-left origin)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: KilledByAPixel

examples/shorts/music.js

@@ -12,8 +12,7 @@ function gameInit()
     canvasClearColor = hsl(.9,.3,.2);
 
     // setup music player UI
-    const center = mainCanvasSize.scale(.5);
-    musicPlayer = new UIObject(center, vec2(500, 220));
+    musicPlayer = new UIObject(vec2(), vec2(500, 220));
 
     // information text
     infoText = new UIText(vec2(0, -70), vec2(400, 50));

examples/shorts/musicPlayer.js

@@ -13,8 +13,7 @@ function gameInit()
     canvasClearColor = hsl(.9,.3,.2);
 
     // setup music player UI
-    const center = mainCanvasSize.scale(.5);
-    musicPlayer = new UIObject(center, vec2(500, 300));
+    musicPlayer = new UIObject(vec2(), vec2(500, 300));
     const title = new UIText(vec2(0, -100), vec2(500, 40),
         'LittleJS Music Player');
     musicPlayer.addChild(title);

examples/shorts/piano.js

@@ -7,7 +7,6 @@ class PianoKey extends UIButton
         const keySize = 65;
         size = size.scale(keySize);
         pos = pos.scale(keySize).add(vec2(0,size.y/2-keySize*2));
-        pos = pos.add(mainCanvasSize.scale(.5));
         super(pos, size, '', color);
 
         this.dragActivate = true;

examples/shorts/sequencer.js

@@ -20,7 +20,7 @@ class UISequencerButton extends UIButton
         const size = vec2(68, 35);
         let pos = vec2(step, trackCount-1-track);
         pos = pos.multiply(size);
-        pos = pos.add(vec2(240, 40));
+        pos = pos.add(vec2(240, 40)).subtract(mainCanvasSize.scale(.5));
         super(pos, size);
 
         this.step = step;
@@ -80,7 +80,7 @@ function gameInit()
         new UISequencerButton(step, track);
 
     // create play/stop button
-    const playButton = new UIButton(vec2(660,500), vec2(180,60), 'PLAY');
+    const playButton = new UIButton(vec2(660,500).subtract(mainCanvasSize.scale(.5)), vec2(180,60), 'PLAY');
     playButton.onClick = ()=>
     {
         isPlaying = !isPlaying;
@@ -91,7 +91,7 @@ function gameInit()
     // create tempo slider
     const minTempo = 120, maxTempo = 480;
     const tempoPercent = percent(tempo, minTempo, maxTempo);
-    const tempoSlider = new UISlider(vec2(380,500), vec2(340,40), tempoPercent);
+    const tempoSlider = new UISlider(vec2(380,500).subtract(mainCanvasSize.scale(.5)), vec2(340,40), tempoPercent);
     tempoSlider.onChange = ()=>
     {
         tempo = lerp(minTempo, maxTempo, tempoSlider.value);

examples/shorts/sound.js

@@ -10,7 +10,6 @@ function gameInit()
     function makeSoundButton(pos, icon, sound)
     {
         pos = pos.multiply(vec2(w+gap, h+gap));
-        pos = pos.add(mainCanvasSize.scale(.5));
         const button = new UIButton(pos, vec2(w, h), icon);
         button.textHeight = 100;
         button.onClick = ()=> sound.play();

examples/shorts/speak.js

@@ -11,7 +11,6 @@ function gameInit()
     function makeButton(pos, text, onClick)
     {
         pos = pos.multiply(vec2(w+gap, h+gap));
-        pos = pos.add(mainCanvasSize.scale(.5));
         const button = new UIButton(pos, vec2(w, h), text);
         button.onClick = onClick;
     }

examples/shorts/timers.js

@@ -9,8 +9,7 @@ function gameInit()
     canvasClearColor = hsl(.3,.3,.2);
 
     // create timer button
-    const pos = mainCanvasSize.scale(.5).add(vec2(0, -40));
-    timerButton = new UIButton(pos, vec2(200, 90), 'Start');
+    timerButton = new UIButton(vec2(0, -40), vec2(200, 90), 'Start');
     timerButton.timer = new Timer;
     timerButton.onClick = ()=>
     {

examples/shorts/vibrate.js

@@ -12,7 +12,6 @@ function gameInit()
     function makeButton(pos, text, onClick)
     {
         pos = pos.multiply(vec2(w+gap, h+gap));
-        pos = pos.add(mainCanvasSize.scale(.5));
         const button = new UIButton(pos, vec2(w, h), text);
         button.onClick = onClick;
     }

examples/shorts/videoPlayer.js

@@ -6,27 +6,23 @@ function gameInit()
     canvasClearColor = hsl(0,0,.1);
 
     // video player
-    const center = mainCanvasSize.scale(.5);
-    const videoPos = center.add(vec2(0, -50));
     const videoSize = vec2(480, 270);
     const filename = 'video.webm';
     const autoplay = true;
-    videoPlayer = new UIVideo(videoPos, videoSize, filename, autoplay);
+    videoPlayer = new UIVideo(vec2(0, -50), videoSize, filename, autoplay);
     videoPlayer.lineWidth = 5;
     videoPlayer.lineColor = WHITE;
 
     // play/pause button
     const buttonSize = vec2(200, 100);
-    const playButtonPos = center.add(vec2(-130, 170));
-    const playButton = new UIButton(playButtonPos, buttonSize);
-    playButton.onClick = ()=> videoPlayer.isPaused() ? 
+    const playButton = new UIButton(vec2(-130, 170), buttonSize);
+    playButton.onClick = ()=> videoPlayer.isPaused() ?
         videoPlayer.play() : videoPlayer.pause();
-    playButton.onUpdate = ()=> playButton.text = 
+    playButton.onUpdate = ()=> playButton.text =
         videoPlayer.isPaused() ? 'Play' : 'Pause';
 
     // status text
-    const statusTextPos = center.add(vec2(130, 170));
-    const statusText = new UIText(statusTextPos, vec2(250, 90));
+    const statusText = new UIText(vec2(130, 170), vec2(250, 90));
     statusText.textColor = WHITE;
     statusText.onUpdate = ()=> statusText.text = 
         videoPlayer.hasEnded() ? 'Ended' :