​

// https://discourse.processing.org/t/uneven-distrobution-instead-of-normal-map/5791/4

// step 1: framework for a function like y = map(x,xlow,xhigh,ylow,yhigh);

// step 2: add graph for that range only ( and mouseWheel operation )

// step 3a: add math like y = ylow + (x - xlow)*(yhigh - ylow)/(xhigh -xlow)

// step 3b: use a square function sq((n-xlow)/(xhigh-xlow)) * (yhigh - ylow) +ylow;

​

var Nin = 33;

var Nout;

// step 1:

function my_map(n,inlow,inhigh,outlow,outhigh) {

  var in_range;

  in_range = n; // temporary

  // step 3a: linear equation

  // in_range = b + m * n;

    // step 3b: square equation

  // in_range = b + m * norm(n)*norm(n);    

  return(in_range);

}

​

function setup() {

  createCanvas(120, 220);

  Nout = my_map(Nin, 0, 100, 0, 200);

  print("Nin: "+Nin+" my_map: "+nf(Nout,1,2));

}

// step 2:

function draw_graph() {

    noStroke();

    fill(200,200,0);

    rect(9,9,103,203);

  for ( var i=0;i < 101;i++){

    var posx = i+10;

    var posy = 210 - int(my_map(i, 0, 100, 0, 200));

    if( i == Nin ) { stroke(200,0,0); } else { stroke(0,0,200); }

    line(posx,210,posx,posy);

  }

}

​

function draw() {

  background(0,200,0);

  draw_graph(); 

}

​

function mouseWheel(event){

  Nin += event.delta/3; 

  if ( Nin < 0 ) Nin = 0;

  if ( Nin > 100 ) Nin = 100;

  Nout = my_map(Nin, 0, 100, 0, 200);

  print("Nin: "+Nin+" my_map: "+nf(Nout,1,2));

}

​