Monorepo for Aesthetic.Computer
aesthetic.computer
notepat-remote: QWERTY keys as main label, note name as hint
Flip the pad labeling: the QWERTY key you actually press now dominates
each pad (big, centered, shaken) while the note name drops to a tiny
MatrixChunky8 hint in the bottom-right. The second octave is back —
the "wrong letters" complaint was actually about which label role the
key letters held, not a mapping bug.
+12
-13
+12
-13
system/public/aesthetic.computer/disks/notepat-remote.mjs
+12
-13
system/public/aesthetic.computer/disks/notepat-remote.mjs
···
32
32
};
33
33
34
34
// Chromatic octave blocks — 4 cols × 3 rows = 12 notes each.
35
-
// Matches notepat.mjs pad layout. Row 0 = low (C..D#), row 2 = high (G#..B).
36
-
// Two blocks render side-by-side (base octave left, +1 right) when the
37
-
// device is wide enough (always 360px in M4L).
35
+
// Row 0 = low (C..D#), row 2 = high (G#..B). Two blocks (base + base+1)
36
+
// stack vertically in paint().
38
37
const OCTAVE_GRIDS = [
39
38
// Base octave (offsets 0-11 → C..B of baseOctave)
40
39
[
···
608
607
];
609
608
ink(...borderColor).box(px, py, pw, ph, "outline");
610
609
611
-
// Main label = note name (C, C#, D…). Matches notepat.mjs web
612
-
// piece: jittery shake while held + 1px drop shadow so the
613
-
// typography pulses with each strike.
610
+
// Main label = keyboard key you actually press. Note name is
611
+
// secondary — the QWERTY letter is what turns the pad into a
612
+
// "playable thing"; pitch info is pinned as a tiny MatrixChunky8
613
+
// hint in the bottom-right.
614
614
const charW = 6;
615
615
const charH = 10;
616
-
const label = nameShort;
616
+
const label = key.toUpperCase();
617
617
const labelW = label.length * charW;
618
618
const labelX = px + floor((pw - labelW) / 2);
619
619
const labelY = py + floor((ph - charH) / 2);
···
641
641
ink(...shadowColor).write(label, { x: labelX + shakeX + 1, y: labelY + shakeY + 1 });
642
642
ink(...labelColor).write(label, { x: labelX + shakeX, y: labelY + shakeY });
643
643
644
-
// QWERTY hint — tiny MatrixChunky8 glyph pinned to the bottom-
645
-
// right of the pad so you still see which key drives which note
646
-
// even after we shrank the pads. Only drawn when the pad has
647
-
// room (>= 14px) so we don't paint on top of the note label.
644
+
// Tiny note-name hint (C, C#, …) in the bottom-right corner so
645
+
// you can still read the pitch at a glance. MatrixChunky8 keeps
646
+
// it readable at narrow pad widths.
648
647
if (pw >= 14 && ph >= 14) {
649
648
const hintColor =
650
649
held && focused && !black ? [10, 10, 14, 220] :
651
650
black ? [210, 210, 220, 180] : [30, 30, 40, 190];
652
651
ink(...hintColor).write(
653
-
key.toUpperCase(),
654
-
{ x: px + pw - 6, y: py + ph - 7 },
652
+
nameShort,
653
+
{ x: px + pw - nameShort.length * 5 - 2, y: py + ph - 7 },
655
654
undefined, undefined, false,
656
655
"MatrixChunky8",
657
656
);
system/public/m4l/notepat.com.amxd
system/public/m4l/notepat.com.amxd
This is a binary file and will not be displayed.