var button;

var slider;

var input;

var nameP;

var txt;

​

​

function setup(){

  canvas=createCanvas(200,200);

​

  canvas.mouseOver(overpara);

  canvas.mouseOver(outpara);

  canvas.mousePressed(changecolor);

  bgcolor=color(200);

  nameP=createP('Your name!');

  txt=createP('some text');

  txt.style('background-color','pink');

  txt.mouseOver(changeStyle);

  txt.mouseOut(revertStyle);

  button=createButton('go');

  // button.mousePressed(changeStyle);

​

  slider=createSlider(10,100,86);

  input=createInput('type your name');

  nameP.mouseOver(overpara);

  nameP.mouseOut(outpara);

  input.changed(updateText); 

  input.input(updateText);

}

function changeStyle(){

  txt.style('background','red');

  txt.style('padding','24px');

}

function revertStyle(){

  txt.style('background','purple');

  txt.style('padding','8px');

}

​

function updateText(){

  nameP.html(input.value());

}

​

function overpara(){

  nameP.html('Your mouse is over me!')

}

​

function outpara(){

  nameP.html('your mouse is out')

}

​

  function changecolor(){

  bgcolor=color(random(255));

}

​

function draw(){

  background(bgcolor);

  fill(255,0,175);

  ellipse(100,100,slider.value(),slider.value());

  // nameP.html(input.value());

  text(input.value(),10,20);

}