* Laura Tessin

 *

 * visualize a homography matrix with adjustable elements

 *

 */

​

const vectors = [];

​

let a_slider, b_slider, c_slider, d_slider, e_slider, f_slider;

let a_value, b_value, c_value, d_value, e_value, f_value;

​

let canvas_size;

​

function setup() {

​

  canvas_size = windowWidth;

  createCanvas(canvas_size, canvas_size);

​

  let v1 = createVector(150, 200);

  let v2 = createVector(450, 200);

  let v3 = createVector(450, 400);

  let v4 = createVector(150, 400);

​

  vectors.push(v1, v2, v3, v4);

  // draw a bunch of sliders

  a_slider = createSlider(1, 30, 10);

  a_slider.position(10, 10);

  b_slider = createSlider(-10, 10, 0);

  b_slider.position(10, 30);

  c_slider = createSlider(-10, 10, 0);

  c_slider.position(10, 50);

  d_slider = createSlider(1, 30, 10);

  d_slider.position(10, 70);

  e_slider = createSlider(-300, 300, 0);

  e_slider.position(10, 90);

  f_slider = createSlider(-300, 300, 0);

  f_slider.position(10, 110);

}

​

function draw() {

  background('white');

  noStroke();

​

  update_slider_values();

​

  // draw 'normal' rectangle in yellow

​

  fill(254, 217, 156, 200);  // fill yellow

  beginShape();

  vectors.forEach(vector => vertex(vector.x, vector.y));

  endShape(CLOSE);

​

  // apply homography matrix

​

  homography_matrix = [

    (a_value * 1e-01), (b_value * 1e-01),

    (c_value * 1e-01), (d_value * 1e-01),

    e_value, f_value];

​

  applyMatrix(homography_matrix);

​

  // draw distorted rectangle in orange

​

  fill(254, 167, 140, 180); // fill orange

​

  beginShape();

  vectors.forEach(vector => vertex(vector.x, vector.y));

  endShape(CLOSE);

}

​

function update_slider_values() {

  const a = a_slider.value();

  a_value = a;

  const b = b_slider.value();

  b_value = b;

  const c = c_slider.value();

  c_value = c;

  const d = d_slider.value();

  d_value = d;

  const e = e_slider.value();

  e_value = e;

  const f = f_slider.value();

  f_value = f;

  text(`a = ${a_value} * e-01`, a_slider.x * 2 + a_slider.width, 25);

  text(`b = ${b_value} * e-01`, b_slider.x * 2 + b_slider.width, 45);

  text(`c = ${c_value} * e-01`, c_slider.x * 2 + c_slider.width, 65);

  text(`d = ${d_value} * e-01`, d_slider.x * 2 + d_slider.width, 85);

  text(`e = ${e_value}`, e_slider.x * 2 + e_slider.width, 105);

  text(`f = ${f_value}`, f_slider.x * 2 + f_slider.width, 125);

}