Cyclic mapping - OpenProcessing

mySketch
xxxxxxxxxx
 
​
var PI = 3.1415926535897932384626433832795028841971693993751058209749445923078164062;
var TWO_PI = 2 * 3.1415926535897932384626433832795028841971693993751058209749445923078164062;
​
var radcount;
var radians_init = [];
var radians = [];
​
var remap_range = 0.6;
var remap_angle = PI * 0.67;
​
var BOUND_IN = 0;
var BOUND_OUT = TWO_PI;
​
function setup() {
  
  createCanvas( 850, 200 );
  radcount = 15;
  for ( var i = 0; i < radcount; ++i ) {
    radians_init[i] = ( i + 0.5 ) * TWO_PI / radcount;
    radians[i] = radians_init[i];
  }
  
}
​
function draw() {
​
  var unit = 200 / ( BOUND_OUT - BOUND_IN );
  var offset_x = 200;
  var init_liney = 65;
  var result_liney = 135;
​
  if (mouseIsPressed && (mouseButton == LEFT)) {
    remap_angle = ( mouseX - ( offset_x + BOUND_OUT * unit ) ) / unit;
  } else if (mouseIsPressed && (mouseButton == RIGHT)) {
    remap_range = abs( ( mouseX - ( offset_x + BOUND_OUT * unit + ( remap_angle * unit ) ) ) / unit );
  }
  
  background(50);
​
  // *********************************
  // ***** MAPPING CYCLIC VALUES *****
  // *********************************
​
  for ( var i = 0; i < radcount; ++i ) {
    radians[i] = cyclic_map(
      radians_init[i],
      BOUND_IN, BOUND_OUT,
      remap_angle - remap_range,
      remap_angle + remap_range
    );
  }
 
  // *********************************
  // ***** LINEAR REPRESENTATION *****
  // *********************************
​
  // AXIS
  for ( var i = 0; i < 3; ++i ) {  
    if ( i == 1 ) {
      stroke( 255 );
    } else {
      stroke( 255, 150 );
    }
    var startx = offset_x + unit * BOUND_OUT * i;
    var endx = startx + unit * BOUND_OUT;
    line( startx, init_liney - 10, startx, init_liney + 10 );
    line( endx, init_liney - 10, endx, init_liney + 10 );
    line( startx, init_liney, endx, init_liney );
    line( startx, result_liney - 10, startx, result_liney + 10 );
    line( endx, result_liney - 10, endx, result_liney + 10 );
    line( startx, result_liney, endx, result_liney );
  }
  noStroke();
  fill( 255 );
  push(); translate( offset_x + unit * BOUND_OUT + 5, init_liney - 15 );
  rotate( -HALF_PI ); text( BOUND_IN, 0, 0 );
  pop();
  push(); translate( offset_x + unit * 2 * BOUND_OUT + 5, init_liney - 15 );
  rotate( -HALF_PI ); text( BOUND_OUT, 0, 0 );
  pop();
​
  // VALUES
  for ( var i = 0; i < radcount; ++i ) {
    var bri = cyclic_bound( radians_init[i], BOUND_IN, BOUND_OUT );
    stroke( 255,0,0,180 );
    line( 
      offset_x + BOUND_OUT * unit + bri * unit, init_liney,
      offset_x + BOUND_OUT * unit + radians[i] * unit, result_liney
    );
    noStroke();
    fill(255);
    ellipse( 
      offset_x + BOUND_OUT * unit + bri * unit, 
      init_liney, 5, 5
    );
    ellipse( 
      offset_x + BOUND_OUT * unit + radians[i] * unit, 
      result_liney, 5, 5
    );
  }
  
  // REQUESTED VALUE
  stroke( 0,255,255 );
  line( 
    offset_x + BOUND_OUT * unit + ( remap_angle ) * unit, 
    0,
    offset_x + BOUND_OUT * unit + ( remap_angle ) * unit, 
    height
  );
  
  // HALF DISTANCE TO REQUESTED
  var BOUND_MID = (BOUND_OUT-BOUND_IN) * 0.5;
  stroke( 0,255,255, 80 );
  line( 
    offset_x + BOUND_OUT * unit + cyclic_bound( remap_angle - BOUND_MID, BOUND_IN, BOUND_OUT ) * unit, 
    init_liney - 10,
    offset_x + BOUND_OUT * unit + cyclic_bound( remap_angle - BOUND_MID, BOUND_IN, BOUND_OUT ) * unit, 
    result_liney + 10
  );
  line( 
    offset_x + BOUND_OUT * unit + cyclic_bound( remap_angle + BOUND_MID, BOUND_IN, BOUND_OUT ) * unit, 
    init_liney - 10,
    offset_x + BOUND_OUT * unit + cyclic_bound( remap_angle + BOUND_MID, BOUND_IN, BOUND_OUT ) * unit, 
    result_liney + 10
  );
  
  // REQUESTED RANGE
  stroke( 0,255,255 );
  line( 
    offset_x + BOUND_OUT * unit + cyclic_bound( remap_angle - remap_range, BOUND_IN, BOUND_OUT ) * unit, 
    init_liney - 10,
    offset_x + BOUND_OUT * unit + cyclic_bound( remap_angle - remap_range, BOUND_IN, BOUND_OUT ) * unit, 
    result_liney + 10
  );
  line( 
    offset_x + BOUND_OUT * unit + cyclic_bound( remap_angle + remap_range, BOUND_IN, BOUND_OUT ) * unit, 
    init_liney - 10,
    offset_x + BOUND_OUT * unit + cyclic_bound( remap_angle + remap_range, BOUND_IN, BOUND_OUT ) * unit, 
    result_liney + 10
  );
  noStroke();
  text( 
    "in",
    -5 + offset_x + BOUND_OUT * unit + cyclic_bound( remap_angle - remap_range, BOUND_IN, BOUND_OUT ) * unit, 
    result_liney + 25
  );
  text( 
    "out",
    -10 + offset_x + BOUND_OUT * unit + cyclic_bound( remap_angle + remap_range, BOUND_IN, BOUND_OUT ) * unit, 
    result_liney + 25
  );
  
  
  // *********************************
  // ***** CIRCLE REPRESENTATION *****
  // *********************************
  
  var init_rad = 55;
  var result_rad = 75;
  
  // VALUES
  noFill();
  stroke( 255,180 );
  ellipse( 100,100, init_rad*2, init_rad*2 );
  ellipse( 100,100, result_rad*2, result_rad*2 );
  fill(255);
  for ( var i = 0; i < radcount; ++i ) {
    stroke( 255,0,0,180 );
    line( 
      100 + cos( radians_init[i] ) * init_rad, 
      100 + sin( radians_init[i] ) * init_rad, 
      100 + cos( radians[i] ) * result_rad, 
      100 + sin( radians[i] ) * result_rad
    );
    noStroke();
    fill(255);
    ellipse( 
      100 + cos( radians_init[i] ) * init_rad, 
      100 + sin( radians_init[i] ) * init_rad, 
      5, 5
    );
    ellipse( 
      100 + cos( radians[i] ) * result_rad, 
      100 + sin( radians[i] ) * result_rad, 
      5, 5
    );
  }
  
  // REQUESTED VALUE
  stroke( 0,255,255, 130 );
  line( 100, 100,
    100 + cos( remap_angle ) * (result_rad + 10), 
    100 + sin( remap_angle ) * (result_rad + 10)
  );
  
  // REQUESTED RANGE
  stroke( 0,255,255 );
  line( 100, 100,
    100 + cos( remap_angle - remap_range ) * (result_rad + 10), 
    100 + sin( remap_angle - remap_range ) * (result_rad + 10)
  );
  line( 100, 100,
    100 + cos( remap_angle + remap_range ) * (result_rad + 10), 
    100 + sin( remap_angle + remap_range ) * (result_rad + 10)
  );
  fill( 0,255,255, 30 );
  arc( 
    100, 100,
    (result_rad + 10) * 2, (result_rad + 10) * 2,
    remap_angle - remap_range, 
    remap_angle + remap_range
  );
  
  // INFO
  noStroke();
  fill( 255 );
  text( 
    "angle: " + remap_angle + " / range: " + remap_range,
    7, 18 );
  
}
​
function cyclic_bound( value, from_in, from_out ) {
  if ( value >= from_in && value <= from_out ) { 
    return value;
  }
  var d = from_out - from_in;
  while( value < from_in ) {
    value += d;
  }
  while( value > from_out ) {
    value -= d;
  }
  return value;
}
​
function cyclic_map( value, from_in, from_out, to_in, to_out ) {
    
    var half = ( from_out - from_in ) * 0.5;
    var bvalue = cyclic_bound( value, from_in, from_out );
    
    var bin = cyclic_bound( to_in, from_in, from_out );
    var bout = cyclic_bound( to_out, from_in, from_out );
    var bmid = cyclic_bound( to_in + ( to_out - to_in ) * 0.5, from_in, from_out );
    
    var pc = cyclic_bound( ( bvalue - bmid ) / half, -1, 1 );
    var brange = cyclic_bound( half - ( bmid - bin ), -half, half );
    if ( pc >= 0 ) {
      return cyclic_bound( bout + (brange * pc), from_in, from_out );
    }
    return cyclic_bound( bin + (brange * pc), from_in, from_out );
    
}