let ydirection = 1;

let box = [];

let yFloat = 200;

let shadowsize = 200;

let b = 190;

let p = 230;

let textxmove = 0;

let textymove = 0;

let textx= 0;

let texty = 0;

let randomv = 0;

​

function setup() {

  createCanvas(600, 400);

  input = select('.name');

  input.changed(getAmount);

  frameRate(10);

  textSize(32); 

  background(220);

}

​

function draw() {

  background(220);

    drawBall();

  fill(0);

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

    textSize(32);

    text(box[i],random(width),random(height));

  }

}

​

function getAmount() {

  box.push(input.value());

  if(input.value() != "") {

    randomv= random(0,1);

    fill(255);

    if(randomv == 0 || randomv <=.2){

        text("no",285, yFloat);

    }

    else if (randomv > .2 && randomv <= .4){

            text("yes",280, yFloat);

    }

    else if (randomv > .4 && randomv <=.6){

            text("uncertain",230, yFloat);

    }

    else if (randomv > .6 && randomv <= .8){

            text("certainly",230, yFloat);

    }

    else{

            text("ask me again",220, yFloat);

    }

  }

  input.value("");

}

​

function drawBall(){

  strokeWeight(0);

  fill(0);

  ellipse(width/2, yFloat,300,300);

  fill(20);

  ellipse(width/2, yFloat,90,90);

  drawTriangle(b,p);

  fill(80);

  ellipse(width/2, 400, shadowsize, 50);

  if(yFloat > 210 || yFloat < 190){

    ydirection = ydirection * -1;

  }

   if(ydirection > 0){

    shadowsize-=2;

  }

  else {

    shadowsize+=2;

  }

  yFloat+= ydirection;

  b+= ydirection;

  p+= ydirection;

}

​

function drawTriangle(a,b){

  noStroke();

  fill(0,0,random(190,255),150);

  triangle(260,a,300,b,340,a);

}

​