p5.func.js Simple Demo

/*

 * To add p5.func.js to an OpenProcessing sketch: 

 ------------------------------------------------

 * Go to this URL: https://raw.githubusercontent.com/IDMNYU/p5.js-func/master/lib/p5.func.js

 * Download (Save-As) that file to your own computer; save it as p5.func.js

 * In OpenProcessing, on the righthand side, click on the little sliders icon and open the "FILES" tab

 * Upload the p5.func.js file by dragging it in to the FILES section

 * Now go to the "SKETCH" tab in the OpenProcessing control panel

 * Add a new Library (+) and then type this into the name field: p5.func.js

 * Make sure the switch for that library is toggled ON (blue).

*/

​

let easeList;

let myEasingFunction;

​

function setup() {

  createCanvas(256, 256);

  easeList = new p5.Ease();

  myEasingFunction = easeList["doubleExponentialSigmoid"];

}

​

function draw() {

  background(200);

  strokeWeight(2);

  stroke(0);

  noFill();

  var parameter01 = map(mouseX, 0,256, 0,1);

  beginShape();

  for (var x=0; x<256; x++) {

    var in01 = map(x, 0,255, 0,1);

    var out01 = myEasingFunction(in01, parameter01, 0);

    var y = map(out01, 0,1, 255,0); 

    vertex(x,y);

  }

  endShape();

}