Pattern-maker-plugin

Link to Pluginhttps://perchance.org/pattern-maker-plugin

This plugin allows you to create random patterns based on an "example pattern" that you input. It uses a smart algorithm by Maxim Gumin to generate random patterns that look similar to the pattern that you give it.

Here are some example input patterns (left) and some example output patterns that it generates (right):

To use it, you'll first need to import it by adding this line to your lists editor:

```
patternMaker = {import:pattern-maker-plugin}

```

Now that you've imported your plugin, you'll need to make a **very small** input image or a grid of emoji/text. If you'd like to draw your example/input grid using emojis, you can paste the following example into your code editor:

```
patternOptions
  inputTextGrid
    🌳🟩🟩🟩🌲🟩🟩🟩🟩🟩🟩🌾
    🟩🟩🟩🟦🟩🟩🟩🔲🔲🔲🔲🟩
    🟩🟦🟦🟦🟩🟩🟩🔲🟫🪑🔲🟩
    🟩🟦🟦🟦🌲🌷🌷🔲🟫🟫🔲🟩
    🟩🟩🟦🟦🟩🟩🟩🔲🚪🔲🔲🟩
    🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩
    🟩🌳🌳🟩🟩🟩🟩🟩🟩🟩🟩🟩
    🟩🟩🌳🟦🟦🟦🟩🟩🌷🟩🟦🟦
    🟩🌳🟦🟦🟦🟩🟩🪨🟩🟩🟦🟩
    🌾🟩🟦🟦🟦🟩🟩🌳🟦🟦🟦🟩
    🟩🟩🟦🟦🟦🟦🟦🟦🟦🌳🟩🟩
  settings
    width = 40
    height = 40
    n = 3
    symmetry = 8

```

And you can now just paste this anywhere in your code:

```
[patternMaker(patternOptions)]

```

The plugin will generate a random pattern based on the example emoji pattern that you provided. You can paste it in your HTML panel, or as part of a list in your Perchance lists panel (keep reading to learn what the `n` and `symmetry` settings mean).

Here's an example generator using the above pattern options. You can create your own emoji patterns manually, or with this emoji art editor.

If you're creating an image, then it should probably be less than 30px in width and height, otherwise it will take too long to generate. It can be larger if you're only using a small number of colors. Here's an example image.

To create your image, you can use the simple drawing tool below, or you can use a site like Photopea. The tool below allows you to draw an input image and quickly test it by clicking "Generate Image". Click in the box to start drawing. Once you're happy with your image you can click "Save" and continue with the instructions below.

(this is only accessible on the plugin page for this plugin!)

Try playing around with the `n` and `symmetry` values if the generated image doesn't look good (I'll explain what these values mean soon). Note that the larger and more "complicated" your input image is, the longer it'll take to generate output images. Try to use a small number of colors. The `n` and `symmetry` values will also affect the generation speed.

Once you're done, click save, and it'll generate some special output text that starts with `data:image/png`. Your image is saved/stored within this text - it represents the image that you just drew. Copy the following list into your Perchance code editor, and replace the example `data:image/png;...` with your own text that you generated above.

```
patternOptions
  inputImage = data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAXCAIAAABbMYLrAAAACXBIWXMAAAsSAAALEgHS3X78AAAAwUlEQVQ4jY2SsRHCMAxFZR1ViszCBFzo2IAJWIhpQpUcEzAGtYsUNFDoTshfPwFV9veX9KSkTM8qf4fCfeh66jNdQSojSXC9AMnQ9fNC2ExHkjJyYtPRLSLHO5K4otJONh0qJNjZdM2T2UMMV3Re6vskcbIfJHkyK2YNI5tCth8i4ZckXuJAmVDiBqPVwgkbbjflbUAVzQ9r1sadv0tu2NSGhNwK/xO6n1X3hpW7N/bDa6/F7nW9EHkvVOe1b48z1T+2Qmo2rMjyHQAAAABJRU5ErkJggg==
  settings
    width = 50
    height = 50
    n = 3
    symmetry = 8

```

And, as with the emoji version, you can now just paste this anywhere in your code to generate a pattern image:

```
[patternMaker(patternOptions)]

```

Here's a simple example generator based on the above code to get you started.

If you're using Photopea to create your input image, then click `File→New…` in the top menu and then create a small image, zoom in a lot with `View→Zoom in`, and switch from brush to pencil tool by right-clicking on the brush icon, and save/export it as a **png** when you're done.

