1003buttonDOM

var checkbox; // this is a DOM checkbox

var clearbutton; // this is a DOM button

var randombutton; // this is a DOM button

var sr, sg, sb; // sliders!

var inp; // input box

​

var c = false;

var t = '';

​

var r = 0;

var g = 0;

var b = 255;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // checkbox:

  checkbox = createCheckbox('circles?', false); // where does it go

  checkbox.position(50, 50); // move it where you want it

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

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

  box.style.width = '30px';

  box.style.height = '30px';

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

  checkbox.changed(checkme);

  // buttons:

  clearbutton = createButton('CLEAR');

  clearbutton.position(50, 150);

  clearbutton.size(100, 100);

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

  clearbutton.mousePressed(clearme);

  clearbutton = createButton('RANDOM');

  clearbutton.position(50, 250);

  clearbutton.size(100, 100);

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

  clearbutton.mousePressed(randomcolor);

  // sliders:

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

  sr.position(50, 400);

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

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

  sg.position(50, 450);

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

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

  sb.position(50, 500);

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

​

  // input box:

  inp = createInput('');

  inp.position(50, 550);

  inp.size(100, 20);

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

  inp.input(settext);

​

  background(255);

  textSize(30);

}

​

function draw() {

  r = sr.value();

  g = sg.value();

  b = sb.value();

  fill(r, g, b);

  if(c)

  {

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

  }

  else {

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

  }

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

  fill(255);

  rect(25, 25, 175, 575);

}

​

function checkme()

{

  c = this.checked();

}

​

function clearme()

{

  background(255);

}

​

function randomcolor()

{

  sr.value(random(255));

  sg.value(random(255));

  sb.value(random(255));

}

​

function settext()

{

  t = this.value();

}

​