Dot Splash

From c8a0b16d2ec9380f1576300a6cdbf67bf0bf50bd Mon Sep 17 00:00:00 2001 From: Nick Van Doorn Date: Sun, 14 Oct 2018 14:09:06 -0700 Subject: Initial commit --- .prettierrc | 4 ++++ index.html | 14 ++++++++++++++ main.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 27 +++++++++++++++++++++++++++ templates.js | 15 +++++++++++++++ 5 files changed, 113 insertions(+) create mode 100644 .prettierrc create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css create mode 100644 templates.js 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 @@ + + + Dot Splash + + + + + +

+ + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..a5849e2 --- /dev/null +++ b/main.js @@ -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 `` + }, + svg(id = '', children) { + return `` + } + } +})() -- cgit v1.2.3