diff options
| author | Nick Van Doorn <vandoorn.nick@gmail.com> | 2018-10-14 14:09:06 -0700 |
|---|---|---|
| committer | Nick Van Doorn <vandoorn.nick@gmail.com> | 2018-10-14 14:10:00 -0700 |
| commit | c8a0b16d2ec9380f1576300a6cdbf67bf0bf50bd (patch) | |
| tree | 9c90c29a320e9445538638d17f4c58d47e190c1a | |
| -rw-r--r-- | .prettierrc | 4 | ||||
| -rw-r--r-- | index.html | 14 | ||||
| -rw-r--r-- | main.js | 53 | ||||
| -rw-r--r-- | style.css | 27 | ||||
| -rw-r--r-- | templates.js | 15 |
5 files changed, 113 insertions, 0 deletions
diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..fd496a8 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "semi": false +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..2055b65 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ +<html> + <head> + <title>Dot Splash</title> + <link rel="stylesheet" type="text/css" href="style.css"> + </head> + <body> + <!-- This is our root node where the rest of our app will spawn --> + <!-- If the inner HTML of this root node has not been changed yet, things are still loading --> + <div id="root">Loading...</div> + <!-- Make sure the templates get imported first --> + <script type="text/javascript" src="templates.js"></script> + <script type="text/javascript" src="main.js"></script> + </body> +</html> @@ -0,0 +1,53 @@ +const N_DOTS = 200 + +// Helper to generate random IDs such that we can easily +// refer to each node +function getRandomId(prefix) { + return `${prefix}-${Math.round(Date.now() * Math.random())}` +} + +// Random coordinates bounded +// by the size of the page +function getRandomCoords( + width = window.innerWidth, + height = window.innerHeight +) { + return { + cy: Math.random() * height, + cx: Math.random() * width + } +} + +// iterate over a list of ids, +// query the DOM for the node, +// compute a random position, +// and then set it on the node +function setRandomCoords(ids) { + for (let id of ids) { + let circle = document.getElementById(id) + let coords = getRandomCoords() + circle.style.cx = coords.cx + circle.style.cy = coords.cy + } +} + +window.onload = function() { + // Get our root node + let rootNode = document.getElementById('root') + let circles = '' + let ids = [] + for (let i = 0; i < N_DOTS; i++) { + let id = getRandomId('circle') + circles += Templates.circle(id) + ids.push(id) + } + // we don't need an id on this template, + // so we pass undefined which forces the + // "default" value defined in the function + rootNode.innerHTML = Templates.svg(undefined, circles) + setRandomCoords(ids) + + document.onmousemove = function(event) { + setRandomCoords(ids) + } +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..177ca28 --- /dev/null +++ b/style.css @@ -0,0 +1,27 @@ +html, +body, +#root { + width: 100%; + height: 100%; +} +body { + background: #f7df1e; + color: #ffffff; + margin: 0; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +svg.container { + width: 100%; + height: 100%; +} + +#root { + display: flex; + flex-direction: column; +} diff --git a/templates.js b/templates.js new file mode 100644 index 0000000..1e35ba6 --- /dev/null +++ b/templates.js @@ -0,0 +1,15 @@ +// Create a module to keep +// our template functions +// out of the global scope +let Templates = (function() { + return { + // Allowing an id to be passed in is very useful + // for finding this node after it gets mounted + circle(id = '') { + return `<circle class="circle" id="${id}" r="4"/>` + }, + svg(id = '', children) { + return `<svg class="container" id="${id}">${children}</svg>` + } + } +})() |