{"version":3,"sources":["webpack:///./src/components/modules/Rainbow.js","webpack:///./src/pages/404.js"],"names":["Rainbow","ctx","canW","canH","incrementer","center","size","shouldRun","canvas","useRef","strokeW","rainbowColors","updateCanvasSize","current","width","offsetWidth","height","offsetHeight","x","y","loop","clearRect","i","length","strokeStyle","fillStyle","beginPath","arc","Math","PI","lerp","min","stroke","window","requestAnimationFrame","value1","value2","amount","onResize","lineWidth","drawCompleted","useEffect","getContext","addEventListener","ref","NotFoundPage","Layout","pageTitle","className"],"mappings":"uIA8GeA,EA1GC,WACd,IAEIC,EACAC,EAAMC,EACNC,EAIAC,EAAQC,EARRC,GAAY,EACVC,EAASC,iBAAO,MAKlBC,EAAU,GACVC,EAAgB,GAqBdC,EAAmB,WACvBJ,EAAOK,QAAQC,MAAQN,EAAOK,QAAQE,YACtCP,EAAOK,QAAQG,OAASR,EAAOK,QAAQI,aACvCf,EAAOM,EAAOK,QAAQC,MACtBX,EAAOK,EAAOK,QAAQG,OACtBN,EAAUR,EAAO,GACjBG,EAAS,CAAEa,EAAGhB,EAAO,EAAGiB,EAAGhB,GAC3BG,EAAO,CAAEY,EAAGhB,EAAO,KAAMiB,EAAGhB,IAGxBiB,EAAO,SAAPA,IACJhB,IACAH,EAAIoB,UAAU,EAAG,EAAGnB,EAAMC,GAC1B,IAAK,IAAImB,EAAI,EAAGA,EAAIX,EAAcY,OAAQD,IACxCrB,EAAIuB,YAAcb,EAAcW,GAChCrB,EAAIwB,UAAYd,EAAcW,GAC9BrB,EAAIyB,YACJzB,EAAI0B,IACFtB,EAAOa,EACPb,EAAOc,EACPb,EAAKY,EAAII,EAAIZ,EAAU,EACvBkB,KAAKC,GACLC,EACEF,KAAKC,GACK,EAAVD,KAAKC,GACLD,KAAKG,IAAI3B,GAhDI,KAgD6BkB,EAAI,KAAM,KAGxDrB,EAAI+B,SAEF5B,EArDe,IAqDgBO,EAAcY,SAC/ChB,GAAY,GAEVA,GACF0B,OAAOC,sBAAsBd,IAuB3BU,EAAO,SAACK,EAAQC,EAAQC,GAG5B,OAAOF,GAAUC,EAASD,IAD1BE,GADAA,EAASA,EAAS,EAAI,EAAIA,GACR,EAAI,EAAIA,IAItBC,EAAW,WACf/B,GAAY,EA1BQ,WACpBN,EAAIoB,UAAU,EAAG,EAAGnB,EAAMC,GAC1BS,IACAX,EAAIsC,UAAsB,EAAV7B,EAChB,IAAK,IAAIY,EAAI,EAAGA,EAAIX,EAAcY,OAAQD,IACxCrB,EAAIuB,YAAcb,EAAcW,GAChCrB,EAAIwB,UAAYd,EAAcW,GAC9BrB,EAAIyB,YACJzB,EAAI0B,IACFtB,EAAOa,EACPb,EAAOc,EACPb,EAAKY,EAAII,EAAIZ,EAAU,EACvBkB,KAAKC,GACLC,EAAKF,KAAKC,GAAc,EAAVD,KAAKC,GAAQD,KAAKG,IAAI,KAAO,KAAOT,EAAI,KAAM,KAE9DrB,EAAI+B,SAYNQ,IASF,OANAC,qBAAU,WAGR,OAxFAxC,EAAMO,EAAOK,QAAQ6B,WAAW,MAChC9B,IAEAR,EAAc,EAEdH,EAAIsC,UAAsB,EAAV7B,EAChBC,EAAc,GAAK,iBACnBA,EAAc,GAAK,mBACnBA,EAAc,GAAK,mBACnBA,EAAc,GAAK,iBACnBA,EAAc,GAAK,iBACnBA,EAAc,GAAK,kBACnBA,EAAc,GAAK,mBAEnBsB,OAAOC,sBAAsBd,GAyE7Ba,OAAOU,iBAAiB,SAAUL,GAC3B,kBAAO/B,GAAY,KACzB,CAACA,EAAW+B,IAER,4BAAQM,IAAKpC,EAAQM,MAAM,MAAME,OAAO,SC5FlC6B,UAVM,WACnB,OACE,kBAACC,EAAA,EAAD,CAAQC,UAAU,uBAAuBC,UAAU,YACjD,yBAAKA,UAAU,WACb,kBAAC,EAAD","file":"component---src-pages-404-js-73aabf70252898f09517.js","sourcesContent":["/* eslint react-hooks/exhaustive-deps: 0 */\n\nimport React, { useEffect, useRef } from 'react';\n\nconst Rainbow = () => {\n  let shouldRun = true;\n  const canvas = useRef(null);\n  let ctx;\n  let canW, canH;\n  let incrementer;\n  let totalIncrement = 1000;\n  let strokeW = 30;\n  let rainbowColors = [];\n  let center, size;\n\n  const setup = () => {\n    ctx = canvas.current.getContext('2d');\n    updateCanvasSize();\n\n    incrementer = 0;\n    // declare variables that need to be after instantiation\n    ctx.lineWidth = strokeW * 2;\n    rainbowColors[0] = 'rgb(255, 0, 0)';\n    rainbowColors[1] = 'rgb(255, 127, 0)';\n    rainbowColors[2] = 'rgb(255, 255, 0)';\n    rainbowColors[3] = 'rgb(0, 255, 0)';\n    rainbowColors[4] = 'rgb(0, 0, 255)';\n    rainbowColors[5] = 'rgb(75, 0, 130)';\n    rainbowColors[6] = 'rgb(148, 0, 211)';\n    // start the loop\n    window.requestAnimationFrame(loop);\n  };\n\n  const updateCanvasSize = () => {\n    canvas.current.width = canvas.current.offsetWidth;\n    canvas.current.height = canvas.current.offsetHeight;\n    canW = canvas.current.width;\n    canH = canvas.current.height;\n    strokeW = canW / 50;\n    center = { x: canW / 2, y: canH };\n    size = { x: canW / 2.75, y: canH };\n  };\n\n  const loop = () => {\n    incrementer++;\n    ctx.clearRect(0, 0, canW, canH);\n    for (let i = 0; i < rainbowColors.length; i++) {\n      ctx.strokeStyle = rainbowColors[i];\n      ctx.fillStyle = rainbowColors[i];\n      ctx.beginPath();\n      ctx.arc(\n        center.x,\n        center.y,\n        size.x - i * strokeW * 2,\n        Math.PI,\n        lerp(\n          Math.PI,\n          Math.PI * 2,\n          Math.min(incrementer / (totalIncrement / (i + 10)), 1)\n        )\n      );\n      ctx.stroke();\n    }\n    if (incrementer > totalIncrement / rainbowColors.length) {\n      shouldRun = false;\n    }\n    if (shouldRun) {\n      window.requestAnimationFrame(loop);\n    }\n  };\n\n  const drawCompleted = () => {\n    ctx.clearRect(0, 0, canW, canH);\n    updateCanvasSize();\n    ctx.lineWidth = strokeW * 2;\n    for (let i = 0; i < rainbowColors.length; i++) {\n      ctx.strokeStyle = rainbowColors[i];\n      ctx.fillStyle = rainbowColors[i];\n      ctx.beginPath();\n      ctx.arc(\n        center.x,\n        center.y,\n        size.x - i * strokeW * 2,\n        Math.PI,\n        lerp(Math.PI, Math.PI * 2, Math.min(100 / (100 / (i + 10)), 1))\n      );\n      ctx.stroke();\n    }\n  };\n\n  const lerp = (value1, value2, amount) => {\n    amount = amount < 0 ? 0 : amount;\n    amount = amount > 1 ? 1 : amount;\n    return value1 + (value2 - value1) * amount;\n  };\n\n  const onResize = () => {\n    shouldRun = false;\n    drawCompleted();\n  };\n\n  useEffect(() => {\n    setup();\n    window.addEventListener('resize', onResize);\n    return () => (shouldRun = false);\n  }, [shouldRun, onResize]);\n\n  return <canvas ref={canvas} width=\"600\" height=\"600\" />;\n};\n\nexport default Rainbow;\n","import React from 'react';\nimport Layout from 'components/Layout';\nimport Rainbow from 'components/modules/Rainbow';\n// import SEO from '../components/site/SEO';\n\nconst NotFoundPage = () => {\n  return (\n    <Layout pageTitle=\"404 - Page not found\" className=\"NotFound\">\n      <div className=\"Rainbow\">\n        <Rainbow />\n      </div>\n    </Layout>\n  );\n};\n\nexport default NotFoundPage;\n"],"sourceRoot":""}