var rotateVal = 0;

var translateX = 0;

var translateY = 0;

​

var sliderScale, sliderRotate, sliderTranslateX, sliderTranslateY;

​

function setup() {

  createCanvas(400, 400);

  sliderTranslateX = createSlider(0, width, 0.0, 1);

  sliderTranslateX.position(90, 20);

  sliderTranslateX.size(100);

  sliderTranslateY = createSlider(0, height, 0.0, 1);

  sliderTranslateY.position(90, 40);

  sliderTranslateY.size(100);

  sliderRotate = createSlider(0, TWO_PI, 0.0, 0.05);

  sliderRotate.position(90, 60);

  sliderRotate.size(100);

  sliderScale = createSlider(0, 3.00, 1.0, 0.1);

  sliderScale.position(90, 80);

  sliderScale.size(100);

}

​

function draw() {

  background(50);

​

  translate(sliderTranslateX.value(), sliderTranslateY.value());

​

  fill(0, 200, 255, 100);

  noStroke();

  rect(0, 0, 40, 80);

​

  rotate(sliderRotate.value());

​

  fill(255, 0, 200, 100);

  noStroke();

  rect(0, 0, 40, 80);

​

  scale(sliderScale.value());

​

  fill(255, 200, 0, 100);

  noStroke();

  rect(0, 0, 40, 80);

  resetMatrix();

  fill(255);

  textAlign(LEFT, TOP);

  text("translate X", 20, 23);

  text("translate Y", 20, 43);

  text("rotate", 20, 63);

  text("scale", 20, 83);

  text(sliderTranslateX.value().toFixed(0), 200, 23);

  text(sliderTranslateY.value().toFixed(0), 200, 43);

  text(`${sliderRotate.value().toFixed(2)} rad or ${degrees(sliderRotate.value()).toFixed(1)} deg`, 200, 63);

  text(sliderScale.value().toFixed(1), 200, 83);

}

​