Skip to content

Commit

Permalink
7 panpot visualization styles for choosing.
Browse files Browse the repository at this point in the history
  • Loading branch information
@PoneyClairDeLune
PoneyClairDeLune committed Jul 5, 2024
1 parent 3de56bd commit c1d0000
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 30 deletions.
92 changes: 63 additions & 29 deletions src/cambiare/index.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,7 @@ let Cambiare = class extends RootDisplay {
#pitchEvents = [];
#style = "comb";
glyphs = new MxFont40();
panStyle = 3; // Block, Pin, Arc, Dash
#drawNote(context, note, velo, state = 0, pitch = 0) {
// Param calculation
let upThis = this;
Expand Down Expand Up @@ -394,38 +395,71 @@ let Cambiare = class extends RootDisplay {
};
};
};
// Calculate pan
let pan = sum.chContr[chOff + ccToPos[10]] || 1,
panDegreeCache = (pan + 125) * 0.024933275, // - 64 + 3 * 63
panRotateCache = (pan - 64) * 0.024933275;
e.ccVis.beginPath();
// Render pan needle
if (pan > 127) {
e.ccVis.arc(84.5, 22.5, 21.5, 0, piMulti[2], true);
e.ccVis.stroke();
} else {
if (pan < 64) {
e.ccVis.arc(84.5, 22.5, 21.5, piMulti[3], panDegreeCache, true);
e.ccVis.stroke();
} else if (pan > 64) {
e.ccVis.arc(84.5, 22.5, 21.5, piMulti[3], panDegreeCache);
e.ccVis.stroke();
let pan = sum.chContr[chOff + ccToPos[10]] || 1;
switch (upThis.panStyle) {
case 7:
case 6:
case 5:
case 3:
case 2:
case 1: {
// Calculate pan
let panDegreeCache = (pan + 125) * 0.024933275, // - 64 + 3 * 63
panRotateCache = (pan - 64) * 0.024933275;
e.ccVis.beginPath();
// Render pan needle
if (pan > 127) {
if ((upThis.panStyle >> 1) & 1) {
e.ccVis.arc(84.5, 22.5, 21.5, 0, piMulti[2], true);
e.ccVis.stroke();
};
} else {
if ((upThis.panStyle >> 1) & 1) {
if (pan < 64) {
e.ccVis.arc(84.5, 22.5, 21.5, piMulti[3], panDegreeCache, true);
e.ccVis.stroke();
} else if (pan > 64) {
e.ccVis.arc(84.5, 22.5, 21.5, piMulti[3], panDegreeCache);
e.ccVis.stroke();
};
};
if (upThis.panStyle & 1) {
e.ccVis.strokeStyle = `#fff`;
e.ccVis.lineWidth = upThis.panStyle >> 2 ? 1 : 3;
e.ccVis.beginPath();
e.ccVis.moveTo(84.5, 22.5);
if (pan == 64) {
e.ccVis.lineTo(84.5, 4);
} else {
e.ccVis.lineTo(84.5 + 18 * Math.sin(panRotateCache), 22.5 - 18.5 * Math.cos(panRotateCache));
};
e.ccVis.stroke();
};
};
if ((upThis.panStyle >> 2) & 1) {
e.ccVis.fillStyle = `#fff`;
e.ccVis.beginPath();
e.ccVis.arc(84.5, 22.5, 2.5, 0, piMulti[4]);
e.ccVis.fill();
};
break;
};
e.ccVis.strokeStyle = `#fff`;
e.ccVis.lineWidth = 1;
e.ccVis.beginPath();
e.ccVis.moveTo(84.5, 22.5);
if (pan == 64) {
e.ccVis.lineTo(84.5, 4);
} else {
e.ccVis.lineTo(84.5 + 18 * Math.sin(panRotateCache), 22.5 - 18.5 * Math.cos(panRotateCache));
default: {
// Calculate pan
let panWidthCache = Math.abs(pan - 64) / 2.625;
if (pan < 64) {
e.ccVis.fillRect(84 - panWidthCache, 0, panWidthCache, 24);
} else if (pan > 127) {
e.ccVis.fillRect(60, 0, 49, 24);
e.ccVis.clearRect(61, 1, 47, 22);
} else {
e.ccVis.fillRect(85, 0, panWidthCache, 24);
};
// Render pan divider
e.ccVis.fillStyle = `#fff`;
e.ccVis.fillRect(84, 0, 1, 24);
};
e.ccVis.stroke();
};
e.ccVis.fillStyle = `#fff`;
e.ccVis.beginPath();
e.ccVis.arc(84.5, 22.5, 2.5, 0, piMulti[4]);
e.ccVis.fill();
// Render strength metre
e.metre.clearRect(0, 0, 121, 25);
e.metre.globalCompositeOperation = "source-over";
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 @@ -174,6 +174,10 @@ self.gFrameTime = (frameTime) => {
visualizer.setFrameTime(frameTime);
Alpine.store("frameTime", frameTime);
};
self.gPanStyle = (panStyle) => {
visualizer.panStyle = panStyle;
Alpine.store("panStyle", panStyle);
};

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
9 changes: 8 additions & 1 deletion test/cambiare.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,18 @@
</template>
<div class="column"></div>
</div>
<div class="columns is-multiline is-mobile is-vcentered" x-data="{styles:[['block','Block'],['comb','Comb'],['piano','Piano'],['line','Line']],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="{styles:[['block','Block'],['comb','Comb'],['piano','Piano'],['line','Line']],pans:[[0,'Block'],[1,'Pin'],[2,'Arc'],[3,'Dash'],[5,'Needle'],[6,'Sector'],[7,'Knob']]}">
<div class="column column-option"><b>Note style</b></div>
<template x-for="style in styles">
<div class="column column-option column-button" @click="gStyle(style[0])" x-text="style[1]" :active="($store.noteStyle||'comb')==style[0]?'true':'false'"></div>
</template>
<div class="column column-option"><b>Pan style</b></div>
<template x-for="pan in pans">
<div class="column column-option column-button" @click="gPanStyle(pan[0])" x-text="pan[1]" :active="($store.panStyle??3)==pan[0]?'true':'false'"></div>
</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="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

0 comments on commit c1d0000

Please sign in to comment.