Detecting Exoplanets

Live at Detecting Exoplanets

Related files:

HTML:

• /detecting_exoplanets.html

CSS and Assets:

• /styles/common.css warning ! common file to multiple pages
• /styles/detections.css
• /assets/logo-white.png

JavaScript:

• /scripts/initialize.js warning ! common file to multiple pages
• /scripts/detecting_exoplanets.js

Frameworks & Libraries linked via CDN:

• Bootstrap 4.3.1 (CSS ans JS)
• JQuery 3.4.1
• Popper.js 1.14.7 - required by some components of bootstrap 4.
• Fontawesome free 5.8.2 - for social icons and play/pause buttons
• noUiSlider 13.1.5 (CSS and JS) - for sliders

Description:

The "Detecting Exoplanets" page is designed to give a brief idea about the transit method to detect exoplanets. It consists of two HTML5 Canvas'. On one canvas the animation of the star-exoplanet system is shown and on the other canvas, the transit light curve corresponding to the system being animated is displayed.

A point is animated on the Transit Light Curve as the exoplanet revolves around its star, displaying the relative brightness perceived by an observer on Earth.

Component-wise analysis:

JS Components:

• updateAnimationParameters(r_star = starRadius, relative_planet = planetRelativeRadius, orbital_radius = orbitalRadius, inclination_angle = inclination)
  This function updates the global parameters of the star system and also sets the update flag to signal to the drawSystemAndCurve() function to update the transit curve on the canvas.
• createSlider(slider, start, min, max, sliderLabelId)
  This function calls the noUiSlider.create() function with the minimum,maximum and start values specified as min,max and start input parameters. The slider parameter is the element returned by document.getElementById() that has to behave as the slider and the sliderLabelId is the id of the slider label element.
• updateSlider(slider, min, max)
  This function calls the slider.noUiSlider.updateOptions() function to update the minimum and maximum values of the slider as specified by min and max input parameters. It is always ensured that the maximum is atleast one unit larger than minimum. If after changing the minimum and maximum, the current value of the slider is NaN, it is set to the minimum value otherwise it is set to the maximum of the current and the minimum value.
• dimensionsFromString(str)
  This is a helper function that takes a string of the form "326.47px" and returns a number 326.47 . This is used for JQuery methods that return string values for dimensions of DOM elements.
• customRequestFullScreen()
  Includes a browser shim that makes the requestFullScreen() call uniform across browsers and calls requestFullScreen on the animationContainer which is the parent of the two canvas elements. It also locks the screen orientation in landscape mode and calls toggleFullScreen().
• toggleFullScreen()
  This function adds the fullscreen class to the animationContainer as well as its children. It also calls the hideControls() function to start the timer for hiding the controls
• hideControls()
  When called, resets a timer to 0. Waits for one second and calls the JQuery fadeOut() method on the animationControls div to hide it.
• customExitFullScreen()
  When called, removes the fullscreen class from the elements in fullscreen view, unlocks the screen orientation and changes the animationControls display back to inline-flex and removes event listeners added to hide animationControls
• onFullScreenChange()
  This function is called when the browser detects a change in the fullscreen status i.e from no fullscreen to fullscreen or vice-versa. It checks if the page was already in fullscreen and undos the fullscreen class from the elements if so and exits fullscreen.
• generateRandomStarField()
  Creates and returns an array of 1000 random starfield parameters objects. These are used to create the starfield animation background while zooming in to the starsystem.
• drawStarField(ctx,width,height,zoom,starfield)
  Draws the input starfield to the canvas context specified as ctx with the corresponding width,height and zoom levels.
• drawSemiOrbit(ctx, cx, cy, radius, inclination, direction)
  This function draws a semi-elliptical curve onto the canvas context ctx. Here, cx,cy,radius refer to the center x and y coordinates and the radius of the curve. inclination[degrees] is the orbit inclination as viewed from the Earth.direction[1,0] specifies whether the curve should be drawn clockwise or anticlockwise.
• drawStar(ctx, cx, cy, radius)
  This function creates the radial gradient for the star colour and draws the star with center (cx,cy) and radius onto the canvas context ctx.
