​

var scaleModifierSlider; // modifier, not actual scale

var actualScaleSlider;

​

var rotation = 0;

var d = 0.05;

​

​

// create sliders

function crts(x,y, name, mini, maxi, start, step){

  container = createDiv(name)

  slid = createSlider(mini, maxi, start, step);

  container.position(x,y);

  slid.parent(container);

  return slid;

}

function setup() {

  createCanvas(400, 400);

  // create sliders

  // translate sliders

  sTX = crts(10, 470, 'TX', -50, 460, 100);

  sTY = crts(10, 500, 'TY', -50, 490, 100);

  // rect box pos 

  sBX = crts(200, 470, 'BX', -50, 460, 100);

  sBY = crts(200, 500, 'BY', -50, 490, 100);

  // textSize slider

  sTxtS = crts(10, 530, 'Txt', 1, 1000, 60, 0.1);

  // ..

  scaleModifierSlider = crts(10, 410, 'ScaleMod', 0, 5, 1, 0.1);

  actualScaleSlider = crts(10, 440, 'Actual', 1, 10**9, 20);

​

​

}

​

​

function draw() {

  background(220);

  var actual = actualScaleSlider.value();

  push();

  translate(sTX.value(),sTY.value()); // set new images to centre of canvas

  // rotate(rotation);

  scale(200/actual);

  //

  rect(actual/2, actual/3, actual/10, actual/10);

  textSize(sTxtS.value()/actual);

  text(`${(actual/2).toFixed()}, ${(actual/3).toFixed()}`, actual/2, actual/3,)

  pop();

  text(`text size ${sTxtS.value().toFixed()} / ${actual.toFixed()}  = ${(sTxtS.value()/actual).toFixed()}`,10 ,350);

  text(`modifier : ${scaleModifierSlider.value().toFixed(2)}`,10,370);

  text(`actual    : ${actual.toFixed(2)}`,10,390);

  rotation+=d;

}