const maxi = 11;

​

const storePrefix = '_greyscale';

​

function setup() {

  // create canvas

  createCanvas(maxi * 105, 600);

  background(249);

  noStroke();

​

  textSize(28);

  text('Calibrating the grey scale', 10, 30);

  createDiv(`<div style="max-width:600px;padding-left: 30px;">

<h2>Create a greyscale in png (100% quality) format.</h2>

<ol><ul style="list-style-type:disc;"><li>Use the 10 rectangular steps in this interactive.</li><li>Note that using a monitor’s 256 levels, black = 0 in all RGB channels and white = 255 in all RGB channels.</li><li>Create an ordered scale of percentage grey from dark (0%; 0; left) to light (100%; 255; right) using the slider for each rectangle. </li><li>Ensure that visually there are equal changes in intensity values between each grey step.<h3></ol>

<h2>Evaluate your Work:</h2></li><ol style="list-style-type:disc;"><li>Mention your struggles and issues, such as whether your monitor was dissimilar to your laptop display.</li><li style="padding: 5px 10px;">Are the squares equally spaced in terms of percentages? </li><li style="padding: 5px 10px;">Are there any that differ from the majority?  If so, how does it differ?</li><li style="padding: 5px 10px;">Which one is 50% grey?</li><li style="padding: 5px 10px;">State the white point and gamma used for your display device, whether you worked on your laptop or a monitor (specify the makes of devices). </li><li style="padding: 5px 10px;">State why one can not produce an accurate grey scale using RGB numbers. In other words, explain why it is best to use a calibration card printed by a company such as Kodak. 

</li></ol></div>`);

​

  // create sliders

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

​

    // max: 9 or 97

    Slider[i] = createSlider(0, 9, 0, 0);

    Slider[i].position((i - 1) * 100 +30, 450);

    // Slider[i].hide()

    Slider[i].value(get_val(i));

    Slider[i].style('width', '200px');

    Slider[i].style('transform: rotate(-90deg);');

    let val = Slider[i].value();

  }

​

  let savebtn = createButton('Save');

  savebtn.position(120, 80);

  savebtn.mousePressed(save_values);

​

  let exportbtn = createButton('Export');

  exportbtn.position(20, 80);

  exportbtn.mousePressed(() => {

    let img = createImage(maxi * 105, 500);

    img.loadPixels();

    loadPixels();

​

    for (let i = 0; i < maxi * 105; i++)

      for (let j = 40; j < 500; j++)

        img.set(i, j, get(i, j));

    img.updatePixels();

    img.save('Greyscale', 'png')

    for(let i = 1; i < maxi; i++){

      print(Slider[i].value())

    }

  });

​

  let resetBtn = createButton('Reset');

  resetBtn.mousePressed(() => {

    for (let i = 1; i < maxi; i++)

      Slider[i].value(0)

  });

​

  let csavebtn = createButton('Clear saves on reload');

  csavebtn.position(20, 50);

  csavebtn.mousePressed(clearStorage);

}

​

​

​

function draw() {

  const flex = 128;

  // const fpc = log(flex) / flex

​

  //create square

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

    let val = Slider[i].value();

    //if (val < flex) val = log(val)/log(flex)*flex

    //else val = val

    // val = sqrt(val);

    var x = (i * 100) - 25;

    var y = 150;

    val = 0.2867133 + 60.04114*val - 22.10752*pow(val,2) + 6.348193*pow(val,3) - 0.7584499*pow(val,4) + 0.03141026*pow(val,5)

    // val =  0.1191363 + 4.088523*val - 0.1305939*pow(val,2) + 0.004453352*pow(val,3) - 0.00005710484*pow(val,4) + 2.421693e-7*pow(val,5)

    val += 85+50*i;

    if(val > 255){

      val = val % 255

    }

    fill(val);

    //x and y is top left position, width, height

    rect(x, y, 90, 200);

​

​

  }

}

​

​

function save_values() {

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

    let val = Slider[i].value();

    storeItem(storePrefix + i, val);

  }

​

}

​

function get_val(i) {

  let tmp = getItem(storePrefix + i);

  if (tmp == null)

    return 0;

  return tmp;

}

​