let selectionModeHeader = "Select colors";

let selectionModeHeader_x;

let selectionModeHeader_y;

​

// variable for background image

let backgroundImage;

​

// variables for color picker objects

let colorPicker1;

let colorPicker2;

let colorPicker1_x;

let colorPicker2_x;

let colorPicker1_y;

let colorPicker2_y;

let colorPickerWidth;

let colorPickerHeight;

​

function preload() {

  // loading background image

  backgroundImage = loadImage('images/reas_tissue_p_5.jpg');

}

​

function setup() {

  // creating canvas

  createCanvas(windowWidth, windowHeight);

  // drawing background image

  image(backgroundImage, 0, 0, width, height);

  // computes positions and sizes based on current size

  colorPicker1_x = (5/138) * windowWidth;

  colorPicker2_x = (37/69) * windowWidth;

  colorPicker1_y = (1/8) * windowHeight;

  colorPicker2_y = (1/8) * windowHeight;

  colorPickerWidth = (59/138) * windowWidth;

  colorPickerHeight = (45/68) * windowHeight;

  // creates color picker objects

  create_color_picker();

}

​

function draw() {

  // drawing background image

  image(backgroundImage, 0, 0, width, height);

  // writing header to screen

  stroke('#96B752');

  fill(0);

  textFont('fantasy');

  textSize((7/276) * windowWidth);

  selectionModeHeader_x = (59/138) * windowWidth;

  selectionModeHeader_y = (11/136) * windowHeight;

  text(selectionModeHeader, selectionModeHeader_x, selectionModeHeader_y);

  // computes positions and sizes based on current size

  colorPicker1_x = (5/138) * windowWidth;

  colorPicker2_x = (37/69) * windowWidth;

  colorPicker1_y = (1/8) * windowHeight;

  colorPicker2_y = (1/8) * windowHeight;

  colorPickerWidth = (59/138) * windowWidth;

  colorPickerHeight = (45/68) * windowHeight;  

  // draws color picker object and samples to canas

  drawPickerImages();

  // updates the size and position of the color picker

  updatePickerParams();

}

​

// function to resize the canvas

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

// creates color picker objects

function create_color_picker() {

  // color picker 1

  colorPicker1 = createColorPicker('#ed225d');

  colorPicker1.position(colorPicker1_x, colorPicker1_y + colorPickerHeight + 5);

  colorPicker1.size(colorPickerWidth, 20);

​

  // color picker 2

  colorPicker2 = createColorPicker('#A3B630');

  colorPicker2.position(colorPicker2_x, colorPicker2_y + colorPickerHeight + 5);

  colorPicker2.size(colorPickerWidth, 20);

}

​

// draws color picker object and samples to canas

function drawPickerImages() {

  // color picker 1

  stroke(colorPicker1.color());

  fill(colorPicker1.color());

  rect(colorPicker1_x, colorPicker1_y, colorPickerWidth, colorPickerHeight);

  // color picker 2

  stroke(colorPicker2.color());

  fill(colorPicker2.color());

  rect(colorPicker2_x, colorPicker2_y, colorPickerWidth, colorPickerHeight);

}

​

// updates the size and position of the color picker

function updatePickerParams() {

  // updates position

  colorPicker1.position(colorPicker1_x, colorPicker1_y + colorPickerHeight + 5);

  colorPicker2.position(colorPicker2_x, colorPicker2_y + colorPickerHeight + 5);

  // updates size

  colorPicker1.size(colorPickerWidth, 20);

  colorPicker2.size(colorPickerWidth, 20);

}