let secondButton;

let thirdButton;

let forthButton;

let fifthButton;

​

let offset = 0;

let easing = 0.05;

let counter = 0;

​

let img1, img2;

​

let angle = 0; 

​

let mSlider = 0;

​

let galaxyName = '';

​

​

function setup() {

  createCanvas(955, 555);

  angleMode(DEGREES);

  firstButton = createButton("1");

  firstButton.size(95,95);

  firstButton.position(550,90);

  firstButton.elt.style['border-radius'] = "50%";

  firstButton.mouseClicked(drawB);

  firstButton.elt.style['color'] = color(231, 215, 215);

  firstButton.elt.style['background-color'] = color(221, 80, 76);

  firstButton.style('font-size', '24px');

  redraw();

  secondButton = createButton("2");

  secondButton.size(85,85);

  secondButton.position(680,115);

  secondButton.elt.style['border-radius'] = "50%";

  secondButton.mouseClicked(drawC)

  secondButton.elt.style['color'] = color(231, 215, 215);

  secondButton.elt.style['background-color'] = color(220, 85, 80);

  secondButton.style('font-size', '22px');

  redraw();

  thirdButton = createButton("3");

  thirdButton.size(71,71);

  thirdButton.position(790,183);

  thirdButton.elt.style['border-radius'] = "50%";

  thirdButton.mouseClicked(drawD)

  thirdButton.elt.style['color'] = color(231, 215, 215);

  thirdButton.elt.style['background-color'] = color(220, 91, 86);

  thirdButton.style('font-size', '19px');

  redraw();

  forthButton = createButton("4");

  forthButton.size(62,62);

  forthButton.position(833,287);

  forthButton.elt.style['border-radius'] = "50%";

  forthButton.mouseClicked(drawE)

  forthButton.elt.style['color'] = color(231, 215, 215);

  forthButton.elt.style['background-color'] = color(210, 94, 90);

  forthButton.style('font-size', '17px');

  redraw();

  fifthButton = createButton("5");

  fifthButton.size(52,52);

  fifthButton.position(843,387);

  fifthButton.elt.style['border-radius'] = "50%";

  fifthButton.mouseClicked(drawF)

  fifthButton.elt.style['color'] = color(231, 215, 215);

  fifthButton.elt.style['background-color'] = color(217, 111, 108);

  fifthButton.style('font-size', '15px');

}

​

​

function draw(){

  background(11, 19, 20);

  //top rectangle

  fill(39,78,79)

  rect(0, 13, 955, 60)

  //top text

  fill(237, 242, 242)

  textSize(31.5);

  textStyle(BOLD);

  text('STAR FORMATION THROUGH THE TOOMRE SEQUENCE', 57, 55); 

  //bottom rectangle

  fill(39,78,79)

  rect(0, 467, 955, 71)

  //bottom text

  fill(237, 242, 242)

  textSize(16);

  textStyle(NORMAL);

  text('Click through circles to see steps in the Toomre merger sequence of galaxies. Move the mouse', 245, 488);

  text('along the colour bar to see an overlay of regions where a lot of stars are forming. This overlayed', 245, 507)

  text('image is assigned red to match the hydrogen gas being heated by the young forming stars.', 245, 525)

  //text('the hydrogen gas being heated by the young forming stars.', 270, 543)

​

  //galaxy rectangle

  fill(219, 86, 82)

  rect(57, 467, 170, 71)

  //galaxy text

  fill(246, 234, 234)

  textSize(27);

  //textStyle(BOLD);

  text(galaxyName, 72, 511);

  //image rectangle

  fill(162,199,201)

  //fill(150, 194, 196);

  rect(57, 85, 450, 370);

  //mouse handling

  if (mouseX > 550 && mouseY > 200 && mouseX < 790 && mouseY < 440 &&

     ((mouseX-550)-((mouseY-200))) >= -15 && ((mouseX-550)-((mouseY-200))) <= 15)

    {

      mSlider = ((mouseX-550)+(mouseY-200)/450 - 5)/220*260-10;

  mSlider = max(0,mSlider);

  mSlider = min(255,mSlider);

    }

​

  /*

  //mouse handling

  if (mouseX > 525 && mouseY > 190 && mouseX < 740 && mouseY < 435 &&

     ((mouseX-525)-((mouseY-190)*0.86956)) >= -15 && ((mouseX-525)-((mouseY-190)*0.86956)) <= 15)

    {

      mSlider = ((mouseX-525)+(mouseY-190)/450 - 5)/210*260;

  mSlider = max(0,mSlider);

  mSlider = min(255,mSlider);

    }

    */

  //image

  if (img1 != null){

    tint(255,255)

    image(img1, 113, 100, 340, 340);

    tint(255, mSlider);

    image(img2, 113 + offset, 100, 340, 340);  

  }

  //colour bar

  translate(550, 213);

  rotate(-45);

  fill(162,199,201);

  rect(0, 0, 17, 65);

  fill(166, 172, 176)

  rect(0, 65, 17, 65);

  fill(151, 144, 150)

  rect(0, 130, 17, 65);

  fill(191, 138, 135)

  rect(0, 195, 17, 65);

  fill(200, 108, 99)

  rect(0, 260, 17, 65);

  rotate(45); 

}

​

function drawB(){

  img1 = loadImage('img1.1.png'); 

  img2 = loadImage('img1.2.png');

  galaxyName = 'NGC4038/9';

}

​

function drawC(){

  img1 = loadImage('img2.1.png'); 

  img2 = loadImage('img2.2.png');

  galaxyName = '  NGC4676';

}

​

function drawD(){

  img1 = loadImage('img3.1.png'); 

  img2 = loadImage('img3.2.png');

  galaxyName = '  NGC0520';

}

​

function drawE(){

  img1 = loadImage('img4.1.png'); 

  img2 = loadImage('img4.2.png');

  galaxyName = '  NGC2623';

}

​

function drawF(){

  img1 = loadImage('img5.1.png'); 

  img2 = loadImage('img5.2.png');

  galaxyName = '  NGC7252';

}

​

​

​

​