Monorepo for Aesthetic.Computer
aesthetic.computer
fix: replace laptop with spinning cube, fix update-ready reload from worker
- Swap wireframe laptop animation for a small spinning cube in prompt
- Use send({ type: "window:reload" }) instead of location.reload() since
prompt.mjs runs in a worker where location.reload() is unavailable
- Add window:reload handler in bios.mjs
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+19
-85
+5
system/public/aesthetic.computer/bios.mjs
+5
system/public/aesthetic.computer/bios.mjs
+14
-85
system/public/aesthetic.computer/disks/prompt.mjs
+14
-85
system/public/aesthetic.computer/disks/prompt.mjs
···
5790
5790
color: $.hud.currentStatusColor() || [255, 0, 200],
5791
5791
});
5792
5792
5793
-
// 💻 Wireframe laptop / pizza-box (two hinged halves, centered behind login)
5793
+
// Spinning wireframe cube
5794
5794
{
5795
5795
const cx = screen.width / 2;
5796
5796
const cy = screen.height / 2;
5797
-
const size = min(screen.width, screen.height) * 0.2;
5797
+
const size = min(screen.width, screen.height) * 0.08;
5798
5798
const fov = 260;
5799
-
const ay = motdFrame * 0.008; // Y-axis spin
5800
-
const ax = motdFrame * 0.005; // slight X tilt
5799
+
const ay = motdFrame * 0.02; // Y-axis spin
5800
+
const ax = motdFrame * 0.013; // X-axis tilt
5801
5801
5802
-
// Hinge angle: smoothly open and close (0 = closed, PI = flat open)
5803
-
const hingeAngle = (sin(motdFrame * 0.012) * 0.5 + 0.5) * Math.PI * 0.85 + Math.PI * 0.1;
5804
-
5805
-
// Half-box dimensions: wide, thin, moderate depth
5806
-
const hw = 1.4; // half-width (stretched axis)
5807
-
const hh = 0.08; // half-height (thin like a laptop)
5808
-
const hd = 0.9; // half-depth
5809
-
5810
-
// Bottom half (base) — sits flat, hinge edge at z = -hd
5811
-
const base = [
5812
-
[-hw, -hh, -hd], [ hw, -hh, -hd], [ hw, hh, -hd], [-hw, hh, -hd], // back face (hinge edge)
5813
-
[-hw, -hh, hd], [ hw, -hh, hd], [ hw, hh, hd], [-hw, hh, hd], // front face
5802
+
const verts = [
5803
+
[-1,-1,-1],[1,-1,-1],[1,1,-1],[-1,1,-1],
5804
+
[-1,-1, 1],[1,-1, 1],[1,1, 1],[-1,1, 1],
5814
5805
];
5815
-
5816
-
// Top half (lid) — hinged at z = -hd, rotates around that edge
5817
-
const lidLocal = [
5818
-
[-hw, -hh, 0], [ hw, -hh, 0], [ hw, hh, 0], [-hw, hh, 0], // hinge edge (z=0)
5819
-
[-hw, -hh, 2 * hd], [ hw, -hh, 2 * hd], [ hw, hh, 2 * hd], [-hw, hh, 2 * hd], // far edge
5820
-
];
5821
-
// Rotate lid around X-axis at hinge point, then translate to hinge position
5822
-
const cosH = cos(hingeAngle);
5823
-
const sinH = sin(hingeAngle);
5824
-
const lid = lidLocal.map(([lx, ly, lz]) => {
5825
-
// Rotate around X-axis (hinge)
5826
-
const ry = ly * cosH - lz * sinH;
5827
-
const rz = ly * sinH + lz * cosH;
5828
-
// Translate to hinge position (top of base, back edge)
5829
-
return [lx, ry + hh, rz - hd];
5830
-
});
5831
-
5832
-
// 12 edges per half
5833
-
const halfEdges = [
5806
+
const edges = [
5834
5807
[0,1],[1,2],[2,3],[3,0],
5835
5808
[4,5],[5,6],[6,7],[7,4],
5836
5809
[0,4],[1,5],[2,6],[3,7],
5837
5810
];
5838
5811
5839
-
// Project a vertex: rotate globally then perspective-project
5840
5812
const project = ([x, y, z]) => {
5841
-
// Rotate Y (global spin)
5842
5813
let rx = x * cos(ay) - z * sin(ay);
5843
5814
let rz = x * sin(ay) + z * cos(ay);
5844
-
// Rotate X (global tilt)
5845
5815
let ry = y * cos(ax) - rz * sin(ax);
5846
5816
rz = y * sin(ax) + rz * cos(ax);
5847
5817
const scale = fov / (fov + rz * size);
5848
-
return [cx + rx * size * scale, cy + ry * size * scale, rz];
5818
+
return [cx + rx * size * scale, cy + ry * size * scale];
5849
5819
};
5850
5820
5851
-
const projBase = base.map(project);
5852
-
const projLid = lid.map(project);
5853
-
5854
-
// Draw edges with polychrome coloring
5855
-
const waveOffset = motdFrame * 0.05;
5856
-
const drawEdges = (proj, edgeOffset) => {
5857
-
halfEdges.forEach(([a, b], i) => {
5858
-
const depth = (proj[a][2] + proj[b][2]) / 2;
5859
-
const brightness = 0.55 + depth * 0.15;
5860
-
const hue = (((i + edgeOffset) * 0.37 + sin(motdFrame * 0.02 + i + edgeOffset) * 0.3) + waveOffset) % 1;
5861
-
const sector = abs(hue) * 6;
5862
-
const f = sector - floor(sector);
5863
-
let r, g, bl;
5864
-
const s = floor(sector) % 6;
5865
-
if (s === 0) { r = 1; g = f; bl = 0; }
5866
-
else if (s === 1) { r = 1 - f; g = 1; bl = 0; }
5867
-
else if (s === 2) { r = 0; g = 1; bl = f; }
5868
-
else if (s === 3) { r = 0; g = 1 - f; bl = 1; }
5869
-
else if (s === 4) { r = f; g = 0; bl = 1; }
5870
-
else { r = 1; g = 0; bl = 1 - f; }
5871
-
const alpha = $.dark ? 120 : 180;
5872
-
ink(
5873
-
floor(r * 255 * brightness),
5874
-
floor(g * 255 * brightness),
5875
-
floor(bl * 255 * brightness),
5876
-
alpha,
5877
-
).line(
5878
-
proj[a][0], proj[a][1],
5879
-
proj[b][0], proj[b][1],
5880
-
);
5881
-
});
5882
-
};
5883
-
5884
-
drawEdges(projBase, 0);
5885
-
drawEdges(projLid, 12);
5886
-
5887
-
// Vertex particles at all corners
5888
-
const particleColors = [
5889
-
[255, 80, 200], [80, 255, 220], [255, 255, 80],
5890
-
[80, 200, 255], [255, 120, 80], [180, 80, 255],
5891
-
];
5892
-
[...projBase, ...projLid].forEach(([px, py], i) => {
5893
-
const pColor = particleColors[(i + floor(motdFrame * 0.04)) % particleColors.length];
5894
-
const flicker = 0.6 + sin(motdFrame * 0.1 + i * 1.3) * 0.4;
5895
-
ink(...pColor, floor(flicker * ($.dark ? 150 : 200))).box(px - 1, py - 1, 2, 2);
5821
+
const proj = verts.map(project);
5822
+
const alpha = $.dark ? 100 : 150;
5823
+
edges.forEach(([a, b]) => {
5824
+
ink(150, 150, 150, alpha).line(proj[a][0], proj[a][1], proj[b][0], proj[b][1]);
5896
5825
});
5897
5826
}
5898
5827
···
8576
8505
push: () => {
8577
8506
pushSound();
8578
8507
if (updateAvailable) {
8579
-
location.reload();
8508
+
send({ type: "window:reload" });
8580
8509
} else {
8581
8510
jump("commits");
8582
8511
}