{"componentChunkName":"component---src-templates-blog-post-js","path":"/joes-barbershop/","result":{"data":{"site":{"siteMetadata":{"title":"Justin is a Maker","author":"Justin Smith"}},"mdx":{"id":"25ecd5c2-f457-5bca-9f81-462e6c8936b8","frontmatter":{"title":"Joe's Barbershop","date":"March 31, 2015","externalLink":"http://joesbarbershopchicago.com","teaser":"A built-from-scratch WordPress site to show off the best barbershop in the Midwest"},"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Joe's Barbershop\",\n  \"date\": \"2015-03-31T00:00:00-0500\",\n  \"teaser\": \"A built-from-scratch WordPress site to show off the best barbershop in the Midwest\",\n  \"featuredImage\": \"joes-thumbnail.jpg\",\n  \"externalLink\": \"http://joesbarbershopchicago.com\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"People come from far and wide to get their hair cut at Joe\\u2019s. The shop has been in Logan Square since 1968 when Joe Caccavella, Sr bought out the barber he was working under after he came back from the Army. Over the past 47 years, Joe Sr and his son Joe Jr have evolved the shop into an empire that completely destroys any competition stupid enough to rear its ugly head.\"), mdx(\"p\", null, \"Joe\\u2019s came into my life much, much later than 1968 through my buddy Ralph Holcomb. Ralph is a wonderful barber here in Chicago who helped me find my first apartment, which coincidentally happened to be behind Joe\\u2019s. I talked with Joe Jr, and after a quick discussion and a handshake I was moved in to the apartment on the other side of the wall.\"), mdx(\"p\", null, \"Joe Jr led the charge to really put the shop on the map with the younger generation. Joe Sr, aka \\u201CPapa Joe\\u201D, had a great roster of regulars, but Joe Jr wanted to get the younger guys in the shop. He mounted a full-fledged media campaign to get their name and their outstanding reputation out to a new audience, and boy did he do a good job. The shop has been voted the best in Chicago for five years running now, and with a new expansion into what used to be my apartment, there\\u2019s no sign of them slowing down.\"), mdx(\"p\", null, \"While Joe Jr was planning his strategy to overtake the barber world, I was rebuilding their site for them. Joe is a no-nonsense guy, and he wanted a no-nonsense website. Straightforward, clean, and easy to find the info that you need. I wanted Joe to be able to have as much control over the website as he could so that he didn\\u2019t have to wait for me when he wanted to make a change. To facilitate that, I built him a custom Wordpress theme from the ground up and rigged everything up with Advanced Custom Fields and Repeaters so that he can edit anything on the site without having to know any code at all.\"), mdx(\"div\", {\n    \"className\": \"image-container half-image\"\n  }, \"\\n  \", mdx(\"div\", {\n    parentName: \"div\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"800px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3c3a8d48b0871101f2084607a8428fe1/4b190/joes-home.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"116.33333333333333%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAXABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMEAf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHHbFRIpltwIg//xAAaEAADAQADAAAAAAAAAAAAAAABAgMAERIh/9oACAEBAAEFAptMAUlqkM5ZAlFVTg/A7e7/xAAVEQEBAAAAAAAAAAAAAAAAAAARIP/aAAgBAwEBPwEj/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAHxAAAgECBwAAAAAAAAAAAAAAAREAAhIgISIyUXGR/9oACAEBAAY/Ahcptp8jpC6gC1cwWl5Yf//EABwQAAMBAAIDAAAAAAAAAAAAAAABESEQMUFRof/aAAgBAQABPyGBLm1Cdbc/AmgkWJBJuraJqXqMZBV+Gq7z1x//2gAMAwEAAgADAAAAEL8HPP/EABURAQEAAAAAAAAAAAAAAAAAACBR/9oACAEDAQE/EKH/xAAWEQADAAAAAAAAAAAAAAAAAAARIEH/2gAIAQIBAT8QMT//xAAdEAEBAAICAwEAAAAAAAAAAAABEQAhQWExUZFx/9oACAEBAAE/EDBQ2UV+ZvrE4E/J5w5B5gUN6xMatpIPQZIMuqTR85xCqYQsod8J0kRuOcWq+8//2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Joe's Barbershop Home Page\",\n    \"title\": \"Joe's Barbershop Home Page\",\n    \"src\": \"/static/3c3a8d48b0871101f2084607a8428fe1/4b190/joes-home.jpg\",\n    \"srcSet\": [\"/static/3c3a8d48b0871101f2084607a8428fe1/f93b5/joes-home.jpg 300w\", \"/static/3c3a8d48b0871101f2084607a8428fe1/b4294/joes-home.jpg 600w\", \"/static/3c3a8d48b0871101f2084607a8428fe1/4b190/joes-home.jpg 800w\"],\n    \"sizes\": \"(max-width: 800px) 100vw, 800px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"a\", {\n    parentName: \"div\",\n    \"className\": \"image-caption\"\n  }, \"Joe's Barbershop Home Page\"), \"\\n  \"), \"\\n  \", mdx(\"div\", {\n    parentName: \"div\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"800px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a3358a59f15dc7b75f282cda76951574/4b190/joes-history.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"116.33333333333333%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAXABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAByVlkTqZfdgmD/8QAHRAAAwABBQEAAAAAAAAAAAAAAQIDABESExQhMf/aAAgBAQABBQKboFFp5Vt7mo6/3DmvkrGYs/LT/8QAFREBAQAAAAAAAAAAAAAAAAAAESD/2gAIAQMBAT8BI//EABURAQEAAAAAAAAAAAAAAAAAABEg/9oACAECAQE/AWP/xAAfEAACAQIHAAAAAAAAAAAAAAAAARECIRASMTJBkbH/2gAIAQEABj8CU+G1dEoVF5sWpxccmbQ//8QAHBABAAMAAgMAAAAAAAAAAAAAAQARITFBUWFx/9oACAEBAAE/IaEnECtVeoKiDAwqawhwrxC+x8Llh0r1BPDDICB0NjLyujtuf//aAAwDAQACAAMAAAAQT8c8/8QAFhEBAQEAAAAAAAAAAAAAAAAAEAEx/9oACAEDAQE/EBlP/8QAFREBAQAAAAAAAAAAAAAAAAAAASD/2gAIAQIBAT8QFH//xAAdEAEAAwEAAgMAAAAAAAAAAAABABEhMVFxYYGx/9oACAEBAAE/EOSuitrfdTfoVc1XyV2HhtwqWG4R5uyahq9+4gVadUp7yBI78iv2AQLoc7BAVQBhiclAOgJYw8z/2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Joe's Barbershop History Page\",\n    \"title\": \"Joe's Barbershop History Page\",\n    \"src\": \"/static/a3358a59f15dc7b75f282cda76951574/4b190/joes-history.jpg\",\n    \"srcSet\": [\"/static/a3358a59f15dc7b75f282cda76951574/f93b5/joes-history.jpg 300w\", \"/static/a3358a59f15dc7b75f282cda76951574/b4294/joes-history.jpg 600w\", \"/static/a3358a59f15dc7b75f282cda76951574/4b190/joes-history.jpg 800w\"],\n    \"sizes\": \"(max-width: 800px) 100vw, 800px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"a\", {\n    parentName: \"div\",\n    \"className\": \"image-caption\"\n  }, \"Joe's Barbershop History Page\"), \"\\n  \")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"/joes-barbershop/","previous":{"id":"c57fa806-5e42-5892-b3fa-77232bb8d28c","fields":{"slug":"/arduino-projection-mapping/"},"frontmatter":{"title":"Arduino-Controlled Projection Mapping"},"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Arduino-Controlled Projection Mapping\",\n  \"date\": \"2015-02-18T00:00:00-0500\",\n  \"teaser\": \"Turning a room into a projection-mapped beauty with Resolume, Magic Music Visualizer, and a custom-built cupcake controller running on Arduino.\",\n  \"featuredImage\": \"ftloc-teaser.jpg\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"I\\u2019ve been interested in projection mapping ever since I saw what \", mdx(\"a\", {\n    href: \"http://www.lvthn.com/work/wooden-toy/\",\n    target: \"_blank\"\n  }, \"Leviathan\"), \" and \", mdx(\"a\", {\n    href: \"http://vsquaredlabs.com/project/amon-tobin/\"\n  }, \"V Squared Labs\"), \" came up with for \", mdx(\"a\", {\n    href: \"https://www.youtube.com/watch?v=0zMI-qbmIPk\",\n    target: \"_blank\"\n  }, \"Amon Tobin\\u2019s ISAM tour\"), \". I wasn\\u2019t able to attend the concert in person, but even just watching the footage inspired a sense of awe in me. The whole project seemed like it was a \", mdx(\"a\", {\n    href: \"http://en.wikipedia.org/wiki/Clarke%27s_three_laws\",\n    target: \"_blank\"\n  }, \"combination of magic and technology\"), \", and I knew that I had to work with it.\"), mdx(\"p\", null, \"My interest stayed dormant for a few years until I recieved a Tweet out of the blue asking if I wanted to collaborate to make something \\u201Ccollossal.\\u201D How do you say no to that?\"), mdx(\"div\", {\n    className: \"paragraph-with-picture\"\n  }, mdx(\"p\", null, \"The message came from an artist named \", mdx(\"a\", {\n    href: \"http://georgeberlin.com/\",\n    target: \"_blank\"\n  }, \"George Berlin\"), \". George's background is in illustration, but he's also well-versed in animation and projection mapping. He explained to me that he was wrestling with how to control his projects with objects in the real world. The software that he uses to control the projections can be mapped to a MIDI controller, but interacting with a controller takes a lot of magic out of the visualization.\"), mdx(\"div\", {\n    \"className\": \"image-container small-image\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/186d05e51e9f7507b1a2fa34742ab5ce/c08c5/midi-controller.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"50%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQCAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAACA//aAAwDAQACEAMQAAABzROVpMFAH//EABoQAAICAwAAAAAAAAAAAAAAAAABAhESEyH/2gAIAQEAAQUCbSjrZeLLJdf/xAAXEQEBAQEAAAAAAAAAAAAAAAABABEh/9oACAEDAQE/AcSHl//EABcRAAMBAAAAAAAAAAAAAAAAAAABEQL/2gAIAQIBAT8BtHhU/8QAGRABAAIDAAAAAAAAAAAAAAAAAQAxAhEg/9oACAEBAAY/ArFmOy4nH//EABoQAQACAwEAAAAAAAAAAAAAAAEAESExQRD/2gAIAQEAAT8hNtlrsMLN1uZTx8EJSkTYqs//2gAMAwEAAgADAAAAEBfv/8QAFREBAQAAAAAAAAAAAAAAAAAAAQD/2gAIAQMBAT8QQqM6Fv/EABcRAQEBAQAAAAAAAAAAAAAAAAEAESH/2gAIAQIBAT8QA+ltX//EABsQAQEAAgMBAAAAAAAAAAAAAAERACEQMUFx/9oACAEBAAE/EKchQSPtMMuCUjoF8yLPZNJrv3hsUOkZMWqHq1z/2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Traktor X1 by sebilden\",\n    \"title\": \"Traktor X1 by sebilden\",\n    \"src\": \"/static/186d05e51e9f7507b1a2fa34742ab5ce/c08c5/midi-controller.jpg\",\n    \"srcSet\": [\"/static/186d05e51e9f7507b1a2fa34742ab5ce/f93b5/midi-controller.jpg 300w\", \"/static/186d05e51e9f7507b1a2fa34742ab5ce/b4294/midi-controller.jpg 600w\", \"/static/186d05e51e9f7507b1a2fa34742ab5ce/c08c5/midi-controller.jpg 640w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"a\", {\n    parentName: \"div\",\n    \"href\": \"https://www.flickr.com/photos/sebilden/13107904853/in/photolist-kYirrx-cMizwA-4ZHL9q-4YDdRY-4ZBGTD-4YDdRj-4YDdSA-7FWaZK-75TB6u-bHqmAZ-buvCk3-buvmKW-buvFcw-bHqcrV-buvuNu-9UCdcZ-etdr3o-4YDdT9-ghNPB-bzyEVx-4ZFXvv-7ig5hv-7ig5bt-7ijYAm-7ig5av-7ijYHd-7ijYHW-7GaRos-8w4FKU-6n1VSX-nPrtTp-o6Q8a1-nPraJj-nPrCqJ-o6Cxhc-nPrgfQ-nPrcjJ-o6PSwJ-nPsbgB-6n5Mb1-c8JyEY-75WLAN-cWDnzf-7uxE2f-fYE3S-oYk5pr-oFQYy2-2zXBBD-dWsJyU-fYDZy\",\n    \"target\": \"_new\",\n    \"className\": \"image-caption\"\n  }, \"Traktor X1 by sebilden\"), \"\\n  \")), mdx(\"p\", null, \"We agreed to get in touch if we bumped into an interesting project that seemed like it would be a good fit, and after a few misses due to scheduling conflicts we got the perfect opportunity. I was contacted by an old friend, \", mdx(\"a\", {\n    href: \"http://andreagonzalez.info\",\n    target: \"_blank\"\n  }, \"Andrea Gonazalez\"), \", who was looking for a piece for a fundraiser. Andrea is an excellent artist who went to \", mdx(\"a\", {\n    href: \"http://www.saic.edu/index.html\",\n    target: \"_blank\"\n  }, \"SAIC\"), \" with me\\u2013she recently decided to leave the design industry to pursue her passion for French pastries. The fundraiser was an event for the \", mdx(\"a\", {\n    href: \"http://frenchpastryschool.com\",\n    target: \"_blank\"\n  }, \"French Pastry School\"), \" called \\u201D\", mdx(\"a\", {\n    href: \"http://www.fortheloveofchocolatefoundation.org/\",\n    target: \"_blank\"\n  }, \"For the Love of Chocolate\"), \".\\u201D The theme for the event was the \\u201960s, and she needed a projection to transform a room into a psychedelic landscape. The room that we were in came complete with a sitar band called \", mdx(\"a\", {\n    href: \"http://www.thegitacult.com/\",\n    target: \"_blank\"\n  }, \"\\u201CThe Gita Cult,\\u201D\"), \" and a seemingly endless supply of delicious treats. This seemed like a great opportunity for a collaborative project with the ever-funky George, so we started brainstorming.\"), mdx(\"h3\", null, \"Enough about the backstory.\", mdx(\"br\", null), \"Here\\u2019s how we made it.\"), mdx(\"p\", null, \"Like I mentioned earlier, George has the projection mapping thing down pat, so we just needed to learn how to get an Arduino to talk to our mapping software. The first step on my side of the project was getting familar with the software.\"), mdx(\"h4\", null, \"Resolume\"), mdx(\"p\", null, \"We used a program called \", mdx(\"a\", {\n    href: \"http://resolume.com/\",\n    target: \"_blank\"\n  }, \"Resolume\"), \" to handle the projection mapping and Arduino-controlled effects. Resolume is a pretty amazing piece of software\\u2013even just playing around with the examples is impressive.\"), mdx(\"div\", {\n    \"className\": \"image-container large-image\"\n  }, \"\\n  \", mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1200px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a5b85bec5da3fd9dcfabd9dde8f879c9/c58a3/resolume-screenshot.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"59.00000000000001%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMBAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABzVxdEAL/AP/EABgQAAIDAAAAAAAAAAAAAAAAABAhAAEC/9oACAEBAAEFAtRikf/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABUQAQEAAAAAAAAAAAAAAAAAACAx/9oACAEBAAY/Aov/xAAZEAEBAQADAAAAAAAAAAAAAAABMQARIaH/2gAIAQEAAT8hCX1lE65ubdQ1yG//2gAMAwEAAgADAAAAEFfP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhABAAMBAQEAAAAAAAAAAAAAAQARITFxof/aAAgBAQABPxBDsLZWoo1aq0b7CLsj4xoJXR3YLVct4S1z7P/Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"A screenshot of the Resolume Dashboard\",\n    \"title\": \"A screenshot of the Resolume Dashboard\",\n    \"src\": \"/static/a5b85bec5da3fd9dcfabd9dde8f879c9/e5166/resolume-screenshot.jpg\",\n    \"srcSet\": [\"/static/a5b85bec5da3fd9dcfabd9dde8f879c9/f93b5/resolume-screenshot.jpg 300w\", \"/static/a5b85bec5da3fd9dcfabd9dde8f879c9/b4294/resolume-screenshot.jpg 600w\", \"/static/a5b85bec5da3fd9dcfabd9dde8f879c9/e5166/resolume-screenshot.jpg 1200w\", \"/static/a5b85bec5da3fd9dcfabd9dde8f879c9/c58a3/resolume-screenshot.jpg 1500w\"],\n    \"sizes\": \"(max-width: 1200px) 100vw, 1200px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n  \", mdx(\"a\", {\n    parentName: \"div\",\n    \"className\": \"image-caption\"\n  }, \"A screenshot of the Resolume Dashboard\")), mdx(\"p\", null, \"As you can see in the image above, the Resolume dashboard can be a little overwhleming at first. The general idea is that you work in compositions that group clips together for a certain arrangement. Clips are housed in the upper right quarter of the dashboard, and are queued to start playing on the first beat of the music. There are some clips that have audio baked into the file\\u2013the visuals of these files react to tempo changes from the attached audio. You set the tempo for a composition the same way that you set it for DJing\", \"\\u2013\", \"by clicking a tap button along with the count of the music.\"), mdx(\"p\", null, \"Resolume can also add a layer of visual effects to each clip, or to the entire compostion. The effects interface is what we were interested in using it for. The visualizations that we were generating wouldn\\u2019t actually be generated in Resolume\\u2013we just needed an additional layer of control and the mapping. But before we get to mapping, let\\u2019s talk about how we generated the visuals to map.\"), mdx(\"h4\", null, \"Magic Music Visuals\"), mdx(\"div\", {\n    className: \"paragraph-with-picture\"\n  }, mdx(\"p\", null, \"George was the brains behind the visuals for this project, but I still wanted to learn how he was generating them to get a better understanding of the piece end-to-end. He introduced me to a program called \", mdx(\"a\", {\n    href: \"http://magicmusicvisuals.com/\",\n    target: \"_blank\"\n  }, \"Magic Music Visuals\"), \". For those of you familiar with \", mdx(\"a\", {\n    href: \"https://cycling74.com/products/max/\",\n    target: \"_blank\"\n  }, \"Max/MSP\"), \", Magic Music Visuals (henceforth to be referred to as \\\"MMV\\\") is extremely similar. You interact with a set of modules by patching them together in series to create a visual circuit.\"), mdx(\"div\", {\n    \"className\": \"image-container small-image\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"760px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/776487b047a8a4279025da182aaa8e6d/307d7/magic-music-visuals-screenshot.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"62.66666666666667%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgP/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABJTbipsV//8QAGhAAAgMBAQAAAAAAAAAAAAAAAAEREiECE//aAAgBAQABBQLaORM9LPm06f/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABcRAAMBAAAAAAAAAAAAAAAAAAEQEUH/2gAIAQIBAT8BF1f/xAAcEAACAgIDAAAAAAAAAAAAAAAAARExEiEyUYH/2gAIAQEABj8C97FdFkYpScjbP//EABsQAQADAQADAAAAAAAAAAAAAAEAESExQWFx/9oACAEBAAE/IRobfqkWJt8GJu32M1aw0ORUVSijJZ6s/9oADAMBAAIAAwAAABCvz//EABcRAAMBAAAAAAAAAAAAAAAAAAEQEUH/2gAIAQMBAT8QMxf/xAAXEQEAAwAAAAAAAAAAAAAAAAABEBEh/9oACAECAQE/EEjFR//EABoQAQADAQEBAAAAAAAAAAAAAAEAESFRQXH/2gAIAQEAAT8Que1QqYqK9l6699yDArGrFPyPkl1XTmzYTsDQcjiV7VT/2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"A screenshot of Magic Music Visuals\",\n    \"title\": \"A screenshot of Magic Music Visuals\",\n    \"src\": \"/static/776487b047a8a4279025da182aaa8e6d/307d7/magic-music-visuals-screenshot.jpg\",\n    \"srcSet\": [\"/static/776487b047a8a4279025da182aaa8e6d/f93b5/magic-music-visuals-screenshot.jpg 300w\", \"/static/776487b047a8a4279025da182aaa8e6d/b4294/magic-music-visuals-screenshot.jpg 600w\", \"/static/776487b047a8a4279025da182aaa8e6d/307d7/magic-music-visuals-screenshot.jpg 760w\"],\n    \"sizes\": \"(max-width: 760px) 100vw, 760px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"a\", {\n    parentName: \"div\",\n    \"href\": \"http://magicmusicvisuals.com/screenshots\",\n    \"target\": \"_new\",\n    \"className\": \"image-caption\"\n  }, \"A screenshot of Magic Music Visuals\"), \"\\n  \")), mdx(\"p\", null, \"George has tons of these patches that he uses in his projects. To facilitate the use of the different visuals throughout the evening, we included everything in a playlist to feed the display.\"), mdx(\"div\", {\n    \"className\": \"image-container large-image\"\n  }, \"\\n  \", mdx(\"img\", {\n    parentName: \"div\",\n    \"src\": \"/8dcb03164f649d912b3cc9edcd90c49f/magic-music-visuals.gif\",\n    \"alt\": \"Adding patches to the playlist in MMV\"\n  }), \"\\n  \", mdx(\"a\", {\n    parentName: \"div\",\n    \"className\": \"image-caption\"\n  }, \"Adding patches to the playlist in MMV\")), mdx(\"p\", null, \"In addition to creating some trippy visuals with George\\u2019s graphic assets, MMV also handled the sound-reactive bits for us. Modules in the patch are routed through a sound-reactive module before hitting the endpoint\\u2013that module responds to a specific frequency range from a mic input, or to the overall volume. Once it sees a spike in whatever you\\u2019re listening to, you can tell it what it should do to your visuals.\"), mdx(\"p\", null, \"You\\u2019ll notice that all of the visuals in MMV for our projects have two screens on them. This will be made more clear once we get to the mapping portion, but the short answer is that this was a technique that was employed to get more video with less firepower.\"), mdx(\"p\", null, \"All of these visuals are really cool in MMV, but the software can\\u2019t handle projection mapping on its own. In order to get the visuals over to Resolume, we used a program called Syphon.\"), mdx(\"h4\", null, \"Syphon / Spout\"), mdx(\"p\", null, \"I completed my part of this project on a Mac, and George worked on a PC. When we installed the project, we ended running both OS\\u2019s again. The only piece of the project that was different between the two computers was the utility to pass the video from MMV to Resolume. On Mac, we used a tool called \", mdx(\"a\", {\n    href: \"http://syphon.v002.info/\",\n    target: \"_blank\"\n  }, \"Syphon\"), \", and on Windows we used \", mdx(\"a\", {\n    href: \"http://spout.zeal.co/\",\n    target: \"_blank\"\n  }, \"Spout\"), \". Both of these applications are focused on sharing video between windows, and they work with a host of visualization software.\"), mdx(\"p\", null, \"I set this up on my Mac, so I\\u2019ll only be able to explain the Mac workflow in detail. The good news is that it looks like Spout is extremely well documented, so you should be able to figure that out on your own.\"), mdx(\"p\", null, \"I downloaded an additonal module to handle Syphon for MMV from the main MMV site. The module is available from the \", mdx(\"a\", {\n    href: \"http://magicmusicvisuals.com/resources\",\n    target: \"_blank\"\n  }, \"Resources\"), \" page as a zip file that you can incorporate into your projects.\"), mdx(\"p\", null, \"Once downloaded, any additional modules can be added to a project by going to the \\u201CHelp\\u201D menu in MMV, and then \\u201CAdditional Module Folders.\\u201D You\\u2019ll then be able to add the Syphon module as a endpoint for your patch. As we were only broadcasting one video at a time, we only needed to set up one Syphon server endpoint.\"), mdx(\"h4\", null, \"Resolume Syphon Source\"), mdx(\"p\", null, \"Once we had MMV broadcasting to a Syphon server, the next step was to get Resolume listening to that server. Lucky for us, Resolume already had Syphon support built in seamlessly. To enable this feature, we went to the preferences menu, selected video, and then checked the box to enable Syphon input and output. Once that box was checked, we were then able to select \\u201CSyphon\\u201D from the sources menu, and drag it over to be treated as a clip.\"), mdx(\"h4\", null, \"Resolume Effects\"), mdx(\"p\", null, \"Getting the visuals together and ported into Resolume was the easy part\\u2013now we had to come up with something to do with them. The original plan was to send MIDI signals from the Arduino into Resolume, and then use Resolume MIDI mapping to control the desired effects. George was able to reproduce some simple keymapping from real world objects using the \", mdx(\"a\", {\n    href: \"http://makeymakey.com/\",\n    target: \"_blank\"\n  }, \"Makey Makey\"), \", but what we really wanted was to be able to control the effects with a potentiometer, which is just a ten-dollar word for a slider or a volume knob. After putzing around with sending MIDI signals from the Arduino with irregular success, I decided to switch over to the \", mdx(\"a\", {\n    href: \"http://opensoundcontrol.org/introduction-osc\",\n    target: \"_blank\"\n  }, \"Open Sound Control\"), \" (OSC) protocol. OSC ended up being a lot less complicated, and I think that it\\u2019s more extensible in the long run.\"), mdx(\"h4\", null, \"Cupcake Time!\"), mdx(\"div\", {\n    className: \"paragraph-with-picture\"\n  }, mdx(\"p\", null, \"We had it in our heads from the get-go that we wanted to incorporate cupcakes into the project somehow. A lot of George's past work uses cake as a recurring theme, so the migration over to cupcakes seemed to come pretty natural for him. I snagged six plastic cupcakes from Toys\\\"R\\\"Us that ended up being a perfect fit for the project.\"), mdx(\"div\", {\n    \"className\": \"image-container small-image\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"500px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/5084bf8976068d15ac7853110b9d74b6/41099/toysrus-cupcakes.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"63.66666666666666%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAUBAgME/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAP/2gAMAwEAAhADEAAAAW3OwhSpoJ//xAAbEAABBAMAAAAAAAAAAAAAAAACAAEDERASMf/aAAgBAQABBQIy1QySEQk1Pysf/8QAFxEBAAMAAAAAAAAAAAAAAAAAAQIQMf/aAAgBAwEBPwEkBlf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAaEAACAgMAAAAAAAAAAAAAAAABIQAQAjFB/9oACAEBAAY/AjkHyJzdCv/EABoQAQADAAMAAAAAAAAAAAAAAAEAEUEhMVH/2gAIAQEAAT8hULRjCBUU0DiJoWppYC08FKw2BXU//9oADAMBAAIAAwAAABBHP//EABgRAAIDAAAAAAAAAAAAAAAAAAABESFh/9oACAEDAQE/EI5Z6M//xAAVEQEBAAAAAAAAAAAAAAAAAAAAIf/aAAgBAgEBPxBH/8QAGhABAQEAAwEAAAAAAAAAAAAAAREAITFRcf/aAAgBAQABPxC6NCdFO3MgrIEfcwTcz0zjhE5J3nnKvwOHTgqArWG//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"The toy cupcakes we used from Toys'R'Us\",\n    \"title\": \"The toy cupcakes we used from Toys'R'Us\",\n    \"src\": \"/static/5084bf8976068d15ac7853110b9d74b6/41099/toysrus-cupcakes.jpg\",\n    \"srcSet\": [\"/static/5084bf8976068d15ac7853110b9d74b6/f93b5/toysrus-cupcakes.jpg 300w\", \"/static/5084bf8976068d15ac7853110b9d74b6/41099/toysrus-cupcakes.jpg 500w\"],\n    \"sizes\": \"(max-width: 500px) 100vw, 500px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"a\", {\n    parentName: \"div\",\n    \"className\": \"image-caption\"\n  }, \"The toy cupcakes we used from Toys'R'Us\"), \"\\n  \")), mdx(\"h4\", null, \"Enclosure Build and Arduino Wiring\"), mdx(\"div\", {\n    className: \"paragraph-with-picture\"\n  }, mdx(\"p\", null, \"I got a small wooden box from a craft store to use as a project enclosure. Once everything was measured out, I drilled a hole through the middle of the plastic cupcakes big enough to fit a potentiometer handle through, then mounted them to the box. Once I had that, I wired my potentiometers, drilled holes in the box, and then mounted them so that only the handle was sticking out the top.\"), mdx(\"div\", {\n    \"className\": \"image-container small-image\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"600px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a7928b21f126e99db3841b7dc65945d8/b4294/measured-cupcake-box.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"75%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAMCBAX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAv/aAAwDAQACEAMQAAABVazZxbgD/8QAHRAAAQQCAwAAAAAAAAAAAAAAAQAEERICAwUTFP/aAAgBAQABBQLVjI6rAtEHFV7ChyED/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BV//EABYRAQEBAAAAAAAAAAAAAAAAAAARIf/aAAgBAgEBPwHUf//EABkQAQACAwAAAAAAAAAAAAAAAAABETFB4f/aAAgBAQAGPwJUyjSnGH//xAAbEAEAAgIDAAAAAAAAAAAAAAABABEhMUFRYf/aAAgBAQABPyHIll6ib0nUFEqk1UYADHkp4IarOf/aAAwDAQACAAMAAAAQk+//xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QUsl//8QAFhEBAQEAAAAAAAAAAAAAAAAAABFR/9oACAECAQE/EIVr/8QAHRABAAICAgMAAAAAAAAAAAAAAQARMUEhUXHB8P/aAAgBAQABPxCyY1VgsIkTdgq9OIKRKg57lZAOLT7hg/LzLpK7xP/Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Project enclosure with measurements\",\n    \"title\": \"Project enclosure with measurements\",\n    \"src\": \"/static/a7928b21f126e99db3841b7dc65945d8/b4294/measured-cupcake-box.jpg\",\n    \"srcSet\": [\"/static/a7928b21f126e99db3841b7dc65945d8/f93b5/measured-cupcake-box.jpg 300w\", \"/static/a7928b21f126e99db3841b7dc65945d8/b4294/measured-cupcake-box.jpg 600w\"],\n    \"sizes\": \"(max-width: 600px) 100vw, 600px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"a\", {\n    parentName: \"div\",\n    \"className\": \"image-caption\"\n  }, \"Project enclosure with measurements\"), \"\\n  \")), mdx(\"p\", null, \"With all of my potentiometers ready to go, it was time to start hooking components up to the Arduino. I decided to use an Arduino Micro that that I had sitting around to free up some space inside the box\\u2013all that we needed was six analog inputs, and the Micro had more than enough juice to power the project. The potentiometers were connected to the power source and ground from the Arduino, and then each of their outputs was sent to the first six analog inputs on the micro. All we needed the Arduino to do was to read the values from the potentiometers, and then broadcast that value as a string.\"), mdx(\"h4\", null, \"Arduino Code\"), mdx(\"p\", null, \"The code portion for the Arduino is extremely straightforward. The Arduino reads a few values and then sends them on through the serial port. The only gotcha is that the code needs to send everything as one string, so inside the loop we\\u2019re only using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Serial.print\"), \" until the last line where we use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Serial.println\"), \" to trigger a new line.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"java\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"style\": {\n      \"counterReset\": \"linenumber NaN\"\n    },\n    \"className\": \"language-java line-numbers\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-java\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Arduino code to read multiple potentiometers, then send\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// the values through serial communication\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Define an array of our potentiometer pins\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"int\"), \" potentiometer_pins\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"A0\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"A1\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"A2\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"A3\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"A4\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"A5\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Open a serial connection\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"void\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"setup\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"Serial\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"begin\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"9600\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Loop over the first five pins,\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// read and print the value, and then print a comma.\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Then read the sixth pin and print a new line to end the string.\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"void\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"loop\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"for\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"int\"), \" i \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \" i \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"5\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \" i\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"++\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"Serial\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"print\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"analogRead\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"potentiometer_pins\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), \"i\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"Serial\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"print\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\",\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"Serial\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"println\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"analogRead\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"potentiometer_pins\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"5\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\"), mdx(\"span\", {\n    parentName: \"pre\",\n    \"aria-hidden\": \"true\",\n    \"className\": \"line-numbers-rows\",\n    \"style\": {\n      \"whiteSpace\": \"normal\",\n      \"width\": \"auto\",\n      \"left\": \"0\"\n    }\n  }, mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  })))), mdx(\"h4\", null, \"Processing Code\"), mdx(\"p\", null, \"The next part of the puzzle was how to convert that analog value coming from the Arduino to an OSC message. This was accomplished by using the OSC library in Processing. The gist of the code is that we\\u2019re taking the string that the Arduino\\u2019s serial communication is pumping out, splitting it into an array, getting the values from the array, and then sending them to the appropriate port.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"java\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"style\": {\n      \"counterReset\": \"linenumber NaN\"\n    },\n    \"className\": \"language-java line-numbers\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-java\"\n  }, \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Import the Serial, OSC, and net libraries\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token namespace\"\n  }, \"processing\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"serial\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"*\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token namespace\"\n  }, \"oscP5\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"*\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token namespace\"\n  }, \"netP5\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"*\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// define your vars\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"float\"), \" redValue \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"float\"), \" greenValue \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"float\"), \" blueValue \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"float\"), \" distortValue \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"float\"), \" rgbValue \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"float\"), \" waveValue \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Declare Serial\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"Serial\"), \" myPort\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Declare OSC\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"OscP5\"), \" oscP5\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Declare the NetAddress for OSC\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"NetAddress\"), \" myRemoteLocation\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"void\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"setup\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// List all the available serial ports\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"println\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"Serial\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"list\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Listen for OSC messages on port 7001\"), \"\\n  oscP5 \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"OscP5\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"this\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"7001\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Broadcast OSC Messages to port 7000\"), \"\\n  myRemoteLocation \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"NetAddress\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"localhost\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"7000\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Set the port to the correct port from your Serial list (in this case it's 5)\"), \"\\n  myPort \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"Serial\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"this\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"Serial\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"list\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"5\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"9600\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// wait until a newline to send a Serial event\"), \"\\n  myPort\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"bufferUntil\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'\\\\n'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"void\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"draw\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// give us a little black window to remember that this is running\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"background\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"#\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"000000\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Set up a void for a serial event that is triggered at a newline\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"void\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"serialEvent\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"Serial\"), \" myPort\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// get the message until a newline\\u2013that's now our string\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"String\"), \" inString \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" myPort\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"readStringUntil\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'\\\\n'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// if we've got a valid message\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"inString \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"!=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"null\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// trim the string\"), \"\\n    inString \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"trim\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"inString\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// then split the values at the commas and put it into an array\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"float\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), \" effects \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"float\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"split\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"inString\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\",\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// if we have effects, then start sending OSC messages\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"effects\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"length \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"4\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// get the value, then map it from the pot input (0-1023) to the value we need (0.0-1.0)\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// RED POT\"), \"\\n      redValue \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"map\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"effects\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1023\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// print the value\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"println\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"redValue\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Make a new message with the correct target\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"OscMessage\"), \" redMessage \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"OscMessage\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"/composition/video/effect1/opacity/values\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Add the value to the message\"), \"\\n      redMessage\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"add\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"redValue\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// Send the message\"), \"\\n      oscP5\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"send\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"redMessage\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" myRemoteLocation\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// GREEN POT\"), \"\\n      greenValue \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"map\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"effects\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1023\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"OscMessage\"), \" greenMessage \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"OscMessage\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"/composition/video/effect2/opacity/values\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      greenMessage\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"add\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"greenValue\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      oscP5\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"send\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"greenMessage\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" myRemoteLocation\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// BLUE POT\"), \"\\n      blueValue \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"map\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"effects\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"2\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1023\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"OscMessage\"), \" blueMessage \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"OscMessage\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"/composition/video/effect3/opacity/values\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      blueMessage\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"add\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"blueValue\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      oscP5\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"send\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"blueMessage\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" myRemoteLocation\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// DISTORT POT\"), \"\\n      distortValue \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"map\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"effects\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"3\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1023\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"OscMessage\"), \" distortMessage \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"OscMessage\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"/composition/video/effect4/param1/values\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      distortMessage\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"add\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"distortValue\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      oscP5\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"send\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"distortMessage\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" myRemoteLocation\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// RGB POT\"), \"\\n      rgbValue \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"map\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"effects\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"4\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1023\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"OscMessage\"), \" rgbMessage \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"OscMessage\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"/composition/video/effect5/opacity/values\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      rgbMessage\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"add\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"rgbValue\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      oscP5\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"send\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"rgbMessage\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" myRemoteLocation\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"// WAVE POT\"), \"\\n      waveValue \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"map\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"effects\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"5\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1023\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"OscMessage\"), \" waveMessage \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"OscMessage\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"/composition/video/effect6/param2/values\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      waveMessage\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"add\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"waveValue\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      oscP5\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"send\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"waveMessage\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" myRemoteLocation\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"pre\",\n    \"aria-hidden\": \"true\",\n    \"className\": \"line-numbers-rows\",\n    \"style\": {\n      \"whiteSpace\": \"normal\",\n      \"width\": \"auto\",\n      \"left\": \"0\"\n    }\n  }, mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  }), mdx(\"span\", {\n    parentName: \"span\"\n  })))), mdx(\"h4\", null, \"Back to Resolume\"), mdx(\"p\", null, \"You may be wondering what the parts of the Processing code that set the OscMessage are doing and where we got those values from. Resolume allows you to map OSC values to any number of things inside the software. To edit this map, all you need to do is select \\u201CMapping > Edit Application OSC Map.\\u201D That should change your screen to look like the screenshot below.\"), mdx(\"div\", {\n    \"className\": \"image-container large-image\"\n  }, \"\\n  \", mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1200px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/74cdbf0d274341e3e1e6cde71d36d686/e5166/resolume-mapping-screenshot.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"60.66666666666667%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAECAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAByWpJSIX/xAAZEAADAAMAAAAAAAAAAAAAAAAAARECEiD/2gAIAQEAAQUC2bLkV8f/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAXEAADAQAAAAAAAAAAAAAAAAAAIEEy/9oACAEBAAY/AqU0n//EABkQAQADAQEAAAAAAAAAAAAAAAEAETEhkf/aAAgBAQABPyHtR9SrEXvY3a9YOzYhP//aAAwDAQACAAMAAAAQg8//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAaEAEBAQEAAwAAAAAAAAAAAAABEQAxIUGh/9oACAEBAAE/EBKME9jSpESu9Zo6c4PKPMsV1XPrv//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Resolume ready for OSC mapping\",\n    \"title\": \"Resolume ready for OSC mapping\",\n    \"src\": \"/static/74cdbf0d274341e3e1e6cde71d36d686/e5166/resolume-mapping-screenshot.jpg\",\n    \"srcSet\": [\"/static/74cdbf0d274341e3e1e6cde71d36d686/f93b5/resolume-mapping-screenshot.jpg 300w\", \"/static/74cdbf0d274341e3e1e6cde71d36d686/b4294/resolume-mapping-screenshot.jpg 600w\", \"/static/74cdbf0d274341e3e1e6cde71d36d686/e5166/resolume-mapping-screenshot.jpg 1200w\"],\n    \"sizes\": \"(max-width: 1200px) 100vw, 1200px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n  \", mdx(\"a\", {\n    parentName: \"div\",\n    \"className\": \"image-caption\"\n  }, \"Resolume ready for OSC mapping\")), mdx(\"p\", null, \"When you click on a green box that overlays something, a tile will pop up in the lower right-hand side with the title \\u201CApplication OSC Map.\\u201D In the screenshot, I have the green channel for the composition selected. The piece we need is the \\u201COSC Input\\u201D string. If you look back at the Processing code now, you\\u2019ll see that all we\\u2019re doing is setting the new OscMessage parts to equal the correct string from OSC Input in Resolume.\"), mdx(\"p\", null, \"There is a distinction between composition and layer as to what the effects do to your project. If you make these changes while \\u201Ccomposition\\u201D is selected, the effects will alter then entire piece. If you make changes with just the \\u201Clayer\\u201D tab selected, it only affects that one layer and leaves everything else alone. We decided to go with composition-wide effects for the project to let folks really remix how they experienced the visualization.\"), mdx(\"div\", {\n    \"className\": \"gatsby-resp-iframe-wrapper\",\n    \"style\": {\n      \"paddingBottom\": \"56.25%\",\n      \"position\": \"relative\",\n      \"height\": \"0\",\n      \"overflow\": \"hidden\",\n      \"marginBottom\": \"1.0725rem\"\n    }\n  }, \" \", mdx(\"div\", {\n    parentName: \"div\",\n    \"className\": \"video-wrapper\"\n  }, \" \", mdx(\"iframe\", {\n    parentName: \"div\",\n    \"src\": \"https://www.youtube.com/embed/q9AD-J5n9wE?rel=0&showinfo=0\",\n    \"frameBorder\": \"0\",\n    \"allowFullScreen\": true,\n    \"style\": {\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\",\n      \"width\": \"100%\",\n      \"height\": \"100%\"\n    }\n  }), \" \"), \" \"), mdx(\"h4\", null, \"Code Recap\"), mdx(\"p\", null, \"There are a lot of moving parts with this project, so I ended up making a checklist to make sure that everything was flowing in the correct order.\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Visuals are generated in MMV\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"MMV Visuals are sent through the MMV Syphon Component\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Resolume listens to MMV via a Syphon clip\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Arduino reads the value of the potentiometers and then sens a string through serial\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Processing picks up that serial string and then creates OSC messages to send to Resolume\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Resolume receives OSC messages and changes composition-level effects\")), mdx(\"h4\", null, \"Resolume Mapping\"), mdx(\"p\", null, \"Since I was just projecting on a simple set of shapes in the corner of the room, I used the built-in mapping dialog inside Resolume to handle mapping the projection. It should be noted that this is only a feature in Resolume Arena, and does not come standard with Avenue. If you need more complex mapping, \", mdx(\"a\", {\n    href: \"http://visution.com/mapio\",\n    target: \"_blank\"\n  }, \"Mapio\"), \" seems to be an excellent alternative.\"), mdx(\"div\", {\n    className: \"video-wrapper\"\n  }, mdx(\"iframe\", {\n    width: \"100%\",\n    height: \"480\",\n    src: \"https://www.youtube.com/embed/yXI83otRqE4?rel=0&showinfo=0\",\n    frameBorder: \"0\",\n    allowFullScreen: true\n  })), mdx(\"p\", null, \"The mapping window is tucked away up in the displays menu under the \\u201Cadvanced\\u201D option. Once that dialog opens, it shows you the raw output of your Resolume composition. I mentioned previously that George\\u2019s MMV pieces showed two different pieces right next to each other as the same source\\u2013this is where that comes in handy. In the mapping window in Resolume, you can crop out a specific part of the source, and then assign that to a slice. This allowed us to load twice as many videos even though Resolume only treated it as one source. After the sources were cut out, the only thing left to do was click and drag to start mapping the sources to the projection target.\"), mdx(\"h3\", null, \"Displaying the Project\"), mdx(\"p\", null, \"George and I knew going in that this would be a fancy event, but I think we both underestimated the party that we were in for. The event was a veritable who\\u2019s who of the culinary arts in Chicago. I\\u2019d be lying if I said I wasn\\u2019t geeking out when Rick Bayless grated chocolate onto a dessert that he handed me\\u2013I definitely fanboy\\u2019ed out and mumbled something about also being from Oklahoma.\"), mdx(\"p\", null, \"All in all, the event went extremely well. There were hundreds of people who moved through the room during the night, and we even got a special shout-out in the text messages that the event organizers were sending out during the party. People seemed to really enjoy playing with the cupcakes, which definitely caused people to spend more time in the room.\"), mdx(\"p\", null, \"Here are a few photos and videos from the event:\"), mdx(\"div\", {\n    className: \"video-wrapper\"\n  }, mdx(\"iframe\", {\n    width: \"100%\",\n    height: \"480\",\n    src: \"https://www.youtube.com/embed/x2GhXsxdLtE?rel=0&showinfo=0\",\n    frameBorder: \"0\",\n    allowFullScreen: true\n  })), mdx(\"div\", {\n    className: \"video-wrapper\"\n  }, mdx(\"iframe\", {\n    width: \"100%\",\n    height: \"480\",\n    src: \"https://www.youtube.com/embed/G8PFUX36wB0?rel=0&showinfo=0\",\n    frameBorder: \"0\",\n    allowFullScreen: true\n  })), mdx(\"br\", null));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"id":"fcad2f16-8a04-5eab-bc2a-c0040d2da825","fields":{"slug":"/nissan-commercial-vehicles/"},"frontmatter":{"title":"Nissan Commercial Vehicles"},"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Nissan Commercial Vehicles\",\n  \"date\": \"2015-04-21T00:00:00-0500\",\n  \"teaser\": \"Browse through some of the projects I worked on for Nissan Commercial Vehicles with my front-end team.\",\n  \"featuredImage\": \"ncv-thumbnail-2.jpg\",\n  \"externalLink\": \"http://nissancommercialvehicles.com\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Nissan Commercial Vehicles is, you guessed it, the commercial branch of Nissan. They manufacture a series of fantastic work vehicles that you\\u2019ve undoubtedly seen all over town\\u2013as soon as you know what one looks like, you can\\u2019t stop seeing it. I had the pleasure of working with a small team from Critical Mass to redesign the site and introduce a lot of new campaigns to showcase how Nissan was making an excellent work vehicle.\"), mdx(\"p\", null, \"The site was run on a Grails back-end, and we utilized a number of different technologies on the front-end. There are a few parts of the site that use Backbone to create a more robust web app experience, and the rest of it is just good old GSPs, Javascript and SASS. I came on to the account in 2013 during a period of major transition. One of the original team members built a framework that was running a lot of the front-end logic on the site. While ambitious, his framework definitely left some things to be desired that could be fixed by refactoring a good chunk of the code and utilizing modern tools. In the time that I was there we implemented a stronger SASS organizational structure, dependency management using Require.js, a component structure utilizing Flight.js, the start of a decent Gulp workflow, and the aforementioned Backbone conversion.\"), mdx(\"p\", null, \"We facilitated a pretty major overhaul of the look and feel of the site in the few years that I was on the account. The brand still retained the grittiness that\\u2019s expected of most commercially-oriented sites, but it definitely refined itself over time.\"), mdx(\"p\", null, \"For instance, during the homepage redesign we took the homepage from this:\"), mdx(\"div\", {\n    \"className\": \"image-container half-image\"\n  }, \"\\n  \", mdx(\"div\", {\n    parentName: \"div\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"800px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/758e8da949284ceb4ad41d33dbf6397a/4b190/ncv-home-old.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"97.00000000000001%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAATABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAQAC/9oADAMBAAIQAxAAAAGibMJusJE4NBX/xAAcEAACAgIDAAAAAAAAAAAAAAAAAwETAgQUICH/2gAIAQEAAQUCnVwghXvEUXsLmF7en//EABYRAQEBAAAAAAAAAAAAAAAAABEAEP/aAAgBAwEBPwEjf//EABYRAQEBAAAAAAAAAAAAAAAAABEAEP/aAAgBAgEBPwFnf//EAB4QAAEEAQUAAAAAAAAAAAAAAAABAjKRESAhI0Fh/9oACAEBAAY/AtsicLk9OybrJusm69H/xAAbEAABBAMAAAAAAAAAAAAAAAABABEgIVFh8P/aAAgBAQABPyEdQtMqRhguAmzBP//aAAwDAQACAAMAAAAQc988/8QAFhEBAQEAAAAAAAAAAAAAAAAAEQAQ/9oACAEDAQE/EBHf/8QAFhEBAQEAAAAAAAAAAAAAAAAAEQAQ/9oACAECAQE/EFPf/8QAHxABAAECBwEAAAAAAAAAAAAAAQAR8SAhMUFRcYHw/9oACAEBAAE/EK71pRmabEWgVQWFOxSfNzlX3L0l74P/2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Old NCV Homepage\",\n    \"title\": \"Old NCV Homepage\",\n    \"src\": \"/static/758e8da949284ceb4ad41d33dbf6397a/4b190/ncv-home-old.jpg\",\n    \"srcSet\": [\"/static/758e8da949284ceb4ad41d33dbf6397a/f93b5/ncv-home-old.jpg 300w\", \"/static/758e8da949284ceb4ad41d33dbf6397a/b4294/ncv-home-old.jpg 600w\", \"/static/758e8da949284ceb4ad41d33dbf6397a/4b190/ncv-home-old.jpg 800w\"],\n    \"sizes\": \"(max-width: 800px) 100vw, 800px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"a\", {\n    parentName: \"div\",\n    \"className\": \"image-caption\"\n  }, \"Old NCV Homepage\"), \"\\n  \"), \"\\n  \", mdx(\"div\", {\n    parentName: \"div\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"800px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1bf7bfa8dcc3bdfb8b7a13b2f2fe78b2/4b190/ncv-home.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"97.00000000000001%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAATABQDASIAAhEBAxEB/8QAGAABAQADAAAAAAAAAAAAAAAAAAQCBQb/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHdTMC9MOWsCYH/xAAaEAEAAwEBAQAAAAAAAAAAAAABAAIDERMx/9oACAEBAAEFArcCmo3ABvkwtjPXOHzEF3Oa/wD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAfEAACAQIHAAAAAAAAAAAAAAAAAREzkQIQEiExUZL/2gAIAQEABj8CngjUbFVXKi9FZXyc9GJI/8QAHBAAAwABBQAAAAAAAAAAAAAAAAERIRAxUWHx/9oACAEBAAE/IXzS7MrqWyTcmkiFauLg0ZSPHaa2ShCxEj//2gAMAwEAAgADAAAAEPQIAP/EABgRAAIDAAAAAAAAAAAAAAAAAAABEBEx/9oACAEDAQE/ELNHH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8QH//EABwQAQEAAgMBAQAAAAAAAAAAAAERACExcYEQQf/aAAgBAQABPxCq7xC1griRTafjgwtFnbXD546ABiqc1IHj5ktzvBkiX25aggDwz//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"New NCV Homepage\",\n    \"title\": \"New NCV Homepage\",\n    \"src\": \"/static/1bf7bfa8dcc3bdfb8b7a13b2f2fe78b2/4b190/ncv-home.jpg\",\n    \"srcSet\": [\"/static/1bf7bfa8dcc3bdfb8b7a13b2f2fe78b2/f93b5/ncv-home.jpg 300w\", \"/static/1bf7bfa8dcc3bdfb8b7a13b2f2fe78b2/b4294/ncv-home.jpg 600w\", \"/static/1bf7bfa8dcc3bdfb8b7a13b2f2fe78b2/4b190/ncv-home.jpg 800w\"],\n    \"sizes\": \"(max-width: 800px) 100vw, 800px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"a\", {\n    parentName: \"div\",\n    \"className\": \"image-caption\"\n  }, \"New NCV Homepage\"), \"\\n  \")), mdx(\"p\", null, \"Screenshots can only do so much\\u2013to fully experience the site, you should definitely go and check it out at \", mdx(\"a\", {\n    href: \"http://nissancommercialvehicles.com\",\n    target: \"_new\"\n  }, \"nissancommericalvehicles.com\"), \". Some of the pages that I had the most involvement with are the \", mdx(\"a\", {\n    href: \"http://nissancommercialvehicles.com\",\n    target: \"_new\"\n  }, \"home page\"), \", the vehicle landing pages for the \", mdx(\"a\", {\n    href: \"http://www.nissancommercialvehicles.com/nv-cargo\",\n    target: \"_new\"\n  }, \"NV Cargo\"), \", the \", mdx(\"a\", {\n    href: \"http://www.nissancommercialvehicles.com/nv-passenger\",\n    target: \"_new\"\n  }, \"NV Passenger\"), \", and the \", mdx(\"a\", {\n    href: \"http://www.nissancommercialvehicles.com/nv200-compact-cargo\",\n    target: \"_new\"\n  }, \"NV200 Compact Cargo\"), \", and the launch of the \", mdx(\"a\", {\n    href: \"http://www.nissancommercialvehicles.com/nv200-taxi\",\n    target: \"_new\"\n  }, \"NV200 Taxi\"), \" for its maiden voyage in NYC.\"));\n}\n;\nMDXContent.isMDXComponent = true;"}}},"staticQueryHashes":["3128451518"]}