// Sources used

//8: HTML / CSS / DOM - p5.js Tutorial by Daniel Shiffman

// https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX

​

let header

​

function preload() {

  frog = loadImage("DopeyFrog.png");

}

​

function setup(){

  createCanvas(500, 500);

  x = random(100, 300);

  y = random(100, 300);

  xspeed = 4;

  yspeed = 4;

  header = createElement('h2','Interesting Caption')

  bgcolor = color(255);

  button = createButton("ClICK HERE!")

  button.mousePressed(changeColor);

  textbox = createInput('Enter Caption')

  slider = createSlider(10, 64, 16);

  textbox.input(updateText);

  slider.input(updateSize);

}

​

function changeColor() {

  bgcolor = color(random(255), random(255), random(255));

}

​

​

function updateText() {

  header.html(textbox.value());

}

​

function updateSize() {

  header.style("font-size", slider.value() + "pt");

}

​

​

function draw() {

  background(bgcolor);

  image(frog, x, y, 100 ,100);

  x = x + xspeed;

  y = y + yspeed;

  if (x + 107 >= width || x <= 0) {

  xspeed = xspeed * -1;

    //background(random(255));

} 

  if (y + 120 >= height || y <= 0) {

  yspeed = yspeed * -1;

}

}