{
    "componentChunkName": "component---node-modules-gatsby-theme-blog-core-src-templates-post-query-js",
    "path": "/mesh-background/",
    "result": {"data":{"site":{"siteMetadata":{"title":"Luke Michals","social":[{"name":"twitter","url":"https://twitter.com/lukemichals"},{"name":"github","url":"https://github.com/michals2/"},{"name":"linkedin","url":"https://www.linkedin.com/in/luke-michals/"}]}},"blogPost":{"id":"d373387e-9542-57e4-aa85-edf10946a240","excerpt":"Abstract I saw a cool website background once and I want to try and recreate it. Inspiration I could have sworn that I saw this background…","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\": \"Mesh Background\",\n  \"date\": \"2021-04-07T00:00:00.000Z\",\n  \"tags\": [\"3D\", \"web\"]\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(\"h2\", {\n    \"id\": \"abstract\"\n  }, \"Abstract\"), mdx(\"p\", null, \"I saw a cool website background once and I want to try and recreate it.\"), mdx(\"h2\", {\n    \"id\": \"inspiration\"\n  }, \"Inspiration\"), mdx(\"p\", null, \"I could have sworn that I saw this background on the datadog homepage. It\\u2019s no longer there and I can\\u2019t find it in the waybackmachine. Oh well.\"), mdx(\"p\", null, \"It kind of looked like the following image (\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://lovepik.com/image-401531739/tech-blue-low-polygon-mesh-background.html\"\n  }, \"source\"), \"), but each point was undulating up and down.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"819px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"66.66666666666666%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAACpklEQVQ4yy2T/ZOaRhyHicACK2/yIioqCKjoqbkz99reJbm2lyaZNp3p5P//V57Orv2B2Z3ly7Ofl8Fw6jXD/TX+8YzaBzcPRLe/4JQ1Yrokvn8mPJxxZhVWUug1+vBI8P4Ot+lxVxu8bk9wusVtewx1OIgzBnGuIf72gFw2yGbL+NMbo5s7xCjHnS6Ir+8Ijze4ZYVTlJhhghXn2OMSUdbI3XuM4PyA1+1w5yvi0xk7ShBRgluUyGWLFcRY4QiRjBkqN22Pv7kiurrWUCtKsCcL3GaD3J0woocXvGaDk0+w/BhvUTO6e0LOK2RZIfIpXlkRbA9a/bBq8bue4s+/SB5f8PsDst0ilIDNFUb6+Quy22H6EfYoZ/z2nfjDI2KUaavOeIas24vN8RS5qEl//axh9ijDlCF2lGIOIwbDCMOMM7z1Hr8/alD6/IodZ/oCy48QcYY7mePkCrYi2J8Ij2fSpxeC3VFHMXAkA2fIO0diqGDdxYrk6SPx+R6RFQw8H1MGerh8/ULz978sPv5G+fp2gWSFvlAkObLukFWLOQwvQGfZIiYLrUZlqApQw2pAqZ19+0HS9YTzCjfJLyUFI/1+4A61ZQUcdjvsyRxDNWOFyWVAhnpV4Oj2kemPn3jTpS7MjFLs+PKouYHra6DK2fR8fSZmSww1qEEy1GBlP//9K7N/fuItVjpPkRbYyRhrlCPSsbaqVcpAX2anBdb/7w0rLRgoq3Gm287/+E7y8HwZjFKdo27QD1EFWnGqi3IUJC0Q0wWirLDVWnUYoukR9Rq32+Nf32PPlhqulClVdpRpNXqvANlE791lg7ve4zRbnEWjf1MzyTHEvMZVgarDeo1Yttj5FDub6I8VXEViqQyzAns8w2t75OGM259wqk4rVZbfeQH/AcEoSHzOdQXvAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"a static image similar to the dynamic background\",\n    \"title\": \"a static image similar to the dynamic background\",\n    \"src\": \"/static/d78635e2fa7800a4126510a112697bf9/97655/similar.png\",\n    \"srcSet\": [\"/static/d78635e2fa7800a4126510a112697bf9/e4d6b/similar.png 345w\", \"/static/d78635e2fa7800a4126510a112697bf9/1e043/similar.png 690w\", \"/static/d78635e2fa7800a4126510a112697bf9/97655/similar.png 819w\"],\n    \"sizes\": \"(max-width: 819px) 100vw, 819px\",\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(\"h2\", {\n    \"id\": \"building\"\n  }, \"Building\"), mdx(\"h3\", {\n    \"id\": \"triangle\"\n  }, \"Triangle\"), mdx(\"p\", null, \"I LOVE \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/pmndrs/react-three-fiber\"\n  }, \"react-three-fiber\"), \" for projects like this. It gives you all of the 3D power of \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://threejs.org/\"\n  }, \"three.js\"), \" with the ease of use and performance benefits of \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://reactjs.org/\"\n  }, \"react\"), \".\"), mdx(\"p\", null, \"Step 1 was to create a triangle. I also added some controls (pan, rotate, zoom) and grid helper.\"), mdx(\"p\", null, \"I also added a click handler to show off the power of R3F (click on the triangle).\"), mdx(Triangles1, {\n    mdxType: \"Triangles1\"\n  }), mdx(\"h3\", {\n    \"id\": \"animating-a-single-point\"\n  }, \"Animating a single point\"), mdx(Point, {\n    mdxType: \"Point\"\n  }), mdx(\"p\", null, \"This point follows a sinusoid. You can adjust the amplitude and frequency of the point using the sliders.\"), mdx(\"h3\", {\n    \"id\": \"animating-few-points\"\n  }, \"Animating few points\"), mdx(Points, {\n    mdxType: \"Points\"\n  }), mdx(\"p\", null, \"Nice, now we\\u2019re getting somewhere.\"), mdx(\"h3\", {\n    \"id\": \"points-mesh\"\n  }, \"Points Mesh\"), mdx(PointsMesh, {\n    mdxType: \"PointsMesh\"\n  }), mdx(\"p\", null, \"Looking nice and wavy now.\"), mdx(\"p\", null, \"I think that\\u2019s where I\\u2019m going to leave it for now. I\\u2019d highly recommend checking out R3F!\"), mdx(\"h2\", {\n    \"id\": \"references\"\n  }, \"References\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://github.com/michals2/portfolio/blob/master/src/posts/mesh-background/index.mdx\"\n  }, \"Source Code\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://github.com/pmndrs/react-three-fiber\"\n  }, \"react-three-fiber\"))));\n}\n;\nMDXContent.isMDXComponent = true;","slug":"/mesh-background/","title":"Mesh Background","tags":["3D","web"],"date":"April 07, 2021","image":null,"imageAlt":null,"imageCaptionText":null,"imageCaptionLink":null,"socialImage":null},"previous":{"id":"da0f54d7-c1e3-5060-a708-a199b7f5187a","excerpt":"Abstract I found a cool image on  Twitter  and I wanted to play around with a 3D library called  react-three-fiber . Image Model Conclusion…","slug":"/platonic-solids/","title":"Platonic Solids","date":"December 21, 2020"},"next":{"id":"e11de267-dc2c-51d9-81f8-9bdf5f9a5de6","excerpt":"There will only ever be 21,000,000 Bitcoin in existence. Meanwhile, world population has exploded over the last century and is projected to…","slug":"/bitcoins-per-person/","title":"If Bitcoin Were Distributed Evenly","date":"May 13, 2021"}},"pageContext":{"id":"d373387e-9542-57e4-aa85-edf10946a240","previousId":"da0f54d7-c1e3-5060-a708-a199b7f5187a","nextId":"e11de267-dc2c-51d9-81f8-9bdf5f9a5de6","maxWidth":1380}},
    "staticQueryHashes": ["2220939718","2744905544","3090755652","764694655"]}