p5.funcPlotDemo

// Golan's p5.func demo featuring many functions.

// Press left/right arrows to see different functions!

​

var ease = new p5.Ease();

var easingAlgos = ease.listAlgos();

var nAlgos = easingAlgos.length;

var curAlgo;

var curAlgoID;

​

//---------------------------------------------------------

function setup() {

  createCanvas(500, 400);

  curAlgoID = 1;

  curAlgo = random(easingAlgos);

}

​

​

//---------------------------------------------------------

function draw() {

  background(255);

  var px = 60; 

  var mx = mouseX - px;

  var my = (256 + 120) - mouseY;

  var coeffA = constrain(map(mx, 0.0, 255.0, 0.0, 1.0), 0, 1);

  var coeffB = constrain(map(my, 0.0, 255.0, 0.0, 1.0), 0, 1);

​

  // Draw a linear grayscale ramp.

  push();

  translate(px, 10);

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

    stroke(x);

    line(x, 0, x, 50);

  }

  noStroke(); 

  text("linear", 260, 28);

  pop();

​

  // Draw a 'shaped' grayscale ramp. 

  push();

  translate(px, 65);

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

    var x01 = map(x + 0., 0.0, 255.0, 0.0, 1.0);

    //var g01 = ease[curAlgo](x01);

    var g01 = ease[curAlgo](x01, coeffA, coeffB);

    var g = map(g01, 0.0, 1.0, 0.0, 255.0);

    stroke(g, g, g);

    line(x, 0, x, 50);

  }

  noStroke(); 

  text(curAlgo, 260, 28);

  pop();

​

​

  // Draw an x-y plot of the shaping function.

  stroke(128);

  ellipse(mouseX, mouseY, 10, 10);

  push();

  translate(px, 120);

  noFill();

  rect(0, 0, 256, 256);

  beginShape();

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

    var x01 = map(x + 0., 0.0, 255.0, 0.0, 1.0);

    //var y01 = ease[curAlgo](x01);

    var y01 = ease[curAlgo](x01, coeffA, coeffB);

    var y = map(y01, 0.0, 1.0, 255.0, 0.0);

    vertex(x, y);

  }

  endShape();

  var t01 = ((millis()%3000)/3000.0); 

  var t = (t01<0.5)?(t01*2.0):2.0*(1.0-t01);

  var x01 = t; 

  //var y01 = ease[curAlgo](x01);

  var y01 = ease[curAlgo](x01, coeffA, coeffB);

  // note that some easing functions take additional arguments!

  // check the documentation of p5.func.js to learn more.

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

  var y = map(y01, 0.0, 1.0, 255.0, 0.0);

  noFill();

  line(x,y, x,256); 

  line(0,y, x,y); 

  rect(-59,0, 54,256); 

  fill(0); 

  ellipse(-30,y,10,10); 

  pop();

}

​

//---------------------------------------------------------

function keyPressed() {

  if (key == 'ArrowLeft') {

    curAlgoID = (curAlgoID - 1 + nAlgos) % nAlgos;

    curAlgo = easingAlgos[curAlgoID];

  } else if (key == 'ArrowRight') {

    curAlgoID = (curAlgoID + 1) % nAlgos;

    curAlgo = easingAlgos[curAlgoID];

  }

}