hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tweaks

Browse source
This commit is contained in:
Felix Roos 2024-04-01 23:21:32 +02:00
parent c7f811e14d
commit 6479c60387
2 changed files with 19 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/codemirror/widget.mjs
View file

@ -131,5 +131,5 @@ registerWidget('_pitchwheel', (id, options = {}, pat) => {
let _size = options.size || 200; let _size = options.size || 200;
options = { width: _size, height: _size, ...options, size: _size / 5 }; options = { width: _size, height: _size, ...options, size: _size / 5 };
const ctx = getCanvasWidget(id, options).getContext('2d'); const ctx = getCanvasWidget(id, options).getContext('2d');
return pat.tag(id).pitchwheel({ ...options, ctx, id }); return pat.pitchwheel({ ...options, ctx, id });
}); });

31
packages/draw/pitchwheel.mjs
View file

@ -15,20 +15,20 @@ const freq2angle = (freq, root) => {
}; };
export function pitchwheel({ export function pitchwheel({
time,
haps, haps,
ctx, ctx,
id, id,
connectdots = 0,
centerlines = 1,
hapcircles = 1, hapcircles = 1,
circle = 0, circle = 0,
edo = 12, edo = 12,
root = c, root = c,
thickness = 4, thickness = 3,
hapRadius = 4, hapRadius = 6,
mode = 'flake',
margin = 10, margin = 10,
} = {}) { } = {}) {
const connectdots = mode === 'polygon';
const centerlines = mode === 'flake';
const w = ctx.canvas.width; const w = ctx.canvas.width;
const h = ctx.canvas.height; const h = ctx.canvas.height;
ctx.clearRect(0, 0, w, h); ctx.clearRect(0, 0, w, h);
@ -55,15 +55,17 @@ export function pitchwheel({
if (edo) { if (edo) {
Array.from({ length: edo }, (_, i) => { Array.from({ length: edo }, (_, i) => {
ctx.beginPath();
const angle = freq2angle(root * Math.pow(2, i / edo), root); const angle = freq2angle(root * Math.pow(2, i / edo), root);
const [x, y] = circlePos(centerX, centerY, radius, angle); const [x, y] = circlePos(centerX, centerY, radius, angle);
ctx.beginPath();
ctx.arc(x, y, hapRadius, 0, 2 * Math.PI); ctx.arc(x, y, hapRadius, 0, 2 * Math.PI);
ctx.stroke(); ctx.fill();
}); });
ctx.stroke();
} }
let shape = []; let shape = [];
ctx.lineWidth = hapRadius;
haps.forEach((hap) => { haps.forEach((hap) => {
let freq; let freq;
try { try {
@ -74,11 +76,12 @@ export function pitchwheel({
const angle = freq2angle(freq, root); const angle = freq2angle(freq, root);
const [x, y] = circlePos(centerX, centerY, radius, angle); const [x, y] = circlePos(centerX, centerY, radius, angle);
const hapColor = hap.value.color || color; const hapColor = hap.value.color || color;
shape.push([x, y]);
ctx.strokeStyle = hapColor; ctx.strokeStyle = hapColor;
ctx.fillStyle = hapColor; ctx.fillStyle = hapColor;
const { velocity = 1, gain = 1 } = hap.value || {}; const { velocity = 1, gain = 1 } = hap.value || {};
ctx.globalAlpha = velocity * gain; const alpha = velocity * gain;
ctx.globalAlpha = alpha;
shape.push([x, y, angle, hapColor, alpha]);
ctx.beginPath(); ctx.beginPath();
if (hapcircles) { if (hapcircles) {
ctx.moveTo(x + hapRadius, y); ctx.moveTo(x + hapRadius, y);
@ -94,10 +97,13 @@ export function pitchwheel({
ctx.strokeStyle = color; ctx.strokeStyle = color;
ctx.globalAlpha = 1; ctx.globalAlpha = 1;
if (shape.length && connectdots) { if (connectdots && shape.length) {
shape = shape.sort((a, b) => a[2] - b[2]);
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(shape[0][0], shape[0][1]); ctx.moveTo(shape[0][0], shape[0][1]);
shape.forEach(([x, y]) => { shape.forEach(([x, y, _, color, alpha]) => {
ctx.strokeStyle = color;
ctx.globalAlpha = alpha;
ctx.lineTo(x, y); ctx.lineTo(x, y);
}); });
ctx.lineTo(shape[0][0], shape[0][1]); ctx.lineTo(shape[0][0], shape[0][1]);
@ -109,7 +115,7 @@ export function pitchwheel({
Pattern.prototype.pitchwheel = function (options = {}) { Pattern.prototype.pitchwheel = function (options = {}) {
let { ctx = getDrawContext(), id = 1 } = options; let { ctx = getDrawContext(), id = 1 } = options;
this.onPaint((_, time, haps) => return this.tag(id).onPaint((_, time, haps) =>
pitchwheel({ pitchwheel({
...options, ...options,
time, time,
@ -118,5 +124,4 @@ Pattern.prototype.pitchwheel = function (options = {}) {
id, id,
}), }),
); );
return this;
}; };