added missing js
This commit is contained in:
382
knob-range.js
Normal file
382
knob-range.js
Normal file
@@ -0,0 +1,382 @@
|
||||
// Théophile Clet - september 2023
|
||||
// contact@tflcl.xyz - https://tflcl.xyz
|
||||
// Max jsui knob with range and randomization features.
|
||||
// Still a work in progress.
|
||||
// License CC-BY-4.0
|
||||
|
||||
|
||||
mgraphics.init();
|
||||
mgraphics.relative_coords = 1;
|
||||
mgraphics.autofill = 0;
|
||||
|
||||
outlets = 3;
|
||||
|
||||
//UI variables
|
||||
var knob_color = [0.2, 0.2, 0.2, 1.];
|
||||
var pointer_color = [1., 1., 1., 1.];
|
||||
var range_color = [0.702, 0.416, 0.886, 0.9];
|
||||
var range_color_locked = [0.74, 0.63, 0.74, 0.9];
|
||||
var indicator_color = [0., 0., 0., 1];
|
||||
var lock_color = [1., 1., 1., 1];
|
||||
var text_color = [1., 1., 1., 1.];
|
||||
|
||||
var knob_radius = 0.8;
|
||||
var knob_width = 0.1;
|
||||
var pointer_length = 0.9;
|
||||
var pointer_offset = 0.;
|
||||
var pointer_width = 0.15;
|
||||
var range_width = 0.2;
|
||||
var range_radius = 0.85;
|
||||
var indicator_lenght = 0.1;
|
||||
// var indicator_width = 0.03;
|
||||
var dead_angle = 0.23;
|
||||
|
||||
var lock_pos = [0.7, 0.75];
|
||||
var lock_dim = [0.25, 0.17];
|
||||
var lock_width = 0.03;
|
||||
|
||||
var font_name ="Ableton Sans Bold";
|
||||
var font_size = 9.;
|
||||
|
||||
//Knob variables
|
||||
var val, val_scaled, val_default = 0;
|
||||
var locked = 0;
|
||||
|
||||
var range_offset = 0.2;
|
||||
var range_length = 0.5;
|
||||
var range = [0., 1.];
|
||||
var range_scaled = [];
|
||||
var output_range = [0., 1.];
|
||||
|
||||
//Utility variables
|
||||
var width = this.box.rect[2] - this.box.rect[0];
|
||||
var height = this.box.rect[3] - this.box.rect[1];
|
||||
var ratio = width/height;
|
||||
var TWOPI = 2 * Math.PI;
|
||||
var rdm = new Rx256(); //random engine
|
||||
var last_x, last_y = 0;
|
||||
var theta, rtheta1, rtheta2;
|
||||
var theta_s = (0.75 - dead_angle * 0.5) * TWOPI;
|
||||
var theta_e = (dead_angle * 0.5 - 0.25) * TWOPI;
|
||||
var cos_s = Math.cos(theta_s);
|
||||
var sin_s = Math.sin(theta_s);
|
||||
var cos_e = Math.cos(theta_e);
|
||||
var sin_e = Math.sin(theta_e);
|
||||
var text;
|
||||
var t_size = [];
|
||||
var pattrVar = [];
|
||||
|
||||
// arg 0: filename
|
||||
// arg 1: default value
|
||||
// arg 2: min output range
|
||||
// arg 3: max output range
|
||||
// arg 4: min random range
|
||||
// arg 5: max random range
|
||||
if (jsarguments.length == 6) {
|
||||
val_default = jsarguments[1];
|
||||
output_range = [jsarguments[2], jsarguments[3]];
|
||||
range = calc_range_2_norm([jsarguments[4],jsarguments[5]]);
|
||||
}
|
||||
if (jsarguments.length == 5) {
|
||||
output_range = [jsarguments[1], jsarguments[2]];
|
||||
range = calc_range_2_norm([jsarguments[3],jsarguments[4]]);
|
||||
}
|
||||
if (jsarguments.length == 4) {
|
||||
val_default = jsarguments[1];
|
||||
output_range = [jsarguments[2], jsarguments[3]];
|
||||
}
|
||||
if (jsarguments.length == 3) {
|
||||
output_range = [jsarguments[1], jsarguments[2]];
|
||||
}
|
||||
if (jsarguments.length == 2) {
|
||||
val_default = jsarguments[1];
|
||||
}
|
||||
set_scaled(val_default);
|
||||
|
||||
|
||||
function loadbang() {
|
||||
calc_font_size();
|
||||
update();
|
||||
}
|
||||
|
||||
// loadbang();
|
||||
function paint() {
|
||||
with (mgraphics) {
|
||||
save();
|
||||
scale(0.9, 0.9);
|
||||
translate(0.1, 0.3);
|
||||
|
||||
//DRAW RANGE
|
||||
set_source_rgba(locked ? range_color_locked : range_color);
|
||||
set_line_width(range_width);
|
||||
rtheta1 = (0.25 + range[0] * (1 - dead_angle) + dead_angle * 0.5) * TWOPI;
|
||||
rtheta2 = (0.25 + range[1] * (1 - dead_angle) + dead_angle * 0.5) * TWOPI;
|
||||
arc(0, 0, range_radius, rtheta1, rtheta2);
|
||||
stroke();
|
||||
|
||||
//DRAW POT BODY
|
||||
set_source_rgba(knob_color);
|
||||
set_line_width(knob_width);
|
||||
set_line_cap('round');
|
||||
move_to(cos_s * (knob_radius + indicator_lenght), sin_s * (knob_radius + indicator_lenght));
|
||||
rel_line_to(-cos_s * indicator_lenght, -sin_s * indicator_lenght);
|
||||
arc(0, 0, knob_radius - knob_width / 2, -theta_s, -theta_e);
|
||||
rel_line_to((indicator_lenght + knob_width/2) * cos_e, (indicator_lenght + knob_width/2) * sin_e);
|
||||
stroke();
|
||||
|
||||
//DRAW POINTER
|
||||
set_source_rgba(pointer_color);
|
||||
set_line_width(pointer_width);
|
||||
theta = (0.75 - val * (1-dead_angle) - dead_angle * 0.5) * TWOPI;
|
||||
var cos_t = Math.cos(theta);
|
||||
var sin_t = Math.sin(theta);
|
||||
move_to(pointer_offset * knob_radius * cos_t, pointer_offset * knob_radius * sin_t);
|
||||
rel_line_to(pointer_length * knob_radius * cos_t, pointer_length * knob_radius * sin_t);
|
||||
stroke();
|
||||
|
||||
restore();
|
||||
|
||||
//DRAW LOCK
|
||||
translate(lock_pos[0], -lock_pos[1]);
|
||||
set_source_rgba(lock_color);
|
||||
set_line_width(lock_width);
|
||||
rectangle(0, 0, lock_dim[0], lock_dim[1]);
|
||||
fill();
|
||||
move_to(lock_width * 0.5, 0);
|
||||
if (!locked) {
|
||||
rel_line_to(0, lock_dim[1] * 0.5);
|
||||
}
|
||||
rel_curve_to(0, lock_dim[1], lock_dim[0] - lock_width, lock_dim[1], lock_dim[0] - lock_width, 0);
|
||||
stroke();
|
||||
|
||||
restore();
|
||||
|
||||
//DRAW VALUE
|
||||
select_font_face(font_name);
|
||||
set_font_size(font_size);
|
||||
text = (Math.round(val_scaled * 100) / 100).toString();
|
||||
t_size = text_measure(text);
|
||||
translate(-t_size[0]/width, 1-0.1*t_size[1]/height);
|
||||
move_to(0, 0);
|
||||
set_source_rgba(text_color);
|
||||
show_text(text);
|
||||
}
|
||||
updatePattr();
|
||||
}
|
||||
|
||||
// function init(args) {
|
||||
// // TOO MUCH MESS HERE, DO NOT USE
|
||||
// if (arguments.length) {
|
||||
// args = arrayfromargs(arguments);
|
||||
// } else {
|
||||
// args = init_args;
|
||||
// }
|
||||
|
||||
// if (args.length >= 5) {
|
||||
// val_default = args.shift();
|
||||
// }
|
||||
// if (args.length == 4) {
|
||||
// output_range = [args.shift(), args.shift()];
|
||||
// range = [scale2norm(args.shift()), scale2norm(args)];
|
||||
// } else if (args.length == 3) {
|
||||
// val_default = args.shift();
|
||||
// output_range = args;
|
||||
// } else if (args.length == 2) {
|
||||
// output_range = args;
|
||||
// } else if (args.length == 1) {
|
||||
// val_default = args;
|
||||
// }
|
||||
// set_scaled(val_default);
|
||||
// }
|
||||
|
||||
|
||||
function update() {
|
||||
outlet(0,val);
|
||||
outlet(1, val_scaled);
|
||||
mgraphics.redraw();
|
||||
}
|
||||
|
||||
function msg_float(v) {
|
||||
val = Math.min(Math.max(0,v),1);
|
||||
val_scaled = scale2outrange(val);
|
||||
update();
|
||||
}
|
||||
|
||||
function bang() {
|
||||
update();
|
||||
}
|
||||
|
||||
function randomize() {
|
||||
if (!locked) {
|
||||
val = scale(rdm.nextfloat_unipolar(), [0, 1], range);
|
||||
val_scaled = scale2outrange(val);
|
||||
update();
|
||||
}
|
||||
}
|
||||
|
||||
function set_range(args) {
|
||||
//dirty way to allow that function to run with either jsui args or passed variables
|
||||
if (arguments.length) {
|
||||
args = arrayfromargs(arguments);
|
||||
}
|
||||
|
||||
//dirty way to keep a minimum range > 0
|
||||
range[0] = Math.min(Math.max(0, args[0]),0.99);
|
||||
range[1] = Math.min(Math.max(0.01, args[1]),1);
|
||||
|
||||
if (range[0] > range[1]) {
|
||||
var tmp = range[0];
|
||||
range[0] = range[1];
|
||||
range[1] = tmp;
|
||||
}
|
||||
range_scaled = calc_range_2_outrange(range);
|
||||
outlet(2, "range", range);
|
||||
outlet(2, "range_scaled", range_scaled);
|
||||
mgraphics.redraw();
|
||||
}
|
||||
|
||||
function set_scaled(v) {
|
||||
val = scale2norm(v);
|
||||
val_scaled = v;
|
||||
mgraphics.redraw();
|
||||
}
|
||||
|
||||
function set(v) {
|
||||
val = v;
|
||||
val_scaled = scale2outrange(val);
|
||||
mgraphics.redraw();
|
||||
}
|
||||
|
||||
function set_lock(v) {
|
||||
locked = v;
|
||||
mgraphics.redraw();
|
||||
}
|
||||
|
||||
function lock(v) {
|
||||
locked = v;
|
||||
outlet(2, "lock", v);
|
||||
mgraphics.redraw();
|
||||
}
|
||||
|
||||
// UTILITIES
|
||||
function scale(value, inRange, outRange) {
|
||||
var result = (value - inRange[0]) * (outRange[1] - outRange[0]) / (inRange[1] - inRange[0]) + outRange[0];
|
||||
|
||||
if (result < outRange[0]) {
|
||||
return outRange[0];
|
||||
} else if (result > outRange[1]) {
|
||||
return outRange[1];
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
scale.local = 1;
|
||||
|
||||
function scale2norm(v) {
|
||||
return scale(v, output_range, [0., 1.]);
|
||||
}
|
||||
scale2norm.local = 1;
|
||||
|
||||
function scale2outrange(v) {
|
||||
return scale(v, [0., 1.], output_range);
|
||||
}
|
||||
scale2outrange.local = 1;
|
||||
|
||||
function calc_range_2_norm(r) {
|
||||
return [scale2norm(r[0]), scale2norm(r[1])];
|
||||
}
|
||||
calc_range_2_norm.local = 1;
|
||||
|
||||
function calc_range_2_outrange(r) {
|
||||
return [scale2outrange(r[0]), scale2outrange(r[1])];
|
||||
}
|
||||
calc_range_2_outrange.local = 1;
|
||||
|
||||
function calc_font_size() {
|
||||
font_size = width/5.8;
|
||||
};
|
||||
calc_font_size.local = 1;
|
||||
|
||||
// PATTR HANDLING
|
||||
function updatePattr() { //SHOULD WORK ONLY WITH SCALED VALUES TO IMPROVE UX
|
||||
pattrVar[0] = val_scaled;
|
||||
pattrVar[1] = range_scaled[0];
|
||||
pattrVar[2] = range_scaled[1];
|
||||
pattrVar[3] = locked;
|
||||
notifyclients();
|
||||
}
|
||||
|
||||
function getvalueof() {
|
||||
return pattrVar;
|
||||
}
|
||||
|
||||
function setvalueof() {
|
||||
val_scaled = arguments[0];
|
||||
val = scale2norm(val_scaled);
|
||||
range_scaled = [arguments[1], arguments[2]];
|
||||
range = calc_range_2_norm(range_scaled);
|
||||
locked = arguments[3];
|
||||
update();
|
||||
}
|
||||
|
||||
// MOUSE AND RESIZE INTERACTIONS
|
||||
function onclick(x,y,but,cmd,shift,capslock,option,ctrl) {
|
||||
x_snorm = 2 * x / width - 1;
|
||||
y_snorm = 2 * y / height - 1;
|
||||
// post(x_snorm, y_snorm); post();
|
||||
if (x_snorm > lock_pos[0] && y_snorm < - lock_pos[1] + lock_dim[1] * 2.5 ) {
|
||||
lock(!locked);
|
||||
}
|
||||
// cache mouse position for tracking delta movements
|
||||
last_x = x;
|
||||
last_y = y;
|
||||
|
||||
}
|
||||
onclick.local = 1;
|
||||
|
||||
function ondrag(x,y,but,cmd,shift,capslock,option,ctrl) {
|
||||
var f,dy;
|
||||
dy = y - last_y; // calculate vertical delta movements
|
||||
if (ctrl) { // ctrl + drag to offset range
|
||||
var mult = shift ? 0.001 : 0.01; // fine tune if shift key is down
|
||||
set_range(range[0] - dy * mult, range[1] - dy * mult);
|
||||
} else if (option) { // opttion/alt + drag to change range width
|
||||
var mult = shift ? 0.0005 : 0.005;
|
||||
set_range(range[0] + dy * mult, range[1] - dy * mult);
|
||||
} else { //drag to change val
|
||||
var mult = shift ? 0.001 : 0.01;
|
||||
f = val - dy * mult;
|
||||
msg_float(f); //set new value with clipping + refresh
|
||||
}
|
||||
// cache mouse position for tracking delta movements
|
||||
last_x = x;
|
||||
last_y = y;
|
||||
}
|
||||
ondrag.local = 1;
|
||||
|
||||
function ondblclick(x,y,but,cmd,shift,capslock,option,ctrl) {
|
||||
last_x = x;
|
||||
last_y = y;
|
||||
set_scaled(val_default);
|
||||
update();
|
||||
// reset();
|
||||
}
|
||||
ondblclick.local = 1;
|
||||
|
||||
function forcesize(w,h) {
|
||||
if (w!=h) {
|
||||
h = w;
|
||||
box.size(w,h);
|
||||
}
|
||||
width = w;
|
||||
height = h;
|
||||
ratio = width/height;
|
||||
calc_font_size();
|
||||
}
|
||||
forcesize.local = 1;
|
||||
|
||||
function onresize(w,h) {
|
||||
forcesize(w,h);
|
||||
mgraphics.redraw();
|
||||
}
|
||||
onresize.local = 1;
|
||||
Reference in New Issue
Block a user