houdini-leaf - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

houdini-leaf.js

@@ -19,4 +19,11 @@ /*
     inherits: true,
-    initialValue: 'black'
+    initialValue: '#73ce8f'
   });
+
+  CSS.registerProperty({
+    name: '--leaf-variance',
+    syntax: 'left | around',
+    inherits: false,
+    initialValue: 'left'
+  });
 }
@@ -28,14 +35,76 @@
 class LeafPainter {
-  static get inputProperties() { return ['--leaf-size', '--leaf-color']; }
+  static get inputProperties() {
+    return [
+      '--leaf-size',
+      '--leaf-color',
+      '--leaf-variance'
+    ];
+  }
 
+  get leafSize() {
+    return this._leafSize;
+  }
+
+  set leafSize(size) {
+    this._leafSize = size;
+  }
+
+  get leafColor() {
+    return this._leafColor;
+  }
+
+  set leafColor(color) {
+    this._leafColor = color;
+  }
+
+  get leafVariance() {
+    return this._leafVariance;
+  }
+
+  set leafVariance(variance) {
+    this._leafVariance = variance;
+  }
+
+  /**
+   * The starting point of the vine in the canvas
+   * @return {number}
+   */
+  get x() {
+    return this.leafSize * 2;
+  }
+
+  /**
+   * The distance between the border the vine grow along and the other side of the vine.
+   * @return {number}
+   */
+  get width() {
+    return this.x + this.leafSize * 2;
+  }
+
+  /**
+   * vine directions
+   * v>>>>>>^
+   * v      ^
+   * v      ^
+   * v<<<<<<^
+   */
   paint(ctx, geom, properties) {
-    const leafSize = parseInt(properties.get('--leaf-size')) || 16;
-    const numLeaves = Math.floor(geom.height / leafSize) * 1.5;
-    const x = leafSize * 2 + 1;
+    this.leafSize = parseInt(properties.get('--leaf-size')) || 16;
+    this.leafColor = (properties.get('--leaf-color') || '#73ce8f').toString().trim();
+    this.leafVariance = (properties.get('--leaf-variance') || 'left').toString().trim();
 
-    ctx.strokeStyle = properties.get('--leaf-color').toString().trim() || 'black';
-    ctx.fillStyle = properties.get('--leaf-color').toString().trim() || 'black';
-    this.vine(ctx, geom, x, numLeaves, leafSize);
+    // left
+    this.paintVine(ctx, properties, geom.height, 0, [0, 0]);
+
+    if (this.leafVariance === 'around') {
+      // top
+      this.paintVine(ctx, properties, geom.width, -90, [-this.width, 0]);
+      // // right
+      this.paintVine(ctx, properties, geom.height, -180, [-geom.width, -geom.height]);
+      // // bottom
+      this.paintVine(ctx, properties, geom.width, -270, [geom.height - this.width, -geom.width]);
+    }
   }
 
+
   leaf(ctx, x, y, size, dir) {
@@ -53,17 +122,41 @@ ctx.save();
 
-  vine(ctx, geom, x, numLeaves, leafSize) {
-    const width = geom.width;
-    const height = geom.height;
+  vine(ctx, x, numLeaves, leafSize, length, angle) {
+    const isAround = this.leafVariance === 'around';
+
     ctx.beginPath();
-    ctx.moveTo(x, 0);
-    ctx.lineTo(x, height);
+    ctx.moveTo(x, isAround ? x + leafSize : 0);
+    if (isAround && (Math.abs(angle) === 90 || Math.abs(angle) === 270)) { // top or bottom
+      ctx.quadraticCurveTo(x, x, x - leafSize, x);
+      ctx.moveTo(x, x + leafSize);
+    }
+    ctx.lineTo(x, isAround ? length - x - leafSize : length);
+    if (isAround && (angle === 0 || Math.abs(angle) === 180)) { // left or right
+      ctx.quadraticCurveTo(x, length - x, x + leafSize, length - x);
+    }
     ctx.stroke();
-    const gap = height / numLeaves;
+    const gap = length / numLeaves;
     let direction = 1;
     for (let i = 0; i < numLeaves; i++) {
       const r = randomInt(gap);
-      this.leaf(ctx, x, gap * i + r, leafSize, direction);
-      direction = -direction;
+      const y = gap * i + r;
+      if (!isAround || (isAround && y > x && y < length - x)) {
+        this.leaf(ctx, x, y, leafSize, direction);
+        direction = -direction;
+      }
     }
   }
+
+
+  paintVine(ctx, properties, length, angle, origin) {
+    const numLeaves = Math.floor(length / this.leafSize) * 1.5;
+
+    ctx.strokeStyle = ctx.fillStyle = this.leafColor;
+
+    ctx.save();
+    ctx.rotate(angle * Math.PI / 180);
+    ctx.translate(...origin);
+    this.vine(ctx, this.x, numLeaves, this.leafSize, length, angle);
+    ctx.restore();
+  }
+
 }
@@ -70,0 +163,0 @@

package.json

 {
   "name": "houdini-leaf",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Leaf and vine background decoration",
@@ -5,0 +5,0 @@ "main": "houdini-leaf.js",

properties.js

@@ -13,4 +13,11 @@ if ('registerProperty' in CSS) {
     inherits: true,
-    initialValue: 'black'
+    initialValue: '#73ce8f'
   });
+
+  CSS.registerProperty({
+    name: '--leaf-variance',
+    syntax: 'left | around',
+    inherits: false,
+    initialValue: 'left'
+  });
 }

