(worklet): Connections

Author: nucliweb

.gitignore

@@ -1,3 +1,7 @@
 .DS_Store
 node_modules
 package-lock.json
+**/test/*.js
+
+# Local Netlify folder
+.netlify

README.md

@@ -1,3 +1,3 @@
 # Extends CSS with the Houdini powers
 
-A set of modules to extends your CSS with the Houdini powers.
+A set of worklets to extends your CSS with the Houdini powers.

src/connections/.editorconfig

@@ -0,0 +1,10 @@
+# editorconfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+end_of_line = lf
+indent_size = 2
+charset = utf-8

src/connections/.npmignore

@@ -0,0 +1,6 @@
+src
+assets
+test
+.editorconfig
+server.js
+package-lock.json

src/connections/README.md

@@ -0,0 +1,5 @@
+# CSS Houdini Connections
+
+A CSS Houdini Worklet to show connected nodes.
+
+![CSS Houdini Connections](./assets/connections.png)

src/connections/assets/connections.png

@@ -0,0 +1,46 @@
+{
+  "name": "@css-houdini/connections",
+  "version": "1.0.0",
+  "description": "CSS Houdini Background Connections",
+  "source": "src/index.js",
+  "main": "dist/connections.js",
+  "module": "dist/connections.module.js",
+  "unpkg": "dist/connections.umd.js",
+  "scripts": {
+    "build": "rimraf dist && microbundle --no-sourcemap",
+    "prepublish": "npm run build",
+    "test": "npm run test:copy && npm run test:server",
+    "test:copy": "cp -fv ./src/index.js ./test/connections.js",
+    "test:server": "node ./server.js"
+  },
+  "keywords": [
+    "houdini",
+    "css",
+    "css-houdini",
+    "PaintWorklet",
+    "paitn",
+    "worklet"
+  ],
+  "author": {
+    "name": "Joan León",
+    "email": "joan.leon@gmail.com",
+    "twitter": "@nucliweb",
+    "web": "https://joanleon.dev"
+  },
+  "license": "MIT",
+  "eslintConfig": {
+    "extends": [
+      "./node_modules/@s-ui/lint/eslintrc.js"
+    ]
+  },
+  "prettier": "./node_modules/@s-ui/lint/.prettierrc.js",
+  "stylelint": {
+    "extends": "./node_modules/@s-ui/lint/stylelint.config.js"
+  },
+  "devDependencies": {
+    "@s-ui/lint": "^3.25.0",
+    "express": "^4.17.1",
+    "microbundle": "^0.12.4",
+    "rimraf": "^3.0.2"
+  }
+}

src/connections/dist/connections.js

@@ -0,0 +1,14 @@
+/* eslint-env node */
+/* eslint no-console: "off" */
+
+const path = require('path')
+const express = require('express')
+const app = express()
+const htdocs = path.join(__dirname, 'test')
+
+// Run static server
+app.use(express.static(htdocs))
+app.listen(8080)
+
+console.log('🚀 Paint worklet test up and running at http://localhost:8080/')
+console.log('ℹ️  Press Ctrl+C to return to the real world.')

src/connections/dist/connections.modern.js

