​

/*

    GLOBALS

*/

​

somevar     = 0;

​

​

​

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 

    HELPER FUNCTIONS

*/

// create labeled sliders with this function

// todo: add functionality through here, too (?), unable to with globals)

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

  // the container is a div that displays the name

  container = createDiv(name)

  // inside the container we put the slider

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

  container.position(x,y);

  slid.parent(container);

  return slid;

}

​

function divTextAt(x,y,txt,size=10){

  c = createDiv(txt);

  c.position(x,y);

}

​

​

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 

    SETUP

*/

function setup() {

  createCanvas(400, 400);

  /*

      SLIDER

  */

  // uses a custom function to help place the slider at x,y with a label

  slider1 = crts(50, 450, "hello", -10, 100, 30, 5);

  /*

       Slider with callbacks

  */

    function angleSliderHasBeenTouched(){

      DEMO=false;

​

     document.getElementById("angleText").innerHTML = `angle: ${angleSlider.value().toFixed(2)} (${radians(angleSlider.value()).toFixed(1)})`;

     angleInput.value(angleSlider.value());

    }

  angleSlider = crts(10, 550, `<p id = "angleText">angle: ${2}</p>`, -360, 360, 2, 3)

  angleSlider.input(angleSliderHasBeenTouched);

  /*

      BUTTON

  */

  // add functionality to a button

  // this one just adds 1 to a global

  myButton = createButton('hi im a button')

  .mouseReleased(() => somevar = somevar+1);

  // another way to add functionality to a control element is by

  // binding an interaction(?!) callback(?!) to a different function

  /*

      NUMBER SELECT \/ /\

  */

  numberInpContainer = createDiv('number input');

  angleInput = createInput('0', 'number').input(() => {

    angleSlider.value(angleInput.value());

    angleSliderHasBeenTouched();

  })

  angleInput.parent(numberInpContainer);

  divTextAt(20,630,`this slider also uses a callback to update the number input, \n and the other way around`);

}

​

​

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 

    DRAW

*/

function draw() {

  background(220);

  text(`${somevar}`,50,50);

  }