Once you've made your image, you'll need to upload it to Imgur: imgur.com/upload. Just drag and drop your image on that page, no sign-up needed - other image hosts probably won't work with this plugin for technical reasons. Once it has fully uploaded, right click on the image and copy its URL. The URL should be a *direct* URL to the image - i.e. it should end in .png or .jpg rather than being a link to the Imgur page that has the image embedded in it. The URL should start with "https". If it starts with "blob" you need to wait a bit longer before right-clicking on the uploaded image.

(Aside: If you want to create your image in an image editor like Photopea, but you want to embed your image file directly in your generator, rather than storing it on Imgur, keep reading. At the bottom of this page I've put a "Data URL" generator that'll convert your image into the `data:image/png;...` text storage format. This is useful if you want your generator to be able to work when you're offline.)

Once you've got your Imgur URL, copy this "patternOptions" list into your generator's code, and replace the URL with your own Imgur URL:

```
patternOptions
  inputImage = https://i.imgur.com/V4trUZG.png
  settings
    width = 50
    height = 50
    n = 3
    symmetry = 8

```

And, as with the previous examples, you can now just paste this anywhere in your code:

```
[patternMaker(patternOptions)]

```

The plugin will generate a pattern based on the example pattern that you provided. You can paste it in your HTML panel, or as part of a list in your Perchance lists panel. Again, here's a simple example generator to get you started.

There are a bunch more settings for you to play around with:

```
patternOptions
  inputImage = https://i.imgur.com/V4trUZG.png
  settings
    width = 50        // The width of the output image in pixels. If you make this bigger than 100px it may be slow. The default value is 50.
    height = 50       // The height of the output image in pixels. If you make this bigger than 100px it may be slow. The default value is 50.
    n = 3             // Roughly speaking, this determines the size of the "chunks" of the input image that the input image will be chopped into - those chunks are then pieced together to generate the output image. Low values like 2, 3 and 4 are recommended.
    symmetry = 8      // Roughly speaking, this determines whether the input chunks will be randomly rotated and flipped. Choose a value between 1 and 8, where 1 allows no rotation/flipping, and 8 allows every possible orientation/flip.
    magnify = 5       // This just magnifies the displayed output size. E.g. if you set the width and height setting to 50px, and then set magnify to 2, the final output will have a width and height og 100px. The default value is 5 for inputImage (meaning 1 pixel is magnified up to 5 pixels) and 0.6 for inputTextGrid (meaning 60% of the normal text size).
    periodic = 0      // Set to 1 if the output be a repeatable pattern - i.e. the edges join up if you repeat it.
    periodicInput = 0 // Set to 1 if the input is a repeatable pattern - i.e. the edges join up if you repeat it.
    ground = 0        // Specifically for if your input image has a "ground"/"floor" that should be at the bottom of the output image. I'm not exactly sure how to use it yet - it's explained here: https://github.com/mxgmn/WaveFunctionCollapse/issues/3#issuecomment-250995366

```

The most important options to play around with are `**n**` and `**symmetry**`. These two can dramatically affect how good the output looks. As mentioned above, try values between 2 and 4 for `n`, and between 1 and 8 for `symmetry`.

If you're having trouble with Imgur, or would just prefer not to use it (e.g. so you can download your generator and use it without an internet connection), then upload your image below and it'll get converted into a Data URL which you can use in place of the Imgur URL.

Data URL:  (only accessible on the perchance plugin page for this plugin!)

So if you use the above tool to create a Data URL out of your image, then your `patternOptions` list will look something like this:

```
patternOptions
  inputImage = data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAXCAIAAABbMYLrAAAACXBIWXMAAAsSAAALEgHS3X78AAAAwUlEQVQ4jY2SsRHCMAxFZR1ViszCBFzo2IAJWIhpQpUcEzAGtYsUNFDoTshfPwFV9veX9KSkTM8qf4fCfeh66jNdQSojSXC9AMnQ9fNC2ExHkjJyYtPRLSLHO5K4otJONh0qJNjZdM2T2UMMV3Re6vskcbIfJHkyK2YNI5tCth8i4ZckXuJAmVDiBqPVwgkbbjflbUAVzQ9r1sadv0tu2NSGhNwK/xO6n1X3hpW7N/bDa6/F7nW9EHkvVOe1b48z1T+2Qmo2rMjyHQAAAABJRU5ErkJggg==
  settings
    width = 50
    height = 50
    n = 3
    symmetry = 2

```

**Notes:**

* Here's a basic example to get you started.
* Here's an example that uses a grid to emojis to define the "input".
* You can call the `patternOptions` list whatever you want. If your pattern options list was called `mazePattern` then you'd write `[patternMaker(mazePattern)]` to generate the output image. You can have many pattern options lists in one generator.
* This plugin uses a JavaScript port of the so called "Wave Function Collapse" algorithm. All credit for this plugin goes to @kchapelier and @mxgmn!