{"componentChunkName":"component---src-templates-work-js","path":"/work/kaleidoscoper/","result":{"data":{"mdx":{"body":"function _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/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Kaleidoscoper\",\n  \"order\": 60,\n  \"timeFrame\": \"2016\",\n  \"type\": \"Side project\",\n  \"url\": \"http://kaleidoscoper.com/\",\n  \"repo\": \"https://github.com/peterchappell/kaleidoscoper\",\n  \"excerpt\": \"An online kaleidoscope built using the html5 canvas\",\n  \"featuredImage\": \"./kaleidoscoper/cover.png\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component '\" + name + \"' was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar ProjectLink = makeShortcode(\"ProjectLink\");\nvar Gallery = makeShortcode(\"Gallery\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"I always wanted a kaleidoscope as a child... so eventually I built one using HTML Canvas. By default,\\nKaleidoscoper takes random public images from Flickr (using their API). You can also load in an image from\\nthe local file system.\"), mdx(ProjectLink, {\n    url: \"http://kaleidoscoper.com/\",\n    mdxType: \"ProjectLink\"\n  }), mdx(Gallery, {\n    mdxType: \"Gallery\"\n  }, mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"inline-block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"10px\",\n      \"maxWidth\": \"400px\",\n      \"width\": \"300px\",\n      \"maxHeight\": \"300px\",\n      \"verticalAlign\": \"top\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"100%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAC/ElEQVQ4y61US08TURidAgu7gBWG4aHAIJZSSQRaxIQO0IKa1g1ErBhJGXwgD12S0qLyDK+AkUILdQdb3wISIxINhgRxQQgbNRoRf4D1BxzvdwtSSpGQsLhp5947Z875zvk+QRAEHPAKflBBiIiEoIrc+I3g+1r7CWirswJ3aC/4Dr2zO+DOpbkgIvlyIo7a4qGpEHe5pwoFDGxEHU5DjFyH6MIGqHOuItflQoZvAOXmBpSbGqDxDkDf0sLPogvrEcNWVGxaKKiwQV3gYHF1z6E22HFq2I2srnuwWZ14pXRisroTNosTuo677GwIar0dYuM0oguuIxgjAKgKPHBmDKyvKQ5zC0a8HErB9+FszHoS8Yatb+5svHiQgtkPBehvFnEojzE13kAwxjaGJIWYEZjbehwrJadRc0bCn08y/B+NUNj/ZXM+7p9Lx/yiDMOIB+qT9nAMA25SzUgmMSOwr+Y8rD+R4TmrhadUi7VHRnw2GbBcnI8pTyp07W3IdToQjCEEu5nhG+R1Ipk1pRIHq6oXoemYgKZ9ApW1cfjxWIbdlIq1sVxctNyBxtPL393mMmWMokFOzihdvGYkk5gRWJ6rFYZmF9Lbxvmef9GIOV8SJpVulBXV8kj9y+kmYMoVBljSyAHnvEnwM8BRi44zMzhc0Dc5OOCoJRO/GeA73xFMKT0oL76J5EsJ2wG55Ar2lYdMsrWZSc7BNWbAr6cyqm/Fc6D01nFU1YlYY3uKWeKSbVYm2dsbGvitgurJlO5WbsoqM+ULM2D9mYyx85mcGYGRKSvcFAm6zvZdTAmJzdsFGYMsGqsmFhuTBP+SzGUq5lQO1l96bK/YbAa7nndAvyMe80tFmPJK+Dmmx3tWL6oZySRmBDbgTAgEu+A/wabepHaii4YRL5Pfwes0U9ODaWYAxYRkEjO6I95+zTqlNgzDzeHAGp16k9qJpFB9tL4+lDEnyU0ygPbojJgRWFSsFGY47BxBW+OLOUiRSq5M2M/42mPAsowd2IDd7/oLUISIYv0MCrsAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"The Kaleidoscoper logo\",\n    \"title\": \"The Kaleidoscoper logo\",\n    \"src\": \"/static/231ac1673f02b10d2b7c4aba3ce25ea5/e17e5/1.png\",\n    \"srcSet\": [\"/static/231ac1673f02b10d2b7c4aba3ce25ea5/7e516/1.png 100w\", \"/static/231ac1673f02b10d2b7c4aba3ce25ea5/772e8/1.png 200w\", \"/static/231ac1673f02b10d2b7c4aba3ce25ea5/e17e5/1.png 400w\", \"/static/231ac1673f02b10d2b7c4aba3ce25ea5/0a47e/1.png 600w\", \"/static/231ac1673f02b10d2b7c4aba3ce25ea5/5a190/1.png 800w\", \"/static/231ac1673f02b10d2b7c4aba3ce25ea5/a878e/1.png 2048w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\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    \"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"inline-block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"10px\",\n      \"maxWidth\": \"400px\",\n      \"width\": \"365.8536585365854px\",\n      \"maxHeight\": \"300px\",\n      \"verticalAlign\": \"top\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"82%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAQABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABQAB/8QAFAEBAAAAAAAAAAAAAAAAAAAAAv/aAAwDAQACEAMQAAABNQNQCFsmf//EABoQAAIDAQEAAAAAAAAAAAAAAAECAwQTETH/2gAIAQEAAQUCrR7M9dShJ7XmyaSygQ+//8QAFhEAAwAAAAAAAAAAAAAAAAAAARAR/9oACAEDAQE/ARF//8QAFhEBAQEAAAAAAAAAAAAAAAAAEQEQ/9oACAECAQE/Aauf/8QAGhAAAgMBAQAAAAAAAAAAAAAAASEAAhARYf/aAAgBAQAGPwJlQmhYzycoGc//xAAaEAEAAwADAAAAAAAAAAAAAAABABEhMVFh/9oACAEBAAE/IVpQtrBheF7ALWbaXbSKgcl9RWmf/9oADAMBAAIAAwAAABC3D//EABURAQEAAAAAAAAAAAAAAAAAABAh/9oACAEDAQE/EIH/xAAVEQEBAAAAAAAAAAAAAAAAAAAQQf/aAAgBAgEBPxCA/8QAGxABAQACAwEAAAAAAAAAAAAAEQEAITFRcUH/2gAIAQEAAT8QjJQK78mS5jhyL8rx7kjItg4UySj1c0GuDF3XnzNgLbc//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Sample screen from Kaleidoscoper\",\n    \"title\": \"Sample screen from Kaleidoscoper\",\n    \"src\": \"/static/7a10e6806694c6fa2780ba9e6226c943/066f9/2.jpg\",\n    \"srcSet\": [\"/static/7a10e6806694c6fa2780ba9e6226c943/b9e9c/2.jpg 100w\", \"/static/7a10e6806694c6fa2780ba9e6226c943/e07e9/2.jpg 200w\", \"/static/7a10e6806694c6fa2780ba9e6226c943/066f9/2.jpg 400w\", \"/static/7a10e6806694c6fa2780ba9e6226c943/b4294/2.jpg 600w\", \"/static/7a10e6806694c6fa2780ba9e6226c943/4b190/2.jpg 800w\", \"/static/7a10e6806694c6fa2780ba9e6226c943/a95c4/2.jpg 2012w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\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    \"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"inline-block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"10px\",\n      \"maxWidth\": \"400px\",\n      \"width\": \"149.2537313432836px\",\n      \"maxHeight\": \"300px\",\n      \"verticalAlign\": \"top\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"200.99999999999997%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAoABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAIDBAUB/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgAD/9oADAMBAAIQAxAAAAHLR0akZPBVVkoaAkzeCsroiv/EABwQAAIDAAMBAAAAAAAAAAAAAAACAQMSBBEhE//aAAgBAQABBQJvo7RDsUWWKpX7PRI/opuBZyd6LEaLMycep5T/xAAVEQEBAAAAAAAAAAAAAAAAAAARIP/aAAgBAwEBPwFr/8QAFhEBAQEAAAAAAAAAAAAAAAAAEAES/9oACAECAQE/Actf/8QAHBAAAgIDAQEAAAAAAAAAAAAAAAEhMRARQQIS/9oACAEBAAY/AvTmyNmvrpY5zDWNE9UY9XZ0hOz/xAAeEAEAAgICAwEAAAAAAAAAAAABABEhQTFRYZHwgf/aAAgBAQABPyEjVZbY1V9eYruxtAKVoU3njLmKo5VjMQcOjPcDbXbfuN5Rtqpt9qBXyKb9uJdXsLxNx++ILoW2KnyI5VGzP//aAAwDAQACAAMAAAAQHC9y88//xAAYEQEAAwEAAAAAAAAAAAAAAAABABEhEP/aAAgBAwEBPxC2w0i3cNO//8QAGBEBAQEBAQAAAAAAAAAAAAAAAREAIRD/2gAIAQIBAT8QjmSMxADcPv8A/8QAIBABAAMAAgICAwAAAAAAAAAAAQARITFBUXGBscHh8P/aAAgBAQABPxA8vQvBSxADcqWQTCJmqwzZmK1Cn5C8iXfYGhnx2R0LzQPgbLrgHt4vUoTp0tFHNHuU30onqksbAQdvI+45BGiN/wAfMpwrAAdqMlxJTZWsyxPr9I10Ogq8PM//2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Sample screen from Kaleidoscoper\",\n    \"title\": \"Sample screen from Kaleidoscoper\",\n    \"src\": \"/static/60490530da5f402613aac50b512ceb4c/066f9/3.jpg\",\n    \"srcSet\": [\"/static/60490530da5f402613aac50b512ceb4c/b9e9c/3.jpg 100w\", \"/static/60490530da5f402613aac50b512ceb4c/e07e9/3.jpg 200w\", \"/static/60490530da5f402613aac50b512ceb4c/066f9/3.jpg 400w\", \"/static/60490530da5f402613aac50b512ceb4c/b4294/3.jpg 600w\", \"/static/60490530da5f402613aac50b512ceb4c/88438/3.jpg 745w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\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    \"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"inline-block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"10px\",\n      \"maxWidth\": \"400px\",\n      \"width\": \"300px\",\n      \"maxHeight\": \"300px\",\n      \"verticalAlign\": \"top\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"100%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMCBP/EABkBAAIDAQAAAAAAAAAAAAAAAAIDAAEEBf/aAAwDAQACEAMQAAAB3pLm6dLhqNiFwhyv/8QAHRABAAEDBQAAAAAAAAAAAAAAAgEAEjEDEBETIv/aAAgBAQABBQKDbt1QqnIPFHGn6NsU3JX/xAAWEQEBAQAAAAAAAAAAAAAAAAABADH/2gAIAQMBAT8BkInb/8QAGREAAgMBAAAAAAAAAAAAAAAAAAEREjEh/9oACAECAQE/Ad6XY9ElB//EABkQAQADAQEAAAAAAAAAAAAAAAEAEBEhQf/aAAgBAQAGPwLgTyalNa1hP//EABsQAAIDAQEBAAAAAAAAAAAAAAABESExQVFh/9oACAEBAAE/IaiwEynTemIT8La5o12bMeFBFtD8CvcI/9oADAMBAAIAAwAAABCgMD//xAAXEQEBAQEAAAAAAAAAAAAAAAABABEx/9oACAEDAQE/EFRALVyThN1f/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAhEf/aAAgBAgEBPxAAKduODNFMCl//xAAaEAEBAAMBAQAAAAAAAAAAAAABEQAhMUHB/9oACAEBAAE/EAcUde33L0dGAm/uMVCb4MNgBZK24GOSS9xAF0OHMIeMizzBmuCb3rNSBEJn/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Sample screen from Kaleidoscoper\",\n    \"title\": \"Sample screen from Kaleidoscoper\",\n    \"src\": \"/static/420320890a837cc0d0a87b6cedfe8172/066f9/4.jpg\",\n    \"srcSet\": [\"/static/420320890a837cc0d0a87b6cedfe8172/b9e9c/4.jpg 100w\", \"/static/420320890a837cc0d0a87b6cedfe8172/e07e9/4.jpg 200w\", \"/static/420320890a837cc0d0a87b6cedfe8172/066f9/4.jpg 400w\", \"/static/420320890a837cc0d0a87b6cedfe8172/b4294/4.jpg 600w\", \"/static/420320890a837cc0d0a87b6cedfe8172/4b190/4.jpg 800w\", \"/static/420320890a837cc0d0a87b6cedfe8172/78959/4.jpg 1215w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\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    \")), mdx(\"h3\", null, \"My contributions\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Initial ideas\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Graphics (icons etc)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Front-end design and development\")), mdx(\"h3\", null, \"Technology I used\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"HTML and CSS\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"JavaScript\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Sketch\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Webpack and Babel\")), mdx(\"h3\", null, \"Next steps...\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Rebuild using React\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Use a more standardised UI\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Allow better integration with the camera etc\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Manage scaling better for a non-square canvas\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Kaleidoscoper","timeFrame":"2016","type":"Side project","repo":"https://github.com/peterchappell/kaleidoscoper"}}},"pageContext":{"slug":"/work/kaleidoscoper/","prev":{"fields":{"slug":"/work/abc/","isWork":true},"frontmatter":{"title":"ABC News Digital"}},"next":{"fields":{"slug":"/work/sams/","isWork":true},"frontmatter":{"title":"SAMS"}}}}}