README.md

@@ -5,3 +5,3 @@ # houdini-leaf
 
-![Three boxes with leaf and vine in the background](houdini-leaf-demo.png)
+![Three boxes with leaf and vine in the background](demo.JPG)
 
@@ -18,4 +18,5 @@ Import the script
     --leaf-size: 16;
+    --leaf-variance: left | around;
     background-image: paint(leaf);
 }
 ```

worklet.js

 const randomInt = (max) => Math.floor(Math.random() * Math.floor(max));
 
 class LeafPainter {
-  static get inputProperties() { return ['--leaf-size', '--leaf-color']; }
+  static get inputProperties() {
+    return [
+      '--leaf-size',
+      '--leaf-color',
+      '--leaf-variance'
+    ];
+  }
 
+  get leafSize() {
+    return this._leafSize;
+  }
+
+  set leafSize(size) {
+    this._leafSize = size;
+  }
+
+  get leafColor() {
+    return this._leafColor;
+  }
+
+  set leafColor(color) {
+    this._leafColor = color;
+  }
+
+  get leafVariance() {
+    return this._leafVariance;
+  }
+
+  set leafVariance(variance) {
+    this._leafVariance = variance;
+  }
+
+  /**
+   * The starting point of the vine in the canvas
+   * @return {number}
+   */
+  get x() {
+    return this.leafSize * 2;
+  }
+
+  /**
+   * The distance between the border the vine grow along and the other side of the vine.
+   * @return {number}
+   */
+  get width() {
+    return this.x + this.leafSize * 2;
+  }
+
+  /**
+   * vine directions
+   * v>>>>>>^
+   * v      ^
+   * v      ^
+   * v<<<<<<^
+   */
   paint(ctx, geom, properties) {
-    const leafSize = parseInt(properties.get('--leaf-size')) || 16;
-    const numLeaves = Math.floor(geom.height / leafSize) * 1.5;
-    const x = leafSize * 2 + 1;
+    this.leafSize = parseInt(properties.get('--leaf-size')) || 16;
+    this.leafColor = (properties.get('--leaf-color') || '#73ce8f').toString().trim();
+    this.leafVariance = (properties.get('--leaf-variance') || 'left').toString().trim();
 
-    ctx.strokeStyle = properties.get('--leaf-color').toString().trim() || 'black';
-    ctx.fillStyle = properties.get('--leaf-color').toString().trim() || 'black';
-    this.vine(ctx, geom, x, numLeaves, leafSize);
+    // left
+    this.paintVine(ctx, properties, geom.height, 0, [0, 0]);
+
+    if (this.leafVariance === 'around') {
+      // top
+      this.paintVine(ctx, properties, geom.width, -90, [-this.width, 0]);
+      // // right
+      this.paintVine(ctx, properties, geom.height, -180, [-geom.width, -geom.height]);
+      // // bottom
+      this.paintVine(ctx, properties, geom.width, -270, [geom.height - this.width, -geom.width]);
+    }
   }
 
+
   leaf(ctx, x, y, size, dir) {
@@ -28,19 +90,43 @@ ctx.save();
 
-  vine(ctx, geom, x, numLeaves, leafSize) {
-    const width = geom.width;
-    const height = geom.height;
+  vine(ctx, x, numLeaves, leafSize, length, angle) {
+    const isAround = this.leafVariance === 'around';
+
     ctx.beginPath();
-    ctx.moveTo(x, 0);
-    ctx.lineTo(x, height);
+    ctx.moveTo(x, isAround ? x + leafSize : 0);
+    if (isAround && (Math.abs(angle) === 90 || Math.abs(angle) === 270)) { // top or bottom
+      ctx.quadraticCurveTo(x, x, x - leafSize, x);
+      ctx.moveTo(x, x + leafSize);
+    }
+    ctx.lineTo(x, isAround ? length - x - leafSize : length);
+    if (isAround && (angle === 0 || Math.abs(angle) === 180)) { // left or right
+      ctx.quadraticCurveTo(x, length - x, x + leafSize, length - x);
+    }
     ctx.stroke();
-    const gap = height / numLeaves;
+    const gap = length / numLeaves;
     let direction = 1;
     for (let i = 0; i < numLeaves; i++) {
       const r = randomInt(gap);
-      this.leaf(ctx, x, gap * i + r, leafSize, direction);
-      direction = -direction;
+      const y = gap * i + r;
+      if (!isAround || (isAround && y > x && y < length - x)) {
+        this.leaf(ctx, x, y, leafSize, direction);
+        direction = -direction;
+      }
     }
   }
+
+
+  paintVine(ctx, properties, length, angle, origin) {
+    const numLeaves = Math.floor(length / this.leafSize) * 1.5;
+
+    ctx.strokeStyle = ctx.fillStyle = this.leafColor;
+
+    ctx.save();
+    ctx.rotate(angle * Math.PI / 180);
+    ctx.translate(...origin);
+    this.vine(ctx, this.x, numLeaves, this.leafSize, length, angle);
+    ctx.restore();
+  }
+
 }
 
 registerPaint('leaf', LeafPainter);

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8950

increased by102.95%

Lines of code

268

increased by131.03%

Number of lines in readme file

20

increased by5.26%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes