var y = 200;

var x2 = 30;

var y2 =150;

var x3 = 30;

var y3 =400;

var x4 = 30;

var y4 =270;

var video;

var img;

var bg;

var button1Width = 160;

var button1Height = 150;

var button2Width = 170;

var button2Height = 150;

var button3Width = 160;

var button3Height = 150;

var jellyWidth = 200;

var jellyHeight = 300;

var videox =250;

var videoy = 210;

var videoWidth = 400;

var videoHeight= 300;

var table;

var result;

​

function preload() {

  img = loadImage("Images/jellyfish.png");

  bg = loadImage("Images/seabg.jpg");

  button = loadImage("Images/1.png");

  button1 = loadImage("Images/1-1.png");

  button2 = loadImage("Images/1-2.png")

  video = createVideo("Video/jellyvid.mov");

  table = loadTable("Database/Database.txt", "csv", "header");

  result = loadStrings('Database/Database.txt');

​

}

​

function setup() {

  createCanvas(700, 700);

  video.hide();

  video.loop();

  int(stateEntry = 0); // show no entry

}

​

function draw() {

  background(bg);

  image(button, x2, y2, button1Width, button1Width);

   if (mouseIsPressed)

 if (dist(mouseX,mouseY,110,220) < 45) {

      // 3rd button !!!

  background(100);

  var ind = floor(random(result.length));

  text(result[ind], 10, 10, 80, 80); 

    }

  image(button1, x3, y3, button2Width, button2Width);

   if (mouseIsPressed)

 if (dist(mouseX,mouseY,115,470) < 45) {

      // 3rd button !!!

      stateEntry = 3; 

    }

  image(button2, x4, y4, button3Width, button3Width);

  if (mouseIsPressed)

 if (dist(mouseX,mouseY,110,340) < 45) {

      // 3rd button !!!

      //evaluate 

if(stateEntry == 0 ) {

    //do nothing

}

else if(stateEntry == 3 ) {

    //show database on "Relationships between jellies & other organisms"

}

    }

  y = y + random(-1, 1);

  var tintValue = map(mouseX, 0, width, 0, 255);

  tint(255, 255, 255, 255 - tintValue);

  image(img, x, y, jellyWidth, jellyHeight);

  noTint();

  tint(255, 255, 255, tintValue);

  image(video, videox, videoy, videoWidth, videoHeight);

  noTint();

  //transistion to the video

  fill(0);

  textAlign(CENTER, TOP);

  text("Types of Jellyfish",110,220);

  textSize(15);

  //heading

​

  fill(0);

  textAlign(CENTER, TOP);

  text("Relationships between\njellies & other organisms",115,470);

  //heading

  fill(0);

  textAlign(CENTER, TOP);

  text("Why do jellyfish sting?",110,340); 

  //heading

}

​

// bg - http://wallpoper.com/images/00/38/50/82/sea-underwater_00385082.jpg

//jelly - https://i.pinimg.com/originals/5d/b4/c1/5db4c10694b5af3e578940311cbfb21b.png

//button - http://www.stickpng.com/img/icons-logos-emojis/empty-buttons/light-blue-rounded-button