flesh out oscilloscope documentation

This commit is contained in:
2023-10-23 00:05:55 +02:00
parent 70b44cbd29
commit 3900f5eef5
2 changed files with 31 additions and 2 deletions

View File

@ -172,7 +172,6 @@ export const runOscilloscope = (
// Drawing logic varies based on orientation and 3D setting
if (app.osc.is3D) {
// For demonstration, assume dataArray alternates between left and right channel
for (let i = 0; i < dataArray.length; i += 2) {
const x = (dataArray[i] * WIDTH * app.osc.size) / 2 + WIDTH / 4;
const y = (dataArray[i + 1] * HEIGHT * app.osc.size) / 2 + HEIGHT / 4;
@ -190,7 +189,16 @@ export const runOscilloscope = (
}
canvasCtx.lineTo(WIDTH, yOffset);
} else {
// Vertical drawing logic
let y = 0;
const sliceHeight = (HEIGHT * 1.0) / dataArray.length;
const xOffset = WIDTH / 4; // Adjust this to move the oscilloscope to the side
for (let i = 0; i < dataArray.length; i++) {
const v = dataArray[i] * 0.5 * WIDTH * app.osc.size;
const x = v + xOffset;
i === 0 ? canvasCtx.moveTo(x, y) : canvasCtx.lineTo(x, y);
y += sliceHeight;
}
canvasCtx.lineTo(xOffset, HEIGHT);
}
canvasCtx.stroke();

View File

@ -4,5 +4,26 @@ import { makeExampleFactory } from "../Documentation";
export const oscilloscope = (application: Editor): string => {
const makeExample = makeExampleFactory(application);
return `# Oscilloscope
You can turn on the oscilloscope to generate interesting visuals or to inspect audio. Use the <ic>scope()</ic> function to turn it on and off. The oscilloscope is off by default.
${makeExample(
"Oscilloscope configuration",
`
scope({
enabled: true, // off by default
color: "#fdba74", // any valid CSS color or "random"
thickness: 4, // stroke thickness
fftSize: 256, // multiples of 128
orientation: "horizontal", // "vertical" or "horizontal"
is3D: false, // 3D oscilloscope
size: 1, // size of the oscilloscope
})
`,
true
)}
Note that these values can be patterned as well! You can transform the oscilloscope into its own light show if you want. The picture is not stable anyway so you won't have much use of it for precision work :)
`;
};