animLoop+p5.func

// Uses https://www.npmjs.com/package/p5.createloop

// Be sure that the following script is included in index.html:

// https://unpkg.com/p5.createloop@0.3.1/dist/p5.createloop.js

// Also uses p5-func, https://idmnyu.github.io/p5.js-func/

​

// Create the easing function generator

var ease = new p5.Ease();

var easingAlgos = ease.listAlgos();

var nAlgos = easingAlgos.length;

var curAlgo;

var curAlgoID;

var mx = 0; 

​

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

function setup() {

  createCanvas(600, 500);

  print(easingAlgos);

  curAlgoID = 1;

  curAlgo = "doubleOddPolynomialOgee"; //random(easingAlgos);

  pixelDensity(1);

  createLoop({

    duration: 4, 

    gif: false // set to true to export GIF

  });

}

​

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

function draw() {

  background("DodgerBlue");

  drawDebug(); 

  noStroke();

  fill("white");

  rectMode(CENTER);

  // Generate several different "eased" versions of the progress variable.

  var p = animLoop.progress;

  mx = constrain(mouseX/width, 0,1);

  var easeA01 = ease["normalizedLogitSigmoid"](p, mx);

  var easeB01 = ease["cubicInOut"](p);

  var easeC01 = ease["bounceOut"](p);

  var easeD01 = ease[curAlgo](p, 0.5, mx);

  // Draw the four ticks

  var x1 = width * easeA01;

  rect(x1, 100, 10, 50);

​

  var x2 = width * easeB01;

  rect(x2, 200, 10, 50);

  var x3 = width * easeC01;

  rect(x3, 300, 10, 50);

  var x4 = width * easeD01;

  rect(x4, 400, 10, 50);

}

​

​

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

function keyPressed() {

  // Choose a new easing function for the bottom tick 

  // when you press the L/R arrow keys. 

  if (key == 'ArrowLeft') {

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

    curAlgo = easingAlgos[curAlgoID];

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

    curAlgoID = (curAlgoID + 1) % nAlgos;

    curAlgo = easingAlgos[curAlgoID];

  }

  print(curAlgo); 

}

​

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

function drawDebug() {

  // Draw the grid and the text. 

  stroke(255,255,255, 80); 

  for (var i=1; i<10; i++){

    var x = map (i, 0,10, 0, width); 

    line(x, 0, x,height); 

  }

  textSize(20);

  textAlign(LEFT, CENTER); 

  fill(255,160);

  noStroke(); 

  text("normalizedLogitSigmoid (" + nf(mx,1,2) + ")", 20, 100);

  text("cubicInOut", 20, 200);

  text("bounceOut", 20, 300);

  text(curAlgo, 20, 400);

}