let can; //canvas

let canX = 200; //x-coordinate of canvas

let canY = 500; //y-coordinate of canvas

let t = 0; //parameter for moving canvas

let n = 0; //exponent for powers of two

let caption;

let favButton, powButton, buttons;

let list;

let myBlue = 'rgb(32, 110, 245)';

let myMagenta = 'rgb(232, 51, 232)';

​

​

function preload() {

  fav = loadImage('orange-favicon.png');

}

​

function setup() {

  can = createCanvas(100, 100);

  background(220);

  //would another type of element be better?

  caption = createP();

  powButton = createButton('Add power of two!');

  powButton.mousePressed(addPow);

  favButton = createButton('Add favicon!');

  favButton.mousePressed(addFav);

  list = select('#summary');

  list.style('color: blue');

  list.child(createElement('li', 'Added this list item w/ .child()'));

  select('#classMethodDemo').mousePressed(newClass);

  buttons = selectAll('button');

  for (let i = 0; i < buttons.length; i++) {

    buttons[i].style('background-color', myBlue);

    buttons[i].style('color', 'white');

    buttons[i].style('margin', '2px');

    buttons[i].style('border-radius', '5px');

    buttons[i].style('padding', '4px');

    buttons[i].style('font-size', '1.1em');

    buttons[i].mouseOver(makeMagenta);

    buttons[i].mouseOut(makeBlue);

  }

}

​

function addFav() {

  //display image in random canvas position

  image(fav, random(width), random(height));  

}

​

function addPow() {

  createP('2^' + n + ' = ' + (2 ** n));

  n++;

}

​

function makeBlue() {

  this.style('background-color', myBlue);

  this.style('color', 'white');

}

​

function makeMagenta() {

  this.style('background-color', myMagenta);

  this.style('color', 'white'); 

}

​

function newClass() {

  if (this.class() === 'magenta') {

    this.removeClass('magenta');

  }

  else {

    this.addClass('magenta');

  }

}

​

function draw() {

  //display image in bottom right corner of canvas

  image(fav, width - fav.width, height - fav.height);

  can.position(canX, canY);

  caption.html(`x-position: ${Math.round(canX)}`);

  caption.position(canX, canY + height)

  canX = 200 + 100 * sin(t)

  t += 0.02;

}