Skip to content

Commit

Permalink
Experimental support for schemes in Cambiare.
Browse files Browse the repository at this point in the history
  • Loading branch information
@PoneyClairDeLune
PoneyClairDeLune committed Jul 11, 2024
1 parent 2fbef36 commit 2121ebf
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 34 deletions.
73 changes: 43 additions & 30 deletions src/cambiare/index.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,27 @@ const pixelProfiles = {
}
};

const modeColourPool = {
"xg": ["9efaa0", "006415"],
"doc": ["9efaa0", "006415"],
"qy10": ["9efaa0", "006415"],
"qy20": ["9efaa0", "006415"],
"ns5r": ["9efaa0", "006415"],
"x5d": ["9efaa0", "006415"],
"05rw": ["9efaa0", "006415"],
"k11": ["9efaa0", "006415"],
"s90es": ["9efaa0", "006415"],
"motif": ["9efaa0", "006415"],
"gm": ["a1f3ff", "005e88"],
"g2": ["a1f3ff", "005e88"],
"krs": ["a1f3ff", "005e88"],
"gs": ["ffe1a5", "804e00"],
"sc": ["ffe1a5", "804e00"],
"mt32": ["ffe1a5", "804e00"],
"sd": ["ffe1a5", "804e00"],
"sg": ["ffdddd", "990022"]
};

