(lines): Change line by rect

Author: nucliweb

src/connections/test/js/controls.js

@@ -1,5 +1,4 @@
 const element = document.querySelector('.connections')
-console.log(element)
 const PARAMS = {
   particleColor: {r: 150, g: 180, b: 200},
   lineColor: {r: 150, g: 180, b: 200},

src/lines/README.md

@@ -1,8 +1,8 @@
-# CSS Houdini Connections
+# CSS Houdini Lines
 
 A CSS Houdini Worklet to show connected nodes.
 
-![CSS Houdini Connections](https://github.com/CSSHoudini/css-houdini/blob/main/src/connections/assets/connections.png)
+![CSS Houdini Lines](https://github.com/CSSHoudini/css-houdini/blob/main/src/lines/assets/lines.png)
 
 ## Getting started
 
@@ -12,15 +12,15 @@ Using CDN is the easiest way to add the library:
 
 ```js
 if ('paintWorklet' in CSS) {
-  CSS.paintWorklet.addModule('https://rawcdn.githack.com/CSSHoudini/css-houdini/6979b873e80f9120f52bd481fbdf2d4c60db6b19/src/connections/dist/connections.js');
+  CSS.paintWorklet.addModule('...');
 }
 ```
 
-Or, download the latest [Connections Worklet](https://github.com/CSSHoudini/css-houdini/tree/main/src/connections/dist) and import it to your web page:
+Or, download the latest [lines Worklet](https://github.com/CSSHoudini/css-houdini/tree/main/src/lines/dist) and import it to your web page:
 
 ```js
 if ('paintWorklet' in CSS) {
-  CSS.paintWorklet.addModule('path/to/connections.js');
+  CSS.paintWorklet.addModule('path/to/lines.js');
 }
 ```
 
@@ -34,43 +34,34 @@ To add support for all moder browsers, you can load the worklet with [css-paint-
     if (CSS['paintWorklet'] === undefined)
       await import('https://unpkg.com/css-paint-polyfill')
 
-    CSS.paintWorklet.addModule('./connections.js')
+    CSS.paintWorklet.addModule('./lines.js')
   })()
 </script>
 ```
 
 ### 3. Ready to use it in your CSS!
 
-To use **connections** worlet you need define some custom properties with values and add the value `paint(connections)` on `background-image` property.
+To use **Lines** worlet you need define some custom properties with values and add the value `paint(lines)` on `background-image` property.
 
 > The worklet has default values if you don't define these
 
 ```css
 .element {
-  --connections-particleColor: rgb(150,180,200);
-  --connections-lineColor: rgb(150,180,200);
-  --connections-particleAmount: 40;
-  --connections-defaultRadius: 2;
-  --connections-variantRadius: 1;
-  --connections-linkRadius: 60;
-
-  background-image: paint(connections);
+  --lines-colors: #f94144, #f3722c, #f8961e, #f9844a;
+  --lines-widths: 10, 2, 3, 8;
+  --lines-gaps: 20, 4, 3, 7;
+  --lines-rotate: 0; /* In degrees */
+
+  background-image: paint(lines);
 }
 ```
 
 | property | description | default value |
 | -------- | ----------- | ------------- |
-| --connections-particleColor | Dot color | `rgb(74,74,74)` |
-| --connections-lineColor | Line conections color | `rgb(76,76,76)` |
-| --connections-particleAmount | Dots number to show on the element | `(w * h) / 1000` Calc of width * height divided to 1000  |
-| --connections-defaultRadius | Dot radius | 1.5 |
-| --connections-variantRadius | Dot radius variant | 3 |
-| --connections-linkRadius | Minimum distance between dots to draw the line connection | 80 |
-
-#### Important informaction
-
-- The current worklet version needs that the values for `--connections-particleColor` and `--connections-lineColor` are **RGB Color** with format `rgb(150,180,200)`.
-- If you define a huge values, you can see hundreds of lines in your element.
+| --lines-colors | **Color lines**, you can define one or more hexadecimal colors comma separated | `#71a7ee, #7940c1` |
+| --lines-widths | **Width lines**, you can define one or more line widths comma separated | `6, 2` |
+| --lines-gaps | **Gap lines**, you can define one or more gaps comma separated | `8` |
+| --lines-rotate | **Rotation lines**, with an interger | `0` |
 
 ## License
 

src/lines/assets/connections.png

@@ -1,16 +1,11 @@
+/* global registerPaint */
 const LINES_PROPS = [
   '--lines-colors',
   '--lines-widths',
-  '--lines-gap',
+  '--lines-gaps',
   '--lines-rotate'
 ]
 
-// Convert from degrees to radians.
-const degreesToRadians = degrees => {
-  return (degrees * Math.PI) / 180
-}
-
-// eslint-disable-next-line
 registerPaint(
   'lines',
   class {
@@ -31,45 +26,50 @@ registerPaint(
     paint(ctx, geometry, props) {
       const {width: w, height: h} = geometry
       const [
-        colors = '#123456',
-        widths = 1,
-        gap = 8,
+        colors = '#71a7ee, #7940c1',
+        widths = '6, 2',
+        gaps = '8',
         rotate = 0
       ] = this.parseProps(props)
 
-      const saveArea = Math.floor(Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2)))
-      const colorLines = colors.split(',').map(color => color.trim())
+      const sqrtArea = Math.floor(Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2)))
+      const saveArea = sqrtArea * 2
+      const colorLines = colors.split(',').map(color => color)
       const maxColors = colorLines.length
       let indexColor = 0
 
-      const widthLines = widths.split(',').map(width => width.trim())
+      const widthLines = widths.split(',').map(width => +width)
+      const maxWidth = Math.min(...widthLines)
       const maxLines = widthLines.length
       let indexLine = 0
 
-      // const gapLines = gaps.split(',').map(gap => gap.trim())
-      // const sumGaps = gapLines.reduce((a, b) => a + b, 0)
-      // const maxGaps = gapLines.length
-      // let indexGap = 0
+      const gapLines = gaps.split(',').map(gap => +gap)
+      const maxGaps = gapLines.length
+      let indexGap = 0
+
+      if (rotate !== 0) {
+        ctx.rotate((rotate * Math.PI) / 180)
+        ctx.translate(-saveArea, -saveArea)
+      }
 
-      ctx.rotate((rotate * Math.PI) / 180)
-      // ctx.rotate(degreesToRadians(rotate))
-      for (let i = 0; i < saveArea; i++) {
-        ctx.beginPath()
+      let posY = 0
 
-        // const gap = gapLines[indexGap]
-        // indexGap >= maxGaps - 1 ? (indexGap = 0) : indexGap++
-        // console.log({gap})
+      for (let i = 0; i < saveArea / maxWidth; i++) {
+        const lineGap = +widthLines[indexLine] + gapLines[indexGap]
+        ctx.fillStyle = colorLines[indexColor]
 
-        ctx.moveTo(0 - saveArea, -saveArea + i * gap)
-        ctx.lineTo(w + saveArea, -saveArea + i * gap)
+        ctx.fillRect(
+          -saveArea * 0.5,
+          posY,
+          saveArea * 2,
+          +widthLines[indexLine]
+        )
 
-        ctx.lineWidth = widthLines[indexLine]
         indexLine >= maxLines - 1 ? (indexLine = 0) : indexLine++
-
-        ctx.strokeStyle = colorLines[indexColor]
+        indexGap >= maxGaps - 1 ? (indexGap = 0) : indexGap++
         indexColor >= maxColors - 1 ? (indexColor = 0) : indexColor++
 
-        ctx.stroke()
+        posY += lineGap
       }
     }
   }

src/lines/assets/lines.png

@@ -9,20 +9,14 @@
   <body>
     <div class="css-houdini lines"></div>
     <script>
-      CSS.registerProperty({
-        name: '--lines-gap',
-        syntax: '<number>',
-        inherits: false,
-        initialValue: 0
-      })
       ;(async function() {
         if (CSS['paintWorklet'] === undefined)
           await import('https://unpkg.com/css-paint-polyfill')
 
         CSS.paintWorklet.addModule('./lines.js')
       })()
     </script>
-    <!-- <script src="./js/tweakpane-1.5.6.min.js"></script>
-    <script src="./js/controls.js"></script> -->
+    <script src="./js/tweakpane-1.5.6.min.js"></script>
+    <script src="./js/controls.js"></script>
   </body>
 </html>

src/lines/src/index.js

@@ -1,64 +1,66 @@
+/* global Tweakpane */
 const element = document.querySelector('.lines')
 const PARAMS = {
-  particleColor: '',
-  lineColor: {r: 150, g: 180, b: 200}
+  colors:
+    '#f94144, #f3722c, #f8961e, #f9844a, #f9c74f, #90be6d, #43aa8b, #4d908e, #577590, #277da1',
+  widths: '10, 2, 3, 8',
+  gaps: '20, 4, 3, 7',
+  rotate: 0
 }
 
 const pane = new Tweakpane()
 const f1 = pane.addFolder({title: 'Lines 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('--lines-particleColor', color)
+f1.addInput(PARAMS, 'colors', {
+  label: 'Line colors',
+  options: {
+    Palette1:
+      '#f94144, #f3722c, #f8961e, #f9844a, #f9c74f, #90be6d, #43aa8b, #4d908e, #577590, #277da1',
+    Palette2: '#2a9d8f, #e76f51',
+    Palette3: '#583d72, #9f5f80, #ffba93, #ff8e71',
+    Palette4: '#fc00ff, #ff67e2, #ff95f9, #bd42ff, #6100ff'
   }
-)
-f1.addInput(PARAMS, 'lineColor', {label: 'Line Color'}).on('change', value => {
-  const {r, g, b} = value
-  const color = `rgb(${r},${g},${b})`
-  element.style.setProperty('--lines-lineColor', color)
-})
-f1.addInput(PARAMS, 'particleAmount', {
-  label: 'Amount',
-  step: 5,
-  min: 10,
-  max: 400
 }).on('change', value => {
-  element.style.setProperty('--lines-particleAmount', value)
+  element.style.setProperty('--lines-colors', value)
 })
-f1.addInput(PARAMS, 'defaultRadius', {
-  label: 'Radius',
-  step: 0.5,
-  min: 1,
-  max: 5
+
+f1.addInput(PARAMS, 'widths', {
+  label: 'Line widths',
+  options: {
+    '10, 2, 3, 8': '10, 2, 3, 8',
+    '10': '10',
+    '13, 2, 8, 4, 1': '13, 2, 8, 4, 1',
+    '35, 12, 5': '35, 12, 5'
+  }
 }).on('change', value => {
-  element.style.setProperty('--lines-defaultRadius', value)
+  element.style.setProperty('--lines-widths', value)
 })
-f1.addInput(PARAMS, 'variantRadius', {
-  label: 'Variant Radius',
-  step: 0.5,
-  min: 1,
-  max: 4
+
+f1.addInput(PARAMS, 'gaps', {
+  label: 'Line gaps',
+  options: {
+    '20, 4, 3, 7': '20, 4, 3, 7',
+    '8': '8',
+    '5, 3': '5, 3',
+    '6, 7, 1, 3': '6, 7, 1, 3'
+  }
 }).on('change', value => {
-  element.style.setProperty('--lines-variantRadius', value)
+  element.style.setProperty('--lines-gaps', value)
 })
-f1.addInput(PARAMS, 'linkRadius', {
-  label: 'Link Radius',
+
+f1.addInput(PARAMS, 'rotate', {
+  label: 'Rotation (Degrees)',
   step: 1,
-  min: 10,
-  max: 200
+  min: 0,
+  max: 360
 }).on('change', value => {
-  element.style.setProperty('--lines-linkRadius', value)
+  element.style.setProperty('--lines-rotate', value)
 })
 
-/* ------------------------------------------------- */
-
 f2.addButton({title: 'Source Code'}).on('click', () =>
-  window.open('https://github.com/CSSHoudini/css-houdini', 'CSS Houdini lines')
+  window.open('https://github.com/CSSHoudini/css-houdini', 'CSS Houdini Lines')
 )
 f2.addButton({title: '@csshoudini'}).on('click', () =>
   window.open('https://twitter.com/csshoudini', 'CSS Houdini')

src/lines/test/index.html

@@ -1,8 +1,5 @@
 :root {
   --size: 300px;
-  --color-dark: #353535;
-  --color-medium: #858585;
-  --color-light: #d3d3d3;
 }
 
 @media (min-width: 600px) {
@@ -36,23 +33,10 @@ body {
 }
 
 .lines {
-  /* --lines-colors: #264653, #2a9d8f, #e9c46a, #f4a261, #e76f51; */
-  /* --lines-colors: #583d72, #9f5f80, #ffba93, #ff8e71; */
-  --lines-colors: #f94144ff, #f3722cff, #f8961eff, #f9844aff, #f9c74fff, #90be6dff, #43aa8bff, #4d908eff, #577590ff, #277da1ff;
-  --lines-widths: 3, 8, 2, 5, 1;
-  --lines-gap: 20;
-  --lines-rotate: 130; /* In degrees */
+  --lines-colors: #f94144, #f3722c, #f8961e, #f9844a, #f9c74f, #90be6d, #43aa8b, #4d908e, #577590, #277da1;
+  --lines-widths: 10, 2, 3, 8;
+  --lines-gaps: 20, 4, 3, 7;
+  --lines-rotate: 0; /* In degrees */
 
   background-image: paint(lines);
-
-  /* animation-name: gap;
-  animation-duration: 4s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite; */
-}
-
-@keyframes gap {
-  0% { --lines-gap: 10 }
-  50% { --lines-gap: 40 }
-  100% { --lines-gap: 10 }
 }