​

​

/*

===== Parameters =====

*/

const canvasWidth = 420;

const canvasHeight = 500;

const NUM_FRAMES = 20;

const shockWave_minDiam = 25;

const shockWave_maxDiam = 115;

​

let colourMap;

let simImages = [];

let timerImages = [];

let currSimImage;

let currTimerImage;

​

let shockWave_x = 80;

let shockWave_y = 420;

let shockWave_dr = 5;

let gradient_dr = 3;

let gradient_alpha = 90;

let shockWave_diam;

let mouseMinR;

let mouseMaxR;

​

let timerWindow_x = 10;

let timerWindow_y = 360;

let timerWindow_width = 130;

let timerWindow_height = 130;

let timerFrame_size = 60;

​

function preload(){

  colourMap = loadImage("Images/ColourMap.png")

  for(var i = 1; i <= NUM_FRAMES; i++)

  {

    simImages[i-1] = loadImage("Images/CroppedSphere_Frame" + i + ".png");

    timerImages[i-1] = loadImage("Images/TimerFrame" + i + ".png");

  }

}

​

function setup() {

  createCanvas(canvasWidth, canvasHeight);

  shockWave_diam = shockWave_minDiam

  currSimImage = 0

  currTimerImage = 0

}

​

function draw() {

  background(255);

  stroke(87, 39, 63, 100)

  strokeWeight(1)

  fill(10,1,13)

  rect(0,0,150,canvasHeight)

  rect(150,0,300,10)

  rect(410,0,10,500)

  rect(150,450,300,50)

  fill(220)

  strokeWeight(0)

  textSize(20)

  text("Displaying Blast." + currSimImage + ".vtk",185,475)

  image(colourMap, 110, 25, 30, 225)

  fill(220)

  textSize(16)

  text("Gas Density\nColourscale",15, 130);

  textSize(13)

  fill(220,0,100)

  stroke(183,0,79)

  stroke(0)

  strokeWeight(1)

  text("High\nDensity", 59, 36)

  stroke(0)

  fill(94,181,107)

  text("Low\nDensity", 59, 230)

  strokeWeight(0)

  fill(255)

  rect(timerWindow_x,timerWindow_y,timerWindow_width, timerWindow_height)

  fill(190)

  rect(timerWindow_x, timerWindow_y - 0.6*timerWindow_height - 10, timerWindow_width, 0.6*timerWindow_height)

  fill(87, 39, 63)

  textSize(8);

  text("Click and drag the purple shock\nwave through the green cloud\nboundary to move forward in time.\nYou can move backwards through\ntime by dragging the shock wave\nback towards the centre.",timerWindow_x + 3, timerWindow_y - 0.6*timerWindow_height + 3)

  if(mouseIsPressed)

  {

    let rad = sqrt((mouseX-shockWave_x)*(mouseX-shockWave_x) + (mouseY-shockWave_y)*(mouseY-shockWave_y));

    let mouseMinR = shockWave_diam/2 - shockWave_dr;

    let mouseMaxR = shockWave_diam/2 + shockWave_dr;

    if(rad >= mouseMinR && rad <= mouseMaxR)

    {

      let newDiam = 2*sqrt((mouseX-shockWave_x)*(mouseX-shockWave_x) + (mouseY-shockWave_y)*(mouseY-shockWave_y));

      if(newDiam <= shockWave_maxDiam && newDiam >= shockWave_minDiam)

      {

        shockWave_diam = newDiam;

        currSimImage = int((newDiam - shockWave_minDiam)/((shockWave_maxDiam - shockWave_minDiam)/NUM_FRAMES))

        currTimerImage = currSimImage

      }  

    }

  }  

  //shock wave slider

  strokeWeight(5)

  stroke(168,57,130)

  fill(0,0)

  circle(timerWindow_x + timerWindow_width/2, timerWindow_y + timerWindow_height/2, shockWave_diam)

  stroke(168,57,130,gradient_alpha)

  circle(timerWindow_x + timerWindow_width/2, timerWindow_y + timerWindow_height/2, shockWave_diam+2*gradient_dr)

  circle(timerWindow_x + timerWindow_width/2, timerWindow_y + timerWindow_height/2, shockWave_diam-2*gradient_dr)

  //cloud timer frame

  image(timerImages[currTimerImage], timerWindow_x + timerWindow_width/2 - timerFrame_size/2, timerWindow_y + timerWindow_height/2 - timerFrame_size/2, timerFrame_size,timerFrame_size)

  image(simImages[currSimImage], 190, 70, 180, 180);

}

​

​