​

const zoom = 8;

const zoomX = 16

​

var midPointX = 3;

var midPointY = 128;

​

function setup() {

  var topArea = createDiv();

  createCanvas(8 * zoomX , 64 * zoom).parent(topArea);

  // Slider for the H res of the wavetable

  xDiv = createDiv();

  xDiv.parent(topArea);

  xSlider = createSlider(0, 7, midPointX, 0.01).addClass("mySliders")

  xSlider.style('width', '512px');

  xSlider.style("margin-bottom","-8px");

  xSlider.parent(xDiv);

  xSpan = createSpan("X: "+midPointX);

  xSpan.style("font-size","14px");

  xSpan.style("font-weight","bold");

  //xSpan.style('color', '#ffff9e');

  xSpan.parent(xDiv);

  xSlider.input(function(){

    midPointX = this.value();

    //resizeCanvas(length*2,128*1 + 1);

    xSpan.html("X: "+midPointX);

    genRGBRamp();

  });

  // Slider for the W res of the wavetable

  yDiv = createDiv();

  yDiv.parent(topArea);

  ySlider = createSlider(0, 255, midPointY, 0.01).addClass("mySliders")

  ySlider.style('width', '512px');

  ySlider.style("margin-bottom","-8px");

  ySlider.parent(yDiv);

  ySpan = createSpan("Y: "+midPointY);

  ySpan.style("font-size","14px");

  ySpan.style("font-weight","bold");

  //ySpan.style('color', '#ffff9e');

  ySpan.parent(yDiv);

  ySlider.input(function(){

    midPointY = this.value();

    //resizeCanvas(length*2,128*1 + 1);

    ySpan.html("Y: "+midPointY);

    genRGBRamp();

  });

  genRGBRamp();

}

​

function draw() {

  background(220);

  genPalette();

}

​

function genPalette() {

  // for(r = 0; r < 8; r++)

  //   {

  //     fill(color(rgbRamp[r], 0, 0))

  //     noStroke();

  //     rect(r * zoom, 0, zoom);

  //   }

  for(r = 0; r < 8; r++)

    {

      for(var b = 0; b < 8; b++)

      {

        for(var g = 0; g < 8; g++)

        {

          fill(color(rgbRamp[r], rgbRamp[g], rgbRamp[b]))

          //console.log(g * b);

          noStroke();

          rect(r * zoomX, (g + b * zoom) * zoom, zoomX, zoom);

        }

      }

    }

}

​

class Point

{

    constructor(x,y)

    {

        this.x=x;

        this.y=y;

    }

}

​

function genRGBRamp() {

//   const x0 = 0;

//   const y0 = 0;

//   const x2 = 7;

//   const y2 = 255;

//   let x1 = 3;

//   let y1 = 128;

  rgbRamp = [];

  var f=[new Point(0, 0), new Point(midPointX, midPointY),

                new Point(7, 255)];

  for(xi = 0; xi < 8; xi++)

    {

      let result = 0;

      for (let i = 0; i < 3; i++)

      {

        // Compute individual terms of above formula

        let term = f[i].y;

        for (let j = 0; j < 3; j++)

        {

            if (j != i)

                term = term*(xi - f[j].x) / (f[i].x - f[j].x);

        }

        // Add current term to result

        result += term;

      }

      rgbRamp.push(Math.round(result));

      //console.log(rgbRamp);

    }

  // Formula here

  // for(i = 0; i < 8; i++)

  //   rgbRamp.push(Math.round(Math.sin( ((2 * Math.PI)/14) * i + 11 ) * 127.5 + 127.5));

  //console.log(rgbRamp);

}