https://science.org.au/themes/custom/aas/js/interactiveDome/modules/draw.js

1import addDiv from './addDiv.js';
2import indexToRowNumber from '../utils/indexToRowNumber.js';
3
4/**
5 * Changes the coordinates of an existing div element based on resize values
6 * @param    {string}   primaryColor    tile color of odd rows
7 * @param    {string}   secondaryColor  tile color of even rows
8 * @param    {boolean}  popUp           param for addDiv function
9 * @param    {boolean}  totalItems      number of rows or dots (allocated tiles) in circle
10 */
11const draw = (primaryColor, secondaryColor, popUp) => {
12  document.querySelector('#interactive-dome-wrap').innerHTML = '';
13  const shineImgWindowWidth = document.querySelector(
14    '#interactive-dome-wrap'
15  ).offsetWidth;
16
17  const cvsSize = shineImgWindowWidth;
18
19  const circles = (noOfCircles, dist, color, rowNumber, center = false) => {
20    let ang = center || 0; // Start at angle 0 (East)
21    const arc = (Math.PI * 2) / noOfCircles; // Arc in Radians
22
23    for (let i = 0; i < noOfCircles; i += 1) {
24      // Modify divider when resizing image e.g. png with a bigger dome
25      const canvasXDivisor = rowNumber === 1 ? 2.058 : 2.0635;
26      const canvasYDivisor = rowNumber === 1 ? 1.926 : 1.932;
27
28      const x = dist * Math.cos(ang) + cvsSize / canvasXDivisor;
29      const y = dist * Math.sin(ang) + cvsSize / canvasYDivisor;
30
31      ang += arc;
32
33      addDiv(x, y, popUp, dist, noOfCircles, rowNumber, color);
34    }
35  };
36
37  // Modify divider when resizing image e.g. png with a bigger dome
38  const initialVal = cvsSize * 0.055;
39
40  const colorOdd = primaryColor;
41  const colorEven = secondaryColor;
42  const numberOfCircles = 64;
43  const doubleCircles = numberOfCircles * 2;
44  const quarterCircles = numberOfCircles / 4;
45
46  const shineDomeArr = [
47    [numberOfCircles, initialVal, colorOdd, 0.05],
48    [numberOfCircles, initialVal * 1.75, colorEven, 0.0029],
49    [numberOfCircles, initialVal * 2.04, colorOdd, 0.047],
50    [numberOfCircles, initialVal * 2.35, colorEven, -0.003],
51    [numberOfCircles, initialVal * 2.674, colorOdd, 0.044],
52    [numberOfCircles, initialVal * 2.995, colorEven, -0.0045],
53    [doubleCircles, initialVal * 3.31, colorOdd, -0.007],
54    [doubleCircles, initialVal * 3.62, colorEven, 0.02],
55    [doubleCircles, initialVal * 3.925, colorOdd, -0.0049],
56    [doubleCircles, initialVal * 4.235, colorEven, 0.02],
57    [doubleCircles, initialVal * 4.534, colorOdd, -0.005],
58    [doubleCircles, initialVal * 4.82, colorEven, 0.019],
59    [doubleCircles, initialVal * 5.106, colorOdd, -0.0049],
60    [doubleCircles, initialVal * 5.378, colorEven, 0.019],
61    [doubleCircles, initialVal * 5.63, colorOdd, -0.0049],
62    [doubleCircles, initialVal * 5.89, colorEven, 0.117],
63    [doubleCircles, initialVal * 6.15, colorOdd, -0.0049],
64
65    [quarterCircles, initialVal * 6.4, colorEven, 0.124],
66    [quarterCircles, initialVal * 6.4, colorEven, 0.166],
67    [quarterCircles, initialVal * 6.4, colorEven, 0.215],
68    [quarterCircles, initialVal * 6.4, colorEven, 0.256],
69
70    [quarterCircles, initialVal * 6.6, colorOdd, 0.15],
71    [quarterCircles, initialVal * 6.63, colorOdd, 0.19],
72    [quarterCircles, initialVal * 6.6, colorOdd, 0.23],
73
74    [quarterCircles, initialVal * 6.85, colorEven, 0.175],
75    [quarterCircles, initialVal * 6.85, colorEven, 0.205],
76
77    [quarterCircles, initialVal * 7.1, colorOdd, -0.988],
78  ];
79
80  shineDomeArr.forEach(([noOfCircles, distance, color, angle], index) => {
81    const rowNumber = indexToRowNumber(index);
82
83    circles(noOfCircles, distance, color, rowNumber, angle);
84  });
85};
86
87export default draw;