bg = loadImage('B1.png');

  createCanvas(1200, 700);

  img = loadImage('1.png'); //loading image

  description = loadImage ('SCIHCP.png')

  Age1 = loadImage ('SCI25.png')

  Age2 = loadImage ('SCI30.png')

  Age3 = loadImage ('SCI40.png')

  Question = loadImage ('SCIQ.png')

}

function draw() {

   background(bg);

  image(img, 80, 265, img.width *3.5, img.height *3.5);//2nd image size + position

  strokeWeight(6)

  fill(180,200,240)

  textSize(23);

fill(0, 102, 153);

  strokeWeight(9)//??

text('Instructions', 960,100);//insert title

  textSize(20);

  text('1. Hover over a', 930,137);//paragraph

  text('square to find out', 930,155)

  text('which age group', 930,175)

  text('scan you are looking', 930,195)

  text('at...', 930,215);

   textSize(27);

text('Human Connectome Project: Adults', 75,75);//actual title

 var distance, b1, b2, b3, b4, b5, b6; 

  //smallest b1+2

 b1=100

​

  fill(b1, 50,2150,30);

  strokeWeight(3);

  ellipse(950,595,30,30);

  //for circles use the distance formula

  // input the center of the circle and mouseX and Y

  distance =dist(mouseX, mouseY, 950, 595);

  if(distance<50){

    b1=0

     }

  else{

  b1= 200}

  b2=100

​

  fill(b1, 50,150,30);

  strokeWeight(3);

  ellipse(950,595,20,20);

  //for circles use the distance formula

  // input the center of the circle and mouseX and Y

  distance =dist(mouseX, mouseY, 950, 595);

  if(distance<50){

    b2=0

     }

  else{

  b2= 200}

  //MIDDLE b3+b4

   b3=190

​

  fill(b3, 150,240,90);

  strokeWeight(3);

  ellipse(792,432,50,50);

  //for circles use the distance formula

  // input the center of the circle and mouseX and Y

  distance =dist(mouseX, mouseY, 792, 432);

  if(distance<50){

    b3=0

     }

  else{

  b3= 200}

   b4=100

​

  fill(b3, 150,240,70);

  strokeWeight(3);

  ellipse(792,432,40,40);

  //for circles use the distance formula

  // input the center of the circle and mouseX and Y

  distance =dist(mouseX, mouseY, 792, 432);

  if(distance<50){

    b4=0

     }

  else{

  b4= 200}

   b5=100

//BIGGEST b5 + b6

  fill(b5, 150,270,100);

  strokeWeight(3);

  ellipse(622,234,70,70);

  //for circles use the distance formula

  // input the center of the circle and mouseX and Y

  distance =dist(mouseX, mouseY, 622, 234);

  if(distance<50){

    b5=0

     }

  else{

  b5= 200}

   b6=100

​

  fill(b5, 150,270,100);

  strokeWeight(3);

  ellipse(622,234,50,50);

  //for circles use the distance formula

  // input the center of the circle and mouseX and Y

  distance =dist(mouseX, mouseY, 622, 234);

  if(distance<50){

    b6=0

     }

  else{

  b6= 200}

  //Instructions

  tint(255); //MAYBE TAKE OUT... CHANGES IMAGES 

  image(Question, 27, 25, 40, 45);

 if (mouseX > 29 && mouseX > 15 && mouseY > 40 && mouseY < 50) {

    image(description, 260,100,680,400);

}

}