ShapedSinusoids

// 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.2.8/dist/p5.createloop.js

​

function setup() {

  createCanvas(400, 400);

  frameRate(30);

  noSmooth();

  pixelDensity(1);

  createLoop({

    duration: 2,

    gif: false

  });

}

​

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

function draw() {

  background("DodgerBlue");

  noStroke();

  fill("white");

  textAlign(CENTER);

​

​

  var P0 = animLoop.progress;

  var X0 = width * 0.25;

  var Y0 = 200 + 100 * sin(P0 * TWO_PI);

  circle(X0, Y0, 50);

  text("sinusoid", X0, 50);

​

  var P1 = animLoop.progress;

  var shapedP1 = NormalizedLogisticSigmoid(P1, 0.65);

  var X1 = width * 0.50;

  var Y1 = 200 + 100 * sin(shapedP1 * TWO_PI);

  circle(X1, Y1, 50);

  text("sinusoid\nshaped by\nsigmoid", X1, 35);

​

  var P2 = animLoop.progress;

  var shapedP2 = NormalizedLogit(P2, 0.65);

  var X2 = width * 0.75;

  var Y2 = 200 + 100 * sin(shapedP2 * TWO_PI);

  circle(X2, Y2, 50);

  text("sinusoid\nshaped by\nlogit", X2, 35);

​

}

​

​

​

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

function NormalizedLogisticSigmoid(x, a) {

  // Shaping function taken from 

  // https://github.com/golanlevin/Pattern_Master

  // but also available in the p5-func library

​

​

  var EPSILON = 0.00001;

  var min_param_a = 0.0 + EPSILON;

  var max_param_a = 1.0 - EPSILON;

  var emph = 5.0;

​

  a = constrain(a, min_param_a, max_param_a);

  a = (1.0 / (1.0 - a) - 1.0);

  a = emph * a;

​

  var y = 1.0 / (1.0 + exp(0 - (x - 0.5) * a));

  var miny = 1.0 / (1.0 + exp(0.5 * a));

  var maxy = 1.0 / (1.0 + exp(-0.5 * a));

  y = map(y, miny, maxy, 0, 1);

  return y;

}

​

​

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

function NormalizedLogit(x, a) {

  // http://en.wikipedia.org/wiki/Logit

  // Shaping function taken from 

  // https://github.com/golanlevin/Pattern_Master

  // but also available in the p5-func library

​

  var EPSILON = 0.00001;

  var min_param_a = 0.0 + EPSILON;

  var max_param_a = 1.0 - EPSILON;

  var emph = 5.0;

​

  a = constrain(a, min_param_a, max_param_a);

  a = (1 / (1 - a) - 1);

  a = emph * a;

​

  var minx = 1.0 / (1.0 + exp(0.5 * a));

  var maxx = 1.0 / (1.0 + exp(-0.5 * a));

  x = map(x, 0, 1, minx, maxx);

​

  var y = log(x / (1.0 - x));

  y *= 1.0 / a;

  y += 0.5;

​

  y = constrain(y, 0, 1);

  return y;

}