{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./app/javascript/packs/projects/circles.js"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","interval","colourIndex","count","total","areaSelect","document","getElementById","world","colours","red","green","blue","data","canvas","ctx","getContext","countDisplay","totalDisplay","percentDisplay","area","docElem","documentElement","body","getElementsByTagName","viewWidth","window","innerWidth","clientWidth","viewHeight","innerHeight","clientHeight","width","height","currentX","currentY","lastAngle","Math","random","queueColours","length","currentColour","rgb","nextIndex","targetColour","push","drawCircle","colour","shift","beginPath","strokeStyle","radius","arc","PI","stroke","updateDisplay","innerHTML","round","step","angle","stopInterval","cos","sin","clearInterval","addEventListener","event","find","element","init","offsetX","offsetY","fillStyle","fillRect","setInterval","insertAdjacentHTML","buildSelect"],"mappings":"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","file":"js/projects/circles-14f75e29791be1a89a21.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/packs/\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 46);\n","const areaSelect = document.getElementById('area-select');\n\nconst world = {\n  name: \"World\",\n  value: \"world\",\n  total: 1798050,\n  colours: [\n    { red: 51,  green: 60,  blue: 26  }, // dark green\n    { red: 108, green: 49,  blue: 12  }, // brown\n    { red: 122, green: 132, blue: 145 }, // stone grey\n    { red: 103, green: 174, blue: 230 }  // sea blue\n  ]\n};\n\nconst usa = {\n  name: \"United States of America\",\n  value: \"us\",\n  total: 335789,\n  colours: [\n    { red: 185, green: 52,  blue: 48  }, // red\n    { red: 247, green: 247, blue: 247 }, // white\n    { red: 1,   green: 38,  blue: 101 }  // blue\n  ]\n};\n\nconst brazil = {\n  name: \"Brazil\",\n  value: \"br\",\n  total: 192681,\n  colours: [\n    { red: 71,  green: 151, blue: 58  }, // green\n    { red: 245, green: 217, blue: 55  }, // yellow\n    { red: 4,   green: 43,  blue: 114 }  // blue\n  ]\n};\n\nconst india = {\n  name: \"India\",\n  value: \"in\",\n  total: 148738,\n  colours: [\n    { red: 241, green: 148, blue: 49  }, // orange\n    { red: 247, green: 247, blue: 247 }, // white\n    { red: 63,  green: 133, blue: 23  }  // green\n  ]\n};\n\nconst mexico = {\n  name: \"Mexico\",\n  value: \"mx\",\n  total: 123845,\n  colours: [\n    { red: 43,  green: 104, blue: 71  }, // green\n    { red: 247, green: 247, blue: 247 }, // white\n    { red: 207, green: 58,  blue: 40  }  // red\n  ]\n};\n\nconst uk = {\n  name: \"United Kingdom\",\n  value: \"uk\",\n  total: 72548,\n  colours: [\n    { red: 185, green: 52,  blue: 48  }, // red\n    { red: 247, green: 247, blue: 247 }, // white\n    { red: 1,   green: 38,  blue: 101 }  // blue\n  ]\n};\n\nconst spain = {\n  name: \"Spain\",\n  value: \"es\",\n  total: 50482,\n  colours: [\n    { red: 199, green: 54,  blue: 32 }, // red\n    { red: 255, green: 197, blue: 53 }  // yellow\n  ]\n};\n\nconst china = {\n  name: \"China\",\n  value: \"cn\",\n  total: 4788,\n  colours: [\n    { red: 199, green: 54,  blue: 32 }, // red\n    { red: 255, green: 197, blue: 53 }  // yellow\n  ]\n};\n\nconst nz = {\n  name: \"New Zealand\",\n  value: \"nz\",\n  total: 25,\n  colours: [\n    { red: 185, green: 52,  blue: 48  }, // red\n    { red: 247, green: 247, blue: 247 }, // white\n    { red: 1,   green: 38,  blue: 101 }  // blue\n  ]\n};\n\n// We'll store the data in an array so we can control the order when iterating over it\nconst data = [world, usa, brazil, india, mexico, uk, spain, china, nz];\n\nconst buildSelect = () => {\n  for (let i = 0; i < data.length; i += 1) {\n    const value = data[i].value;\n    const name = data[i].name;\n    areaSelect.insertAdjacentHTML('beforeend', `<option value=\"${value}\">${name}</option>`);\n  }\n};\n\nconst canvas = document.getElementById('circles');\nconst ctx = canvas.getContext('2d');\nconst countDisplay = document.getElementById('count');\nconst totalDisplay = document.getElementById('total');\nconst percentDisplay = document.getElementById('percent');\nlet interval;\nlet area = world;\nlet colourIndex;\nconst colours = [];\n\n// Viewport size based on code from https://stackoverflow.com/questions/3437786\nconst docElem = document.documentElement;\nconst body = document.getElementsByTagName('body')[0];\nconst viewWidth = window.innerWidth || docElem.clientWidth || body.clientWidth;\nconst viewHeight = window.innerHeight|| docElem.clientHeight|| body.clientHeight;\n\nconst width = 0.6 * viewWidth;\nconst height = 0.6 * viewHeight;\n\nlet currentX = 0.5 * width;\nlet currentY = 0.5 * height;\nlet lastAngle = 360 * Math.random();\nlet count, total;\n\ncanvas.width = width;\ncanvas.height = height;\n\nconst queueColours = () => {\n  if (colours.length < 2) {\n    const currentColour = area.colours[colourIndex];\n    if (Math.random() < 0.2) {\n      const nextIndex = (colourIndex + 1) % area.colours.length;\n      const targetColour = area.colours[nextIndex];\n      let red, green, blue, rgb;\n      for (let i = 0; i < 10; i += 1) {\n        red = ((currentColour.red * (10 - i)) + targetColour.red * i) / 10;\n        green = ((currentColour.green * (10 - i)) + targetColour.green * i) / 10;\n        blue = ((currentColour.blue * (10 - i)) + targetColour.blue * i) / 10;\n        rgb = `rgb(${red}, ${green}, ${blue})`;\n        colours.push(rgb);\n      }\n      colourIndex = nextIndex;\n    } else {\n      const rgb = `rgb(${currentColour.red}, ${currentColour.green}, ${currentColour.blue})`;\n      for (let i = 0; i < 5; i += 1) {\n        colours.push(rgb);\n      }\n    }\n  }\n}\n\nconst drawBackground = () => {\n  ctx.fillStyle = 'black';\n  ctx.fillRect(0, 0, width, height);\n};\n\nconst drawCircle = () => {\n  const colour = colours.shift();\n  ctx.beginPath();\n  ctx.strokeStyle = `${colour}`;\n  const radius = 3 + (2 * Math.random());\n  ctx.arc(currentX, currentY, radius, 0, Math.PI * 2);\n  ctx.stroke();\n  count += 1;\n};\n\nconst setCurrentCoords = () => {\n  lastAngle = lastAngle - 120 + (240 * Math.random());\n  const angle = (lastAngle / 360) * 2 * Math.PI;\n  currentX = currentX + (9 * Math.cos(angle));\n  currentY = currentY + (9 * Math.sin(angle));\n\n  if (currentX < 0) { currentX = canvas.width + currentX; }\n  if (currentX > canvas.width) { currentX = currentX - canvas.width; }\n  if (currentY < 0) { currentY = canvas.height + currentY; }\n  if (currentY > canvas.height) { currentY = currentY - canvas.height; }\n};\n\nconst updateDisplay = () => {\n  countDisplay.innerHTML = count;\n  percentDisplay.innerHTML = Math.round((count / total) * 100);\n}\n\nconst step = () => {\n  if (count == total) {\n    stopInterval();\n  } else {\n    setCurrentCoords();\n    queueColours();\n    drawCircle();\n    updateDisplay();\n  }\n}\n\nconst stopInterval = () => {\n  clearInterval(interval);\n}\n\nareaSelect.addEventListener('input', (event) => {\n  area = data.find(element => element.value == areaSelect.value);\n  stopInterval();\n  init();\n});\n\ncanvas.addEventListener('mousemove', (event) => {\n  // Maybe change this at some point?\n  // Will not work with older browsers\n  currentX = event.offsetX;\n  currentY = event.offsetY;\n})\n\nconst init = () => {\n  count = 0;\n  total = area.total;\n  totalDisplay.innerHTML = total;\n  updateDisplay();\n\n  colourIndex = 0;\n  while (colours.length > 0) { colours.shift(); }\n  queueColours();\n\n  drawBackground();\n  drawCircle();\n  interval = setInterval(step, 250);\n}\n\nbuildSelect();\ninit();\n"],"sourceRoot":""}