var x = 250

var y = 250

var xVel = 2

var yVel = 3

​

function setup() {

  createCanvas(500, 500);

  input = createInput();

  input.position(0,0);

  button = createButton('change color (red, blue, yellow, etc. or "reset")');

  button.position(0,20);

  button.mousePressed(change);

}

​

function draw() {

  background(100);

  noStroke();

  if (color == 'blue') { 

    fill(0, 0, 255) } // using RGB color codes

  if (color == 'red') {

    fill(255, 0, 0) } //using RGB color codes

  if (color == 'green') {

    fill(0, 255, 0) } // using RGB color codes

  if (color == 'yellow') {

    fill(255, 255, 0) } // using RGB color codes

  if (color == 'magenta') {

    fill('magenta') } // using CSS color codes

  if (color == 'maroon') {

    fill('maroon') } // using CSS color codes

  if (color == 'reset') {

    fill('#ffffff') } // using six-digit hexidecimal codes (white)

  if (color == 'black') {

    fill('#000') } // using three-digit hexidecimal codes

  if (color == 'brown') {

    fill('saddlebrown') }

  if (color == 'cyan') {

    fill('cyan') }

  if (color == 'swamp green') {

    fill(0,255,0,75) } // using RGBA color codes

  if (color == 'dark green') {

    fill(0,100,0) }

  if (color == 'orange') {

    fill('orange') }

  if (color == 'rainbow.RB') {

    fill(x/2,0,y/2) }

  if (color == 'rainbow.RG') {

    fill(x/2,y/2,0) }

  if (color == 'rainbow.GB') {

    fill(0,x/2,y/2) }

  if (color == 'pink') {

    fill('#ff69b4') }

  if (color == 'purple') {

    fill(150, 0, 255) }

    ellipse(x, y, 50, 50);

  x += xVel;

    if (x >= 475) {

      xVel = -xVel }

    if (x <= 25) {

      xVel = -xVel }

  y += yVel;

    if (y >= 475) {

      yVel = -yVel }

    if (y <= 25) {

      yVel = -yVel }

}

​

function change() {

  const hue = input.value();

  color = hue;

  input.value("");

}