1004savecanvas

​

// DOM elements - these are HTML things created and managed by p5

// they *don't* show up in the canvas. they sit on top.

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 savebutton; // this is a DOM button

var div; // this is a DOM div

​

var c = false;

var t = '';

​

var r = 0;

var g = 0;

var b = 255;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  // background square is a "div":

  div = createDiv(''); // a div with no text

  div.position(25, 25);

  div.style("width", "175px");

  div.style("height", "700px");

  div.style("border", "1px solid #000"); // background rectangle

  div.style("background", "#FFF"); // fill color

​

  // 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);

​

  // buttons:

  clearbutton = createButton('SAVE');

  clearbutton.position(50, 600);

  clearbutton.size(100, 100);

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

  clearbutton.mousePressed(saveme);

  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, 700);

}

​

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();

}

​

function saveme()

{

  saveCanvas();

}

​