28/1003 DOM with Checkbox, Button, Slider, Inputbox

var checkboxx; // a DOM checkbox

var buttonclearr; // a DOM button

var buttonrandomm; // a DOM button

var sliderredd, slidergreenn, sliderbluee; // sliders

var inputboxx; // input box

​

var falsee = false;

var textt = '';

​

var redd = 0;

var greenn = 0;

var bluee = 255;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // checkbox:

  checkboxx = createCheckbox('Circles/Rectangles', false);

  checkboxx.position(50, 50);

  // checkbox has an input for the actual checkbox part:

  let box = checkboxx.elt.getElementsByTagName('input')[0]; 

  box.style.width = '30px';

  box.style.height = '30px';

  checkboxx.style('font-size', '30px');

  checkboxx.changed(checkme);

  // buttons:

  buttonclearr = createButton('CLEAR');

  buttonclearr.position(50, 150);

  buttonclearr.size(100, 100);

  buttonclearr.style('font-size', '20px');

  buttonclearr.mousePressed(clearme);

  buttonclearr = createButton('RANDOM');

  buttonclearr.position(50, 250);

  buttonclearr.size(100, 100);

  buttonclearr.style('font-size', '20px');

  buttonclearr.mousePressed(randomcolor);

  // sliders:

  sliderredd = createSlider(0, 255, 100); // minimum, maximum, default

  sliderredd.position(50, 400);

  sliderredd.style('width', '100px');

  slidergreenn = createSlider(0, 255, 100); // minimum, maximum, default

  slidergreenn.position(50, 450);

  slidergreenn.style('width', '100px');

  sliderbluee = createSlider(0, 255, 100); // minimum, maximum, default

  sliderbluee.position(50, 500);

  sliderbluee.style('width', '100px');

​

  // input box:

  inputboxx = createInput('');

  inputboxx.position(50, 550);

  inputboxx.size(100, 20);

  inputboxx.style('font-size', '20px');

  inputboxx.input(settext);

​

  background(100);

  textSize(30);

}

​

function draw() {

  redd = sliderredd.value();

  greenn = slidergreenn.value();

  bluee = sliderbluee.value();

  fill(redd, greenn, bluee);

  if(falsee)

  {

    ellipse(random(width), random(height), 100, 100);

  }

  else {

    rect(random(width), random(height), 100, 100);    

  }

  text(textt, random(width), random(height));

  fill(255);

  rect(25, 25, 300, 600);

}

​

function checkme()

{

  falsee = this.checked();

}

​

function clearme()

{

  background(100);

}

​

function randomcolor()

{

  sliderredd.value(random(255));

  slidergreenn.value(random(255));

  sliderbluee.value(random(255));

}

​

function settext()

{

  textt = this.value();

}