• drawPlanet(ctx, cx, cy, angularPosition, radius, orbitalRadius)
  This function draws a planet onto the canvas context ctx with (cx,cy) as the center of the orbit of radius orbitalRadius with radius being the planet radius. The angularPosition [0:360] specifies the point on the orbit the planet is to be drawn. With 0 deg being the left most point on the orbit and 180 being the right most point.
• zoomSequence()
  This function creates the zoom-into animation on the canvas. It is recursively called by requestAnimationFrame() and during each call, the zoom level increases. So rapid successive drawing at increasing zoom levels gives the effect of zooming into the star system.
• drawStarSystem(starRadius, orbitalRadius, inclination, angularPosition,zoom = 1)
  This function abstracts away the drawing of the star system on the canvas. Calling this results in a star system being drawn on the canvas with the parameters starRadius,orbitalRadius,inclination with the planet at a point on the orbit given by angularPosition and the whole system at a zoom level specified by zoom
• calcTransitParameters(r_star, r_planet, orbitalRadius, inclination)
  This function takes the star system parameters i.e star-radius r_star, planet radius r_planet , orbital radius orbitalRadius and inclination with respect to Earth inclination. It returns an object containing the following information about the transit curve:

Attribute	Type	Description
z	Number	The last distance value normalized by star radius. i.e d[d.length-1] where d is array of distances.[To be Removed]
p	Number	Normalized planet radius. i.e r_planet/r_star
distances	Number Array	Array of Numbers each describing the distance of the exoplanet from its parent star
relativeBrightness	Number Array	Array of values each describing the relative brightness as distance varies
transitDepth	Number	The minimum of the relative brightness.

• drawTransitCurve(canvasId, transitParameters)
  Draws the transit curve onto the canvas element with id canvasId. The parameters of the transit curve are passed as the transitParamters object which is the same as the return type of calcTransitParameters().
• resizeCanvas(canvasId)
  Sets the height and width attributes of the canvas element with id canvasId to equal its css height and width in px.
• mapToCanvas(canvasXRange, canvasYRange, dataAxisXMin, dataAxisYMin, dataPointX, dataPointY, dataAxisXMax, dataAxisYMax)
  This is in essence range conversion or scale conversion i.e data in one scale is being converted to another. Here it is from data scale to the scale of the canvas dimensions.
• drawSystemAndCurve()
  This is another animation function that is called recursively by requestAnimationFrame(). It draws the star system and its corresponding transit curve to the relevant canvas elements. It also redraws the transit curve on change in canvas size or incase of parameter update, redraws the whole star system as well as the transit curve.
• play()
  Resizes the canvas drawing area before beginning the animation. Checks to see if the animation has been paused (using the cachedCurrent variable). If found, continues from the most recent frame. Otherwise starts from the beginning.
• pause()
  Upon being called, this function sets the value of current to frames.length+1 so that the nextImage() function stops the animation. It also saves the value of the current variable before pausing to cachedCurrent.
• cacheSystemParameters(r_star=true,r_planet=true,orbital_radius=true,inclination_angle=true)
  Pass true for the parameter to cache it. In essence, stores the current value of the global system parameters inorder to reset them when resuming animation after user has played around with it in the sandboxed mode.
• resetSystemParameters()
  Resets the global system parameters from cachedSystemParameters.
• setKioskMode()
  Sets the animation to kiosk mode. i.e The animation is set to loop indefinitely and made fullscreen.
• setAnimationMode()
  Sets the animation to classic animation mode i.e no looping. Fullscreen choice left to user.
• setSandboxMode()
  Sets the animation to sandbox mode i.e only animate star system with default parameter. Provides sliders to change global parameters that also update the animation correspondingly.
• nextSequence()
  if animation sequence is starting from the first frame, cancel all previous animations if any. If resuming, cancel star-system animation so as to not get in the way of any other animation. If pausing, then cancel the global animation (i.e frame to frame change with differing star system parameters and subtitles) but keep the star system animation playing. Also if the animation is in the last frame and in kiosk mode (loop) then restart animation by cancelling all animations and calling play()