@@ -0,0 +1,82 @@
+const CONNECTIONS_PROPS = [
+  '--connections-particleColor',
+  '--connections-lineColor',
+  '--connections-particleAmount',
+  '--connections-defaultRadius',
+  '--connections-variantRadius',
+  '--connections-linkRadius'
+]
+
+registerPaint(
+  'connections',
+  class {
+    static get inputProperties() {
+      return CONNECTIONS_PROPS
+    }
+
+    parseProps(props) {
+      return CONNECTIONS_PROPS.map(
+        prop => props.get(prop).toString().trim() || undefined
+      )
+    }
+
+    checkDistance(x1, y1, x2, y2) {
+      return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
+    }
+
+    paint(ctx, geometry, props) {
+      const {width: w, height: h} = geometry
+      const [
+        particleColor = 'rgb(74,74,74)',
+        lineColor = 'rgb(76,76,76)',
+        particleAmount = (w * h) / 1000,
+        defaultRadius = 1.5,
+        variantRadius = 3,
+        linkRadius = 80
+      ] = this.parseProps(props)
+
+      let particles = []
+      const [r, g, b] = lineColor.match(/\d+/g)
+
+      const particle = (x, y) => {
+        let radius = +defaultRadius + Math.random() * +variantRadius
+        ctx.beginPath()
+        ctx.arc(x, y, radius, 0, Math.PI * 2)
+        ctx.fillStyle = particleColor
+        ctx.fill()
+        return {x, y}
+      }
+
+      const linkPoints = point => {
+        for (let i = 0; i < particleAmount; i++) {
+          let distance = this.checkDistance(
+            point.x,
+            point.y,
+            particles[i].x,
+            particles[i].y
+          )
+          let opacity = 1 - distance / linkRadius
+          if (opacity > 0) {
+            ctx.lineWidth = 0.5
+            ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${opacity})`
+            ctx.beginPath()
+            ctx.moveTo(point.x, point.y)
+            ctx.lineTo(particles[i].x, particles[i].y)
+            ctx.closePath()
+            ctx.stroke()
+          }
+        }
+      }
+
+      for (let i = 0; i < particleAmount; i++) {
+        let x = Math.round(Math.random() * w)
+        let y = Math.round(Math.random() * h)
+        particles.push(particle(x, y))
+      }
+
+      for (let i = 0; i < particleAmount; i++) {
+        linkPoints(particles[i])
+      }
+    }
+  }
+)

src/connections/dist/connections.module.js

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSS Houdini Connections</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div class="css-houdini connections"></div>
+    <script>
+      ;(async function() {
+        if (CSS['paintWorklet'] === undefined)
+          await import('https://unpkg.com/css-paint-polyfill')
+
+        CSS.paintWorklet.addModule('./connections.js')
+      })()
+    </script>
+    <script src="./js/tweakpane-1.5.6.min.js"></script>
+    <script src="./js/controls.js"></script>
+  </body>
+</html>

src/connections/dist/connections.umd.js

@@ -0,0 +1,71 @@
+const element = document.querySelector('.connections')
+console.log(element)
+const PARAMS = {
+  particleColor: {r: 150, g: 180, b: 200},
+  lineColor: {r: 150, g: 180, b: 200},
+  particleAmount: 80,
+  defaultRadius: 2,
+  variantRadius: 3,
+  linkRadius: 80
+}
+
+const pane = new Tweakpane()
+const f1 = pane.addFolder({title: 'Connections Parameters'})
+const f2 = pane.addFolder({title: 'Information'})
+f2.expanded = false
+
+f1.addInput(PARAMS, 'particleColor', {label: 'Particle Color'}).on(
+  'change',
+  value => {
+    const {r, g, b} = value
+    const color = `rgb(${r},${g},${b})`
+    element.style.setProperty('--connections-particleColor', color)
+  }
+)
+f1.addInput(PARAMS, 'lineColor', {label: 'Line Color'}).on('change', value => {
+  const {r, g, b} = value
+  const color = `rgb(${r},${g},${b})`
+  element.style.setProperty('--connections-lineColor', color)
+})
+f1.addInput(PARAMS, 'particleAmount', {
+  label: 'Amount',
+  step: 5,
+  min: 10,
+  max: 400
+}).on('change', value => {
+  element.style.setProperty('--connections-particleAmount', value)
+})
+f1.addInput(PARAMS, 'defaultRadius', {
+  label: 'Radius',
+  step: 0.5,
+  min: 1,
+  max: 5
+}).on('change', value => {
+  element.style.setProperty('--connections-defaultRadius', value)
+})
+f1.addInput(PARAMS, 'variantRadius', {
+  label: 'Variant Radius',
+  step: 0.5,
+  min: 1,
+  max: 4
+}).on('change', value => {
+  element.style.setProperty('--connections-variantRadius', value)
+})
+f1.addInput(PARAMS, 'linkRadius', {
+  label: 'Link Radius',
+  step: 1,
+  min: 10,
+  max: 200
+}).on('change', value => {
+  element.style.setProperty('--connections-linkRadius', value)
+})
+
+f2.addButton({title: 'Source Code'}).on('click', () =>
+  window.open(
+    'https://github.com/CSSHoudini/css-houdini',
+    'CSS Houdini Connections'
+  )
+)
+f2.addButton({title: '@csshoudini'}).on('click', () =>
+  window.open('https://twitter.com/csshoudini', 'CSS Houdini')
+)

src/connections/package.json

@@ -0,0 +1,47 @@
+:root {
+  --size: 300px;
+  --color-dark: #353535;
+  --color-medium: #858585;
+  --color-light: #d3d3d3;
+}
+
+@media (min-width: 600px) {
+  :root {
+    --size: 600px;
+  }
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+body {
+  align-items: center;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  font-family: sans-serif;
+  justify-content: center;
+  padding-top: 1em;
+}
+
+.css-houdini {
+  height: var(--size);
+  padding: 1em;
+  box-sizing: content-box;
+  width: var(--size);
+}
+
+.connections {
+  --connections-particleColor: rgb(150,180,200);
+  --connections-lineColor: rgb(150,180,200);
+  --connections-particleAmount: 200;
+  --connections-defaultRadius: 2;
+  --connections-variantRadius: 1;
+  --connections-linkRadius: 60;
+
+  background-image: paint(connections);
+}