piMulti.forEach((e, i, a) => {
a[i] = Math.PI * i / 2;
});
Expand Down Expand Up @@ -180,6 +201,7 @@ let Cambiare = class extends RootDisplay {
#renderRange = 1;
#renderPort = 0;
#lastFrame = 0;
#scheme = 0;
#bufLo = new Uint8Array(1280);
#bufLm = new Uint8Array(1280);
#bufLn = new Uint8Array(1280);
Expand All @@ -193,6 +215,8 @@ let Cambiare = class extends RootDisplay {
#canvas;
#pixelProfile;
#accent = "fcdaff";
#foreground = "ffffff";
#mode = "?";
#sectInfo = {};
#sectMark = {};
#sectPart = [];
Expand Down Expand Up @@ -241,7 +265,7 @@ let Cambiare = class extends RootDisplay {
};
};
// Colours
context.fillStyle = `#${isBlackKey ? (upThis.#accent) : "ffffff"}${((velo << 1) | (velo >> 6)).toString(16).padStart(2, "0")}`;
context.fillStyle = `#${isBlackKey ? (upThis.#accent) : (upThis.#foreground)}${((velo << 1) | (velo >> 6)).toString(16).padStart(2, "0")}`;
context.strokeStyle = context.fillStyle;
context.lineWidth = range == 1 ? 4 : 2;
context.lineDashOffset = 0;
Expand Down Expand Up @@ -424,7 +448,7 @@ let Cambiare = class extends RootDisplay {
};
};
if (upThis.panStyle & 1) {
e.ccVis.strokeStyle = `#fff`;
e.ccVis.strokeStyle = `#${upThis.#foreground}`;
e.ccVis.lineWidth = upThis.panStyle >> 2 ? 1 : 3;
e.ccVis.beginPath();
e.ccVis.moveTo(84.5, 22.5);
Expand All @@ -437,7 +461,7 @@ let Cambiare = class extends RootDisplay {
};
};
if ((upThis.panStyle >> 2) & 1) {
e.ccVis.fillStyle = `#fff`;
e.ccVis.fillStyle = `#${upThis.#foreground}`;
e.ccVis.beginPath();
e.ccVis.arc(84.5, 22.5, 2.5, 0, piMulti[4]);
e.ccVis.fill();
Expand All @@ -456,12 +480,13 @@ let Cambiare = class extends RootDisplay {
e.ccVis.fillRect(85, 0, panWidthCache, 24);
};
// Render pan divider
e.ccVis.fillStyle = `#fff`;
e.ccVis.fillStyle = `#${upThis.#foreground}`;
e.ccVis.fillRect(84, 0, 1, 24);
};
};
// Render strength metre
e.metre.clearRect(0, 0, 121, 25);
e.metre.fillStyle = `#${upThis.#foreground}`;
e.metre.globalCompositeOperation = "source-over";
if (e.metre.rWidth > e.metre.canvas.width) {
if (e.metre.rNew) {
Expand All @@ -486,7 +511,7 @@ let Cambiare = class extends RootDisplay {
e.metre.fillRect(0, 0, sum.strength[part] * 121 / 255, 25);
// Extensible visualizer
e.extVis.clearRect(0, 0, 47, 25);
e.extVis.fillStyle = "#fff";
e.extVis.fillStyle = `#${upThis.#foreground}`;
switch (sum.chExt[part][0]) {
case upThis.device.EXT_VL: {
let mouth = (sum.chContr[chOff + ccToPos[136]] - 64) / 64 || sum.rawPitch[part] / 8192;
Expand Down Expand Up @@ -603,7 +628,7 @@ let Cambiare = class extends RootDisplay {
if (upThis.#bufBm[i] != e) {
ccxt.clearRect(252 + (x << 2), y << 2, 3, 3);
if (e) {
ccxt.fillStyle = `#ffffff${e.toString(16).padStart(2, "0")}`;
ccxt.fillStyle = `#${upThis.#foreground}${e.toString(16).padStart(2, "0")}`;
ccxt.fillRect(252 + (x << 2), y << 2, 3, 3);
};
} else if (self.debugMode) {
Expand All @@ -620,7 +645,7 @@ let Cambiare = class extends RootDisplay {
if (upThis.#bufLm[i] != e) {
ccxt.clearRect(x << 2, (y | 16) << 2, 3, 3);
if (e) {
ccxt.fillStyle = `#ffffff${e.toString(16).padStart(2, "0")}`;
ccxt.fillStyle = `#${upThis.#foreground}${e.toString(16).padStart(2, "0")}`;
ccxt.fillRect(x << 2, (y | 16) << 2, 3, 3);
};
} else if (self.debugMode) {
Expand Down Expand Up @@ -702,26 +727,15 @@ let Cambiare = class extends RootDisplay {
if (mode != "?") {
classOn(upThis.#canvas, [`cambiare-mode-${mode}`]);
};
upThis.#accent = {
"xg": "9efaa0",
"doc": "9efaa0",
"qy10": "9efaa0",
"qy20": "9efaa0",
"ns5r": "9efaa0",
"x5d": "9efaa0",
"05rw": "9efaa0",
"k11": "9efaa0",
"s90es": "9efaa0",
"motif": "9efaa0",
"gm": "a1f3ff",
"g2": "a1f3ff",
"krs": "a1f3ff",
"gs": "ffe1a5",
"sc": "ffe1a5",
"mt32": "ffe1a5",
"sd": "ffe1a5",
"sg": "ffdddd"
}[mode] || "fcdaff";
upThis.#mode = mode;
upThis.#accent = (modeColourPool[mode] || ["fcdaff", "742b81"])[upThis.#scheme];
};
setScheme(scheme = 0) {
let upThis = this;
upThis.#scheme = scheme ? 1 : 0;
upThis.#foreground = ["ffffff", "000000"][upThis.#scheme];
[classOff, classOn][upThis.#scheme](upThis.#canvas, [`cambiare-scheme-light`]);
upThis.#accent = (modeColourPool[upThis.#mode] || ["fcdaff", "742b81"])[upThis.#scheme];
};
#setPortView(canvasUpdate) {
let upThis = this;
Expand Down Expand Up @@ -920,15 +934,14 @@ let Cambiare = class extends RootDisplay {
e.notes.appendChild(createElement("span", [`field`, `part-csplit`, `part-cdive`], {l: 0, w: `100%`, h: 1}));
e.metre.canvas.width = 121;
e.metre.canvas.height = 25;
e.metre.fillStyle = "#fff";
e.metre.textBaseline = "top";
e.metre.font = "20px 'PT Sans Narrow'";
e.ccVis.canvas.width = 109;
e.ccVis.canvas.height = 25;
e.ccVis.fillStyle = "#fff";
e.ccVis.fillStyle = `#${upThis.#foreground}`;
e.extVis.canvas.width = 47;
e.extVis.canvas.height = 25;
e.extVis.fillStyle = "#fff";
e.extVis.fillStyle = `#${upThis.#foreground}`;
mountElement(e.notes, [
e.cxt.canvas
]);
Expand Down
4 changes: 4 additions & 0 deletions src/cambiare_demo/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,10 @@ self.gPanStyle = (panStyle) => {
visualizer.panStyle = panStyle;
Alpine.store("panStyle", panStyle);
};
self.gSetScheme = (scheme) => {
visualizer.setScheme(scheme);
Alpine.store("scheme", scheme);
};

const propsMid = JSON.parse('{"extensions":[".mid",".MID",".kar",".KAR",".syx",".SYX",".s7e",".S7E",".mdat",".MDAT",".pcg",".PCG"],"startIn":"music","id":"midiOpener","description":"Open a MIDI file"}'),
propsAud = JSON.parse('{"mimeTypes":["audio/*"],"startIn":"music","id":"audioOpener","description":"Open an audio file"}');
Expand Down
6 changes: 5 additions & 1 deletion test/cambiare.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,11 @@
</template>
<div class="column"></div>
</div>
<div class="columns is-multiline is-mobile is-vcentered" x-data="{frames:[[42,24,'Film'],[40,25,'PAL'],[34,30,'NTSC'],[21,48,'Film'],[20,50,'PAL (native)'],[17,60,'NTSC'],[14,75,'Phone screen'],[12,90,'Phone screen'],[10,100,'PC screen'],[9,120,'PC screen'],[7,144,'PC screen']]}">
<div class="columns is-multiline is-mobile is-vcentered" x-data="{frames:[[42,24,'Film'],[40,25,'PAL'],[34,30,'NTSC'],[21,48,'Film'],[20,50,'PAL (native)'],[17,60,'NTSC'],[14,75,'Phone screen'],[12,90,'Phone screen'],[10,100,'PC screen'],[9,120,'PC screen'],[7,144,'PC screen']],schemes:[[0,'Dark'],[1,'Light']]}">
<div class="column column-option"><b>Colour scheme</b></div>
<template x-for="scheme in schemes">
<div class="column column-option column-button" @click="gSetScheme(scheme[0])" x-text="scheme[1]" :active="($store.scheme||0)==scheme[0]?'true':'false'"></div>
</template>
<div class="column column-option"><b>Framerate</b></div>
<template x-for="frame in frames">
<div class="column column-option column-button" @click="gFrameTime(frame[0])" x-text="frame[1]" :active="($store.frameTime||20)==frame[0]?'true':'false'" :title="frame[2]"></div>
Expand Down
53 changes: 50 additions & 3 deletions test/css/cambiare.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,65 @@ div.cambiare-canvas .pcp-font4 {
div.cambiare-canvas .pcp-font7 {
transform: var(--pcp-font7);
}
div.cambiare-canvas.cambiare-mode-xg, div.cambiare-canvas.cambiare-mode-doc, div.cambiare-canvas.cambiare-mode-qy10, div.cambiare-canvas.cambiare-mode-qy20, div.cambiare-canvas.cambiare-mode-ns5r, div.cambiare-canvas.cambiare-mode-x5d, div.cambiare-canvas.cambiare-mode-05rw, div.cambiare-canvas.cambiare-mode-k11, div.cambiare-canvas.cambiare-mode-s90es, div.cambiare-canvas.cambiare-mode-motif {
div.cambiare-canvas.cambiare-scheme-light {
--background-color: #fff;
--foreground-color: #000;
--accent-color: #742b81;
--white-keys: var(--foreground-color);
--black-keys: var(--accent-color);
}
div.cambiare-canvas.cambiare-mode-xg,
div.cambiare-canvas.cambiare-mode-doc,
div.cambiare-canvas.cambiare-mode-qy10,
div.cambiare-canvas.cambiare-mode-qy20,
div.cambiare-canvas.cambiare-mode-ns5r,
div.cambiare-canvas.cambiare-mode-x5d,
div.cambiare-canvas.cambiare-mode-05rw,
div.cambiare-canvas.cambiare-mode-k11,
div.cambiare-canvas.cambiare-mode-s90es,
div.cambiare-canvas.cambiare-mode-motif {
--accent-color: #9efaa0;
}
div.cambiare-canvas.cambiare-mode-gm, div.cambiare-canvas.cambiare-mode-g2, div.cambiare-canvas.cambiare-mode-krs {
div.cambiare-canvas.cambiare-mode-gm,
div.cambiare-canvas.cambiare-mode-g2,
div.cambiare-canvas.cambiare-mode-krs {
--accent-color: #a1f3ff;
}
div.cambiare-canvas.cambiare-mode-gs, div.cambiare-canvas.cambiare-mode-sc, div.cambiare-canvas.cambiare-mode-mt32, div.cambiare-canvas.cambiare-mode-sd {
div.cambiare-canvas.cambiare-mode-gs,
div.cambiare-canvas.cambiare-mode-sc,
div.cambiare-canvas.cambiare-mode-mt32,
div.cambiare-canvas.cambiare-mode-sd {
--accent-color: #ffe1a5;
}
div.cambiare-canvas.cambiare-mode-sg {
--accent-color: #fdd;
}
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-xg,
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-doc,
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-qy10,
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-qy20,
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-ns5r,
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-x5d,
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-05rw,
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-k11,
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-s90es,
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-motif {
--accent-color: #006415;
}
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-gm,
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-g2,
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-krs {
--accent-color: #005e88;
}
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-gs,
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-sc,
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-mt32,
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-sd {
--accent-color: #804e00;
}
div.cambiare-canvas.cambiare-scheme-light.cambiare-mode-sg {
--accent-color: #902;
}

div.cambiare div.cambiare-canvas {
background: var(--background-color);
Expand Down

0 comments on commit 2121ebf

Please sign in to comment.