{"version":3,"sources":["components/page-navigation/PageNavigation.js","components/main-content/MainContent.js","components/article/Article.js","pages/art-of-math-proof-page/ArtOfMathProofPage.js","components/awkward-state-machine/cycle/Cycle.js","components/awkward-state-machine/AwkwardStateMachine.js","components/inner-nav/InnerNav.js","tools/general.js","pages/awkward-state-machines-page/AwkwardStateMachinesPage.js","components/color-graphing/console/function-input/FunctionInput.js","components/icons/CloseIcon.js","components/icons/DownloadIcon.js","components/icons/LeftArrowIcon.js","components/icons/RightArrowIcon.js","components/color-graphing/console/graph-carousel/GraphCarousel.js","components/icons/RefreshIcon.js","components/color-graphing/console/carousel.state.js","services/colorgraph.service.js","classes/colorgraph_configuration.js","tools/graphInputProducer.js","components/color-graphing/console/Console.js","components/math/Math.js","components/color-graphing/graphing-info/GraphingInfo.js","components/color-graphing/operation-info/OperationInfo.js","pages/color-graph-page/ColorGraphPage.js","pages/home-page/HomePage.js","components/youtube-video/YoutubeVideo.js","services/video.service.js","pages/videos-page/VideosPage.js","App.js","index.js","assets/img/loading.gif","assets/html/art_of_math_proof.html","assets/img/art_of_math_proof0x.png","assets/img/art_of_math_proof1x.png","assets/img/art_of_math_proof2x.png","assets/img/art_of_math_proof3x.png","assets/img/art_of_math_proof4x.png","assets/img/art_of_math_proof5x.png","assets/img/art_of_math_proof6x.png","assets/img/art_of_math_proof7x.png","assets/img/art_of_math_proof8x.png","assets/img/art_of_math_proof9x.png","assets/img/art_of_math_proof10x.png","assets/html/awkward_state_machines.html"],"names":["PageNavigation","contextPath","components","window","location","href","split","i","length","path","this","getContextPath","includes","Navbar","bg","expand","to","onClick","e","setState","Brand","Toggle","aria-controls","Collapse","id","Nav","className","navLinkClass","React","Component","MainContent","memo","props","children","MainContentSection","Article","dangerouslySetInnerHTML","__html","content","artOfMathProof","require","ArtOfMathProofPage","activators","nonActivators","CYCLE_TEXT","branch","cycle","active","modulus","iteration","Cycle","push","key","cycleText","type","AwkwardStateMachine","state","positions","lengths","anyActive","map","pos","index","nextPos","branchLength","name","target","value","Number","Form","Row","Col","sm","md","Label","Control","min","placeholder","onChange","updateAsm","Button","style","marginTop","nextState","margin","marginLeft","createCycles","createBranch","InnerNav","align","title","backgroundColor","getRandomInt","max","Math","floor","random","extractPageFromContextPath","context","awkwardStateMachines","AwkwardStateMachinesPage","page","consoleClass","theoryClass","navClicked","FunctionInput","functionName","xDomainName","yDomainName","paddingTop","function","xDomain","yDomain","CloseIcon","fill","height","viewBox","width","xmlns","d","DownloadIcon","LeftArrowIcon","color","RightArrowIcon","GraphCarousel","carouselState","imageClickedEvent","event","preventDefault","isLoading","touches","button","clickedTooSoon","image","document","getElementById","coords","point","changedTouches","dim","getBoundingClientRect","x","clientX","left","y","clientY","top","coordsOfClick","updateLastClick","nextImage","forceUpdate","previousImage","closeCarousel","Header","fontSize","innerWidth","onClose","currentSource","download","currentTitle","ImageContainer","onMouseDown","onTouchStart","src","alt","open","RefreshIcon","float","marginBottom","convertImageLinksMapToList","imageLinksMap","loading_gif","imageLinks","CarouselState","updateCallback","options","imageIndex","lastClick","info","currentTime","Date","getTime","ColorGraphService","payload","axios","post","ColorGraphConfiguration","JSON","stringify","function1","xDomain1","yDomain1","function2","xDomain2","yDomain2","function3","xDomain3","yDomain3","interestingOperations","f","basicOperations","fullGraphConfigs","randomGraph","operation1","op2_position","op3_position","operation2","operation3","config","Console","setRandomGraph","configuration","hasChangedSinceLastGraph","updateCarousel","updateConfiguration","updateGraphs","colorGraphService","createGraphs","then","updateGraphsCallback","catch","updateGraphsFailureCallback","openCarousel","response","data","images","updateImageLinks","console","log","alert","jq","status","thrown","padding","M","ArticleSection","GraphingInfo","Card","Body","goToOperationsTab","ExampleList","ele","Badge","pill","variant","NumberOfArguments","arguments","OperationInfo","operationName","Text","handles","operators","functionExamples","domainExamples","Site","rel","Wikipedia","XOperationInfo","YOperationInfo","NOperationInfo","ConstantOperationInfo","AdditionOperationInfo","SubtractionOperationInfo","MultiplicationOperationInfo","DivisionOperationInfo","PowerOperationInfo","ModulusOperationInfo","AbsoluteValueOperationInfo","OrOperationInfo","AndOperationInfo","XorOperationInfo","IffOperationInfo","ImpliesOperationInfo","NandOperationInfo","NorOperationInfo","NotOperationInfo","LessThanOperationInfo","LessThanEqualsOperationInfo","EqualsOperationInfo","GreaterThanOperationInfo","GreaterThanEqualsOperationInfo","MaxOperationInfo","MinOperationInfo","WithinRangeOperationInfo","OutsideRangeOperationInfo","CeilingOperationInfo","FloorOperationInfo","RoundToNearestOperationInfo","SinOperationInfo","CosinOperationInfo","TangentOperationInfo","SecantOperationInfo","CosecantOperationInfo","CotangentOperationInfo","LogarithmOperationInfo","NaturalLogOperationInfo","NthGeneratorOperationInfo","DiscreteLogOperationInfo","DiffieHellmanOperationInfo","OperationInfoConsole","ColorGraphPage","infoClass","operationsClass","HomePage","YoutubeVideo","video","previousVideo","nextVideo","frameborder","allowfullscreen","video_url","allow","description","VideoService","get","VideosPage","videoService","videos","current_video","current_video_index","fetchVideos","error","current_index","next_video","previous_video","App","history","browserHistory","exact","component","ReactDOM","render","module","exports"],"mappings":"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","file":"static/js/main.c0c43d4f.chunk.js","sourcesContent":["import React from 'react';\n\nimport Navbar from 'react-bootstrap/Navbar';\nimport Nav from 'react-bootstrap/Nav';\nimport Link from \"react-router-dom/Link\";\n\nclass PageNavigation extends React.Component {\n\n  getContextPath() {\n    let contextPath = \"\";\n    let components = window.location.href.split(\"/\");\n    for (var i = 3; i < components.length; i++) {\n      contextPath += \"/\" + components[i];\n    }\n    return contextPath;\n  }\n\n  navLinkClass(path) {\n    let contextPath = this.getContextPath();\n    return contextPath.includes(path) ? 'active nav-link' : 'nav-link'\n  }\n\n  render() {\n    return (\n      <Navbar bg=\"light\" expand=\"lg\">\n        <Link to=\"/\" onClick={e => {this.setState({})}}><Navbar.Brand>Awkward Math</Navbar.Brand></Link>\n        <Navbar.Toggle aria-controls=\"basic-navbar-nav\" />\n        <Navbar.Collapse id=\"basic-navbar-nav\">\n          <Nav className=\"mr-auto\">\n            <Link to=\"/articles/art_of_math_proof\" onClick={e => {this.setState({})}} className={this.navLinkClass('articles')}>\n              Art of Math Proof\n            </Link>\n            <Link to=\"/awkward_state_machines#console\" onClick={e => {this.setState({})}} className={this.navLinkClass('awkward_state_machines')}>\n              Awkward State Machines\n            </Link>\n            <Link to=\"/colorgraphing#console\" onClick={e => {this.setState({})}} className={this.navLinkClass('colorgraphing')}>\n              Color Graphing\n            </Link>\n            <Link to=\"/videos\" onClick={e => {this.setState({})}} className={this.navLinkClass('videos')}>\n              Videos\n            </Link>\n          </Nav>\n        </Navbar.Collapse>\n      </Navbar>\n    )\n  }\n}\n\nexport default PageNavigation;\n","import React from 'react';\nimport './main_content.css';\n\nconst MainContent = React.memo((props) => {\n  return (\n    <div className=\"main-content-container\">\n      {props.children}\n    </div>\n  );\n});\n\nconst MainContentSection = React.memo((props) => {\n  return (\n    <div className=\"main-content-section\">\n      {props.children}\n    </div>\n  );\n});\n\nexport { MainContent, MainContentSection };\n","import React from 'react';\nimport { MainContentSection } from '../main-content/MainContent';\nimport './latex.css';\n\nconst Article = React.memo((props) => {\n  return (\n    <MainContentSection>\n      <div dangerouslySetInnerHTML={{__html: props.content}}/>\n    </MainContentSection>\n  );\n});\n\nexport default Article;\n","import React from 'react';\n\nimport Article from '../../components/article/Article';\nimport { MainContent } from '../../components/main-content/MainContent';\n\nconst artOfMathProof = require('../../assets/html/art_of_math_proof.html');\n\nconst ArtOfMathProofPage = () => {\n  return (\n    <MainContent>\n      <Article content={artOfMathProof}/>\n    </MainContent>\n  );\n};\n\nexport default ArtOfMathProofPage;\n","import React from 'react';\n\nimport './cycle.css';\n\nfunction length(props) {\n  return props.activators + props.nonActivators;\n}\n\nconst CYCLE_TEXT = {\n  branch: (props) => { return 'Branch Length: ' + length(props) },\n  cycle: (props) => { return props.active + ' : ' + length(props) },\n  modulus: (props) => { return props.iteration + ' mod ' + props.activators + ' = ' + props.active }\n}\n\nconst Cycle = (props) => {\n  let activators = [];\n  let nonActivators = [];\n  for (let i = 0; i < props.activators; i++) {\n    let className = props.active === i ? \"led-green\" : \"dull-green\";\n    activators.push(\n      <div key={i} className=\"led-box\"><div className={className}></div></div>\n    );\n  }\n  let length = activators.length;\n  for (let i = 0; i < props.nonActivators; i++) {\n    let className = props.active === (i + length) ? \"led-red\" : \"dull-red\";\n    nonActivators.push(\n      <div key={i} className=\"led-box\"><div className={className}></div></div>\n    );\n  }\n  let cycleText = CYCLE_TEXT[props.type](props);\n  return (\n    <div className=\"cycle\">\n      <h5>{cycleText}</h5>\n      {activators}\n      {nonActivators}\n    </div>\n  );\n};\n\nexport default Cycle;\n","import React from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Form from 'react-bootstrap/Form';\nimport Row from 'react-bootstrap/Row';\nimport Col from 'react-bootstrap/Col';\n\nimport Cycle from './cycle/Cycle';\n\nimport './awkward_state_machine.css';\n\nclass AwkwardStateMachine extends React.Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      activators: props.activators,\n      nonActivators: props.nonActivators,\n      positions: [0],\n      lengths: [props.activators + props.nonActivators],\n      iteration: 0\n    }\n  }\n\n  nextState(e) {\n    let anyActive = false;\n    let positions = this.state.positions.map((pos, index) => {\n      let nextPos = (this.state.lengths[index] - 1 === pos) ? 0 : (pos + 1);\n      anyActive = anyActive || (nextPos < this.state.activators);\n      return nextPos;\n    });\n\n    if (!anyActive) {\n      positions.push(0);\n      this.state.lengths.push(this.state.iteration + this.state.activators + this.state.nonActivators + 1);\n    }\n\n    this.setState({\n      positions: positions,\n      iteration: this.state.iteration + 1\n    });\n  }\n\n  createCycles() {\n    return this.state.positions.map((pos, i) => {\n      return (<Cycle type=\"cycle\" key={i} activators={this.state.activators} nonActivators={this.state.lengths[i] - this.state.activators} active={pos} />);\n    });\n  }\n\n  createBranch() {\n    let branchLength = this.state.iteration + this.state.activators + this.state.nonActivators;\n    let nonActivators = branchLength - this.state.activators + 1;\n    return (\n      <Cycle key=\"branch\" type=\"branch\" activators={this.state.activators} nonActivators={nonActivators} active={branchLength} />\n    );\n  }\n\n  updateAsm(e) {\n    let name = e.target.name;\n    let value = Number(e.target.value);\n    if (value === 0) {\n      value = \"\";\n    }\n    let activators = null;\n    let nonActivators = null;\n    if (name === 'activators') {\n      activators = value;\n      nonActivators = this.state.nonActivators;\n    } else {\n      activators = this.state.activators;\n      nonActivators = value;\n    }\n    this.setState({\n      activators: activators,\n      nonActivators: nonActivators,\n      positions: [0],\n      lengths: [activators + nonActivators],\n      iteration: 0\n    });\n  }\n\n  render() {\n\n    return (\n      <div className=\"asm\">\n        <Form>\n          <Row>\n            <Col sm={12} md={6}>\n              <Form.Label>Number of Activators</Form.Label>\n              <Form.Control min=\"1\" type=\"number\" placeholder=\"The number of active (green) nodes\" name=\"activators\"\n                value={this.state.activators} onChange={e => { this.updateAsm(e) }} />\n            </Col>\n            <Col sm={12} md={6}>\n              <Form.Label>Number of Non-Activators</Form.Label>\n              <Form.Control min=\"1\" type=\"number\" placeholder=\"The number of inactive (red) nodes within the first cycle\" name=\"nonActivators\"\n                value={this.state.nonActivators} onChange={e => { this.updateAsm(e) }} />\n            </Col>\n          </Row>\n          <Button style={{ marginTop: \"3vh\" }} onClick={e => { this.nextState(e) }}>Next State</Button>\n        </Form>\n        <div style={{ margin: \"3vh\", marginLeft: '0' }}>\n          {this.createCycles()}\n          {this.createBranch()}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default AwkwardStateMachine;","import React from 'react';\nimport Navbar from 'react-bootstrap/Navbar';\nimport Nav from 'react-bootstrap/Nav';\n\nconst InnerNav = (props) => (\n  <div align=\"center\">\n    <h1>{props.title}</h1>\n\n    <Navbar expand=\"lg\" style={{ backgroundColor: \"rgb(238, 236, 235) !important\" }}>\n      <Navbar.Toggle aria-controls=\"basic-navbar-nav\" />\n      <Navbar.Collapse id=\"basic-navbar-nav\">\n        <Nav className=\"mr-auto\">\n          {props.children}\n        </Nav>\n      </Navbar.Collapse>\n    </Navbar>\n\n    <hr />\n  </div>\n);\n\nexport default InnerNav;","export const getRandomInt = (max) => {\n  return Math.floor(Math.random() * Math.floor(max));\n}\n\nexport const getContextPath = () => {\n  let contextPath = \"\";\n  let components = window.location.href.split(\"/\");\n  for (var i = 3; i < components.length; i++) {\n    contextPath += \"/\" + components[i];\n  }\n  return contextPath;\n}\n\nexport const extractPageFromContextPath = () => {\n  let context = getContextPath().split(\"#\");\n  return context[context.length - 1];\n}\n\nexport default {\n  getRandomInt,\n  getContextPath,\n  extractPageFromContextPath\n};","import React from 'react';\n\nimport AwkwardStateMachine from '../../components/awkward-state-machine/AwkwardStateMachine';\nimport Article from '../../components/article/Article';\n\nimport InnerNav from '../../components/inner-nav/InnerNav';\nimport { MainContent, MainContentSection } from '../../components/main-content/MainContent';\n\nimport { getContextPath } from '../../tools/general';\n\nconst awkwardStateMachines = require('../../assets/html/awkward_state_machines.html');\n\nclass AwkwardStateMachinesPage extends React.Component {\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      activators: 1,\n      nonActivators: 1\n    }\n  }\n\n  navClicked(page) {\n    this.setState({\n      page: page\n    })\n  }\n\n  render() {\n    let content = null;\n    let context = getContextPath().split(\"#\");\n    let page = context[context.length - 1];\n\n    if (page === \"theory\") {\n      content = (<Article content={awkwardStateMachines} />);\n    } else {\n      page = \"console\";\n      content = <AwkwardStateMachine activators={this.state.activators} nonActivators={this.state.nonActivators} />;\n    }\n\n    let consoleClass = page === \"console\" ? \"nav-link active\" : \"nav-link\";\n    let theoryClass = page === \"theory\" ? \"nav-link active\" : \"nav-link\";\n\n    return (\n      <MainContent>\n        <MainContentSection>\n          <InnerNav title=\"Awkward State Machines\">\n            <a\n                href=\"/awkward_state_machines#console\"\n                className={consoleClass}\n                onClick={() => { this.navClicked(\"console\") }}\n              >\n                Console\n            </a>\n              <a\n                href=\"/awkward_state_machines#theory\"\n                onClick={() => { this.navClicked(\"theory\") }}\n                className={theoryClass}\n              >\n                Theory\n            </a>\n          </InnerNav>\n          {content}\n        </MainContentSection>\n      </MainContent>\n    );\n  }\n\n}\n\nexport default AwkwardStateMachinesPage;\n","import React from 'react';\n\nimport Form from 'react-bootstrap/Form';\nimport Row from 'react-bootstrap/Row';\nimport Col from 'react-bootstrap/Col';\n\n/**\n  Defines the function, x-domain, and y-domain inputs for the console form.\n\n  @param [Integer] index - The index of the function/domains this input corresponds to\n  @param [String] function - The current value of the function\n  @param [String] xDomain - The current value of the x-domain mapping\n  @param [String] yDomain - The current value of the y-domain mapping\n  @param [(Event) => ()] onChange - The onChange listener for user updates to the function/domains\n*/\nconst FunctionInput = (props) => {\n  let functionName = \"function\" + props.index;\n  let xDomainName = \"xDomain\" + props.index;\n  let yDomainName = \"yDomain\" + props.index;\n\n  return (\n    <div>\n      <Row>\n        <Col style={{paddingTop: \"3vh\"}} sm={12} md={4}>\n          <Form.Label>Function {props.index}</Form.Label>\n          <Form.Control\n            placeholder=\"Your function input\"\n            name={functionName}\n            value={props.function}\n            onChange={props.onChange}\n            className=\"console-input\"\n          />\n        </Col>\n        <Col style={{paddingTop: \"3vh\"}} sm={12} md={4}>\n          <Form.Label>X-Domain {props.index}</Form.Label>\n          <Form.Control\n            placeholder=\"Your X-Domain input\"\n            name={xDomainName}\n            value={props.xDomain}\n            onChange={props.onChange}\n            className=\"console-input\"\n          />\n        </Col>\n        <Col style={{paddingTop: \"3vh\"}} sm={12} md={4}>\n          <Form.Label>Y-Domain {props.index}</Form.Label>\n          <Form.Control\n            placeholder=\"Your Y-Domain input\"\n            name={yDomainName}\n            value={props.yDomain}\n            onChange={props.onChange}\n            className=\"console-input\"\n          />\n        </Col>\n      </Row>\n    </div>\n  );\n}\n\nexport default FunctionInput;\n","import React from 'react';\n\nconst CloseIcon = () => (\n  <svg\n    fill=\"#ffffff\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n  </svg>\n);\n\nexport default CloseIcon;\n","import React from 'react';\n\nconst DownloadIcon = () => (\n  <svg\n    fill=\"#ffffff\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path d=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\" />\n    <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n  </svg>\n);\n\n\nexport default DownloadIcon;\n","import React from 'react';\n\nconst LeftArrowIcon = (props) => (\n  <svg\n    fill={ props.color || \"#ffffff\" }\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path d=\"M5.41 11H21a1 1 0 0 1 0 2H5.41l5.3 5.3a1 1 0 0 1-1.42 1.4l-7-7a1 1 0 0 1 0-1.4l7-7a1 1 0 0 1 1.42 1.4L5.4 11z\" />\n  </svg>\n);\n\nexport default LeftArrowIcon;\n","import React from 'react';\n\nconst RightArrowIcon = (props) => (\n  <svg\n    fill={ props.color || \"#ffffff\" }\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    width=\"24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path d=\"M18.59 13H3a1 1 0 0 1 0-2h15.59l-5.3-5.3a1 1 0 1 1 1.42-1.4l7 7a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.42-1.4l5.3-5.3z\" />\n  </svg>\n);\n\nexport default RightArrowIcon;\n","import React from 'react';\n\nimport CloseIcon from '../../../icons/CloseIcon';\nimport DownloadIcon from '../../../icons/DownloadIcon';\nimport LeftArrowIcon from '../../../icons/LeftArrowIcon';\nimport RightArrowIcon from '../../../icons/RightArrowIcon';\n\nimport './graph_carousel.css';\n\n/**\n  Determines the (x,y) coords of where the user click on the image currently\n  being displayed by the modal.\n\n  @param [Event] event - The click event\n  @param [<Image>] image - The current image element\n  @return [Object] The (x,y) coords\n*/\nconst coordsOfClick = (event, image) => {\n  const point = event.changedTouches ? event.changedTouches[0] : event;\n  if (point.target.id !== \"colorgraph_image\") {\n    return false;\n  }\n\n  const dim = image.getBoundingClientRect();\n  const x = point.clientX - dim.left;\n  const y = point.clientY - dim.top;\n\n  return { x, y };\n}\n\n/**\n  Manages the display of modal view of graphs, as well as the carousel navigation for\n  switching between graphs.\n\n  @prop [CarouselState] carouselState - The current state of the carousel\n  @return [<ModalImage>] The modal element displaying the carousel of images.\n*/\nconst GraphCarousel = (props) => {\n  let carouselState = props.carouselState;\n\n  /**\n    Updates the modal based on a user click event.\n      - If the modal is \"loading\", the click is ignored\n      - If the last click was really close to the current click, then the click is ignored\n      - If the click is outside of the image, then the modal is closed\n      - If the click is inside the image, and on the right half, then the modal will go to\n          the next image.\n      - If the click is inside the image, and on the left half, then the modal will go to\n          the previous image.\n  */\n  const imageClickedEvent = (event) => {\n    event.preventDefault();\n\n    if (carouselState.isLoading()) {\n      return;\n    }\n\n    if (event.touches && event.touches.length > 1) {\n      // more than one finger, ignored\n      return;\n    }\n\n    if (event.button !== 0) {\n      // Was not a left click, return\n      return;\n    }\n\n    if (carouselState.clickedTooSoon()) {\n      // Screen is registering more clicks than one\n      return;\n    }\n\n    let image = document.getElementById(\"colorgraph_image\");\n    let coords = coordsOfClick(event, image);\n\n    if (!coords) {\n      // User clicked out of bounds\n      carouselState.closeCarousel().forceUpdate();\n      return;\n    }\n\n    carouselState.updateLastClick();\n\n    if (coords.x > (image.width / 2)) {\n      carouselState.nextImage().forceUpdate();\n    } else {\n      carouselState.previousImage().forceUpdate();\n    }\n  }\n\n  /**\n    Defines the header displayed when the graph carousel is open.\n    The header includes:\n      - The color scheme as the title (Red Green Blue, etc)\n      - Left & right arrow icons for moving the carousel\n      - A close icon for closing the carousel\n      - A download icon for downloading the current graph\n  */\n  const Header = () => {\n    /*\n      If the size of the font is too large, then the header ends up spilling\n      onto multiple lines (and looks terrible). This is an attempt to keep the\n      look of the head constant across various sized displays.\n    */\n    let fontSize = \"120%\";\n    if (window.innerWidth < 315) {\n      fontSize = \"75%\";\n    } else if (window.innerWidth < 350) {\n      fontSize = \"80%\";\n    } else if (window.innerWidth < 375) {\n      fontSize = \"95%\";\n    } else if (window.innerWidth < 390) {\n      fontSize = \"105%\";\n    }\n    let style = { \"fontSize\": fontSize }\n\n    let onClose = () => { carouselState.closeCarousel().forceUpdate() };\n    let goToPreviousImage = () => { carouselState.previousImage().forceUpdate() };\n    let goToNextImage = () => { carouselState.nextImage().forceUpdate() };\n\n    return (\n      <div className=\"__react_modal_image__header\">\n        <span className=\"__react_modal_image__icon_menu\">\n          <a href={carouselState.currentSource()} download=\"image\">\n            <DownloadIcon />\n          </a>\n          <a href=\"#console\" onClick={onClose}>\n            <CloseIcon onClick={onClose} />\n          </a>\n        </span>\n\n        <div align=\"center\" style={style} className=\"__react_modal_image__caption\">{carouselState.currentTitle()}</div>\n\n        <span className=\"__react_modal_image__icon_menu __left_float\">\n          <a href=\"#console\" onClick={goToPreviousImage}>\n            <LeftArrowIcon />\n          </a>\n          <a href=\"#console\" onClick={goToNextImage}>\n            <RightArrowIcon onClick={onClose} />\n          </a>\n        </span>\n      </div>\n    );\n  }\n\n  /**\n    Defines the image to be displayed by the carousel.\n  */\n  const ImageContainer = () => {\n    return (\n      <div className=\"__react_modal_image__modal_content\"\n        onMouseDown={imageClickedEvent}\n        onTouchStart={imageClickedEvent}\n      >\n        <img\n          id=\"colorgraph_image\"\n          className=\"__react_modal_image__medium_img\"\n          src={carouselState.currentSource()}\n          alt={carouselState.currentTitle()}\n        />\n      </div>\n    );\n  }\n\n  // Return the carousel if it is open, null if not.\n  return !carouselState.open ? null : (\n    <div>\n      <div className=\"__react_modal_image__modal_container\">\n        <Header />\n        <ImageContainer />\n      </div>\n    </div>\n  );\n}\n\nexport default GraphCarousel;\n","import React from 'react';\n\n// You can add this to the console page to update the operations for the user.\nexport const RefreshIcon = (props) => (\n  <span style={{float: 'left', marginBottom: '-1px'}}>\n    <a href=\"#console\" onClick={props.onClick} >\n      <svg\n        fill=\"#000000\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        width=\"24\"\n        xmlns=\"http://www.w3.org/1999/svg\"\n      >\n        <path d=\"M 7.59375 3 L 9.0625 5 L 13 5 C 16.324219 5 19 7.675781 19 11 L 19 15 L 16 15 L 20 20.46875 L 24 15 L 21 15 L 21 11 C 21 6.59375 17.40625 3 13 3 Z M 4 3.53125 L 0 9 L 3 9 L 3 13 C 3 17.40625 6.59375 21 11 21 L 16.40625 21 L 14.9375 19 L 11 19 C 7.675781 19 5 16.324219 5 13 L 5 9 L 8 9 Z\"/>\n      </svg>\n    </a>\n  </span>\n)\n\nexport default RefreshIcon;\n","import loading_gif from '../../../assets/img/loading.gif';\n\n/**\n  Helper method for converting the response data from the server\n  into the imageLinks array stored by a CarouselState object.\n\n  @param [Object] imageLinksMap - See constructor of CarouselState.\n  @return [Array] The converted image links list.\n*/\nconst convertImageLinksMapToList = (imageLinksMap) => {\n  if (!imageLinksMap) {\n    return [[\"loading...\", loading_gif]];\n  }\n\n  let imageLinks = [];\n  imageLinks.push([\"Red, Green, Blue\", imageLinksMap['RGB']]);\n  imageLinks.push([\"Red, Blue, Green\", imageLinksMap['RBG']]);\n  imageLinks.push([\"Green, Red, Blue\", imageLinksMap['GRB']]);\n  imageLinks.push([\"Green, Blue, Red\", imageLinksMap['GBR']]);\n  imageLinks.push([\"Blue, Red, Green\", imageLinksMap['BRG']]);\n  imageLinks.push([\"Blue, Green, Red\", imageLinksMap['BGR']]);\n\n  imageLinks.push([\"Cyan, Magenta, Yellow\", imageLinksMap['CMY']]);\n  imageLinks.push([\"Cyan, Yellow, Magenta\", imageLinksMap['CYM']]);\n  imageLinks.push([\"Magenta, Cyan, Yellow\", imageLinksMap['MCY']]);\n  imageLinks.push([\"Magenta, Yellow, Cyan\", imageLinksMap['MYC']]);\n  imageLinks.push([\"Yellow, Cyan, Magenta\", imageLinksMap['YCM']]);\n  imageLinks.push([\"Yellow, Magenta, Cyan\", imageLinksMap['YMC']]);\n\n  return imageLinks;\n}\n\n/**\n  Manages the state of the carousel image view.\n*/\nexport default class CarouselState {\n  /**\n    The position (within imageLinks) of graph the user is currently viewing\n  */\n  imageIndex;\n\n  /**\n    A list of the images within the carousel.\n    Items within this list are defined as ordered pairs (via arrays) where\n    the left (first) element is the title to display with the image; while the\n    right (second) element is the link to the image.\n  */\n  imageLinks;\n\n  /**\n    Whether or not the carousel is currently open\n  */\n  open;\n\n  /**\n    The timestamp of the last click recorded on the carousel image\n  */\n  lastClick;\n\n  /**\n    A lambda `(CarouselState) => ()` that updates the state of whichever react component\n    includes this CarouselState within it's react state.\n  */\n  updateCallback;\n\n  /**\n    @param [(CarouselState) => ()] updateCallback The callback to update the state of the component that\n      contains this CarouselState within it's react state.\n    @option [Boolean] open - Whether or not the carousel should be open (defaults to true)\n    @option [Object] imageLinksMap - The images to display in the carousel, defined through a hash that\n      maps color code (RGB CMY etc) to the link for the graph with that color code. If this option\n      is not provided, then the loading gif will be used for the carousel.\n  */\n  constructor(updateCallback, options = {}) {\n    this.imageIndex = 0;\n    this.lastClick = null;\n\n    // Default to an open carousel\n    if (options.open == null) {\n      this.open = true;\n    } else {\n      this.open = options.open;\n    }\n\n    this.updateCallback = updateCallback;\n    this.imageLinks = convertImageLinksMapToList(options.imageLinksMap);\n  }\n\n  /**\n    @return [String] The title of the current image being displayed by the carousel.\n  */\n  currentTitle() {\n    let info = this.imageLinks[this.imageIndex];\n    if (!info) { return; }\n\n    return info[0];\n  }\n\n  /**\n    @return [String] The source link of the current image being displayed by the carousel.\n  */\n  currentSource() {\n    let info = this.imageLinks[this.imageIndex];\n    if (!info) { return; }\n\n    return info[1];\n  }\n\n  /**\n    @return [Boolean] True if the carousel is currently showing the loading gif, false if\n      it's showing graphs.\n  */\n  isLoading() {\n    return this.imageLinks.length === 1;\n  }\n\n  /**\n    @return [Boolean] True if the current time is too close to the last time the user\n      clicked on the graph (> 200 miliseconds).\n  */\n  clickedTooSoon() {\n    let currentTime = new Date().getTime();\n    return !this.lastClick && (currentTime - this.lastClick) < 200\n  }\n\n  /**\n    Updates the images stored by this carousel to the ones given.\n\n    @param [imageLinksMap] The updated images to display in the carousel. See\n      the constructor docs for more details.\n    @return [CarouselState] A reference to this carousel state.\n  */\n  updateImageLinks(imageLinksMap) {\n    this.imageLinks = convertImageLinksMapToList(imageLinksMap);\n    this.imageIndex = 0;\n    return this;\n  }\n\n  /**\n    Updates the last click time to the current time.\n\n    @return [CarouselState] A reference to this carousel state.\n  */\n  updateLastClick() {\n    this.lastClick = new Date().getTime();\n    return this;\n  }\n\n  /**\n    Updates the state to specify the carousel should be open.\n\n    @return [CarouselState] A reference to this carousel state.\n  */\n  openCarousel() {\n    this.open = true;\n    return this;\n  }\n\n  /**\n    Updates the state to specify the carousel should be closed.\n\n    @return [CarouselState] A reference to this carousel state.\n  */\n  closeCarousel() {\n    this.open = false;\n    return this;\n  }\n\n  /**\n    Updates the state to specify the carousel should move to the next image.\n\n    @return [CarouselState] A reference to this carousel state.\n  */\n  nextImage() {\n    let length = this.imageLinks.length;\n    if (length < 2) {\n      return this;\n    }\n\n    this.imageIndex = (this.imageIndex + 1) % (length);\n    return this;\n  }\n\n  /**\n    Updates the state to specify the carousel should move to the previous image.\n\n    @return [CarouselState] A reference to this carousel state.\n  */\n  previousImage() {\n    let length = this.imageLinks.length;\n    if (length < 2) {\n      return this;\n    }\n\n    if (this.imageIndex === 0) {\n      this.imageIndex = length - 1;\n    } else {\n      this.imageIndex -= 1;\n    }\n\n    return this;\n  }\n\n  /**\n    Forces all updates to this carousel state to take effect by triggering\n    a set state call in the react component that has this carousel state within\n    it's react state.\n\n    @return [void]\n  */\n  forceUpdate() {\n    this.updateCallback(this);\n  }\n}\n","import axios from 'axios';\n\nexport default class ColorGraphService {\n  createGraphs(payload) {\n    return axios.post('api/color_graph', payload);\n  }\n}\n","class ColorGraphConfiguration {\n\n  function1 : string;\n  function2 : string;\n  function3 : string;\n\n  xDomain1 : string;\n  xDomain2 : string;\n  xDomain3 : string;\n\n  yDomain1 : string;\n  yDomain2 : string;\n  yDomain3 : string;\n\n  height: number;\n  width: number;\n\n  toJson() : string {\n    return JSON.stringify({\n      function1: this.function1,\n      xDomain1: this.xDomain1,\n      yDomain1: this.yDomain1,\n      function2: this.function2,\n      xDomain2: this.xDomain2,\n      yDomain2: this.yDomain2,\n      function3: this.function3,\n      xDomain3: this.xDomain3,\n      yDomain3: this.yDomain3,\n      width: this.width,\n      height: this.height\n    });\n  }\n}\n\nexport default ColorGraphConfiguration;\n","import { getRandomInt } from './general';\nimport ColorGraphConfiguration from '../classes/colorgraph_configuration';\n\nconst interestingOperations = [\n  { f: 'x & y', x: 'n', y: 'n' },\n  { f: 'x | y', x: 'n', y: 'n' },\n  { f: 'x || y', x: 'n', y: 'n' },\n  { f: 'x => y', x: 'n', y: 'n' },\n  { f: 'x <=> y', x: 'n', y: 'n' },\n  { f: 'x -& y', x: 'n', y: 'n' },\n  { f: 'x -| y', x: 'n', y: 'n' },\n\n  { f: 'sin(x & y)', x: 'n', y: 'n' },\n  { f: 'sin(x | y)', x: 'n', y: 'n' },\n  { f: 'sin(x || y)', x: 'n', y: 'n' },\n  { f: 'sin(x => y)', x: 'n', y: 'n' },\n  { f: 'sin(x <=> y)', x: 'n', y: 'n' },\n  { f: 'sin(x -& y)', x: 'n', y: 'n' },\n  { f: 'sin(x -| y)', x: 'n', y: 'n' },\n  { f: 'cos(x & y)', x: 'n', y: 'n' },\n  { f: 'cos(x | y)', x: 'n', y: 'n' },\n  { f: 'cos(x || y)', x: 'n', y: 'n' },\n  { f: 'cos(x => y)', x: 'n', y: 'n' },\n  { f: 'cos(x <=> y)', x: 'n', y: 'n' },\n  { f: 'cos(x -& y)', x: 'n', y: 'n' },\n  { f: 'cos(x -| y)', x: 'n', y: 'n' },\n\n  { f: 'sin(x & y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'sin(x | y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'sin(x || y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'sin(x => y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'sin(x <=> y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'sin(x -& y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'sin(x -| y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'cos(x & y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'cos(x | y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'cos(x || y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'cos(x => y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'cos(x <=> y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'cos(x -& y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'cos(x -| y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n\n  { f: 'sin(x -& y) || cos(x & y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n\n  { f: 'sin(x -& y) // cos(x & y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'cos(x -& y) // sin(x & y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'sin(x -| y) // cos(x | y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'cos(x -| y) // sin(x | y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n\n  { f: 'sin(x & y) // cos(x -& y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'cos(x & y) // sin(x -& y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'sin(x | y) // cos(x -| y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'cos(x | y) // sin(x -| y)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n\n  { f: 'ln((32*x - 26*y)^2) || ln((32*y - 26*x)^2)', x: 'switch(even(n), n, n^2)', y: 'switch(even(n), n^2, n)'},\n\n  { f: '(x & y) = 0', x: 'n', y: 'n' },\n\n  { f: '(x & y) // (x + y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x | y) // (x + y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x || y) // (x + y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x => y) // (x + y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x <=> y) // (x + y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x -& y) // (x + y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x -| y) // (x + y)', x: 'n - 250', y: 'n - 250' },\n\n  { f: '(x & y) // (x - y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x | y) // (x - y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x || y) // (x - y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x => y) // (x - y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x <=> y) // (x - y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x -& y) // (x - y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x -| y) // (x - y)', x: 'n - 250', y: 'n - 250' },\n\n  { f: '(x & y) // (x // y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x | y) // (x // y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x || y) // (x // y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x => y) // (x // y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x <=> y) // (x // y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x -& y) // (x // y)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x -| y) // (x // y)', x: 'n - 250', y: 'n - 250' },\n\n  { f: '(x & y) // (y // x)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x | y) // (y // x)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x || y) // (y // x)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x => y) // (y // x)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x <=> y) // (y // x)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x -& y) // (y // x)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x -| y) // (y // x)', x: 'n - 250', y: 'n - 250' },\n\n  { f: '(x & y) // ((x^2 + y^2) // 128)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x | y) // ((x^2 + y^2) // 128)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x || y) // ((x^2 + y^2) // 128)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x => y) // ((x^2 + y^2) // 128)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x <=> y) // ((x^2 + y^2) // 128)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x -& y) // ((x^2 + y^2) // 128)', x: 'n - 250', y: 'n - 250' },\n  { f: '(x -| y) // ((x^2 + y^2) // 128)', x: 'n - 250', y: 'n - 250' },\n\n  { f: 'sin(x^2 + y^2)', x: 'n - 250', y: 'n - 250' },\n  { f: 'cos(x^2 + y^2)', x: 'n - 250', y: 'n - 250' },\n  { f: 'tan(x^2 + y^2)', x: 'n - 250', y: 'n - 250' },\n  { f: 'sin(x^2 + y^2) // cos(x^2 + y^2)', x: 'n - 250', y: 'n - 250' },\n  { f: 'sin(x^2 + y^2) // cos(x^2 + y^2)', x: 'ln(n)', y: 'ln(n)' },\n  { f: 'cos(x^2 + y^2) // sin(x^2 + y^2)', x: 'n - 250', y: 'n - 250' },\n  { f: 'cos(x^2 + y^2) // sin(x^2 + y^2)', x: 'ln(n)', y: 'ln(n)' },\n\n  { f: '(x^2 + y^2) // 50', x: 'n - 250', y: 'n - 250' },\n  { f: '(x^2 + y^2) // 250', x: 'n - 250', y: 'n - 250' },\n  { f: '(x^2 + y^2) // 500', x: 'n - 250', y: 'n - 250' },\n  { f: '(x^2 + y^2) // 5000', x: 'n - 250', y: 'n - 250' },\n\n  { f: '(x^2 + y^2) // 50',   x: 'switch(even(n), n, n^2)', y: 'switch(even(n), n^2, n)' },\n  { f: '(x^2 + y^2) // 250',  x: 'switch(even(n), n, n^2)', y: 'switch(even(n), n^2, n)' },\n  { f: '(x^2 + y^2) // 500',  x: 'switch(even(n), n, n^2)', y: 'switch(even(n), n^2, n)' },\n  { f: '(x^2 + y^2) // 5000', x: 'switch(even(n), n, n^2)', y: 'switch(even(n), n^2, n)' },\n\n  { f: '(x^2 + y^2) // (512*x - 901*y)', x: 'switch(even(n), n, n^2)', y: 'switch(even(n), n^2, n)' },\n  { f: '(x^2 + y^2) // (-512*x + 901*y)', x: 'switch(even(n), n, n^2)', y: 'switch(even(n), n^2, n)' },\n  { f: '(x^2 + y^2) // (901*x - 512*y)', x: 'switch(even(n), n, n^2)', y: 'switch(even(n), n^2, n)' },\n  { f: '(x^2 + y^2) // (-901*x + 512*y)', x: 'switch(even(n), n, n^2)', y: 'switch(even(n), n^2, n)' },\n\n  { f: '((x^2 + y^2)^6 || x) // ((x^2 + y^2)^6 || y)', x: 'n + 10000', y: 'n + 10000'},\n\n  { f: '(x + y)^2 // (x*y*sin(x + y))', x: 'n', y: 'n'},\n  { f: '(x + y)^2 // (x*y*sin(x + y))', x: 'n - 250', y: 'n - 250'},\n  { f: '(x*y*cos(x + y)) // (x*y*sin(x + y))', x: 'ln(n - 250)', y: 'ln(n - 250)'},\n  { f: '(x + y)^2 // (x*y*sin(x + y))', x: 'ln(n - 250)', y: 'ln(n - 250)'},\n  { f: '(x + y)^2 // (x*y*sin(x + y))', x: 'ln(n - 250)^2', y: 'ln(n - 250)^2'},\n  { f: '(cos(y)*x + sin(x)*y)^2 // (x*y*sin(x + y))', x: 'ln(n - 250)', y: 'ln(n - 250)'},\n  { f: '(cos(y)*x + sin(x)*y)^2 // (x*y*sin(x + y))', x: 'ln(n - 250)^2', y: 'ln(n - 250)^2'},\n  { f: '(sin(y)*x^2 + sin(x)*y^2) // (x*y*cos(x)*sin(y))', x: 'ln(n - 250)', y: 'ln(n - 250)'},\n  { f: '(sin(y)*x^2 + sin(x)*y^2) // pow(x*y, cos(x)*sin(y))', x: 'ln(n - 250)', y: 'ln(n - 250)'},\n  { f: '(sin(y)*x^2 + sin(x)*y^2) // pow(x*y, cos(x)*sin(y))', x: 'ln(n - 250)^2', y: 'ln(n - 250)^2'},\n  { f: '(sin(y)*x^2 + sin(x)*y^2) // switch(even(x*y), x*cos(y), y*sin(x))', x: 'ln(n - 250)^2', y: 'ln(n - 250)^2'},\n\n  { f: '(y // x) // (x // y)', x: 'ln(n - 250)^2', y: 'ln(n - 250)^2'},\n  { f: '(y // x) // (x // y)', x: 'n', y: 'n' },\n\n  { f: '(x^2 + y^2) // (131*x - 197*y)', x: 'n - 250', y: 'n - 250'},\n  { f: '(x^2 + y^2) // (131*x - 197*y)', x: 'n', y: 'n'},\n\n  { f: 'x || (y // x) ' , x: 'n - 250', y: 'n - 250'},\n  { f: 'x || (y // x) ' , x: 'ln(n - 250)', y: 'ln(n - 250)'},\n  { f: 'x || (y // x) ' , x: 'ln(n - 250)^2', y: 'ln(n - 250)^2'},\n\n  { f: 'within(x -& y, x & y, (x^2 + y^2) // (x - y))', x: 'n', y: 'n'},\n  { f: 'within(x -& y, x & y, (x^2 + y^2) // (x - y))', x: 'n - 250', y: 'n - 250'},\n  { f: 'within(x -& y, x & y, (x^2 + y^2) // (x - y))', x: 'ln(n - 250)', y: 'ln(n - 250)'},\n  { f: 'within(x -& y, x & y, (x^2 + y^2) // (x - y))', x: 'ln(n - 250)^2', y: 'ln(n - 250)^2'},\n\n  { f: 'max(cos(x + y), sin(x - y))', x: 'ln(n - 250)', y: 'ln(n - 250)'},\n  { f: 'max(cos(x + y), sin(x - y))', x: 'ln(n - 250)^2', y: 'ln(n - 250)^2'},\n\n  { f: 'dlog(97, 5, x^2 + y^2)', x: 'n - 250', y: 'n - 250'},\n  { f: 'dlog(257, 181, x^20 + y^20)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'dlog(257, 181, x^40 + y^40)', x: 'switch(even(n), 250 - n, n - 250)', y: 'switch(even(n), n - 250, 250 - n)' },\n  { f: 'dlog(257, 181, x^40 + y^40)', x: 'switch(even(n), n, n^2)', y: 'switch(even(n), n^2, n)' },\n\n];\n\nconst basicOperations = [\n  { f: 'x', x: 'n', y: 'n' },\n  { f: 'y', x: 'n', y: 'n' },\n  { f: 'x + y', x: 'n', y: 'n' },\n  { f: 'x - y', x: 'n', y: 'n' },\n  { f: 'y - x', x: 'n', y: 'n' },\n  { f: 'x^2 + y^2', x: 'n - 250', y: 'n - 250' },\n  { f: 'x', x: '-1*n', y: 'n' },\n  { f: 'y', x: 'n', y: '-1*n' },\n  { f: 'x^2', x: 'n - 250', y: 'n - 250' },\n  { f: 'y^2', x: 'n - 250', y: 'n - 250' },\n  { f: '(x + y)^2', x: 'n - 250', y: 'n - 250' },\n  { f: '(x - y)^2', x: 'n - 250', y: 'n - 250' },\n  { f: '(y - x)^2', x: 'n - 250', y: 'n - 250' },\n  { f: '(x - y) / (x + y)', x: 'n', y: 'n'},\n  { f: '(x - y)^2 / (x + y)', x: 'n', y: 'n'},\n\n  { f: 'x', x: 'n', y: 'ln(n)' },\n  { f: 'y', x: 'n', y: 'ln(n)' },\n\n  { f: 'not(x + y)', x: 'n', y: 'n' },\n  { f: 'not(x - y)', x: 'n', y: 'n' },\n  { f: 'not(y - x)', x: 'n', y: 'n' },\n  { f: 'not(x^2 + y^2)', x: 'n - 250', y: 'n - 250' },\n  { f: 'not(x^2)', x: 'n - 250', y: 'n - 250' },\n  { f: 'not(y^2)', x: 'n - 250', y: 'n - 250' },\n  { f: 'not(x + y)^2', x: 'n - 250', y: 'n - 250' },\n  { f: 'not(x - y)^2', x: 'n - 250', y: 'n - 250' },\n  { f: 'not(y - x)^2', x: 'n - 250', y: 'n - 250' },\n\n  { f: 'pos(x) = 0', x: 'n - 250', y: 'n - 250' },\n  { f: 'pos(x) = 0', x: '-1*n + 250', y: '-1*n + 250' },\n  { f: 'pos(y) = 0', x: 'n - 250', y: 'n - 250' },\n  { f: 'pos(y) = 0', x: '-1*n + 250', y: '-1*n + 250' },\n\n  { f: 'min(x, y)', x: 'n', y: 'n'},\n  { f: 'min(x^2, y^2)', x: 'n', y: 'n'},\n  { f: 'max(x, y)', x: 'n', y: 'n'},\n  { f: 'max(x^2, y^2)', x: 'n', y: 'n'},\n\n]\n\nconst fullGraphConfigs = [\n  {\n    function1: 'abs(x) // (x*sin(x + y))',\n    xDomain1: 'n - 250',\n    yDomain1: 'n - 250',\n\n    function2: 'abs(x) // ((x + y)*sin(x + y))',\n    xDomain2: 'n - 250',\n    yDomain2: 'n - 250',\n\n    function3: 'abs(x) // (y*sin(x + y))',\n    xDomain3: 'n - 250',\n    yDomain3: 'n - 250',\n  },\n  {\n    function1: 'abs(x) // (x*sin(x + y))',\n    xDomain1: 'ln(n - 250)',\n    yDomain1: 'ln(n - 250)',\n\n    function2: 'abs(x) // ((x + y)*sin(x + y))',\n    xDomain2: 'ln(n - 250)',\n    yDomain2: 'ln(n - 250)',\n\n    function3: 'abs(x) // (y*sin(x + y))',\n    xDomain3: 'ln(n - 250)',\n    yDomain3: 'ln(n - 250)',\n  },\n  {\n    function1: 'abs(x) // (x*sin(x + y))',\n    xDomain1: 'ln(n - 250)^2',\n    yDomain1: 'ln(n - 250)^2',\n\n    function2: 'abs(x) // ((x + y)*sin(x + y))',\n    xDomain2: 'ln(n - 250)^2',\n    yDomain2: 'ln(n - 250)^2',\n\n    function3: 'abs(x) // (y*sin(x + y))',\n    xDomain3: 'ln(n - 250)^2',\n    yDomain3: 'ln(n - 250)^2',\n  },\n  // {\n  //   function1: '',\n  //   xDomain1: '',\n  //   yDomain1: '',\n\n  //   function2: '',\n  //   xDomain2: '',\n  //   yDomain2: '',\n\n  //   function3: '',\n  //   xDomain3: '',\n  //   yDomain3: '',\n  // }\n]\n\n\nexport const randomGraph = () => {\n  if (!getRandomInt(interestingOperations.length)) {\n    return fullGraphConfigs[getRandomInt(fullGraphConfigs.length)];\n  }\n\n  let operation1 = interestingOperations[getRandomInt(interestingOperations.length)];\n  let op2_position = getRandomInt(basicOperations.length);\n  let op3_position = getRandomInt(basicOperations.length);\n  if (op3_position === op2_position) {\n    if (op3_position === basicOperations.length - 1) {\n      op3_position -= 1;\n    } else {\n      op3_position += 1;\n    }\n  }\n  let operation2 = basicOperations[op2_position];\n  let operation3 = basicOperations[op3_position];\n\n  let config = new ColorGraphConfiguration();\n  config.function1 = operation1.f;\n  config.xDomain1 = operation1.x;\n  config.yDomain1 = operation1.y;\n  config.function2 = operation2.f;\n  config.xDomain2 = operation2.x;\n  config.yDomain2 = operation2.y;\n  config.function3 = operation3.f;\n  config.xDomain3 = operation3.x;\n  config.yDomain3 = operation3.y;\n  config.height = 500;\n  config.width = 500;\n\n  return config;\n}\n\nexport default randomGraph;\n","import React from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Form from 'react-bootstrap/Form';\n\nimport FunctionInput from './function-input/FunctionInput';\nimport GraphCarousel from './graph-carousel/GraphCarousel';\n\nimport RefreshIcon from '../../icons/RefreshIcon';\n\nimport CarouselState from './carousel.state';\n\nimport ColorGraphService from '../../../services/colorgraph.service.js';\n\nimport { randomGraph } from '../../../tools/graphInputProducer';\n\nclass Console extends React.Component {\n\n  colorGraphService : ColorGraphService;\n\n  constructor(props) {\n    super(props);\n\n    this.colorGraphService = new ColorGraphService();\n\n    this.state = {\n      configuration: randomGraph(),\n      carouselState: new CarouselState(this.updateCarousel, { open: false }),\n      hasChangedSinceLastGraph: true,\n      page: \"info\"\n    };\n  }\n\n  /**\n    Callback used by the refresh icon to update the console\n    with a new 'random' graph\n  */\n  setRandomGraph = () => {\n    this.setState({\n      configuration: randomGraph(),\n      hasChangedSinceLastGraph: true\n    });\n  }\n\n  /**\n    Callback to set a new CarouselState.\n\n    Note: This callback can be accessed on a CarouselState object\n    via the #forceUpdate() method.\n  */\n  updateCarousel = (carouselState) => {\n    this.setState({\n      carouselState: carouselState\n    });\n  }\n\n  /**\n    Callback to update the graph config data when the user starts typing\n  */\n  updateConfiguration = (event) => {\n    let config = this.state.configuration;\n    config[event.target.name] = event.target.value;\n\n    this.setState({\n      configuration: config,\n      hasChangedSinceLastGraph: true\n    });\n  }\n\n  /**\n    1. Updates the graphs with the data in the console.\n    2. Opens the graph modal with the loading gif while the graphs are being created.\n    3. Replaces the loading gif with the graphs once they arrive.\n\n    In the event the data in the console has not changed since the graphs were last\n    produced, then the graph modal will simply open to the previous graphs (in the\n    previous position).\n  */\n  updateGraphs = () => {\n    // Don't reproduce the graph if it hasn't changed\n    if (!this.state.hasChangedSinceLastGraph) {\n      this.setState({ carouselState: this.state.carouselState.openCarousel() });\n      return;\n    }\n\n    this.colorGraphService.createGraphs(this.state.configuration).then(\n      this.updateGraphsCallback\n    ).catch(this.updateGraphsFailureCallback);\n\n    // Clear the previous carousel\n    this.setState({ carouselState: new CarouselState(this.updateCarousel) });\n  }\n\n  /**\n    Handles the (successful) response from the server when updating the graphs.\n  */\n  updateGraphsCallback = (response) => {\n    if (response && response.data && response.data.images) {\n      this.setState({\n        carouselState: this.state.carouselState.updateImageLinks(response.data.images).openCarousel(),\n        hasChangedSinceLastGraph: false\n      })\n    } else {\n      console.log(\"An error occurred\", response);\n      alert(\"An error occurred!\");\n      this.state.carouselState.closeCarousel().forceUpdate();\n    }\n  }\n\n  /**\n    Handles a failure response from the server when updating the graphs.\n  */\n  updateGraphsFailureCallback = (jq, status, thrown) => {\n    console.log(status, thrown);\n    console.log(jq);\n\n    this.setState({\n      carouselState: this.state.carouselState.closeCarousel()\n    });\n  }\n\n  render() {\n    return (\n      <div>\n        <RefreshIcon onClick={this.setRandomGraph}/>\n        <div align=\"center\">\n          <GraphCarousel carouselState={this.state.carouselState} />\n\n          <Form style={{ padding: \"3vh\", paddingTop: \"26px\" }}>\n            <FunctionInput\n              index={1}\n              onChange={this.updateConfiguration}\n              function={this.state.configuration.function1}\n              xDomain={this.state.configuration.xDomain1}\n              yDomain={this.state.configuration.yDomain1}\n            />\n            <FunctionInput\n              index={2}\n              onChange={this.updateConfiguration}\n              function={this.state.configuration.function2}\n              xDomain={this.state.configuration.xDomain2}\n              yDomain={this.state.configuration.yDomain2}\n            />\n            <FunctionInput\n              index={3}\n              onChange={this.updateConfiguration}\n              function={this.state.configuration.function3}\n              xDomain={this.state.configuration.xDomain3}\n              yDomain={this.state.configuration.yDomain3}\n            />\n          </Form>\n          <Button onClick={this.updateGraphs}>Produce Graph</Button>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Console;\n","import React from 'react';\nimport './math.css';\n\nexport const LEQ = '\\u2264';\nexport const GEQ = '\\u2265';\n\nexport const M = (props) => {\n  return (<span className=\"math-text\">{props.children}</span>);\n};\n\nexport const ArticleSection = (props) => {\n  return (<div className=\"article-section\">{props.children}</div>)\n}\n","import React from 'react';\nimport Card from 'react-bootstrap/Card';\nimport { M } from '../../math/Math';\n\nexport const GraphingInfo = (props) => {\n  return (\n    <div style={{padding: \"2vw\"}}>\n    <Card style={{marginBottom: \"2vh\"}}>\n      <Card.Header><h4>What is a Color Graph?</h4></Card.Header>\n      <Card.Body>\n        <p>\n          In a typical two-dimensional graph, we define the value of <M>y</M> via some function in terms of <M>x</M>, for instance, <M>y = f(x) = x + 5</M>. We then calculate the value of <M>y</M> over some range of <M>x</M>, and plot the resulting values on a  two-dimensional plane to produce a graph. Similarly, in a typical three-dimensional graph, we define the value of <M>z</M> via some function in terms  of <M>x</M> and <M>y</M>, for instance, <M>z = f(x,y) = x^2 + y^2</M>. We then calculate the value <M>z</M> over some range of <M>x</M> and <M>y</M>, and plot the resulting  values in three-dimensional space to produce a graph. A color graph employs the same basic principle as these two and three-dimensional graphs we are already familiar with. In a color graph, we define three functions in terms  of <M>x</M> and <M>y</M>: <M>red = r(x,y)</M>, <M>green = g(x,y)</M>, and <M>blue = b(x,y)</M>. Each of these functions defines the intensity of one of the colors in the color graph at any given point <M>(x,y)</M>. To produce a color graph, we calculate the intesity of red, green, and blue at every point within a rectangle, and then 'color' in each of those points with the color defined by the calculated intesities. For example, if <M>blue = f(x,y) = x + y</M> then  the intensity of <M>blue</M> at point <M>(2,3)</M> in the graph would be  given by <M>blue = f(2, 3) = 2 + 3 = 5</M>; similarly, the intensity at point <M>(100, 12)</M> would be <M>blue = f(100, 12) = 100 + 12 = 112</M>. Put simply, a color graph is created by defining the intensity of the colors <M>red, green, and blue</M> over the <M>x,y-plane</M>.\n        </p>\n        <p>\n          Similar to how <M>x-axis</M> and <M>y-axis</M> from a 2-dimensional graph are perpendicular to one another, the colors <M>red</M>, <M>green</M>, and <M>blue</M> are considered perpendicular to one another. What this means is that the intensity of the color <M>red</M> is independent of the intensity of <M>blue</M> or <M>green</M>, similarly, the intensity of <M>blue</M> and green are also mutually independent of one another. This independent nature of the colors is what allows color graphs to produce mathematically meaningful images. Furthermore, a since two-dimensional graph consists of points containing two perpendicular entries <M>(x, y)</M>; and a three-dimensional graph consists of points containing three perpendicular entries <M>(x, y, z)</M>; by extensional, a color graph is five-dimensional since it consisits points containing five perpendicular entries <M>(x, y, red, green, blue)</M>.\n        </p>\n        <p>\n          In order to avoid confusion, up until this point we've only mentioned that the colors <M>red</M>, <M>green</M>, and <M>blue</M> are used to create color graphs. However, this is not true. Just as <M>red</M>, <M>green</M>, and <M>blue</M> are all perpendicular to one another, the colors <M>cyan</M>, <M>magenta</M>, and <M>yellow</M> are also perpendicular to one another. As such, we can also produce a meaningful color graph by defining three functions that define the intensity of the colors <M>cyan</M>, <M>magenta</M>, and <M>yellow</M>.\n        </p>\n        <p>\n          As mentioned, a color graph is defined over the points of a rectangle. The rectangle's size is defined by the graph's width and height, where each point in the rectangle corresponds to a single pixel in the resulting image. As such, the value of <M>x</M> starts at <M>0</M> in the upper-left hand corner of the image and increases by <M>1</M> for every pixel you move to the right; thus allowing for a maximum value of <M>width - 1</M>. Similarly, the value of <M>y</M> starts at <M>0</M> in the upper-left hand corner of the image and increases by <M>1</M> for every pixel you move down; thus allowing for a maximum value of <M>height - 1</M>.\n        </p>\n      </Card.Body>\n    </Card>\n    <Card style={{marginBottom: \"2vh\"}}>\n      <Card.Header><h4>Defining a Color Graph</h4></Card.Header>\n      <Card.Body>\n        <p>\n          Within the console, you define the three color functions by entering typing your operations within the fields labeled <i>Function 1</i>, <i>Function 2</i>, and <i>Function 3</i>. Furthermore, for each color function, you must also define two  domain mappings, <i>X-Domain</i> and <i>Y-Domain</i>. You can learn more about the specifics of defining functions and domain mappings in the corresponding sections below.\n        </p>\n        <p>\n          Once you've defined your color functions and their respective domain mappings, you can create your graph by pressing the <i>Produce Graph</i> button located at the bottom of the console. Once clicked, the site will begin producing your graph. Since it can take up to 30 seconds to produce some graphs, you will be presented with a loading gif while the calculations are being performed. Once your graph is complete, the console will automatically replace the loading gif with the graph.\n        </p>\n        <p>\n          When you create a graph, the console will actually produce twelve images - one image for each way we can map our functions to the colors <M>(red, green, blue)</M> or the colors <M>(cyan, magenta, yellow)</M>. You can cycle through the images by clicking directly on the current image. A click on the right-half of the image will load the next image, while a click on the left-half of the image will load the previous image. The title of the graph located within the center the toolbar at the top of the page specifies which color each of the functions is defining: the first color listed corresponds to the output from <i>Function 1</i>, the second color listed corresponds to the output from <i>Function 2</i>, and the final color listed corresponds to the output from <i>Function 3</i>. For instance, if the title reads \"Red, Green, Blue\", then the output from <i>Function 1</i> is mapped to the color <M>red</M>, the ouput from <i>Function 2</i> is mapped to the color <M>green</M>, andthe ouput from <i>Function 3</i> is mapped to the color <M>blue</M>. Similarly, the title \"Yellow, Magenta, Cyan\" implies that <i>Function 1</i> is mapped to <M>yellow</M>, <i>Function 2</i> is mapped to <M>magenta</M>, and <i>Function 3</i> is mapped to <M>cyan</M>.\n        </p>\n        <p>\n          While viewing your graph, you can download the image using the download icon located to the left of the exit button located within the toolbar in the top-right of the page. If you would like to discontinue viewing your graph, you can click the exit button located within the toolbar in the top-right of the page; or by clicking in the empty space outside the bounds of the graph.\n        </p>\n        <p>\n          In the event you input an invalid function or domain mapping, the console will error and your graph will not be produced. Although invalid input is the most likely cause for error, there is a chance that your error is caused by a bug. Unfortinately, there is not currently a mechanism for reporting bugs; however, we are working on supporting a bug-reporting feature in the future.\n        </p>\n      </Card.Body>\n    </Card>\n    <Card style={{marginBottom: \"2vh\"}}>\n      <Card.Header><h4>Functions</h4></Card.Header>\n      <Card.Body>\n        <p>\n          As described above, a color graph is defined by three color functions that define the intesity of either <M>(red, green, blue)</M> or <M>(magenta, cyan, yellow)</M> over a rectangle. When typing your functions, the character <i>x</i> is assigned the value output by the <M>x-domain mapping</M>, while the character <i>y</i> is assigned the value output by the <M>y-domain mapping</M>. You can find a list of these operations and examples in the <a href=\"/colorgraphing#operations\" onClick={props.goToOperationsTab}>Operations Tab</a>.\n        </p>\n      </Card.Body>\n    </Card>\n    <Card>\n      <Card.Header><h4>Domain Mappings</h4></Card.Header>\n      <Card.Body>\n        <p>\n          As mentioned above, a color graph is produced by defining the intensity of three perpendicular colors for every pixel within a rectangular image, where the top-left hand corner is the point <M>(0,0)</M> with <M>x</M> increasing by <M>1</M> for every pixel you move to the right, and <M>y</M> increasing by <M>1</M> for every pixel you move down. If we were to use these values of <M>x</M> and <M>y</M> as input to our color graphs, then every color graph of the same size would have the same input. To easily add more variety to the graphs we can produce, the console allows you to define two operations: a <i>x-domain mapping</i> and a <i>y-domain mapping</i>. The <i>x-domain mapping</i> is a function that receives the <M>x-coordinate</M> of the current pixel and maps it to a new value that is then used as the value of <M>x</M> within the color function. Similarly, the <i>y-domain mapping</i> receives the <M>y-coordinate</M> of the current pixel and maps it to a new value that is then used as the value of <M>y</M> with the color function. As such, if the operation <M>f(x) = x - 250</M> is our <i>x-domain mapping</i>, the operation <M>g(y) = ln(y)</M> is our <i>y-domain mapping</i>, and <M>red(x, y) = x^2 + y^2</M> is the corresponding color function, then the intensity of the red points within the graph would be given by: <M>red(x,y) = f(x)^2 + g(y)^2 = (x - 250)^2 + ln(y)^2</M>.\n        </p>\n        <p>\n          While functions use the characters <M>x</M> and <M>y</M> to denote input to the function, domain mappings use the character <M>n</M> to denote the coordinate of the curren pixel. For example, at pixel <M>(50, 213)</M>, the value of <M>n</M> in the <i>x-domain mapping</i> would be <M>50</M>, and the value of <M>n</M> in the <i>y-domain mapping</i> would be <M>213</M>. Domain mappings can use any of the supported operations that functions do; you can find a list of these operations and examples in the <a href=\"/colorgraphing#operations\" onClick={props.goToOperationsTab}>Operations Tab</a>.\n        </p>\n      </Card.Body>\n    </Card>\n    </div>\n  );\n}\n\nexport default GraphingInfo;\n","import React from 'react';\nimport Card from 'react-bootstrap/Card';\nimport Badge from 'react-bootstrap/Badge';\nimport { M, ArticleSection, LEQ} from '../../math/Math';\n\nimport './operation_info.css';\n\nconst ExampleList = (props) => {\n  let data = props.data;\n  if (!data) {\n    return null;\n  }\n\n  let length = data.length;\n  return (\n  <p>\n    <strong>{props.name}:</strong><br/>\n    {\n      data.map((ele, index) => {\n        if (index === length - 1) {\n          return (<Badge pill className=\"exampleBadge\" key={index} variant=\"info\"><M>{ele}</M></Badge>);\n        }\n        return (<Badge pill className=\"exampleBadge\" key={index} variant=\"info\"><M>{ele}</M></Badge>);\n      })\n    }\n  </p>\n  );\n}\n\nconst NumberOfArguments = (props) => {\n  return props.arguments ? (\n    <p>\n      <strong>Number of Arguments:</strong><br/>\n      <Badge pill variant=\"info\" className=\"exampleBadge\">{props.arguments}</Badge>\n    </p>\n  ) : null;\n}\n\nconst OperationInfo = (props) => {\n  return (\n    <Card style={{marginBottom: \"2vh\"}}>\n      <Card.Header><h4>{props.operationName}</h4></Card.Header>\n      <Card.Body>\n        <Card.Text>\n          <p>{props.children}</p>\n          <NumberOfArguments arguments={props.arguments} />\n          <ExampleList name=\"Operation Handles\" data={props.handles} />\n          <ExampleList name=\"Binary Operations\" data={props.operators} />\n          <ExampleList name=\"Function Examples\" data={props.functionExamples} />\n          <ExampleList name=\"Domain Examples\" data={props.domainExamples} />\n        </Card.Text>\n      </Card.Body>\n    </Card>\n  );\n}\n\nconst Site = (props) => {\n  return (\n    <a href={props.href} target=\"_blank\" rel=\"noopener noreferrer\">\n      {props.title}\n    </a>\n  );\n}\n\nconst Wikipedia = (props) => {\n  return (\n    <Site href={props.href} title=\"Wikipedia\" />\n  );\n}\n\nconst XOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"x\"\n      functionExamples={[\"x\"]}\n    >\n      <p>\n        Within a color function, the character <M>x</M> represents the output\n        of the correspoding <M>X-Domain Mapping</M> at the current point within\n        the graph.\n      </p>\n      <p>\n        The use of <M>x</M> is only valid within the context of a color function, attempting\n        to use <M>x</M> within either the <M>X-Domain Mapping</M> or the <M>Y-Domain Mapping</M> will\n        result in an error.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst YOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"y\"\n      functionExamples={[\"y\"]}\n    >\n      <p>\n        Within a color function, the character <M>y</M> represents the output\n        of the correspoding <M>Y-Domain Mapping</M> at the current point within\n        the graph.\n      </p>\n      <p>\n        The use of <M>y</M> is only valid within the context of a color function, attempting\n        to use <M>y</M> within either the <M>X-Domain Mapping</M> or the <M>Y-Domain Mapping</M> will\n        result in an error.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst NOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"n\"\n      domainExamples={[\"n\"]}\n    >\n      <p>\n        Within a domain mapping, the character <M>n</M> represents the current point\n        of <M>x</M> or <M>y</M> within the color graph. As such, the value\n        of <M>n</M> is always an integer contained in the range: <M>0 {LEQ} n {'<'} length</M>,\n        where <M>length</M> is equal to the graph's width for a <M>X-Domain Mapping</M>, or the\n        graph's height for a <M>Y-Domain Mapping</M>.\n      </p>\n      <p>\n        The use of <M>n</M> is only valid within the context of a domain mapping, attempting\n        to use <M>n</M> within a color function will result in an error.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst ConstantOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Constant\"\n      functionExamples={[\"32\", \"-63\", \"0.232\"]}\n      domainExamples={[\"0\", \"-602\", \"54.45\"]}\n    >\n      <p>\n        Any integer or real number written in decimal notation.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst AdditionOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Addition\"\n      functionExamples={[\"x + y\", \"(x + 32)*y\", \"x^2 + y^2\", \"add(x,y)\", \"add(x^2, y^2)\", \"add(x, y, 37, x*y)\",\n                         \"plus(x, y)\", \"plus(x^2, y // x)\"]}\n      domainExamples={[\"n + 27\", \"n^2 + n\", \"(n + 0.5)^3\", \"add(n, 250)\", \"add(-23, n, n^2)\", \"plus(n, n^3)\"]}\n      operators={[\"+\"]}\n      handles={[\"add\", \"plus\"]}\n      arguments=\"2 or more\"\n    >\n      <p>\n        The <i>Addition</i> operation accepts two or more arguments and returns the sum of\n        all the arguments provided.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst SubtractionOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Subtraction\"\n      functionExamples={[\"x - y\", \"(x - 32)*y\", \"x^2 - y^2\", \"sub(x,y)\", \"sub(x^2, y^2)\", \"sub(x, y, 37, x*y)\",\n                         \"subtract(x^3, y^2)\", \"minus(x^3, y^2, x, y^0.5)\"]}\n      domainExamples={[\"n - 250\", \"n^2 - n\", \"sub(n, 500)\", \"sub(n^4, n^3, n^2, n)\", \"subtract(n, 50)\",\n                       \"subtract(ln(n), n + 250)\", \"minus(0.5*n, 20)\"]}\n      handles={[\"sub\", \"subtract\", \"minus\"]}\n      operators={[\"-\"]}\n      arguments=\"2 or more\"\n    >\n      <p>\n        The <i>Subtraction</i> operation accepts two or more arguments and returns the difference\n        of the first argument with the sum of the proceeding arguments. For\n        example, <M>sub(10, 3, 7)</M> would return <M>10 - (3 + 7) = 10 - 10 = 0</M>.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst MultiplicationOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Multiplication\"\n      functionExamples={[\"x * y\", \"(x | y)*y\", \"2*x^2 + 4*y^2\", \"mult(x,y)\", \"times(x^2, y^2)\", \"mult(x, y, 37, x*y)\",\n                         \"product(x // y, y // x)\", \"prod(x - y, x + y)\"]}\n      domainExamples={[\"4*n\", \"mult(n - 50, n + 50)\", \"times(n, n - 25, n - 50, n - 75)\",\n                       \"product(50, n & 50)\", \"prod(5*n, n + 5)\"]}\n      handles={['mult', \"mutiply\", \"times\", \"product\", \"prod\"]}\n      operators={['*']}\n      arguments=\"2 or more\"\n    >\n      <p>\n        The <i>Multiplication</i> operation accepts two or more arguments and returns the product\n        of all the arguments provided.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst DivisionOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Division\"\n      functionExamples={[\"x / y\", \"(x | y) / y\", \"2*x^2 / 4*y^2\", \"div(x,y)\", \"div(x^2, y^2)\"]}\n      domainExamples={[\"n / 2\", \"500 / n\", \"div(n^2, n - 50)\", \"divide(n + 5, n - 5)\"]}\n      arguments=\"2\"\n      handles={[\"div\", \"divide\"]}\n      operators={['/']}\n    >\n      <p>\n        The <i>Division</i> operation accepts two arguments and returns the result of\n        diving the first argument by the second. In the event the second argument\n        is <M>0</M>, the division operation returns <M>0</M>.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst PowerOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Power\"\n      functionExamples={[\"x^2\", \"(x | y)^5\", \"2*x^2 + 4*y^2\", \"pow(x*y,2)\", \"pow(x, y & x)\"]}\n      domainExamples={[\"n^2\", \"pow(n, 2)\", \"power(n, 0.5)\", \"raise(n + 50, 2)\"]}\n      handles={[\"pow\", \"power\", \"raise\"]}\n      operators={[\"^\"]}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>Power</i> operation accepts two arguments and returns the result of raising\n        the first argument to the power of the second argument.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst ModulusOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Modulus\"\n      functionExamples={[\"x // y\", \"(x | y) // y\", \"2*x^2 // 4*y^2\", \"mod(x,y)\", \"modulus(x^2, y^2)\"]}\n      domainExamples={[\"n // 50\", \"500 // n\", \"mod(n^2, 100)\", \"modulus(sin(n), cos(n))\"]}\n      handles={[\"mod\", \"modulus\"]}\n      operators={['//']}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>Modulus</i> opeation accepts two arguments and returns the remainder of the first\n        argument when divided by the second argument. In the event the second argument\n        is <M>0</M>, the modulus operation is defined to return <M>0</M>.\n      </p>\n      <p>\n        Learn more about modular arithmetic on <Wikipedia href=\"https://en.wikipedia.org/wiki/Modular_arithmetic\" />\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst AbsoluteValueOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Absolute Value\"\n      functionExamples={[\"abs(x - y)\", \"absolute(x^3)\"]}\n      domainExamples={[\"abs(-1*n + ln(n))\", \"absolute(n - 250)\"]}\n      handles={[\"abs\", \"absolute\"]}\n      arguments=\"1\"\n    >\n      The <i>Absolute Value</i> operation accepts a single argument and returns\n      it's absolute value.\n    </OperationInfo>\n  );\n}\n\nconst OrOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Logical: OR\"\n      functionExamples={[\"x | y\", \"or(x^2, y^2)\"]}\n      domainExamples={[\"n | (n - 50)\", \"or(n - 25, n + 25)\"]}\n      handles={[\"or\"]}\n      operators={[\"|\"]}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>OR</i> operation accepts two operations as input. The values\n        from both arguments are rounded to the nearest integer, and the bitwise\n        <i>or</i> of those values is returned.\n      </p>\n      <p>\n        Learn more about <i>logical OR</i> on <Wikipedia href=\"https://en.wikipedia.org/wiki/Logical_disjunction\" />.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst AndOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Logical: AND\"\n      functionExamples={[\"x & y\", \"and(x^2, y^2)\"]}\n      domainExamples={[\"n & (n - 50)\", \"and(n - 25, n + 25)\"]}\n      handles={['and']}\n      operators={['&']}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>AND</i> operation accepts two operations as input. The values\n        from both arguments are rounded to the nearest integer, and the bitwise\n        <i>and</i> of those values is returned.\n      </p>\n      <p>\n        Learn more about <i>logical AND</i> on <Wikipedia href=\"https://en.wikipedia.org/wiki/Logical_conjunction\" />.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst XorOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Logical: XOR\"\n      functionExamples={[\"x || y\", \"xor(x^2, y^2)\"]}\n      domainExamples={[\"n || (n - 50)\", \"xor(n - 25, n + 25)\"]}\n      handles={[\"xor\"]}\n      operators={['||']}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>XOR</i> operation accepts two operations as input. The values\n        from both arguments are rounded to the nearest integer, and the bitwise\n        <i>xor</i> of those values is returned.\n      </p>\n      <p>\n        Learn more\n        about <i>logical XOR</i> on <Wikipedia href=\"https://en.wikipedia.org/wiki/Exclusive_or\" />.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst IffOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Logical: If and Only If\"\n      functionExamples={[\"x <=> y\", \"iff(x^2, y^2)\"]}\n      domainExamples={[\"n <=> (n - 50)\", \"iff(n - 25, n + 25)\"]}\n      handles={[\"iff\", \"ifandonlyif\"]}\n      operators={[\"<=>\"]}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>If and Only If</i> operation accepts two operations as input. The values\n        from both arguments are rounded to the nearest integer, and the bitwise\n        <i>if and only if</i> of those values is returned.\n      </p>\n      <p>\n        Learn more about <i>logical If and Only If</i> on <Wikipedia href=\"https://en.wikipedia.org/wiki/If_and_only_if\" />.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst ImpliesOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Logical: Implies\"\n      functionExamples={[\"x => y\", \"implies(x^2, y^2)\"]}\n      domainExamples={[\"n => (n - 50)\", \"implies(n - 25, n + 25)\"]}\n      handles={[\"implies\"]}\n      operators={[\"=>\"]}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>Implies</i> operation accepts two operations as input. The values\n        from both arguments are rounded to the nearest integer, and the bitwise\n        <i>implies</i> of those values is returned.\n      </p>\n      <p>\n        Learn more about <i>logical Implies</i> on <Wikipedia href=\"https://en.wikipedia.org/wiki/Material_conditional\" />.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst NandOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Logical: Nand\"\n      functionExamples={[\"x -& y\", \"nand(x^2, y^2)\"]}\n      domainExamples={[\"n -& (n - 50)\", \"nand(n - 25, n + 25)\"]}\n      handles={['nand', \"notand\"]}\n      operators={['-&', '!&']}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>Nand</i> operation accepts two operations as input. The value\n        from both arguments are rounded to the nearest integer, and the bitwise\n        <i>nand</i> of those values is returned.\n      </p>\n      <p>\n        Learn more about <i>logical NAND</i> on <Wikipedia href=\"https://en.wikipedia.org/wiki/NAND_logic\" />.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst NorOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Logical: Nor\"\n      functionExamples={[\"x -| y\", \"nor(x^2, y^2)\"]}\n      domainExamples={[\"n -| (n - 50)\", \"nor(n - 25, n + 25)\"]}\n      handles={['nor', 'notor']}\n      operators={['-|', '!|']}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>Nor</i> operation accepts two operations as input. The values\n        from both arguments are rounded to the nearest integer, and the bitwise\n        <i>nor</i> of those values is returned.\n      </p>\n      <p>\n        Learn more about <i>logical NOR</i> on <Wikipedia href=\"https://en.wikipedia.org/wiki/NOR_logic\" />\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst NotOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Logical: Not\"\n      functionExamples={[\"not(x)\", \"not(x || y)\"]}\n      domainExamples={[\"not(n)\", \"not(n^2)\"]}\n      handles={['not']}\n      arguments=\"1\"\n    >\n      <p>\n        The <i>Not</i> operation accepts a single operation as input. The value\n        produced by this argument is rounded to the nearest integer, and the\n        bitwise <i>not</i> of that value is returned.\n      </p>\n      <p>\n        Learn more about <i>logical NOT</i> on <Wikipedia href=\"https://en.wikipedia.org/wiki/Negation\" />\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst LessThanOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Less Than\"\n      functionExamples={[\"x < y\", \"lt(x - y, y - x)\"]}\n      domainExamples={[\"(n - abs(n)) < 0\", \"less(n - abs(n), 0)\"]}\n      handles={['lt', 'less', 'lessthan']}\n      operators={['<']}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>Less Than</i> operation accepts two arguments as input. If the first argument is strictly less than the second argument, then <M>1</M> is returned; otherwise, <M>0</M> is returned.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst LessThanEqualsOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Less Than Equals\"\n      functionExamples={[\"x <= y\", \"leq(x - y, y - x)\"]}\n      domainExamples={[\"(n - abs(n)) <= 0\", \"lessequals(n - abs(n), 0)\"]}\n      handles={['leq', 'lessequals']}\n      operators={['<=']}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>Less Than Equals</i> operation accepts two arguments as input. If the first argument is less than or equal to the second argument, then <M>1</M> is returned; otherwise, <M>0</M> is returned.\n      </p>\n    </OperationInfo>\n  );\n}\n\n\nconst EqualsOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Equals\"\n      functionExamples={[\"(x & y) = 0\", \"equals(x, y)\"]}\n      domainExamples={[\"(n - abs(n)) = 0\", \"equals(n - abs(n), 0)\"]}\n      handles={['equals', 'eq']}\n      operators={['=']}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>Equals</i> operation accepts two arguments as input. If the given\n        arguments are equal, then <M>1</M> is returned. If the given arguments are\n        not equal, then <M>0</M> is returned.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst GreaterThanOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Greater Than\"\n      functionExamples={[\"x > y\", \"gt(x - y, y - x)\"]}\n      domainExamples={[\"(n - abs(n)) > 0\", \"greater(n - abs(n), 0)\"]}\n      handles={['gt', 'greater']}\n      operators={['>']}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>Greater Than</i> operation accepts two arguments as input. If the first argument is strictly greater than the second argument, then <M>1</M> is returned; otherwise, <M>0</M> is returned.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst GreaterThanEqualsOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Greater Than Equals\"\n      functionExamples={[\"x >= y\", \"geq(x - y, y - x)\"]}\n      domainExamples={[\"(n - abs(n)) >= 0\", \"greaterequals(n - abs(n), 0)\"]}\n      handles={['geq', 'greaterequals']}\n      operators={['>=']}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>Greater Than Equals</i> operation accepts two arguments as input. If the first argument is greater than or equal to the second argument, then <M>1</M> is returned; otherwise, <M>0</M> is returned.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst MaxOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Max\"\n      functionExamples={[\"max(x, y)\", \"greatest(x - y, y - x)\"]}\n      domainExamples={[\"max(180*sin(n), 180*cos(n))\"]}\n      handles={['max', 'greatest']}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>Max</i> operation accepts two arguments as input and returns the argument of greatest value.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst MinOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Min\"\n      functionExamples={[\"min(x, y)\", \"least(x - y, y - x)\"]}\n      domainExamples={[\"min(180*sin(n), 180*cos(n))\"]}\n      handles={['min', 'least']}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>Min</i> operation accepts two arguments as input and returns the argument of least value.\n      </p>\n    </OperationInfo>\n  );\n}\n\n\nconst WithinRangeOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Within Range\"\n      functionExamples={[\"within(-1, 1, x / y)\", \"contains(x, y, 0)\"]}\n      domainExamples={[\"within(64, 128, n)\"]}\n      handles={['within', 'contains']}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>Within Range</i> operation accepts three arguments as input. This operation checks if the third argument is greater than or equal to the least of the first two arguments and less than or equal to the greater of the first two arguments. If the third argument is contained within this range, then <M>1</M> is returned; otherwise, <M>0</M> is returned.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst OutsideRangeOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Outside Range\"\n      functionExamples={[\"out(-1, 1, x / y)\", \"outside(x, y, 0)\"]}\n      domainExamples={[\"out(64, 128, n)\"]}\n      handles={['out', 'outside']}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>Outside Range</i> operation accepts three arguments as input. This operation performs the opposite check of the <i>Within Range</i> operation. As such, this operation checks if the third argument is strictly less than the least of the first two arguments or strictly greater than the greater of the first two arguments. If the third argument meets either criteria, then <M>1</M> is returned; otherwise, <M>0</M> is returned.\n      </p>\n    </OperationInfo>\n  );\n}\n\n\nconst CeilingOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Rounding: Ceiling\"\n      functionExamples={[\"ceil(x)\", \"ceiling(x / y)\"]}\n      domainExamples={[\"ceil(n / 2)\", \"ceiling(n*sin(n))\"]}\n      handles={['ceil', 'ceiling']}\n      arguments=\"1\"\n    >\n      <p>\n        The <i>Ceiling</i> operation accepts a single argument and returns\n        the least integer of equal or greater value compared to the argument.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst FloorOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Rounding: Floor\"\n      functionExamples={[\"floor(x)\", \"floor(x / y)\"]}\n      domainExamples={[\"floor(n / 2)\", \"floor(n*sin(n))\"]}\n      handles={['floor']}\n      arguments=\"1\"\n    >\n      <p>\n        The <i>Floor</i> operation accepts a single argument and returns\n        the greatest integer of equal or lesser value compared to the argument.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst RoundToNearestOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Rounding: Round to Nearest Integer\"\n      functionExamples={[\"round(x)\", \"nearest(x / y)\"]}\n      domainExamples={[\"round(n / 2)\", \"nearest(n*sin(n))\"]}\n      handles={['round', 'nearest', 'int', 'integer']}\n      arguments=\"1\"\n    >\n      <p>\n        The <i>Round to Nearest Integer</i> operation accepts a single argument as input\n        and returns that argument rounded to the nearest integer.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst SinOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Trigonometry: Sine\"\n      functionExamples={[\"sin(x)\", \"sin(x^2 + y^2)\"]}\n      domainExamples={[\"sin(n)\", \"sine(n^2)\"]}\n      handles={['sin', 'sine']}\n      arguments=\"1\"\n    >\n      <p>\n        The <i>Sine</i> operation accepts a single argument as input and returns\n        its trigometric sine of it's value.\n      </p>\n      <p>\n        Learn more about sine on <Wikipedia href=\"https://en.wikipedia.org/wiki/Trigonometric_functions\" />.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst CosinOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Trigonometry: Cosine\"\n      functionExamples={[\"cos(x)\", \"cos(x^2 + y^2)\"]}\n      domainExamples={[\"cos(n)\", \"cosine(n^2)\"]}\n      handles={['cos', 'cosine']}\n      arguments=\"1\"\n    >\n      <p>\n        The <i>Cosine</i> operation accepts a single argument as input and returns\n        its trigometric cosine of it's value.\n      </p>\n      <p>\n        Learn more about cosine on <Wikipedia href=\"https://en.wikipedia.org/wiki/Trigonometric_functions\" />.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst TangentOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Trigonometry: Tangent\"\n      functionExamples={[\"tan(x)\", \"tangent(x^2 + y^2)\"]}\n      domainExamples={[\"tan(n)\", \"tangent(n^2)\"]}\n      handles={['tan', 'tangent']}\n      arguments=\"1\"\n    >\n      <p>\n        The <i>Tangent</i> operation accepts a single argument as input and returns\n        its trigometric tangent of it's value.\n      </p>\n      <p>\n        Learn more about tangent on <Wikipedia href=\"https://en.wikipedia.org/wiki/Trigonometric_functions\" />.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst SecantOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Trigonometry: Secant\"\n      functionExamples={[\"sec(x)\", \"secant(x^2 + y^2)\"]}\n      domainExamples={[\"sec(n)\", \"secant(n^2)\"]}\n      handles={['sec', 'secant']}\n      arguments=\"1\"\n    >\n      <p>\n        The <i>Secant</i> operation accepts a single argument as input and returns\n        its trigometric secant of it's value. In the event the sine of the input\n        is <M>0</M>, then <M>0</M> is returned.\n      </p>\n      <p>\n        Learn more about secant on <Wikipedia href=\"https://en.wikipedia.org/wiki/Trigonometric_functions\" />.\n      </p> \n    </OperationInfo>\n  );\n}\n\nconst CosecantOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Trigonometry: Cosecant\"\n      functionExamples={[\"csc(x)\", \"cosecant(x^2 + y^2)\"]}\n      domainExamples={[\"csc(n)\", \"cosecant(n^2)\"]}\n      handles={['csc', 'cosecant']}\n      arguments=\"1\"\n    >\n      <p>\n        The <i>Cosecant</i> operation accepts a single argument as input and returns\n        its trigometric cosecant of it's value. In the event the cosine of the input\n        is <M>0</M>, then <M>0</M> is returned.\n      </p>\n      <p>\n        Learn more about cosecant on <Wikipedia href=\"https://en.wikipedia.org/wiki/Trigonometric_functions\" />.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst CotangentOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Trigonometry: Cotangent\"\n      functionExamples={[\"cot(x)\", \"cotangent(x^2 + y^2)\"]}\n      domainExamples={[\"cot(n)\", \"cotangent(n^2)\"]}\n      handles={['cot', 'cotangent']}\n      arguments=\"1\"\n    >\n      <p>\n        The <i>Cotangent</i> operation accepts a single argument as input and returns\n        its trigometric cotangent of it's value. In the event the tangent of the input\n        is <M>0</M>, then <M>0</M> is returned.\n      </p>\n      <p>\n        Learn more about cotangent on <Wikipedia href=\"https://en.wikipedia.org/wiki/Trigonometric_functions\" />.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst LogarithmOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Logarithm\"\n      functionExamples={[\"log(2, x)\", \"log(10, x^2 + y^2)\"]}\n      domainExamples={[\"log(2, n)\", \"logarithm(n, 500)\"]}\n      handles={['log', 'logarithm']}\n      arguments=\"2\"\n    >\n      <p>\n        The <i>Logarithm</i> operation accepts two arguments as input. The operation\n        uses the first argument as the base, and then calculates the logarithm of\n        the second argument using that base. In the event either argument is negative,\n        it's absolute value is used instead. In the event either argument is <M>0</M>,\n        then <M>0</M> is returned.\n      </p>\n      <p>\n        Learn more about logarithms\n        on <a href=\"https://en.wikipedia.org/wiki/Logarithm\" target=\"_blank\" rel=\"noopener noreferrer\">\n          wikipedia\n        </a>.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst NaturalLogOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Natural Logarithm\"\n      functionExamples={[\"ln(x)\", \"ln(x^2 + y^2)\"]}\n      domainExamples={[\"ln(n)\", \"lognat(n^2)\"]}\n      handles={['ln', 'natural', 'lognat', 'natlog', 'naturallogarithm']}\n      arguments=\"1\"\n    >\n      <p>\n        The <i>Natural Logarithm</i> operation accepts a single argument as input\n        and returns the natural logairthm of that value. In the event the argument\n        is negative, then it's absolute value is used instead. In the event the\n        argument is 0, then <M>0</M> is returned.\n      </p>\n      <p>\n        Learn more about the natural logarithm\n        on <a href=\"https://en.wikipedia.org/wiki/Natural_logarithm\" target=\"_blank\" rel=\"noopener noreferrer\">\n          wikipedia\n        </a>.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst NthGeneratorOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Nth Generator\"\n      functionExamples={[\"nth(541, x^2 + y^2)\", \"gen(2131, x & y)\"]}\n      domainExamples={[\"nth(97, n)\", \"gen(23, n^2)\"]}\n      handles={['nth', 'gen', 'generator']}\n      arguments=\"1\"\n    >\n      <p>\n        The <i>Nth Generator</i> opeartion accepts two arguments as input. This operation returns the values of the generators for a group of integers under mutliplication modulo a prime number.\n      </p>\n      <p>\n        As in the <i>Discrete Logarith</i> and <i>Diffie-Hellman</i> operations, the first argument must be a <i>Constant</i> operation having prime number as it's value, any other input will cause an error. This value determines which group of integers to be used.\n      </p>\n      <p>\n        The second argument can be any operation. This arguments value is automatically rounded to the nearest integer, then replaced by the remainder when divided by the prime number specified by the first argument. The remainder is then used to determine which generator for the group should be retrieved as follows: Given the remainder <M>n</M>, the <M>n</M>th least generator is returned; where a remainder of <M>0</M> indicates that the least valued generator should be returned.\n      </p>\n      <p>\n        Learn more about the generators on <Wikipedia href=\"https://en.wikipedia.org/wiki/Primitive_root_modulo_n\" />.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst DiscreteLogOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Discrete Logarithm\"\n      functionExamples={[\"dl(97, 7, x & y)\", \"dlog(23, 5, x^2 + y^2), disc(23, 5, x | y)\"]}\n      domainExamples={[\"dlog(97, 5, n)\"]}\n      handles={['dl', 'dlog', 'discrete', 'disc', 'discretelogarithm']}\n      arguments=\"3\"\n    >\n      <p>\n        The <i>Discrete Logarithm</i> operation accepts three arguments as input. The first\n        two arguments are used to define a group and a generator for that group to be used\n        within the discrete logairthm operation. While the last argument defines value to\n        solve the discrete logarithm for.\n      </p>\n      <p>\n        The first input must\n        be a <i>Constant</i> operation having a prime number as it's value, any other input will result in an error.\n        The prime number will define the group size in which to calculate the logarithm in.\n      </p>\n      <p>\n        The second input must also be a constant, and it's value must corresponds to\n        one of the <i>generators</i> for chosen group.\n      </p>\n      <p>\n        The final input can be any operation and represents the value to solve the discrete\n        logairthm for within the chosen group and given generator. This value is automatically\n        rounded to the nearest integer prior to attempting to solve the logarithm. In the event\n        the logarithm cannot be solved, then <M>-1</M> is returned.\n      </p>\n      <p>\n        Learn more about discrete logarithms on <Wikipedia href=\"https://en.wikipedia.org/wiki/Discrete_logarithm\" />.\n      </p>\n    </OperationInfo>\n  );\n}\n\nconst DiffieHellmanOperationInfo = (props) => {\n  return (\n    <OperationInfo\n      operationName=\"Diffie-Hellman Key Exchange\"\n      functionExamples={[\"df(97, 7, x & y, x | y)\", \"dif(23, 5, x^2 + y^2, (x + y)^2)\"]}\n      domainExamples={[\"df(97, 5, n & n^2, n | n^2)\"]}\n      handles={[\"df\", \"dif\", \"diffie\", \"hellman\", \"diffiehellman\"]}\n      arguments=\"4\"\n    >\n      <p>\n        The <i>Diffie-Hellman Key Exchange</i> operation accepts four arguments as input. The arguments define the context of a key exchange, and the operation returns the shared secret produced by the defined exchange. Similar to the <i>Discrete Logarithm</i> operation, the first two arguments of the operation define a group and a generator for that group. While the last two arguments define the the 'secret keys' of the two actors within exchange.\n      </p>\n      <p>\n        The first argument must be a <i>Constant</i> operation having a prime number as it's value. Any other input to this argument will result in an error.\n      </p>\n      <p>\n        The second input must also be a constant, and it's value must corresponds to\n        one of the <i>generators</i> for chosen group. Any other input to this argument will result in an error.\n      </p>\n      <p>\n        The final two inputs to the Diffie Hellman operation are the 'secret' integers of the two actors in the exchange. Their values are automatically rounded to the nearest integer prior to being used within the exchange. In the event the exchange cannot be completed, then <M>-1</M> is returned.\n      </p>\n      <p>\n        Learn more about the Diffie Hellman key exchange on <Wikipedia href=\"https://en.wikipedia.org/wiki/Diffie%E2%80%93Hellman_key_exchange\" />.\n      </p>\n    </OperationInfo>\n  );\n}\n\n\nexport const OperationInfoConsole = () => {\n  return (\n    <div style={{padding: \"2vw\"}}>\n    <ArticleSection>\n      <Card style={{marginBottom: \"2vh\"}}>\n        <Card.Header><div align=\"center\"><h2>Operations</h2></div></Card.Header>\n        <Card.Body>\n          Listed below are all the supported operations. Each operation provides a description\n          of the function; how many arguments the operation consumes, along with any constraints\n          on those arguments; the operations's handles (if applicable); the operation's\n          binary operators (if applicable); along with examples of using the operation\n          as both a color function or a domain mapping.\n        </Card.Body>\n      </Card>\n\n      <XOperationInfo />\n      <YOperationInfo />\n      <NOperationInfo />\n\n      <ConstantOperationInfo />\n\n      <AdditionOperationInfo />\n      <SubtractionOperationInfo />\n      <MultiplicationOperationInfo />\n      <DivisionOperationInfo />\n      <PowerOperationInfo />\n\n      <FloorOperationInfo />\n      <CeilingOperationInfo />\n      <RoundToNearestOperationInfo />\n      <AbsoluteValueOperationInfo />\n\n      <SinOperationInfo />\n      <CosinOperationInfo />\n      <TangentOperationInfo />\n      <SecantOperationInfo />\n      <CosecantOperationInfo />\n      <CotangentOperationInfo />\n\n      <LogarithmOperationInfo />\n      <NaturalLogOperationInfo />\n\n      <MaxOperationInfo />\n      <MinOperationInfo />\n\n      <ModulusOperationInfo />\n\n      <LessThanOperationInfo />\n      <LessThanEqualsOperationInfo />\n      <EqualsOperationInfo />\n      <GreaterThanOperationInfo />\n      <GreaterThanEqualsOperationInfo />\n\n      <WithinRangeOperationInfo />\n      <OutsideRangeOperationInfo />\n\n      <OrOperationInfo />\n      <AndOperationInfo />\n      <XorOperationInfo />\n      <ImpliesOperationInfo />\n      <IffOperationInfo />\n      <NorOperationInfo/>\n      <NandOperationInfo />\n      <NotOperationInfo />\n\n      <DiscreteLogOperationInfo />\n      <DiffieHellmanOperationInfo />\n      <NthGeneratorOperationInfo />\n\n    </ArticleSection>\n    </div>\n  );\n};\n\n\nexport default OperationInfoConsole;\n","import React from 'react';\n\nimport InnerNav from '../../components/inner-nav/InnerNav';\nimport { MainContent, MainContentSection } from '../../components/main-content/MainContent';\n\nimport Console from '../../components/color-graphing/console/Console';\nimport GraphingInfo from '../../components/color-graphing/graphing-info/GraphingInfo';\nimport OperationInfo from '../../components/color-graphing/operation-info/OperationInfo';\n\nimport { extractPageFromContextPath } from '../../tools/general';\n\nclass ColorGraphPage extends React.Component {\n\n  constructor(props) {\n    super(props);\n    this.state = { page: \"info\" };\n  }\n\n  navClicked(page) {\n    this.setState({ page: page })\n  }\n\n  render() {\n\n    let content = null;\n    let page = extractPageFromContextPath();\n    if (page === \"console\") {\n      content = (<Console />);\n    } else if (page === 'operations') {\n      content = (<OperationInfo />);\n    } else {\n      page = \"info\";\n      content = (<GraphingInfo goToOperationsTab={() => { this.navClicked(\"operations\") }} />);\n    }\n\n    let consoleClass = page === \"console\" ? \"nav-link active\" : \"nav-link\";\n    let infoClass = page === \"info\" ? \"nav-link active\" : \"nav-link\";\n    let operationsClass = page === \"operations\" ? \"nav-link active\" : \"nav-link\";\n\n    return (\n      <MainContent>\n        <MainContentSection>\n          <InnerNav title=\"Color Graphing\">\n            <a\n                href=\"/colorgraphing#console\"\n                className={consoleClass}\n                onClick={() => { this.navClicked(\"console\") }}\n              >\n                Console\n            </a>\n              <a\n                href=\"/colorgraphing#info\"\n                className={infoClass}\n                onClick={() => { this.navClicked(\"info\") }}\n              >\n                Information\n            </a>\n              <a\n                href=\"/colorgraphing#operations\"\n                onClick={() => { this.navClicked(\"operations\") }}\n                className={operationsClass}\n              >\n                Operations\n            </a>\n          </InnerNav>\n          {content}\n        </MainContentSection>\n      </MainContent>\n    )\n  }\n}\n\nexport default ColorGraphPage;\n","import React from 'react';\n\nimport './home_page.css';\n\nconst HomePage = () => {\n  return (\n    <header className=\"App-header\">\n      <h1 className=\"App-logo\">Awkward Math</h1>\n      <p>\n        Embrace your inner mathemagician.\n      </p>\n    </header>\n  );\n};\n\nexport default HomePage;\n","import React from 'react';\n\nimport Card from 'react-bootstrap/Card';\n\nimport { MainContentSection } from '../main-content/MainContent';\n\nimport LeftArrowIcon from '../icons/LeftArrowIcon';\nimport RightArrowIcon from '../icons/RightArrowIcon';\n\nimport './youtube_video.css';\n\nconst YoutubeVideo = React.memo((props) => {\n  if (props.video == null) return;\n\n  return (\n    <Card>\n      <Card.Header>\n        <h4 className=\"video-title\">{props.video.title}</h4>\n        <span className=\"video-arrows\">\n          <span onClick={props.previousVideo}><a>\n            <LeftArrowIcon color=\"#aaaaaa\" />\n          </a></span>\n          <span onClick={props.nextVideo}><a>\n            <RightArrowIcon color=\"#aaaaaa\" />\n          </a></span>\n        </span>\n      </Card.Header>\n\n      <Card.Body>\n        <div className=\"background-black video-box\">\n          <iframe\n            frameborder=\"0\"\n            allowfullscreen=\"allowfullscreen\"\n            src={props.video.video_url}\n            allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n          />\n        </div>\n\n        <Card.Text>\n          <div className=\"video-description\">\n            <h6>About</h6>\n            <p>{props.video.description}</p>\n          </div>\n        </Card.Text>\n      </Card.Body>\n    </Card>\n  );\n});\n\nexport default YoutubeVideo;\n","import axios from 'axios';\n\nexport default class VideoService {\n  fetchVideos() {\n    return axios.get('api/video');\n  }\n}\n","import React from 'react';\n\nimport { MainContent, MainContentSection } from '../../components/main-content/MainContent';\nimport YoutubeVideo from '../../components/youtube-video/YoutubeVideo';\n\nimport VideoService from '../../services/video.service';\n\nclass VideosPage extends React.Component {\n\n  videoService : VideoService;\n\n  constructor(props) {\n    super(props);\n\n    this.videoService = new VideoService();\n\n    this.state = {\n      videos: [],\n      current_video: null,\n      current_video_index: null\n    };\n  }\n\n  componentDidMount() {\n    this.videoService.fetchVideos().then(response => {\n      this.setState({\n          videos: response.data,\n          current_video: response.data[0],\n          current_video_index: 0\n      })\n    }).catch(error => console.log(error))\n  }\n\n  next_video() {\n    let current_index = this.state.current_video_index;\n    if (current_index === null) return;\n\n    current_index = (current_index + 1) % (this.state.videos.length);\n    this.setState({\n      current_video: this.state.videos[current_index],\n      current_video_index: current_index\n    });\n  }\n\n  previous_video() {\n    let current_index = this.state.current_video_index;\n    if (current_index === null) return;\n\n    if (current_index === 0) {\n      current_index = this.state.videos.length - 1;\n    } else {\n      current_index -= 1;\n    }\n\n    this.setState({\n      current_video: this.state.videos[current_index],\n      current_video_index: current_index\n    });\n  }\n\n  render() {\n    return (\n      <MainContent>\n        <MainContentSection>\n          <YoutubeVideo\n            video={this.state.current_video}\n            nextVideo={(e) => { this.next_video() }}\n            previousVideo={(e) => { this.previous_video() }}\n          />\n        </MainContentSection>\n      </MainContent>\n    );\n  }\n}\n\nexport default VideosPage;\n","import React from 'react';\n\nimport { BrowserRouter as Router, Route, Switch } from \"react-router-dom\";\nimport { browserHistory } from 'react-dom';\n\nimport PageNavigation from './components/page-navigation/PageNavigation';\n\nimport ArtOfMathProofPage from './pages/art-of-math-proof-page/ArtOfMathProofPage';\nimport AwkwardStateMachinesPage from './pages/awkward-state-machines-page/AwkwardStateMachinesPage';\nimport ColorGraphPage from './pages/color-graph-page/ColorGraphPage';\nimport HomePage from './pages/home-page/HomePage';\nimport VideosPage from './pages/videos-page/VideosPage';\n\nimport 'bootstrap/dist/css/bootstrap.css';\nimport './app.css';\n\n\nclass App extends React.Component {\n  render() {\n    return (\n      <Router history={browserHistory}>\n      <div className=\"site-container\">\n        <PageNavigation/>\n        <Switch>\n          <Route exact path=\"/\" component={HomePage}></Route>\n          <Route path=\"/articles/art_of_math_proof\" component={ArtOfMathProofPage}></Route>\n          <Route path=\"/awkward_state_machines\" component={AwkwardStateMachinesPage}></Route>\n          <Route path=\"/colorgraphing\" component={ColorGraphPage}></Route>\n          <Route path=\"/videos\" component={VideosPage}></Route>\n          <Route component={HomePage}></Route>\n        </Switch>\n      </div>\n      </Router>\n    );\n  }\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\n\nReactDOM.render(<App />, document.getElementById('root'));","module.exports = __webpack_public_path__ + \"static/media/loading.551bf697.gif\";","module.exports = \"<div class=\\\"maketitle\\\">\\n    <h2 class=\\\"titleHead\\\">The Art of Mathematical Proof</h2>\\n</div>\\n<h3 class=\\\"sectionHead\\\"><span class=\\\"titlemark\\\">1 </span> <a id=\\\"x1-10001\\\"></a>Introduction</h3>\\n<!--l. 10-->\\n<p class=\\\"noindent\\\">What is a math proof? That is, after all, why you are reading this article - to\\n    answer this innocent looking question. Well I&#8217;m not going to answer that, at\\n    least not right away. Instead, I want you to think about the following\\n    statements:\\n    <ul class=\\\"itemize1\\\">\\n        <li class=\\\"itemize\\\">The sum of two even integers is even.\\n        </li>\\n        <li class=\\\"itemize\\\">The sum of two odd integers is even.\\n        </li>\\n        <li class=\\\"itemize\\\">The sum of an even and an odd integer is odd.</li>\\n    </ul>\\n    <!--l. 17-->\\n    <p class=\\\"indent\\\"> You know these statements to be true, but how do you know they are true,\\n        <span class=\\\"cmti-12\\\">why </span>are they true? Maybe you quickly added some examples in your head, each\\n        example affirming your belief in these statements. That may be good enough to\\n        have satiated any doubt you had; after all, patterns often arise in numbers - no\\n        doubt something you noticed in your math courses growing up. However, this\\n        form of confirmation doesn&#8217;t answer the more important question - <span class=\\\"cmti-12\\\">why</span>\\n        are these statements true? All of mathematical theory is focused around\\n        answering the question of <span class=\\\"cmti-12\\\">why</span>: <span class=\\\"cmti-12\\\">why </span>is this statement true; <span class=\\\"cmti-12\\\">why </span>is this\\n        impossible; <span class=\\\"cmti-12\\\">why </span>must this object exist; <span class=\\\"cmti-12\\\">why </span>will this process always yeild\\n        a correct result... you get the point. In order to answer every <span class=\\\"cmti-12\\\">why </span>we\\n        encounter, mathematics employs the mathematical proof. Quite simply, a\\n        mathematical proof is the &#8217;proof&#8217; that something must be, or can&#8217;t be possibly be\\n        true.\\n        <!--l. 19-->\\n        <p class=\\\"indent\\\"> We are all famaliar with the stereotypical child that is constantly asking <span class=\\\"cmti-12\\\">why</span>:\\n            <span class=\\\"cmti-12\\\">why </span>do I have to go to school; <span class=\\\"cmti-12\\\">why </span>is it important to get a job; <span class=\\\"cmti-12\\\">why </span>do we\\n            need money; etc. Mathematicians share many things in common with\\n            this stereotype. They are constantly questioning why, and if the given\\n            explanation is not to their satisfaction, they will then question why the\\n            very explanation must be true, and continue on doing so until you&#8217;ve\\n            eliminated all doubt in their minds. However, unlike our imaginary child, it is\\n            possible to eliminate a mathematician&#8217;s doubt. But in order for us to do\\n            so, we must present our mathematician with a logical argument that\\n            demonstrates the validaty of our statement without leaving any possibility\\n            unaddressed. This logical argument is what mathematics refers to as a\\n            proof.\\n            <!--l. 21-->\\n            <p class=\\\"indent\\\"> Now that you have an idea of what a math proof is, you&#8217;re probably wondering\\n                what one looks like. A proof starts with the facts at hand &#8221;I have two\\n                even integers, therefore I can represent the first number as 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>and the\\n                second as 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k</span>, where <span class=\\\"cmmi-12\\\">j </span>and <span class=\\\"cmmi-12\\\">k </span>are integers because even numbers are\\n                defined to be 2 times some integer.&#8221;, then deduces what must be true given\\n                those facts,&#8221;Therefor, I can represent their sum as (2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k</span>)&#8221;. With\\n                the new information, more facts can then be uncovered &#8221;We can then\\n                factor out the 2 from this representation: (2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k</span>) = 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">j </span>+ <span class=\\\"cmmi-12\\\">k</span>). The\\n                number (<span class=\\\"cmmi-12\\\">j </span>+ <span class=\\\"cmmi-12\\\">k</span>) must be an integer because the sum of two integers is an\\n                integer.&#8221; This process continues on until the truth of the statement is\\n                uncovered, &#8221;I&#8217;ve shown that the sum of the two even numbers is equal to\\n                2 times the integer (<span class=\\\"cmmi-12\\\">j </span>+ <span class=\\\"cmmi-12\\\">k</span>), which means that this number is even by\\n                definition.&#8221;.\\n                <!--l. 23-->\\n                <p class=\\\"indent\\\"> Don&#8217;t worry if you don&#8217;t see why the argument above does in fact prove that\\n                    the sum of two integers is even, we&#8217;ll come back to it soon. Instead, focus on the\\n                    nature of the argument. Notice that there&#8217;s no references to a specific example;\\n                    that each step in the argument was coupled with a justification; that\\n                    eveness was given an explicit definition - these are the hallmarks of a\\n                    proof.\\n                    <!--l. 25-->\\n                    <p class=\\\"indent\\\"> Okay, that&#8217;s great, Will, can you now tell me exactly what a proof is, and how\\n                        I can go about writing one? Well I can&#8217;t... there&#8217;s no easy way to define what a\\n                        proof is, nor a simple set of rules I can give for writing one - it&#8217;d be like defining\\n                        the color red, sure I could tell you its wavelength, but that doesn&#8217;t come close to\\n                        explaining it. What I can do however is teach you how to recognize what is a\\n                        proof and what&#8217;s not, as well as the tools to begin to start proving things on your\\n                        own.\\n                        <!--l. 27-->\\n                        <p class=\\\"noindent\\\">\\n                            <h3 class=\\\"sectionHead\\\"><span class=\\\"titlemark\\\">2 </span> <a id=\\\"x1-20002\\\"></a>The Fundamentals of Theory</h3>\\n                            <!--l. 28-->\\n                            <p class=\\\"noindent\\\">In mathematics, definitions are the building blocks of theory. A definition\\n                                unambiguously and efficiently describes an &#8217;object&#8217;. With an object defined, the\\n                                rest of theory springs forth. First, the properties that are inherent to the\\n                                definition of the object are proved. From there, more complex facts are uncovered,\\n                                and then more, and more, and more (you get where I&#8217;m going). Each new fact\\n                                uses the previous facts and definitions to show that it too must also be true. This\\n                                process of building up facts endows mathematics with enormous accountability.\\n                                By the very nature of our exploration, we can always be confident that the facts\\n                                we discover are in fact true, no matter how far-fetched or complicated they\\n                                appear.\\n                                <!--l. 30-->\\n                                <p class=\\\"indent\\\"> Let&#8217;s start with one of the most simple definitions - the set of integers. We&#8217;ll\\n                                    define the set of integers <span class=\\\"msbm-10x-x-120\\\">&#x2124; </span>to be the counting numbers 1<span class=\\\"cmmi-12\\\">, </span>2<span class=\\\"cmmi-12\\\">, </span>3<span class=\\\"cmmi-12\\\">,... </span>along with 0, and\\n                                    the negative numbers <span class=\\\"cmsy-10x-x-120\\\">-</span>1<span class=\\\"cmmi-12\\\">,</span><span class=\\\"cmsy-10x-x-120\\\">-</span>2<span class=\\\"cmmi-12\\\">,</span><span class=\\\"cmsy-10x-x-120\\\">-</span>3<span class=\\\"cmmi-12\\\">...</span>. We can represent the integers in set notation:\\n                                    <br class=\\\"newline\\\" /><br class=\\\"newline\\\" />\\n                                    <div class=\\\"centerline\\\"> <span class=\\\"msbm-10x-x-120\\\">&#x2124; </span>= <span class=\\\"cmsy-10x-x-120\\\">{</span><span class=\\\"cmmi-12\\\">...,</span><span class=\\\"cmsy-10x-x-120\\\">-</span>3<span class=\\\"cmmi-12\\\">,</span><span class=\\\"cmsy-10x-x-120\\\">-</span>2<span class=\\\"cmmi-12\\\">,</span><span class=\\\"cmsy-10x-x-120\\\">-</span>1<span class=\\\"cmmi-12\\\">, </span>0<span class=\\\"cmmi-12\\\">, </span>1<span class=\\\"cmmi-12\\\">, </span>2<span class=\\\"cmmi-12\\\">, </span>3<span class=\\\"cmmi-12\\\">,...</span><span class=\\\"cmsy-10x-x-120\\\">}</span> </div>.\\n                                    <br class=\\\"newline\\\" /><br class=\\\"newline\\\" />and we&#8217;ll define an integer to be any number within the set of integers. We&#8217;ll also\\n                                    equip the integers with the familiar operations of addition, subtraction, and\\n                                    multiplication.\\n                                    <!--l. 36-->\\n                                    <p class=\\\"indent\\\"> The attentive reader may have noticed that in the introduction proof, I\\n                                        justified that the sum of <span class=\\\"cmmi-12\\\">j </span>and <span class=\\\"cmmi-12\\\">k </span>was an integer because both <span class=\\\"cmmi-12\\\">j </span>and <span class=\\\"cmmi-12\\\">k </span>are integers.\\n                                        We&#8217;ll accept this statement as fact without proving it to be true. Although simply\\n                                        accepting something to be true seems perilous and illogical, there are times when\\n                                        we cannot escape having to do so. When we accept a statement as fact without\\n                                        proving it, we call it an axiom. An axiom does not need to be proven;\\n                                        instead, the truth of an axiom is self-evident. As such, we never arbitrarily\\n                                        perscribe something axiomatic; rather, we only do so when it is necessary and\\n                                        appropriate.\\n                                        <!--l. 38-->\\n                                        <p class=\\\"indent\\\"> From our axioms and definitions, we then derive lemmas and theorems. A\\n                                            lemma is simply a statement that has been proven to be true, such as: &#8221;The sum\\n                                            of two even integers is even.&#8221; Theorems are no different than lemmas in their\\n                                            design; however, they&#8217;re generally attributed to more important or complex\\n                                            statements. You can think of lemmas as the stepping stones to theorems; in fact,\\n                                            lemmas are often proven for the express purpose of being used within the proof of\\n                                            a theorem.\\n                                            <!--l. 40-->\\n                                            <p class=\\\"indent\\\"> That&#8217;s all there is to math theory. We start with some self evident\\n                                                truths - our axioms. We then define an &#8217;object&#8217; or two and explore all\\n                                                the truths held within it, spitting out lemmas and theorems along the\\n                                                way.\\n                                                <!--l. 42-->\\n                                                <p class=\\\"noindent\\\">\\n                                                    <h3 class=\\\"sectionHead\\\"><span class=\\\"titlemark\\\">3 </span> <a id=\\\"x1-30003\\\"></a>Evenness - What is it?</h3>\\n                                                    <!--l. 43-->\\n                                                    <p class=\\\"noindent\\\">Before we can take a closer look at the proof from the introduction, we&#8217;ll need to\\n                                                        start with definition of what it means to be even: <br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Definition </span><br class=\\\"newline\\\" />An integer, <span class=\\\"cmmi-12\\\">n</span>, is even if <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>for some integer <span class=\\\"cmmi-12\\\">j</span>. <br class=\\\"newline\\\" />\\n                                                        <!--l. 48-->\\n                                                        <p class=\\\"indent\\\"> Let&#8217;s take the time to examine this definition in some detail. There are several\\n                                                            things of note contained in the simple sentence above. First, we see that\\n                                                            this definition is defining a specific type of integer, specifically, an even\\n                                                            integer. How does it do this? Our definition states a property that an\\n                                                            arbitray integer, <span class=\\\"cmmi-12\\\">n</span>, must have for it to be even; in particular, that there\\n                                                            must exist another integer, <span class=\\\"cmmi-12\\\">j</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j</span>. What exactly does this\\n                                                            mean? In a simplified perspective, you can think of the definition as a test\\n                                                            of evenness that could be applied to any specific integer. Is 6 even? Of\\n                                                            course it is. Why? Because we can write 6 = 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>3. Whenever we look at a\\n                                                            specific example, we simply replace the symbols in our definition with the\\n                                                            specifics. In this last example, we substituted 6 for <span class=\\\"cmmi-12\\\">n</span>, and then were able to\\n                                                            see that <span class=\\\"cmmi-12\\\">j </span>must be 3. While it is possible to think of a definition like a\\n                                                            test, it is so much more than that. A definition describes the essense of a\\n                                                            mathematical object. It is efficient in the sense that it gives no more detail than\\n                                                            necessary. For instance, we did not include in our definition that the sum of\\n                                                            two even integers is even. While this is true, it is consequential of the\\n                                                            originally stated property, and thus excessive to our understanding of\\n                                                            evenness.\\n                                                            <!--l. 50-->\\n                                                            <p class=\\\"indent\\\"> If you&#8217;re wondering if there&#8217;s anything special about the letters <span class=\\\"cmmi-12\\\">n </span>and <span class=\\\"cmmi-12\\\">j </span>used\\n                                                                within the definition - there&#8217;s not. We must often speak abstactly in mathematics,\\n                                                                so it helps to ascribe symbols to the objects which we are refering. The symbols\\n                                                                we choose are arbitrary. For example, our defintion of evenness could have easily\\n                                                                been stated using the letters <span class=\\\"cmmi-12\\\">m </span>and <span class=\\\"cmmi-12\\\">z</span>, or greek characters <span class=\\\"cmmi-12\\\">&#x03B1; </span>and <span class=\\\"cmmi-12\\\">&#x03C9;</span>, or even the\\n                                                                words <span class=\\\"cmmi-12\\\">flamigo </span>and <span class=\\\"cmmi-12\\\">shrimp</span>. It is also important to note the we don&#8217;t have to refer\\n                                                                to every even integer as <span class=\\\"cmmi-12\\\">n </span>just because that was the symbol used within the\\n                                                                definition. In fact, in most cases it would be impossible to do so. For\\n                                                                instance, if I want to reference both 4 and 6 symbolically, then I couldn&#8217;t\\n                                                                possibly call them both <span class=\\\"cmmi-12\\\">n</span>. Otherwise 4 = <span class=\\\"cmmi-12\\\">n </span>= 6, and that&#8217;s just nonsense!\\n                                                                Instead, we can choose new symbols whenever necessary, such as <span class=\\\"cmmi-12\\\">&#x03B1; </span>= 4\\n                                                                and <span class=\\\"cmmi-12\\\">x </span>= 6. As long as we tell our audience what a new symbol refers to\\n                                                                when we introduce it, we can confidently use it in place of its original\\n                                                                reference.\\n                                                                <!--l. 52-->\\n                                                                <p class=\\\"noindent\\\">\\n                                                                    <h3 class=\\\"sectionHead\\\"><span class=\\\"titlemark\\\">4 </span> <a id=\\\"x1-40004\\\"></a>Algebasics</h3>\\n                                                                    <!--l. 53-->\\n                                                                    <p class=\\\"noindent\\\">Although it is somewhat tedious to do so, we must engage in a quick overview of\\n                                                                        the laws of algebra before we can dive fully into our first proof. Keep\\n                                                                        in mind, these are the same rules that you&#8217;ve been familiar with since\\n                                                                        elementary school. They&#8217;ve merely been stated in a more rigorous fashion\\n                                                                        below.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmti-12\\\">Associative Property</span><br class=\\\"newline\\\" />As we all know, the order that we add integers does not change the resulting sum.\\n                                                                        For example, (3 + 5) + 9 = 8 + 9 = 17 = 3 + 14 = 3 + (5 + 9). Formally, for any\\n                                                                        integers <span class=\\\"cmmi-12\\\">a</span>, <span class=\\\"cmmi-12\\\">b </span>and <span class=\\\"cmmi-12\\\">c</span>, it is the case that (<span class=\\\"cmmi-12\\\">a </span>+ <span class=\\\"cmmi-12\\\">b</span>) + <span class=\\\"cmmi-12\\\">c </span>= <span class=\\\"cmmi-12\\\">a </span>+ (<span class=\\\"cmmi-12\\\">b </span>+ <span class=\\\"cmmi-12\\\">c</span>).<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmti-12\\\">Commutative Property</span><br class=\\\"newline\\\" />Simiraly, we can change the positions of the integers in our sum without changing\\n                                                                        the result. For example, 12 + 4 = 16 = 4 + 12. Formally, for any integers <span class=\\\"cmmi-12\\\">a </span>and <span class=\\\"cmmi-12\\\">b</span>,\\n                                                                        it holds that <span class=\\\"cmmi-12\\\">a </span>+ <span class=\\\"cmmi-12\\\">b </span>= <span class=\\\"cmmi-12\\\">b </span>+ <span class=\\\"cmmi-12\\\">a</span>.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmti-12\\\">Identity</span><br class=\\\"newline\\\" />The integer 0 is the identity under addition. It is called the identity because the\\n                                                                        sum of 0 and any other integer is always the other integer. Formally, for any\\n                                                                        integer <span class=\\\"cmmi-12\\\">a</span>, <span class=\\\"cmmi-12\\\">a </span>+ 0 = <span class=\\\"cmmi-12\\\">a</span>.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmti-12\\\">Inverses</span><br class=\\\"newline\\\" />For every integer, <span class=\\\"cmmi-12\\\">a</span>, there exists another integer, <span class=\\\"cmsy-10x-x-120\\\">-</span><span class=\\\"cmmi-12\\\">a</span>, that is <span class=\\\"cmmi-12\\\">a</span>&#8217;s additive\\n                                                                        inverse. <span class=\\\"cmsy-10x-x-120\\\">-</span><span class=\\\"cmmi-12\\\">a </span>has the special property that <span class=\\\"cmmi-12\\\">a </span>+ <span class=\\\"cmsy-10x-x-120\\\">-</span><span class=\\\"cmmi-12\\\">a </span>= 0. For example, the\\n                                                                        additive inverse of 2 is <span class=\\\"cmsy-10x-x-120\\\">-</span>2, the inverse of <span class=\\\"cmsy-10x-x-120\\\">-</span>71 is 71, and the inverse of 0 is\\n                                                                        0.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmti-12\\\">Subtraction</span><br class=\\\"newline\\\" />If we want to subtract one value from the other, we could instead add the\\n                                                                        inverse of the second value to the first. While this may only seem useful if\\n                                                                        you were to have a calculator with a broken subtraction button, it is\\n                                                                        actually very useful to us. Using this &#8217;trick&#8217;, we can define subtraction using\\n                                                                        only addition. Now, why exactly is this so great, Will? Because we will\\n                                                                        be able to convert any subtraction problem to a problem of addition.\\n                                                                        Allowing us to prove all the properties of subtraction using the properties of\\n                                                                        addition; and freeing us from the burden of introducing new axioms! As\\n                                                                        such, let us define the difference of the integers, <span class=\\\"cmmi-12\\\">a </span>and <span class=\\\"cmmi-12\\\">b</span>, to be the sum of\\n                                                                        <span class=\\\"cmmi-12\\\">a </span>with <span class=\\\"cmmi-12\\\">b</span>&#8217;s additive inverse. Therefore, if <span class=\\\"cmmi-12\\\">d </span>is the difference of <span class=\\\"cmmi-12\\\">a </span>and <span class=\\\"cmmi-12\\\">b</span>,\\n                                                                        then <span class=\\\"cmmi-12\\\">d </span>= <span class=\\\"cmmi-12\\\">a </span>+ <span class=\\\"cmsy-10x-x-120\\\">-</span><span class=\\\"cmmi-12\\\">b</span>. For simplicity, we write the difference as <span class=\\\"cmmi-12\\\">d </span>= <span class=\\\"cmmi-12\\\">a </span><span class=\\\"cmsy-10x-x-120\\\">- </span><span class=\\\"cmmi-12\\\">b</span>. For\\n                                                                        example, if we want to subtract 8 from 6, we just add <span class=\\\"cmsy-10x-x-120\\\">-</span>8 to 6 giving us\\n                                                                        6 <span class=\\\"cmsy-10x-x-120\\\">- </span>8 = 6 + <span class=\\\"cmsy-10x-x-120\\\">-</span>8 = <span class=\\\"cmsy-10x-x-120\\\">-</span>2. <br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmti-12\\\">Multiplication</span><br class=\\\"newline\\\" />Just as we did with subtraction, we&#8217;ll also define mutliplication in terms of\\n                                                                        addition. For any integer, <span class=\\\"cmmi-12\\\">a</span>, the following three rules define multiplication:\\n                                                                        <ol class=\\\"enumerate1\\\">\\n                                                                            <li class=\\\"enumerate\\\" id=\\\"x1-4002x1\\\">For any positive integer <span class=\\\"cmmi-12\\\">b</span>, the product of <span class=\\\"cmmi-12\\\">a </span>and <span class=\\\"cmmi-12\\\">b </span>is equal to <span class=\\\"cmmi-12\\\">a </span>added to\\n                                                                                itself <span class=\\\"cmmi-12\\\">b </span>times. As such, <span class=\\\"cmmi-12\\\">a </span><span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">b </span>= <span class=\\\"cmmi-12\\\">a </span>+ <span class=\\\"cmmi-12\\\">a </span>+ <span class=\\\"cmmi-12\\\">... </span>+ <span class=\\\"cmmi-12\\\">a </span>= <span class=\\\"cmex-10x-x-120\\\">&#x2211;</span>\\n                                                                                <sub><span class=\\\"cmmi-8\\\">n</span><span class=\\\"cmr-8\\\">=1</span></sub><sup><span class=\\\"cmmi-8\\\">b</span></sup><span class=\\\"cmmi-12\\\">a</span>. For example,\\n                                                                                3 <span class=\\\"cmsy-10x-x-120\\\">* </span>4 = 3 + 3 + 3 + 3 = 12.\\n                                                                            </li>\\n                                                                            <li class=\\\"enumerate\\\" id=\\\"x1-4004x2\\\">For any negative integer <span class=\\\"cmmi-12\\\">b</span>, the product of <span class=\\\"cmmi-12\\\">a </span>and <span class=\\\"cmmi-12\\\">b </span>is equal to the inverse\\n                                                                                of <span class=\\\"cmmi-12\\\">a </span>added to itself <span class=\\\"cmmi-12\\\">b </span>inverse times. As such, <span class=\\\"cmmi-12\\\">a</span><span class=\\\"cmsy-10x-x-120\\\">*</span><span class=\\\"cmmi-12\\\">b </span>= <span class=\\\"cmsy-10x-x-120\\\">-</span><span class=\\\"cmmi-12\\\">a </span>+ <span class=\\\"cmsy-10x-x-120\\\">-</span><span class=\\\"cmmi-12\\\">a... </span>+ <span class=\\\"cmsy-10x-x-120\\\">-</span><span class=\\\"cmmi-12\\\">a </span>=\\n                                                                                <span class=\\\"cmex-10x-x-120\\\">&#x2211;</span>\\n                                                                                <sub><span class=\\\"cmmi-8\\\">n</span><span class=\\\"cmr-8\\\">=1</span></sub><sup><span class=\\\"cmsy-8\\\">-</span><span class=\\\"cmmi-8\\\">b</span></sup> <span class=\\\"cmsy-10x-x-120\\\">- </span><span class=\\\"cmmi-12\\\">a</span>. For example, 6 <span class=\\\"cmsy-10x-x-120\\\">*-</span>3 = <span class=\\\"cmsy-10x-x-120\\\">-</span>6 + <span class=\\\"cmsy-10x-x-120\\\">-</span>6 + <span class=\\\"cmsy-10x-x-120\\\">-</span>6 = <span class=\\\"cmsy-10x-x-120\\\">-</span>18\\n                                                                            </li>\\n                                                                            <li class=\\\"enumerate\\\" id=\\\"x1-4006x3\\\">Lastly, the product of <span class=\\\"cmmi-12\\\">a </span>and 0 is always 0. As such, <span class=\\\"cmmi-12\\\">a </span><span class=\\\"cmsy-10x-x-120\\\">* </span>0 = 0.</li>\\n                                                                        </ol>\\n                                                                        <!--l. 77-->\\n                                                                        <p class=\\\"noindent\\\">Just like addition, multiplication also respects associativity and commutativity.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmti-12\\\">Distributive Property</span><br class=\\\"newline\\\" />Lastly, the distributive property states that the product of an integer <span class=\\\"cmmi-12\\\">a </span>with the\\n                                                                            sum of the integers <span class=\\\"cmmi-12\\\">b </span>and <span class=\\\"cmmi-12\\\">c </span>is equal to the sum of the products of <span class=\\\"cmmi-12\\\">a </span>with <span class=\\\"cmmi-12\\\">b </span>and <span class=\\\"cmmi-12\\\">a</span>\\n                                                                            with <span class=\\\"cmmi-12\\\">c</span>. In other words, <span class=\\\"cmmi-12\\\">a </span><span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">b </span>+ <span class=\\\"cmmi-12\\\">c</span>) = <span class=\\\"cmmi-12\\\">a </span><span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">b </span>+ <span class=\\\"cmmi-12\\\">a </span><span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">c</span>.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Further on in this article, we will prove the associative, communtative, and\\n                                                                            distributive properties of multiplication using the properties of addition. For now,\\n                                                                            however, we shall accept them as psuedo-axiomatic to prevent ourselves from\\n                                                                            getting too lost in the details.\\n                                                                            <!--l. 85-->\\n                                                                            <p class=\\\"noindent\\\">\\n                                                                                <h3 class=\\\"sectionHead\\\"><span class=\\\"titlemark\\\">5 </span> <a id=\\\"x1-50005\\\"></a>The Sum of Two Even Integers is Even</h3>\\n                                                                                <!--l. 86-->\\n                                                                                <p class=\\\"noindent\\\">Now that we have our definition of evenness and the basic laws of algebra, we can\\n                                                                                    begin to tackle this proof. But in order to begin, we first need to determine what\\n                                                                                    exactly it means to show that the sum of two integers is indeed even. Not only\\n                                                                                    that, our argument has to be structured in a way such that regardless of the two\\n                                                                                    even integers chosen, we clearly demonstrate that their sum is even. Now if you&#8217;re\\n                                                                                    wondering how we can possibly show that it&#8217;s true for every pair of even integers,\\n                                                                                    or why the proof in the introduction does fulfill this requirement, don&#8217;t worry -\\n                                                                                    you are not alone! The solution to our problem is actually quite simple, all we\\n                                                                                    have to do is look back to what an even integer is defined to be. If you&#8217;re\\n                                                                                    wondering how such an abstract definition can help us, again, don&#8217;t worry, I&#8217;m\\n                                                                                    about to explain. Our problem is that we need to show for any two even\\n                                                                                    integers, their sum is even. Well to do that, we need two even integers\\n                                                                                    (obviously!), but we don&#8217;t want to pick two specific integers. Instead, we need a\\n                                                                                    description of two even integers that could apply to any specific pair. Here we\\n                                                                                    go...<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmsy-10x-x-120\\\">&#x2192; </span>Assume I have two even integers <span class=\\\"cmmi-12\\\">n </span>and <span class=\\\"cmmi-12\\\">m</span>. <br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Will, really? Yes, really! We need a description that fits any two even integers,\\n                                                                                    and that description certainly does so. If you&#8217;re wondering how this statement\\n                                                                                    could possibly be helpful, just look back to your definition of an even integer.\\n                                                                                    You&#8217;ll find that the statement above contains a bit more information than it lets\\n                                                                                    on at first: <br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmsy-10x-x-120\\\">&#x2192; </span>Since <span class=\\\"cmmi-12\\\">n </span>is even, there exists some integer <span class=\\\"cmmi-12\\\">j </span>such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j</span>. <br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmsy-10x-x-120\\\">&#x2192; </span>Similarly, since <span class=\\\"cmmi-12\\\">m </span>is also even, there exists some integer <span class=\\\"cmmi-12\\\">k </span>such that <span class=\\\"cmmi-12\\\">m </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">*</span><span class=\\\"cmmi-12\\\">k</span>.\\n                                                                                    <br class=\\\"newline\\\" /><br class=\\\"newline\\\" />The specific values of <span class=\\\"cmmi-12\\\">j </span>and <span class=\\\"cmmi-12\\\">k </span>aren&#8217;t relevant, all that&#8217;s important is that they\\n                                                                                    exist, and that we can represent our even integers <span class=\\\"cmmi-12\\\">n </span>and <span class=\\\"cmmi-12\\\">m </span>using them. Let&#8217;s\\n                                                                                    circle back now to the real problem, how do we show that the sum of <span class=\\\"cmmi-12\\\">n </span>and <span class=\\\"cmmi-12\\\">m </span>is\\n                                                                                    even as well. To do this, let&#8217;s give the sum a name - let&#8217;s call it <span class=\\\"cmmi-12\\\">s</span>. More\\n                                                                                    formally:<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmsy-10x-x-120\\\">&#x2192; </span>let <span class=\\\"cmmi-12\\\">s </span>= <span class=\\\"cmmi-12\\\">n </span>+ <span class=\\\"cmmi-12\\\">m</span>.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Once again, we do not care about the specific value of <span class=\\\"cmmi-12\\\">s</span>, we only care that it is\\n                                                                                    the sum of <span class=\\\"cmmi-12\\\">n </span>and <span class=\\\"cmmi-12\\\">m</span>. Now that we have <span class=\\\"cmmi-12\\\">s</span>, we must ask ourselves a very important\\n                                                                                    question - what does it mean to show that <span class=\\\"cmmi-12\\\">s </span>is even. Once again, I refer you\\n                                                                                    to the definition of what it means to be even - <span class=\\\"cmmi-12\\\">s </span>is even if there exists\\n                                                                                    some integer <span class=\\\"cmmi-12\\\">p </span>such that <span class=\\\"cmmi-12\\\">s </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">p</span>. Let&#8217;s take a recap of all the things we\\n                                                                                    know:<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmsy-10x-x-120\\\">&#x2192; </span>We have two even integers <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>and <span class=\\\"cmmi-12\\\">m </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k</span>, for some integers <span class=\\\"cmmi-12\\\">j </span>and\\n                                                                                    <span class=\\\"cmmi-12\\\">k</span>.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmsy-10x-x-120\\\">&#x2192; </span>We defined the sum of <span class=\\\"cmmi-12\\\">n </span>and <span class=\\\"cmmi-12\\\">m </span>as the integer <span class=\\\"cmmi-12\\\">s </span>= <span class=\\\"cmmi-12\\\">n </span>+ <span class=\\\"cmmi-12\\\">m</span>. <br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmsy-10x-x-120\\\">&#x2192; </span><span class=\\\"cmmi-12\\\">s </span>is even if we can find another integer, <span class=\\\"cmmi-12\\\">p</span>, such that <span class=\\\"cmmi-12\\\">s </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">p</span>.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />So what next? Well, let&#8217;s try substituting 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>for <span class=\\\"cmmi-12\\\">n</span>, and 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>for <span class=\\\"cmmi-12\\\">m </span>in our\\n                                                                                    representation of <span class=\\\"cmmi-12\\\">s</span>: <br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmsy-10x-x-120\\\">&#x2192; </span><span class=\\\"cmmi-12\\\">s </span>= <span class=\\\"cmmi-12\\\">n </span>+ <span class=\\\"cmmi-12\\\">m </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ <span class=\\\"cmmi-12\\\">m </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k</span>.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Why can we do this? Since <span class=\\\"cmmi-12\\\">n </span>is equal to 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>we can use them interchangeably -\\n                                                                                    they refer to the same exact value. You can think of 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>as a nickname for <span class=\\\"cmmi-12\\\">n </span>-\\n                                                                                    while they may look different, they actually refer to the same thing. Now we all\\n                                                                                    should know what&#8217;s coming next (after all, I told you only a few paragraphs ago),\\n                                                                                    we are going to factor out the 2:<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmsy-10x-x-120\\\">&#x2192; </span><span class=\\\"cmmi-12\\\">s </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">j </span>+ <span class=\\\"cmmi-12\\\">k</span>). <br class=\\\"newline\\\" /><br class=\\\"newline\\\" />It was no accident that I choose the sum of two integers is an integer as our\\n                                                                                    example axiom; I needed it for what comes next:<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmsy-10x-x-120\\\">&#x2192; </span>Since both <span class=\\\"cmmi-12\\\">j </span>and <span class=\\\"cmmi-12\\\">k </span>are integers, their sum, <span class=\\\"cmmi-12\\\">j </span>+ <span class=\\\"cmmi-12\\\">k </span>= <span class=\\\"cmmi-12\\\">p</span>, is also an integer.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />What&#8217;s the value of <span class=\\\"cmmi-12\\\">p</span>? Once again, it&#8217;s not important, all we need to know is that\\n                                                                                    <span class=\\\"cmmi-12\\\">p </span>is an integer. Finally, we can put it all together by substituting <span class=\\\"cmmi-12\\\">p </span>for\\n                                                                                    <span class=\\\"cmmi-12\\\">j </span>+ <span class=\\\"cmmi-12\\\">k</span>:<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmsy-10x-x-120\\\">&#x2192; </span><span class=\\\"cmmi-12\\\">s </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">j </span>+ <span class=\\\"cmmi-12\\\">k</span>) = 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">p</span>.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmsy-10x-x-120\\\">&#x2192; </span>Therefor, since <span class=\\\"cmmi-12\\\">p </span>is an integer, and <span class=\\\"cmmi-12\\\">s </span>is equal to 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">p</span>, <span class=\\\"cmmi-12\\\">s </span>is even by\\n                                                                                    definition.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmsy-10x-x-120\\\">&#x2192; </span>Furthermore, <span class=\\\"cmmi-12\\\">s </span>is not only even, it&#8217;s also the sum of <span class=\\\"cmmi-12\\\">n </span>and <span class=\\\"cmmi-12\\\">m </span>- which were\\n                                                                                    represented in such a way that our argument could apply to any pair of even\\n                                                                                    integers! <br class=\\\"newline\\\" /><br class=\\\"newline\\\" />And that&#8217;s all there is to it - we&#8217;ve now proven our statement that the\\n                                                                                    sum of two even integers is even. If you&#8217;re still a little unsure why the\\n                                                                                    above proves our statement, don&#8217;t worry - they&#8217;ll be a few more proofs\\n                                                                                    before the end of this article. If you are uneasy, try re-reading the proof\\n                                                                                    and writing out each step along the way. As you write down each step,\\n                                                                                    ask yourself: why does this argument apply to any integer(s); why am I\\n                                                                                    able to deduce this information from the previous step(s); why is this\\n                                                                                    particular statement true; and what am I accomplishing with this step? You\\n                                                                                    might also find it helpful to read the following condensed version of the\\n                                                                                    proof:<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Lemma</span><br class=\\\"newline\\\" />The sum of two even integers is also even.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmti-12\\\">Proof </span><br class=\\\"newline\\\" />Assume I have two even integers <span class=\\\"cmmi-12\\\">n </span>and <span class=\\\"cmmi-12\\\">m</span>. <br class=\\\"newline\\\" />Since <span class=\\\"cmmi-12\\\">n </span>is even, there exists some integer <span class=\\\"cmmi-12\\\">j </span>such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j</span>. <br class=\\\"newline\\\" />Similarly, since <span class=\\\"cmmi-12\\\">m </span>is also even, there exists some integer <span class=\\\"cmmi-12\\\">k </span>such that <span class=\\\"cmmi-12\\\">m </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k</span>.\\n                                                                                    <br class=\\\"newline\\\" /><br class=\\\"newline\\\" />let <span class=\\\"cmmi-12\\\">s </span>= <span class=\\\"cmmi-12\\\">n </span>+ <span class=\\\"cmmi-12\\\">m</span>.<br class=\\\"newline\\\" />Then, <span class=\\\"cmmi-12\\\">s </span>= <span class=\\\"cmmi-12\\\">n </span>+ <span class=\\\"cmmi-12\\\">m </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ <span class=\\\"cmmi-12\\\">m </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k</span>.<br class=\\\"newline\\\" />Then, <span class=\\\"cmmi-12\\\">s </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">j </span>+ <span class=\\\"cmmi-12\\\">k</span>). <br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Since both <span class=\\\"cmmi-12\\\">j </span>and <span class=\\\"cmmi-12\\\">k </span>are integers, their sum (<span class=\\\"cmmi-12\\\">j </span>+ <span class=\\\"cmmi-12\\\">k</span>) = <span class=\\\"cmmi-12\\\">p </span>is also an integer.<br class=\\\"newline\\\" />Thus, we can represent <span class=\\\"cmmi-12\\\">s </span>as <span class=\\\"cmmi-12\\\">s </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">j </span>+ <span class=\\\"cmmi-12\\\">k</span>) = 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">p</span>.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Since <span class=\\\"cmmi-12\\\">p </span>is an integer, and <span class=\\\"cmmi-12\\\">s </span>is equal to 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">p</span>, <span class=\\\"cmmi-12\\\">s </span>is even by definition.<br class=\\\"newline\\\" />Furthermore, <span class=\\\"cmmi-12\\\">s </span>is not only even, it&#8217;s also the sum of <span class=\\\"cmmi-12\\\">n </span>and <span class=\\\"cmmi-12\\\">m</span>.<br class=\\\"newline\\\" />Thus we have completed our proof.<br class=\\\"newline\\\" /><span class=\\\"cmti-12\\\">Q.E.D</span>\\n                                                                                    <!--l. 151-->\\n                                                                                    <p class=\\\"noindent\\\">\\n                                                                                        <h3 class=\\\"sectionHead\\\"><span class=\\\"titlemark\\\">6 </span> <a id=\\\"x1-60006\\\"></a>The Oddities of Oddness</h3>\\n                                                                                        <!--l. 152-->\\n                                                                                        <p class=\\\"noindent\\\"><span class=\\\"cmbx-12\\\">Definition</span><br class=\\\"newline\\\" />An integer, <span class=\\\"cmmi-12\\\">n </span>is odd if <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 1 for some integer <span class=\\\"cmmi-12\\\">j</span>.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Look familiar? It shouldn&#8217;t come as much surprise that the definition of oddness is\\n                                                                                            incredibly similar to that of evenness; after all, there seems to be a natural duality\\n                                                                                            between the two concepts. Now, let&#8217;s take a deeper look at this defintion.\\n                                                                                            First, let&#8217;s confirm that it makes sense with a few example: 3 = 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>1 + 1,\\n                                                                                            5 = 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>2 + 1, <span class=\\\"cmsy-10x-x-120\\\">-</span>39 = 2 <span class=\\\"cmsy-10x-x-120\\\">*-</span>40 + 1. Great, everything seems to check out. Now\\n                                                                                            let&#8217;s dig a little deeper. What if I were instead define an odd integer as\\n                                                                                            follows:<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Definition</span><br class=\\\"newline\\\" />An integer, <span class=\\\"cmmi-12\\\">n</span>, is odd if <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3 for some integer <span class=\\\"cmmi-12\\\">j</span>.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Despite this definition looking different from our original, it isn&#8217;t actually any less\\n                                                                                            correct. Again, let&#8217;s look at our examples: 3 = 0 <span class=\\\"cmsy-10x-x-120\\\">* </span>2 + 3, 5 = 1 <span class=\\\"cmsy-10x-x-120\\\">* </span>2 + 3,\\n                                                                                            <span class=\\\"cmsy-10x-x-120\\\">-</span>39 = 2 <span class=\\\"cmsy-10x-x-120\\\">*-</span>42 + 3. Everything seems to work out fine once again. But how can\\n                                                                                            this be; could we be overlooking something? We are not, and in order to make\\n                                                                                            certain of this, we are going to prove that the two defintions actually define the\\n                                                                                            same thing. In particular, we are going to prove that any integer written with our\\n                                                                                            first defintion can be written in the form of our second defintion, and vice\\n                                                                                            versa.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Lemma</span><br class=\\\"newline\\\" />For any integer, <span class=\\\"cmmi-12\\\">n</span>, there exists an integer, <span class=\\\"cmmi-12\\\">j</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">*</span><span class=\\\"cmmi-12\\\">j </span>+ 1 if and only if\\n                                                                                            there also exists an integer, <span class=\\\"cmmi-12\\\">k</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>+ 3.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmti-12\\\">Proof </span><br class=\\\"newline\\\" />Assume I have an odd integer, <span class=\\\"cmmi-12\\\">n</span>, defined by our first definition.<br class=\\\"newline\\\" />Therefore, there exists an integer, <span class=\\\"cmmi-12\\\">j</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 1.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Now, we must show that there exists some integer, <span class=\\\"cmmi-12\\\">k</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>+ 3. By\\n                                                                                            doing this, we will have shown that for any integer defined using our first\\n                                                                                            defintion, it also fits the description of our second defintion.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Since <span class=\\\"cmmi-12\\\">j </span>is an integer, I can subtract 1 from it, let&#8217;s call this difference <span class=\\\"cmmi-12\\\">k</span>. Formally,\\n                                                                                            let <span class=\\\"cmmi-12\\\">k </span>= <span class=\\\"cmmi-12\\\">j </span><span class=\\\"cmsy-10x-x-120\\\">- </span>1.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Now we will use basic algebraic manipulation to coax the second defintion from\\n                                                                                            our first.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 1 = 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">j </span>+ 0) + 1 = 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">j </span>+ (<span class=\\\"cmsy-10x-x-120\\\">-</span>1 + 1)) + 1<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />The above may seem strange or unhelpful, but it is in fact the key to our proof.\\n                                                                                            By expanding out multiplication by 2 to include <span class=\\\"cmsy-10x-x-120\\\">-</span>1 + 1 = 0, we haven&#8217;t changed\\n                                                                                            the meaning of our equation thanks to the laws of algebra. However, we have\\n                                                                                            converted our equation to a more useful form as will be revealed in the next\\n                                                                                            step:<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">j </span><span class=\\\"cmsy-10x-x-120\\\">- </span>1) + 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>1 + 1 = 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">j </span><span class=\\\"cmsy-10x-x-120\\\">- </span>1) + 3.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Now we&#8217;ve got the 3 we need for our second defintion. What&#8217;s more, we can\\n                                                                                            substitute <span class=\\\"cmmi-12\\\">k </span>for <span class=\\\"cmmi-12\\\">j </span><span class=\\\"cmsy-10x-x-120\\\">- </span>1:<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Then, <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">j </span><span class=\\\"cmsy-10x-x-120\\\">- </span>1) + 3 = 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>+ 3.<br class=\\\"newline\\\" />Therefore, <span class=\\\"cmmi-12\\\">n </span>is also odd in accordance with our second defintion!<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />What exactly does this mean? We&#8217;ve now proved that if we start with our first\\n                                                                                            defintion, then we meet the criteria of our second defintion. Does this mean we\\n                                                                                            have shown that the two definition are actually the same? Not quite, we still need\\n                                                                                            to show that if we start with the second defintion then we will meet the criteria\\n                                                                                            for the first one. But, why do we also need to do this? Let&#8217;s take a look at a less\\n                                                                                            mathematical example to explain that. Imagine you always wear a hooded jacket\\n                                                                                            when it&#8217;s raining; however, you also wear a hooded jacket whenever it&#8217;s below 40\\n                                                                                            degrees. Thus, if it is raining, we can logically argue that you must be\\n                                                                                            wearing a hooded jacket. However, if we see you are wearing a hooded\\n                                                                                            jacket, we can&#8217;t assume that it must be raining out, because it might cold\\n                                                                                            instead. This example highlights why we must prove both directions. If we\\n                                                                                            neglected to do so, we can not be confident that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>+ 3 implies\\n                                                                                            that there exists an integer, <span class=\\\"cmmi-12\\\">j</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 1; just like we can&#8217;t\\n                                                                                            assume that a hooded jacket implies rainy weather. But, Will, didn&#8217;t\\n                                                                                            you say that both definitions actually defined the same thing, so this\\n                                                                                            hooded jacket example doesn&#8217;t apply? Unlike our rainy day example,\\n                                                                                            either direction in our lemma implies the other; however, we don&#8217;t <span class=\\\"cmti-12\\\">know</span>\\n                                                                                            this without first proving it. For all we know, <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>+ 3 implies that\\n                                                                                            <span class=\\\"cmmi-12\\\">n </span>= 37<sup><span class=\\\"cmmi-8\\\">j</span></sup> + 49 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j</span>. As such, let&#8217;s eliminate our remaining doubts by completing the\\n                                                                                            proof:<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Assume I have an odd integer, <span class=\\\"cmmi-12\\\">m</span>, defined by our second defintion.<br class=\\\"newline\\\" />Therefore, there exists an integer <span class=\\\"cmmi-12\\\">p </span>such that <span class=\\\"cmmi-12\\\">m </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">p </span>+ 3.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Similar to the first part of the proof, we must this time show that there exists\\n                                                                                            some integer, <span class=\\\"cmmi-12\\\">q</span>, such that <span class=\\\"cmmi-12\\\">m </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">q </span>+ 1. Once again, we will use some clever\\n                                                                                            algebra to show this to be the case.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmmi-12\\\">m </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">p </span>+ 3 = 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">p </span>+ 1 <span class=\\\"cmsy-10x-x-120\\\">- </span>1) + 3 = 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">p </span>+ 1) <span class=\\\"cmsy-10x-x-120\\\">- </span>2 <span class=\\\"cmsy-10x-x-120\\\">* </span>1 + 3 = 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">p </span><span class=\\\"cmsy-10x-x-120\\\">- </span>1) + 1.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Hopefully you know what comes next:<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Let <span class=\\\"cmmi-12\\\">q </span>= <span class=\\\"cmmi-12\\\">p </span><span class=\\\"cmsy-10x-x-120\\\">- </span>1.<br class=\\\"newline\\\" />Then, <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">q </span>+ 1.<br class=\\\"newline\\\" />Thus, <span class=\\\"cmmi-12\\\">n </span>is odd in accordance with our first defintion!<br class=\\\"newline\\\" /><span class=\\\"cmti-12\\\">Q.E.D</span><br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Now we&#8217;ve completed our proof, and by doing so, removed all doubt as to whether\\n                                                                                            our two different defintions were actually defining the same thing. In fact, we\\n                                                                                            could have chosen any odd integer to add to our 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>term, and have\\n                                                                                            accurately defined oddness (try proving it&#8217;s works if we had chosen 7\\n                                                                                            instead).\\n                                                                                            <!--l. 204-->\\n                                                                                            <p class=\\\"indent\\\"> As we&#8217;ve now seen, it&#8217;s possible to have more than one valid definition for a\\n                                                                                                mathematical object. However, it&#8217;d be strange and confusing to give an\\n                                                                                                object more than one defintion. As such, we normally pick whichever\\n                                                                                                definition we feel is the most fitting (which is sometimes just our favorite),\\n                                                                                                and then prove all other definitions are <span class=\\\"cmti-12\\\">equivalent </span>through lemmas and\\n                                                                                                theorems - just as we have done above. In this particular case, we will stick\\n                                                                                                with the first definition of oddness given, and restate that above lemma\\n                                                                                                as:<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Lemma</span><br class=\\\"newline\\\" />An integer, <span class=\\\"cmmi-12\\\">n</span>, is odd if and only if there exists an integer, <span class=\\\"cmmi-12\\\">j</span>, such that\\n                                                                                                <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3.\\n                                                                                                <!--l. 209-->\\n                                                                                                <p class=\\\"noindent\\\">\\n                                                                                                    <h3 class=\\\"sectionHead\\\"><span class=\\\"titlemark\\\">7 </span> <a id=\\\"x1-70007\\\"></a>Split Personality</h3>\\n                                                                                                    <!--l. 210-->\\n                                                                                                    <p class=\\\"noindent\\\">Now that we have definitions for both even and odd integers, we are going to\\n                                                                                                        prove that an integer cannot be both even and odd. Yes, we all &#8217;know&#8217; that this\\n                                                                                                        statement is true, but our stubborn mathematicians seem to doubt anything we\\n                                                                                                        say (they&#8217;re not always the easiest group to get along with). Unfortinately, they\\n                                                                                                        do have a point. If someone were to (incorrectly) state that a number could be\\n                                                                                                        both even and odd; we would be unable to refute their claims! As such, unless we\\n                                                                                                        prove this obvious statement, it would be improper for us to claim its\\n                                                                                                        truth.\\n                                                                                                        <!--l. 212-->\\n                                                                                                        <p class=\\\"indent\\\"> Before we dive into our proof, let&#8217;s first think about what we need\\n                                                                                                            to show in order to prove that an integer can&#8217;t be both even and odd.\\n                                                                                                            To accomplish our goal, we are going to use a technique often termed\\n                                                                                                            <span class=\\\"cmti-12\\\">contradiction</span>. In a contradictory proof, we endow an object with two or\\n                                                                                                            more conflicting properties. In the problem at hand, our object will be an\\n                                                                                                            integer, and the conflicting properties will be even and oddness. We then\\n                                                                                                            &#8217;innocently&#8217; explore all the truths that lead from our object endowed\\n                                                                                                            with conflicting properties. However, our exploration won&#8217;t actually be so\\n                                                                                                            innocent. We know that we our exploring the land of the impossible, a place\\n                                                                                                            outside of logic. As we stumble about this false reality we&#8217;ve created, we\\n                                                                                                            will surely encounter many strange things, things that defy logic. It is\\n                                                                                                            our task to choose one of these strange encounters to explore in detail.\\n                                                                                                            Why? Because we are searching for proof that the very thing in front of us\\n                                                                                                            can&#8217;t possibly exist. We may know we&#8217;ve stepped outside of the realm\\n                                                                                                            of possibility; unfortinately, our friends back at home aren&#8217;t going to\\n                                                                                                            believe us without proof. So what exactly does proof you&#8217;ve stumbled into\\n                                                                                                            the realm of impossibility look like? It looks like an equation that when\\n                                                                                                            solved reveals that an integer is equal to two different values at the same\\n                                                                                                            time; or a set that is somehow both empty and nonempty; or an integer\\n                                                                                                            that is both less than and greater than some other integer. These are but\\n                                                                                                            a tiny few of all the absurdities we might run into, but they perfectly\\n                                                                                                            illustrate the type of information we are seeking. Each statement is something\\n                                                                                                            that we know can&#8217;t be true; each statement is a <span class=\\\"cmti-12\\\">contradiction</span>. Once we\\n                                                                                                            find our contradiction, we can start to pull at the very fabric with which\\n                                                                                                            we&#8217;ve woven the impossible. How do we do this? We simply start working\\n                                                                                                            backwards from the contradiction until we&#8217;ve stepped back into reality.\\n                                                                                                            Once we&#8217;ve made it back to reality, we&#8217;ve identified the culprit of our\\n                                                                                                            journey - it&#8217;s the statement the sent us into the realm of impossibility in the\\n                                                                                                            first place! With the knowledge of the culprit statement, and proof that\\n                                                                                                            it leads to a contradiction, we can now confidently assert that culprit\\n                                                                                                            statement must actually be false, for we now know that it can&#8217;t possibly be\\n                                                                                                            true.\\n                                                                                                            <!--l. 214-->\\n                                                                                                            <p class=\\\"indent\\\"> This is exactly how we are going to prove that an integer can&#8217;t be both even\\n                                                                                                                and odd at the same time. We&#8217;ll start with an arbitrary integer, then we&#8217;ll assume\\n                                                                                                                it&#8217;s both even and odd. We&#8217;ll stumble along until we find a contradiction. Then\\n                                                                                                                we&#8217;ll trace that contradiction&#8217;s origins back to our assumption that our integer\\n                                                                                                                was both even and odd. At that point, we will have shown that it&#8217;s impossible for\\n                                                                                                                the integer to be both even and odd. Why? Because if it is both even and odd,\\n                                                                                                                then reality is falling apart in front of us! Without further ado, let us now prove\\n                                                                                                                this statement:<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Lemma</span><br class=\\\"newline\\\" />An integer cannot be both even and odd.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmti-12\\\">Proof </span><br class=\\\"newline\\\" />Let <span class=\\\"cmmi-12\\\">n </span>be any integer.<br class=\\\"newline\\\" />Assume <span class=\\\"cmmi-12\\\">n </span>is both even and odd.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Now that we&#8217;ve made our assumption that will fling us out of reality, it&#8217;s time to\\n                                                                                                                start exploring:<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Then, there exists some integer, <span class=\\\"cmmi-12\\\">j</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>since <span class=\\\"cmmi-12\\\">n </span>is even.<br class=\\\"newline\\\" />Similarly, there exists some integer, <span class=\\\"cmmi-12\\\">k</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>+ 1 since <span class=\\\"cmmi-12\\\">n </span>is also\\n                                                                                                                odd.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Let&#8217;s take a closer look at the integer <span class=\\\"cmmi-12\\\">j</span>...<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Since <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">*</span><span class=\\\"cmmi-12\\\">j</span>, we can divide both sides of this equation by 2 in order to solve for\\n                                                                                                                <span class=\\\"cmmi-12\\\">j</span>, which gives us, <span class=\\\"cmmi-12\\\">j </span>= <img src=\\\"\" + require(\"../../assets/img/art_of_math_proof0x.png\") + \"\\\" alt=\\\"n2\\\" class=\\\"frac\\\" align=\\\"middle\\\">.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />If you were wondering why we need to explore the realm of impossibility in order\\n                                                                                                                to find a contradiction, the answer should now be clear - our false reality appears\\n                                                                                                                to be real at first! So let&#8217;s continue exploring, hopefully we don&#8217;t have to go much\\n                                                                                                                further... Why don&#8217;t we see what happens when we subsititue 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>+ 1 for <span class=\\\"cmmi-12\\\">n </span>in\\n                                                                                                                our equation for <span class=\\\"cmmi-12\\\">j</span>...<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Substituting give us, <span class=\\\"cmmi-12\\\">j </span>= <img src=\\\"\" + require(\"../../assets/img/art_of_math_proof1x.png\") + \"\\\" alt=\\\"n\\n2\\\" class=\\\"frac\\\" align=\\\"middle\\\"> = <img src=\\\"\" + require(\"../../assets/img/art_of_math_proof2x.png\") + \"\\\" alt=\\\"2*k+1-\\n2\\\" class=\\\"frac\\\" align=\\\"middle\\\"> = <img src=\\\"\" + require(\"../../assets/img/art_of_math_proof3x.png\") + \"\\\" alt=\\\"2*k\\n2\\\" class=\\\"frac\\\" align=\\\"middle\\\"> + <img src=\\\"\" + require(\"../../assets/img/art_of_math_proof4x.png\") + \"\\\" alt=\\\"1\\n2\\\" class=\\\"frac\\\" align=\\\"middle\\\"> = <span class=\\\"cmmi-12\\\">k </span>+ <img src=\\\"\" + require(\"../../assets/img/art_of_math_proof5x.png\") + \"\\\" alt=\\\"1\\n2\\\" class=\\\"frac\\\" align=\\\"middle\\\">.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Subtracting <span class=\\\"cmmi-12\\\">k </span>from both sides of this equation yeilds, <span class=\\\"cmmi-12\\\">j </span><span class=\\\"cmsy-10x-x-120\\\">- </span><span class=\\\"cmmi-12\\\">k </span>= <img src=\\\"\" + require(\"../../assets/img/art_of_math_proof6x.png\") + \"\\\" alt=\\\"12\\\" class=\\\"frac\\\" align=\\\"middle\\\">.<br class=\\\"newline\\\" />But <span class=\\\"cmmi-12\\\">j </span>and <span class=\\\"cmmi-12\\\">k </span>are both integers, so there difference, <span class=\\\"cmmi-12\\\">d </span>= <span class=\\\"cmmi-12\\\">j </span><span class=\\\"cmsy-10x-x-120\\\">- </span><span class=\\\"cmmi-12\\\">k</span>, is also an integer\\n                                                                                                                (you should prove this for yourself).<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Substituting once again gives us, <span class=\\\"cmmi-12\\\">d </span>= <img src=\\\"\" + require(\"../../assets/img/art_of_math_proof7x.png\") + \"\\\" alt=\\\"1\\n2\\\" class=\\\"frac\\\" align=\\\"middle\\\">.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Wait a minute, <span class=\\\"cmmi-12\\\">d </span>is an integer, and <img src=\\\"\" + require(\"../../assets/img/art_of_math_proof8x.png\") + \"\\\" alt=\\\"1\\n2\\\" class=\\\"frac\\\" align=\\\"middle\\\"> is not contained within the set of integers -\\n                                                                                                                this can&#8217;t possibly be; this must be the contradiction we&#8217;ve been looking\\n                                                                                                                for!<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Now it&#8217;s time to work backwards from our contradiction...<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />How did we know <span class=\\\"cmmi-12\\\">d </span>was an integer? We used the fact that difference of two\\n                                                                                                                integers is also an integer; however, since you proved this for yourself (right?),\\n                                                                                                                then we can all agree that this statement comes from reality, so it could not be\\n                                                                                                                what lead us to our contradiction.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Let&#8217;s keep moving further back...<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />How did we come to <span class=\\\"cmmi-12\\\">d </span>= <img src=\\\"\" + require(\"../../assets/img/art_of_math_proof9x.png\") + \"\\\" alt=\\\"1\\n2\\\" class=\\\"frac\\\" align=\\\"middle\\\">? Well we were able to do so using simple\\n                                                                                                                algebra, and simple algebra also comes from reality, so that too is not\\n                                                                                                                the culprit. What came before our algebra? We substituted 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>+ 1\\n                                                                                                                for <span class=\\\"cmmi-12\\\">n </span>in our representation of <span class=\\\"cmmi-12\\\">j</span>. Substitution also comes from reality, so\\n                                                                                                                the act of it is not the culprit. However, the <span class=\\\"cmti-12\\\">reason </span>we could perform\\n                                                                                                                this substitution was! Why were we able to substitue 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>+ 1 for <span class=\\\"cmmi-12\\\">n </span>in\\n                                                                                                                our representation of <span class=\\\"cmmi-12\\\">j</span>? Because we had defined <span class=\\\"cmmi-12\\\">n </span>to be odd; and where\\n                                                                                                                did we get our equation for <span class=\\\"cmmi-12\\\">j</span>? From the fact that <span class=\\\"cmmi-12\\\">n </span>is also even! If we\\n                                                                                                                had assumed <span class=\\\"cmmi-12\\\">n </span>was only even or only odd, we would have never have\\n                                                                                                                been able to perfom the substitution. Thus, we&#8217;d never have been able\\n                                                                                                                to show that <img src=\\\"\" + require(\"../../assets/img/art_of_math_proof10x.png\") + \"\\\" alt=\\\"1\\n2\\\" class=\\\"frac\\\" align=\\\"middle\\\"> had somehow managed to sneak it&#8217;s way into the set of\\n                                                                                                                integers.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />With our contradiction in hand, we can conclude that it was incorrect of us to\\n                                                                                                                have assumed our integer both even and odd. Furthermore, since we chose <span class=\\\"cmmi-12\\\">n </span>to be\\n                                                                                                                any integer, we now can confidently state that it&#8217;s incorrect to assume any integer\\n                                                                                                                can be both even and odd!<br class=\\\"newline\\\" /><span class=\\\"cmti-12\\\">Q.E.D</span>\\n                                                                                                                <!--l. 254-->\\n                                                                                                                <p class=\\\"noindent\\\">\\n                                                                                                                    <h3 class=\\\"sectionHead\\\"><span class=\\\"titlemark\\\">8 </span> <a id=\\\"x1-80008\\\"></a>Tying Up Loose Ends</h3>\\n                                                                                                                    <!--l. 255-->\\n                                                                                                                    <p class=\\\"noindent\\\">Now that we&#8217;ve got definitions for even and oddness, and we are confident that an\\n                                                                                                                        integer can&#8217;t both be even and odd, we can finally prove the other two statements\\n                                                                                                                        from the introduction.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Lemma</span><br class=\\\"newline\\\" />The sum of two odd integers is even.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmti-12\\\">Proof </span><br class=\\\"newline\\\" />Assume <span class=\\\"cmmi-12\\\">n </span>and <span class=\\\"cmmi-12\\\">m </span>are odd integers.<br class=\\\"newline\\\" />Then there exists integers <span class=\\\"cmmi-12\\\">j </span>and <span class=\\\"cmmi-12\\\">k </span>such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 1 and <span class=\\\"cmmi-12\\\">m </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>+ 1.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Let <span class=\\\"cmmi-12\\\">s </span>= <span class=\\\"cmmi-12\\\">n </span>+ <span class=\\\"cmmi-12\\\">m</span>.<br class=\\\"newline\\\" />Substituting, <span class=\\\"cmmi-12\\\">s </span>= <span class=\\\"cmmi-12\\\">n </span>+ <span class=\\\"cmmi-12\\\">m </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 1 + 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>+ 1 = 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>+ 2.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />We can now factor out the 2, <span class=\\\"cmmi-12\\\">s </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">j </span>+ <span class=\\\"cmmi-12\\\">k </span>+ 1).<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Let <span class=\\\"cmmi-12\\\">p </span>= <span class=\\\"cmmi-12\\\">j </span>+ <span class=\\\"cmmi-12\\\">k </span>+ 1.<br class=\\\"newline\\\" />We know that <span class=\\\"cmmi-12\\\">p </span>must be an integer because the sum of <span class=\\\"cmmi-12\\\">j </span>and <span class=\\\"cmmi-12\\\">k </span>is an integer, and\\n                                                                                                                        1 plus that value is also an integer.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Thus, <span class=\\\"cmmi-12\\\">s </span>= <span class=\\\"cmmi-12\\\">n </span>+ <span class=\\\"cmmi-12\\\">m </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span>(<span class=\\\"cmmi-12\\\">j </span>+ <span class=\\\"cmmi-12\\\">k </span>+ 1) = 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">p</span>, and is therefor even by definition.<br class=\\\"newline\\\" /><span class=\\\"cmti-12\\\">Q.E.D</span><br class=\\\"newline\\\" /><br class=\\\"newline\\\" />Up to this point, I&#8217;ve only asked you to prove things in passing. However, it is\\n                                                                                                                        now time for you to engage the material yourself. You can be sure that I will\\n                                                                                                                        never ask you to prove something that requires a technique or knowledge that has\\n                                                                                                                        yet to be presented to you. However, that doesn&#8217;t mean I won&#8217;t ask you to\\n                                                                                                                        push yourself. Here&#8217;s several tips to keep in mind when attempting a\\n                                                                                                                        proof:\\n                                                                                                                        <ul class=\\\"itemize1\\\">\\n                                                                                                                            <li class=\\\"itemize\\\">Don&#8217;t try to think of the entire proof before starting. A good math\\n                                                                                                                                proof often requires you to hit a dead end or two before the correct\\n                                                                                                                                path becomes clear. There&#8217;s no shame in stumbling your way through\\n                                                                                                                                a proof; you can always beautify your argument afterwards.\\n                                                                                                                            </li>\\n                                                                                                                            <li class=\\\"itemize\\\">If you don&#8217;t know where to start, try &#8217;expanding&#8217; every definition in\\n                                                                                                                                your statement, i.e I have an even integer, <span class=\\\"cmmi-12\\\">n</span>, which means there exists\\n                                                                                                                                an integer, <span class=\\\"cmmi-12\\\">j</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j</span>.\\n                                                                                                                            </li>\\n                                                                                                                            <li class=\\\"itemize\\\">Before you start your proof, write down what you need to show in order\\n                                                                                                                                to prove your statement. i.e To show that the sum, <span class=\\\"cmmi-12\\\">s</span>, is even, I must\\n                                                                                                                                show there exists an integer, <span class=\\\"cmmi-12\\\">p</span>, such that <span class=\\\"cmmi-12\\\">s </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">p</span>.\\n                                                                                                                            </li>\\n                                                                                                                            <li class=\\\"itemize\\\">If you keep hitting a dead end with the direct approach, try assuming\\n                                                                                                                                your statement is false and then look for a contradiction.\\n                                                                                                                            </li>\\n                                                                                                                            <li class=\\\"itemize\\\">If you&#8217;ve been at a proof for awhile and feel like you aren&#8217;t getting\\n                                                                                                                                anywhere, try taking a break. You&#8217;ll be surpised how effective a good\\n                                                                                                                                night&#8217;s sleep can be.\\n                                                                                                                            </li>\\n                                                                                                                            <li class=\\\"itemize\\\">Try looking over all the lemmas and thereoms that are related to the\\n                                                                                                                                topics in your statement; they could be the key to your proof.\\n                                                                                                                            </li>\\n                                                                                                                            <li class=\\\"itemize\\\">Move on to a different proof and come back later. You might be inspired\\n                                                                                                                                by a technique used elsewhere.\\n                                                                                                                            </li>\\n                                                                                                                            <li class=\\\"itemize\\\">Be creative! Mathematics may be rooted in logic, but that does not\\n                                                                                                                                deprive it of expression. As long as you don&#8217;t contradict the rules of\\n                                                                                                                                logic, feel free to express your argument in whichever manner you feel\\n                                                                                                                                is the most clear.</li>\\n                                                                                                                        </ul>\\n                                                                                                                        <!--l. 287-->\\n                                                                                                                        <p class=\\\"noindent\\\">I now ask you to prove the following lemma. Look to our previous proofs for\\n                                                                                                                            inspiration and guidance.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Lemma</span><br class=\\\"newline\\\" />The sum of an even and an odd integer is odd.<br class=\\\"newline\\\" />\\n                                                                                                                            <!--l. 293-->\\n                                                                                                                            <p class=\\\"noindent\\\">\\n                                                                                                                                <h3 class=\\\"sectionHead\\\"><span class=\\\"titlemark\\\">9 </span> <a id=\\\"x1-90009\\\"></a>Some Handy Notations</h3>\\n                                                                                                                                <!--l. 294-->\\n                                                                                                                                <p class=\\\"noindent\\\">Let&#8217;s be honest, no one wants to spend the time to write every proof in as much\\n                                                                                                                                    detail as we have within this article. Especially considering that our first\\n                                                                                                                                    attempt at a proof is bound to be riddled with dead ends. To help ease\\n                                                                                                                                    the tedium, mathematicians have developed several notations that make\\n                                                                                                                                    writing proofs faster. I have included several of the most common notations\\n                                                                                                                                    below.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Symbol</span>: <span class=\\\"msbm-10x-x-120\\\">&#x2124;</span><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Meaning</span>: &#8221;The set of integers&#8221;<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example with symbol</span>: For all <span class=\\\"cmmi-12\\\">n </span>in <span class=\\\"msbm-10x-x-120\\\">&#x2124;</span>, <span class=\\\"cmmi-12\\\">n </span>is odd if and only if there exists an\\n                                                                                                                                    integer, <span class=\\\"cmmi-12\\\">j</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3.<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example without symbol</span>: For all <span class=\\\"cmmi-12\\\">n </span>in the set of integers, <span class=\\\"cmmi-12\\\">n </span>is odd if and only\\n                                                                                                                                    if there exists an integer, <span class=\\\"cmmi-12\\\">j</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Symbol</span>: <span class=\\\"cmsy-10x-x-120\\\">&#x2200;</span><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Meaning</span>: &#8221;for all&#8221;, &#8221;for every&#8221;, or &#8221;for each&#8221;<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example with symbol</span>: <span class=\\\"cmsy-10x-x-120\\\">&#x2200;</span><span class=\\\"cmmi-12\\\">n </span>in <span class=\\\"msbm-10x-x-120\\\">&#x2124;</span>, <span class=\\\"cmmi-12\\\">n </span>is odd if and only if there exists an integer,\\n                                                                                                                                    <span class=\\\"cmmi-12\\\">j</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3.<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example without symbol</span>: For all <span class=\\\"cmmi-12\\\">n </span>in the set of integers, <span class=\\\"cmmi-12\\\">n </span>is odd if and only\\n                                                                                                                                    if there exists an integer, <span class=\\\"cmmi-12\\\">j</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Symbol</span>: <span class=\\\"cmsy-10x-x-120\\\">&#x2203;</span><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Meaning</span>: &#8221;there exists&#8221; or &#8221;exists&#8221;<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example with symbol</span>: <span class=\\\"cmsy-10x-x-120\\\">&#x2200;</span><span class=\\\"cmmi-12\\\">n </span>in <span class=\\\"msbm-10x-x-120\\\">&#x2124;</span>, <span class=\\\"cmmi-12\\\">n </span>is odd if and only if <span class=\\\"cmsy-10x-x-120\\\">&#x2203; </span>an integer, <span class=\\\"cmmi-12\\\">j</span>, such\\n                                                                                                                                    that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3.<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example without symbol</span>: For all <span class=\\\"cmmi-12\\\">n </span>in the set of integers, <span class=\\\"cmmi-12\\\">n </span>is odd if and only\\n                                                                                                                                    if there exists an integer, <span class=\\\"cmmi-12\\\">j</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Symbol</span>: <span class=\\\"cmsy-10x-x-120\\\">&#x2194;</span><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Meaning</span>: &#8221;if and only if&#8221;<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example with symbol</span>: <span class=\\\"cmsy-10x-x-120\\\">&#x2200;</span><span class=\\\"cmmi-12\\\">n </span>in <span class=\\\"msbm-10x-x-120\\\">&#x2124;</span>, <span class=\\\"cmmi-12\\\">n </span>is odd <span class=\\\"cmsy-10x-x-120\\\">&#x2194;&#x2203; </span>an integer, <span class=\\\"cmmi-12\\\">j</span>, such that\\n                                                                                                                                    <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3.<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example without symbol</span>: For all <span class=\\\"cmmi-12\\\">n </span>in the set of integers, <span class=\\\"cmmi-12\\\">n </span>is odd if and only\\n                                                                                                                                    if there exists an integer, <span class=\\\"cmmi-12\\\">j</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Symbol</span>: s.t<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Meaning</span>: &#8221;such that&#8221;<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example with symbol</span>: <span class=\\\"cmsy-10x-x-120\\\">&#x2200;</span><span class=\\\"cmmi-12\\\">n </span>in <span class=\\\"msbm-10x-x-120\\\">&#x2124;</span>, <span class=\\\"cmmi-12\\\">n </span>is odd <span class=\\\"cmsy-10x-x-120\\\">&#x2194;&#x2203; </span>an integer, <span class=\\\"cmmi-12\\\">j</span>, s.t <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3.<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example without symbol</span>: For all <span class=\\\"cmmi-12\\\">n </span>in the set of integers, <span class=\\\"cmmi-12\\\">n </span>is odd if and only\\n                                                                                                                                    if there exists an integer, <span class=\\\"cmmi-12\\\">j</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Symbol</span>: <span class=\\\"cmsy-10x-x-120\\\">&#x2208;</span><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Meaning</span>: &#8221;in&#8221; (generally referring to set membership)<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example with symbol</span>: <span class=\\\"cmsy-10x-x-120\\\">&#x2200;</span><span class=\\\"cmmi-12\\\">n </span><span class=\\\"cmsy-10x-x-120\\\">&#x2208; </span><span class=\\\"msbm-10x-x-120\\\">&#x2124;</span>, <span class=\\\"cmmi-12\\\">n </span>is odd <span class=\\\"cmsy-10x-x-120\\\">&#x2194;&#x2203; </span>an integer, <span class=\\\"cmmi-12\\\">j</span>, s.t <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3.<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example without symbol</span>: For all <span class=\\\"cmmi-12\\\">n </span>in the set of integers, <span class=\\\"cmmi-12\\\">n </span>is odd if and only\\n                                                                                                                                    if there exists an integer, <span class=\\\"cmmi-12\\\">j</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Symbol</span>: !<span class=\\\"cmsy-10x-x-120\\\">&#x2203;</span><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Meaning</span>: &#8221;there exists unique&#8221;<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example with symbol</span>: <span class=\\\"cmsy-10x-x-120\\\">&#x2200;</span><span class=\\\"cmmi-12\\\">n </span><span class=\\\"cmsy-10x-x-120\\\">&#x2208; </span><span class=\\\"msbm-10x-x-120\\\">&#x2124;</span>, <span class=\\\"cmmi-12\\\">n </span>is odd <span class=\\\"cmsy-10x-x-120\\\">&#x2194; </span>!<span class=\\\"cmsy-10x-x-120\\\">&#x2203; </span>integer, <span class=\\\"cmmi-12\\\">j</span>, s.t <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3.<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example without symbol</span>: For all <span class=\\\"cmmi-12\\\">n </span>in the set of integers, <span class=\\\"cmmi-12\\\">n </span>is odd if and only\\n                                                                                                                                    if there exists a unique integer, <span class=\\\"cmmi-12\\\">j</span>, such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">j </span>+ 3.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Symbol</span>: <span class=\\\"cmsy-10x-x-120\\\">&#x2192;</span><br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Meaning</span>: &#8221;then&#8221;<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example with symbol</span>: If <span class=\\\"cmmi-12\\\">n </span>and <span class=\\\"cmmi-12\\\">m </span>are odd <span class=\\\"cmsy-10x-x-120\\\">&#x2192; </span>their sum is even.<br class=\\\"newline\\\" /><span class=\\\"cmbx-12\\\">Example without symbol</span>: If <span class=\\\"cmmi-12\\\">n </span>and <span class=\\\"cmmi-12\\\">m </span>are odd then their sum is even.<br class=\\\"newline\\\" /><br class=\\\"newline\\\" />For the sake of clarity, I&#8217;ll be conservative with my use of symbols throughout the\\n                                                                                                                                    remainder of this article. However, you should feel free to use them within your\\n                                                                                                                                    proofs as much or as little as you want - I think you&#8217;ll find they save you a lot of\\n                                                                                                                                    time.\\n                                                                                                                                    <!--l. 338-->\\n                                                                                                                                    <p class=\\\"noindent\\\">\\n                                                                                                                                        <h3 class=\\\"sectionHead\\\"><span class=\\\"titlemark\\\">10 </span> <a id=\\\"x1-1000010\\\"></a>Logical Lessons (incomplete)</h3>\\n                                                                                                                                        <!--l. 339-->\\n                                                                                                                                        <p class=\\\"noindent\\\">When we need to show that one statement implies another, we use an <span class=\\\"cmti-12\\\">if-then</span>\\n                                                                                                                                            statement. The most common structure for an <span class=\\\"cmti-12\\\">if-then </span>statement is quite obvious:\\n                                                                                                                                            &#8221;If <span class=\\\"cmti-12\\\">Statement-A</span>, then <span class=\\\"cmti-12\\\">Statement-B</span>.&#8221; For example:\\n                                                                                                                                            <ul class=\\\"itemize1\\\">\\n                                                                                                                                                <li class=\\\"itemize\\\">If it is raining, then you will wear a hooded jacket.\\n                                                                                                                                                </li>\\n                                                                                                                                                <li class=\\\"itemize\\\">If <span class=\\\"cmmi-12\\\">n </span>is odd, then there exists an integer <span class=\\\"cmmi-12\\\">k </span>such that <span class=\\\"cmmi-12\\\">n </span>= 2 <span class=\\\"cmsy-10x-x-120\\\">* </span><span class=\\\"cmmi-12\\\">k </span>+ 3.\\n                                                                                                                                                </li>\\n                                                                                                                                                <li class=\\\"itemize\\\">If <span class=\\\"cmmi-12\\\">n </span>and <span class=\\\"cmmi-12\\\">m </span>are integers, then there sum is an integer.</li>\\n                                                                                                                                            </ul>\\n                                                                                                                                            <!--l. 345-->\\n                                                                                                                                            <p class=\\\"noindent\\\">The meaning of an <span class=\\\"cmti-12\\\">if-then </span>statement follows intuition - whenever <span class=\\\"cmti-12\\\">Statement-A </span>is true,\\n                                                                                                                                                then <span class=\\\"cmti-12\\\">Statement-B </span>is also true. As such, an <span class=\\\"cmti-12\\\">if-then </span>statement defines a\\n                                                                                                                                                consequential relationship between statements <span class=\\\"cmmi-12\\\">A </span>and <span class=\\\"cmmi-12\\\">B</span>; explicity, <span class=\\\"cmmi-12\\\">B </span>is a\\n                                                                                                                                                consequence of <span class=\\\"cmmi-12\\\">A</span>.\\n                                                                                                                                                <!--l. 347-->\\n                                                                                                                                                <p class=\\\"indent\\\"> As we observed in <span class=\\\"cmcsc-10x-x-120\\\">T<span class=\\\"small-caps\\\">h</span><span class=\\\"small-caps\\\">e</span> O<span class=\\\"small-caps\\\">d</span><span class=\\\"small-caps\\\">d</span><span class=\\\"small-caps\\\">i</span><span class=\\\"small-caps\\\">t</span><span class=\\\"small-caps\\\">i</span><span class=\\\"small-caps\\\">e</span><span class=\\\"small-caps\\\">s</span> <span class=\\\"small-caps\\\">o</span><span class=\\\"small-caps\\\">f</span> O<span class=\\\"small-caps\\\">d</span><span class=\\\"small-caps\\\">d</span><span class=\\\"small-caps\\\">n</span><span class=\\\"small-caps\\\">e</span><span class=\\\"small-caps\\\">s</span><span class=\\\"small-caps\\\">s</span></span>, the <span class=\\\"cmti-12\\\">if-then </span>statement does\\n                                                                                                                                                    not always work in reverse - it is not necessarily the case that <span class=\\\"cmmi-12\\\">A </span>is also a\\n                                                                                                                                                    consequence of <span class=\\\"cmmi-12\\\">B</span>. However, we often encounter (and even seek out) statements\\n                                                                                                                                                    that are consequential of one another. Statements involved in such a relationship\\n                                                                                                                                                    hold a special interest to mathematicians because they are <span class=\\\"cmti-12\\\">equivalent</span>. When two\\n                                                                                                                                                    statements are equivalent, we can effectively substitue equivalent either statement\\n                                                                                                                                                    for the other. But meer substitution does not do the concept of equivalency\\n                                                                                                                                                    justice...\\n                                                                                                                                                    <!--l. 350-->\\n                                                                                                                                                    <p class=\\\"noindent\\\">\\n                                                                                                                                                        <h3 class=\\\"sectionHead\\\"><span class=\\\"titlemark\\\">11 </span> <a id=\\\"x1-1100011\\\"></a>Oops!</h3>\\n                                                                                                                                                        <!--l. 351-->\\n                                                                                                                                                        <p class=\\\"noindent\\\">This article isn&#8217;t finished yet, but updates are pushed daily. Come back\\n                                                                                                                                                            soon!\\n                                                                                                                                                            <!--l. 353-->\\n                                                                                                                                                            <p class=\\\"noindent\\\">\\n                                                                                                                                                                <h3 class=\\\"sectionHead\\\"><span class=\\\"titlemark\\\">12 </span> <a id=\\\"x1-1200012\\\"></a>Reccomended Reading</h3>\\n                                                                                                                                                                <ul class=\\\"itemize1\\\">\\n                                                                                                                                                                    <li class=\\\"itemize\\\">&#8221;What is Mathematics?&#8221; - Richard Courant &amp; Herbert Robbins\\n                                                                                                                                                                    </li>\\n                                                                                                                                                                    <li class=\\\"itemize\\\">&#8221;Linear Algebra and its Applications&#8221; - Davic C. Lay\\n                                                                                                                                                                    </li>\\n                                                                                                                                                                    <li class=\\\"itemize\\\">&#8221;A Book of Abstract Algebra&#8221; - Charles C. Pinter (advanced)\\n                                                                                                                                                                    </li>\\n                                                                                                                                                                    <li class=\\\"itemize\\\">&#8221;Abstract Algebra&#8221; - I.N. Herstein (advanced)\\n                                                                                                                                                                    </li>\\n                                                                                                                                                                    <li class=\\\"itemize\\\">More to come...</li>\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAZBAMAAAAVnMmFAAAAMFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv3aB7AAAAD3RSTlMAdplUMomrEETvZs3dIrtSgOhRAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAd0lEQVQIHWNgVHYVK2Bg8LBcwL2AgcFBm4GzgYGB4RSDP5Bk/8sQxsLAwDyB4bAXAwNjAIOoAFAUG/gPAh+wyQDFGINyQTLhDJJAixjOMvCDTDnMwB8AEmW4bwCm3oFJxg1gygxMcigwgFT6dTQuAFLz//93YAAAstAZxv+KghgAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAZBAMAAAAVnMmFAAAAMFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv3aB7AAAAD3RSTlMAdplUMomrEETvZs3dIrtSgOhRAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAd0lEQVQIHWNgVHYVK2Bg8LBcwL2AgcFBm4GzgYGB4RSDP5Bk/8sQxsLAwDyB4bAXAwNjAIOoAFAUG/gPAh+wyQDFGINyQTLhDJJAixjOMvCDTDnMwB8AEmW4bwCm3oFJxg1gygxMcigwgFT6dTQuAFLz//93YAAAstAZxv+KghgAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAdBAMAAAAeHvJcAAAAMFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv3aB7AAAAD3RSTlMAdomZqyIQ791Uu81EMmYMTqXSAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABBElEQVQoFWNgEDIJYAABCQMwBSZuAEmmBMYyMIfjAZgCEYftgQRHAMNHsEg+ROMCEOc+EHNMYPgEYjNMB5MMC0AUSIKBgfUnA68DA4MJq8gFIG8BEEMluBYwXTVQZeg7yX4AKLYAiKES0gy8Tl4CbF9A6pElOB0YGK70MXAWrmNgYFm1qmrVqgSIjsMMjCyumq3MBvfZEpB18K45I8fG65DAMSGeESgOseM8kMH+//9fBrYHDOwJzJIwiaD9jiAmKliAykXwFBBMHKz/OAAO5ZQKw+IS3Rx4XKJLwOMSQwIWl+gS4LjEFASJcC3ALs4gjUMcFJdYATAusYqD4hKrBDgu4TIArHVUa+DuoasAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAdBAMAAACpowp7AAAAMFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv3aB7AAAAD3RSTlMAdomZqyIQ791Uu81EMmYMTqXSAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAA0UlEQVQYGWNgEDIJYAABCQMQyZTAWAaiGTgegMkAho8gmiEfrIhjAsMnMHc6mGRgYP3JwOvAwGDCKnIBJMK1gOmqgSpD30n2AyCuNAOvk5cA2xewHAOnAwPDlT4GzsJ1IDmGwwyMLK6arcwG99kSGBh415yRY+N1SOCYEM8IlGT///8vA9sDBvYEZkmQYlLAf2TwgRSdULWMyq7IutQYxBOQ+K0M/AJI3E4GfgUkLgND/AQU7ioUHuMGFO4UFB6PAQOyybfOHHyAJF////8FMBcAPkk3ddpR7wMAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAdBAMAAACK+FuuAAAAMFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv3aB7AAAAD3RSTlMAMt1EmSKJzat2EO9Uu2bMb98iAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAXUlEQVQIHWNgYFRgYGBgdvkAJBkYiSaZQSpZ039MAGlDB/+BAGwSusQ0jwAGBrYFnLsYGJgCGH4CyQMM30CKWP+ASN4LIHI6iOBpAJEmDJxAR102nsfAwP3//0cGABe/HTr578w+AAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAdBAMAAACK+FuuAAAAMFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv3aB7AAAAD3RSTlMAMt1EmSKJzat2EO9Uu2bMb98iAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAXUlEQVQIHWNgYFRgYGBgdvkAJBkYiSaZQSpZ039MAGlDB/+BAGwSusQ0jwAGBrYFnLsYGJgCGH4CyQMM30CKWP+ASN4LIHI6iOBpAJEmDJxAR102nsfAwP3//0cGABe/HTr578w+AAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAcBAMAAABBpIgLAAAAMFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv3aB7AAAAD3RSTlMAMt1EmSKJzat2EO9Uu2bMb98iAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAXUlEQVQIHWNgYFRgYGBgdvkAJBkYiSaZQSpZ039MAGlDB/+BAGwSQmKaRwADA9sCzl0MDEwBDD+B5AGGbyBp1j8gkvcCiJwOIngaQKQJAyfQOZeN5zEwcP///5EBALkeHTor2oN7AAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAdBAMAAACK+FuuAAAAMFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv3aB7AAAAD3RSTlMAMt1EmSKJzat2EO9Uu2bMb98iAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAXUlEQVQIHWNgYFRgYGBgdvkAJBkYiSaZQSpZ039MAGlDB/+BAGwSusQ0jwAGBrYFnLsYGJgCGH4CyQMM30CKWP+ASN4LIHI6iOBpAJEmDJxAR102nsfAwP3//0cGABe/HTr578w+AAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAdBAMAAACK+FuuAAAAMFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv3aB7AAAAD3RSTlMAMt1EmSKJzat2EO9Uu2bMb98iAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAXUlEQVQIHWNgYFRgYGBgdvkAJBkYiSaZQSpZ039MAGlDB/+BAGwSusQ0jwAGBrYFnLsYGJgCGH4CyQMM30CKWP+ASN4LIHI6iOBpAJEmDJxAR102nsfAwP3//0cGABe/HTr578w+AAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAdBAMAAACK+FuuAAAAMFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv3aB7AAAAD3RSTlMAMt1EmSKJzat2EO9Uu2bMb98iAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAXUlEQVQIHWNgYFRgYGBgdvkAJBkYiSaZQSpZ039MAGlDB/+BAGwSusQ0jwAGBrYFnLsYGJgCGH4CyQMM30CKWP+ASN4LIHI6iOBpAJEmDJxAR102nsfAwP3//0cGABe/HTr578w+AAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAdBAMAAACK+FuuAAAAMFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv3aB7AAAAD3RSTlMAMt1EmSKJzat2EO9Uu2bMb98iAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAXUlEQVQIHWNgYFRgYGBgdvkAJBkYiSaZQSpZ039MAGlDB/+BAGwSusQ0jwAGBrYFnLsYGJgCGH4CyQMM30CKWP+ASN4LIHI6iOBpAJEmDJxAR102nsfAwP3//0cGABe/HTr578w+AAAAAElFTkSuQmCC\"","module.exports = \"<h3 class=\\\"sectionHead\\\">Under Construction</h3>\\n\";"],"sourceRoot":""}