WIP

.vscode/launch.json

@@ -5,7 +5,7 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "type": "pwa-node",
+      "type": "node",
       "request": "launch",
       "name": "Debug current test",
       "cwd": "${workspaceFolder}/cli",
@@ -15,7 +15,7 @@
     {
       "type": "node",
       "request": "launch",
-      "name": "Run",
+      "name": "Run and debug",
       "skipFiles": ["<node_internals>/**"],
       "cwd": "${workspaceFolder}/cli/packages",
       "program": "./themer/lib/index.js",
@@ -27,6 +27,22 @@
         "-o",
         "${workspaceFolder}/cli/tmp"
       ]
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Quick run and debug current",
+      "skipFiles": ["<node_internals>/**"],
+      "cwd": "${workspaceFolder}/cli/packages",
+      "program": "./themer/lib/index.js",
+      "args": [
+        "-c",
+        "./colors-default",
+        "-t",
+        "${file}",
+        "-o",
+        "${workspaceFolder}/cli/tmp"
+      ]
     }
   ],
   "inputs": [
@@ -93,6 +109,7 @@
         "wallpaper-block-wave",
         "wallpaper-burst",
         "wallpaper-circuits",
+        "wallpaper-curves",
         "wallpaper-diamonds",
         "wallpaper-dot-grid",
         "wallpaper-octagon",

cli/packages/wallpaper-curves/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+LICENSE.md

cli/packages/wallpaper-curves/.yarnrc

@@ -0,0 +1,2 @@
+version-tag-prefix "@themerdev/wallpaper-curves-v"
+version-git-message "@themerdev/wallpaper-curves-v%s"

cli/packages/wallpaper-curves/README.md

@@ -0,0 +1,34 @@
+# @themerdev/wallpaper-curves
+
+A wallpaper template for [themer](https://github.com/themerdev/themer).
+
+TODO: Add preview images
+
+## Installation & usage
+
+Install this module wherever you have `themer` installed:
+
+    npm install @themerdev/wallpaper-curves
+
+Then pass `@themerdev/wallpaper-curves` as a `-t` (`--template`) arg to `themer`:
+
+    themer -c my-colors.js -t @themerdev/wallpaper-curves -o gen
+
+`@themerdev/wallpaper-curves` will generate PNG wallpapers to the output directory (`gen/` in this example).
+
+### Default resolutions
+
+By default, `@themerdev/wallpaper-curves` will output wallpapers at the following sizes:
+
+- 2880 by 1800 (desktop)
+- 750 by 1334 (device)
+
+### Custom resolutions
+
+`@themerdev/wallpaper-curves` adds the following argument to `themer`:
+
+    --themer-wallpaper-curves-size
+
+to which you would pass `<width>x<height>`. For example, to forego the default resolutions and generate two wallpapers, one 1024 by 768 and one 320 by 960:
+
+    themer -c my-colors.js -t @themerdev/wallpaper-curves --themer-wallpaper-curves-size 1024x768 --themer-wallpaper-curves-size 320x960 -o gen

cli/packages/wallpaper-curves/lib/index.js

@@ -0,0 +1,105 @@
+const {
+  getSizesFromOptOrDefault,
+  deepFlatten,
+  colorSets: getColorSets,
+  listOutputFiles,
+} = require('@themerdev/utils');
+const { createCanvas } = require('canvas');
+const { Bezier } = require('bezier-js');
+
+const render = (colors, options) => {
+  try {
+    var sizes = getSizesFromOptOrDefault(
+      options['themer-wallpaper-curves-size'],
+    );
+  } catch (e) {
+    return [Promise.reject(e.message)];
+  }
+
+  const colorSets = getColorSets(colors);
+
+  return deepFlatten(
+    sizes.map((size) =>
+      colorSets.map(async (colorSet) => {
+        const canvas = createCanvas(size.w, size.h);
+        const ctx = canvas.getContext('2d');
+
+        ctx.fillStyle = colorSet.colors.shade0;
+        ctx.fillRect(0, 0, size.w, size.h);
+
+        const curve = new Bezier(
+          { x: size.w / 2 - 100, y: size.h / 2 - 100 },
+          { x: size.w / 2 + 100, y: size.h / 2 + 100 },
+          { x: size.w / 2 - 100, y: size.h / 2 + 100 },
+        );
+
+        ctx.strokeStyle = `${colorSet.colors.shade7}03`;
+        ctx.lineCap = 'round';
+
+        for (let i = 128; i > 0; i--) {
+          ctx.lineWidth = i;
+          ctx.moveTo(curve.points[0].x, curve.points[0].y);
+          ctx.quadraticCurveTo(
+            curve.points[1].x,
+            curve.points[1].y,
+            curve.points[2].x,
+            curve.points[2].y,
+          );
+          ctx.stroke();
+        }
+
+        // Fast but too small shadow blur
+        // ctx.shadowBlur = 50;
+        // ctx.shadowColor = colorSet.colors.shade7;
+
+        /////////////////////
+        // Slow noisy glow //
+        /////////////////////
+
+        // const { x: xMinMax, y: yMinMax } = curve.bbox();
+
+        // const pixelSize = 1;
+
+        // for (
+        //   let x = xMinMax.min - 200;
+        //   x <= xMinMax.max + 200;
+        //   x += pixelSize
+        // ) {
+        //   for (
+        //     let y = yMinMax.min - 200;
+        //     y <= yMinMax.max + 200;
+        //     y += pixelSize
+        //   ) {
+        //     const closest = curve.project({ x, y });
+        //     const distance = Math.sqrt(
+        //       Math.pow(x - closest.x, 2) + Math.pow(y - closest.y, 2),
+        //     );
+        //     const alpha = Math.max(
+        //       0,
+        //       Math.min(
+        //         1,
+        //         (1 - distance / Math.min(xMinMax.size, yMinMax.size)) *
+        //           Math.random(),
+        //       ),
+        //     );
+        //     ctx.fillStyle = `rgba(255,255,0,${alpha})`;
+        //     ctx.fillRect(x, y, pixelSize, pixelSize);
+        //   }
+        // }
+
+        return {
+          name: `themer-wallpaper-curves-${colorSet.name}-${size.w}x${size.h}.png`,
+          contents: Buffer.from(
+            canvas.toDataURL().replace('data:image/png;base64,', ''),
+            'base64',
+          ),
+        };
+      }),
+    ),
+  );
+};
+
+module.exports = {
+  render,
+  renderInstructions: listOutputFiles,
+};

cli/packages/wallpaper-curves/lib/index.spec.js

@@ -0,0 +1,15 @@
+const { render, renderInstructions } = require('./index');
+const { colors } = require('../../colors-default');
+
+describe('themer "curves" wallpaper', () => {
+  it('should return 4 PNG files to write', async () => {
+    const files = await Promise.all(render(colors, {}));
+    expect(files.length).toBe(4);
+    expect(files.filter(file => /\.png/.test(file.name)).length).toBe(4);
+  });
+  it('should list output files', async () => {
+    const files = await Promise.all(render(colors, { 'themer-wallpaper-curves-size': '1000x1000' }));
+    const instructions = renderInstructions(files.map(({ name }) => name));
+    expect(instructions).toMatchSnapshot();
+  });
+});

cli/packages/wallpaper-curves/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@themerdev/wallpaper-curves",
+  "version": "1.0.0",
+  "description": "A wallpaper generator for themer.",
+  "main": "lib/index.js",
+  "engines": {
+    "node": ">=8.11.4"
+  },
+  "scripts": {
+    "prepublishOnly": "cp ../../../LICENSE.md ./"
+  },
+  "author": "mjswensen",
+  "license": "MIT",
+  "files": [
+    "/lib/index.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/themerdev/themer.git"
+  },
+  "bugs": {
+    "url": "https://github.com/themerdev/themer/issues"
+  },
+  "homepage": "https://github.com/themerdev/themer/tree/main/cli/packages/wallpaper-curves#readme",
+  "dependencies": {
+    "@themerdev/utils": "^1.0.0",
+    "bezier-js": "^6.1.0",
+    "canvas": "^2.6.1"
+  },
+  "peerDependencies": {
+    "themer": "^3"
+  },
+  "keywords": [
+    "themer",
+    "wallpaper"
+  ]
+}

cli/packages/wallpaper-waves/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+LICENSE.md

cli/packages/wallpaper-waves/.yarnrc

@@ -0,0 +1,2 @@
+version-tag-prefix "@themerdev/wallpaper-waves-v"
+version-git-message "@themerdev/wallpaper-waves-v%s"

cli/packages/wallpaper-waves/README.md

@@ -0,0 +1,34 @@
+# @themerdev/wallpaper-waves
+
+A wallpaper template for [themer](https://github.com/themerdev/themer).
+
+TODO: Add preview images
+
+## Installation & usage
+
+Install this module wherever you have `themer` installed:
+
+    npm install @themerdev/wallpaper-waves
+
+Then pass `@themerdev/wallpaper-waves` as a `-t` (`--template`) arg to `themer`:
+
+    themer -c my-colors.js -t @themerdev/wallpaper-waves -o gen
+
+`@themerdev/wallpaper-waves` will generate PNG wallpapers to the output directory (`gen/` in this example).
+
+### Default resolutions
+
+By default, `@themerdev/wallpaper-waves` will output wallpapers at the following sizes:
+
+- 2880 by 1800 (desktop)
+- 750 by 1334 (device)
+
+### Custom resolutions
+
+`@themerdev/wallpaper-waves` adds the following argument to `themer`:
+
+    --themer-wallpaper-waves-size
+
+to which you would pass `<width>x<height>`. For example, to forego the default resolutions and generate two wallpapers, one 1024 by 768 and one 320 by 960:
+
+    themer -c my-colors.js -t @themerdev/wallpaper-waves --themer-wallpaper-waves-size 1024x768 --themer-wallpaper-waves-size 320x960 -o gen