Coder Social home page Coder Social logo

wavefunctioncollapse's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wavefunctioncollapse's Issues

TypeError: rng is not a function

TypeError: rng is not a function
    at SimpleTiledModel.Model.observe (webpack-internal:///./node_modules/wavefunctioncollapse/model.js:102)
    at SimpleTiledModel.Model.singleIteration (webpack-internal:///./node_modules/wavefunctioncollapse/model.js:189)
    at SimpleTiledModel.Model.generate (webpack-internal:///./node_modules/wavefunctioncollapse/model.js:250)

I tried using it with Vue

How to implement the Summer tileset?

Hello, awesome job on this port!

I've used the examples you provided and they work perfectly fine, so I've tried to implement the "Summer" tileset from the original repo, but it doesn't seem to work.

Here the gist of the definition that I've made using your example and the original repo xml: https://gist.github.com/MatveyK/8e04c76120a0e10e0cffa9dac611b8f2

Except that when I try to run the Simple Tiled Model with it and the associated tile files in the /summer folder, I get this message:

(node:11499) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, open './data/summer/cliffcorner.png'

Thus my question is: how do you organize the definition file in this case? Because translating the original repo xml to json object doesn't seem to work in this case.

I've seen that in your animated simple tile example you run the summer tileset, I was wondering if you could upload the definition file for it? Or if you could explain the structure of the definition file?

Missing typescript types

Hey, I noticed this module doesn't seem to have any type definitions so I wrote my own based on the documentation. I don't know what the usual process is for these things, but here is the .d.ts file from my project:

declare module 'wavefunctioncollapse'
{
    type RGBA = Uint8Array | Uint8ClampedArray;
    abstract class Model
    {
        /**
         * Execute a complete new generation. Returns whether the generation was successful.
         * @param rng A function to use as random number generator, defaults to Math.random.
         */
        public generate(rng?: () => number): boolean
        
        /**
         * Execute a fixed number of iterations. Stop when the generation is successful or reaches a contradiction. Returns whether the iterations ran without reaching a contradiction.
         * @param iterations Maximum number of iterations to execute (0 = infinite).
         * @param rng A function to use as random number generator, defaults to Math.random.
         */
        public iterate(iterations: number, rng?: () => number): boolean

        /**
         * Returns whether the previous generation completed successfully.
         */
        public isGenerationComplete(): boolean

        /**
         * Clear the internal state to start a new generation.
         */
        public clear(): void
    }

    class OverlappingModel extends Model
    {
        /**
         * new OverlappingModel(data, dataWidth, dataHeight, N, width, height, periodicInput, periodicOutput, symmetry[, ground])
         * @param data The RGBA data of the source image.
         * @param datawidth The width of the source image.
         * @param dataHeight The height of the source image.
         * @param N Size of the patterns.
         * @param width The width of the generation (in pixels).
         * @param height The height of the generation (in pixels).
         * @param periodicInput Whether the source image is to be considered as periodic / as a repeatable texture.
         * @param periodicOutput Whether the generation should be periodic / a repeatable texture.
         * @param symmetry Allowed symmetries from 1 (no symmetry) to 8 (all mirrored / rotated variations)
         * @param ground Id of the specific pattern to use as the bottom of the generation (learn more: https://github.com/mxgmn/WaveFunctionCollapse/issues/3#issuecomment-250995366)
         */
        public constructor(data: RGBA, datawidth: number, dataHeight: number, N: number, width: number, height: number, periodicInput: boolean, periodicOutput: boolean, symmetry: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8, ground?: number)

        /**
         * Retrieve the RGBA data of the generation.
         * @param array Array to write the RGBA data into (must already be set to the correct size), if not set a new Uint8Array will be created and returned. It is recommended to use Uint8Array or Uint8ClampedArray.
         */
        public graphics(array?: RGBA): RGBA
    }

    class SimpleTiledModel extends Model
    {
        /**
         * new SimpleTiledModel(data, subsetName, width, height, periodicOutput)
         * @param data Tiles, subset and constraints definitions. The proper doc on this matter is yet to be written, check the example in the meantime.
         * @param subsbetName Name of the subset to use from the data. If falsy, use all tiles.
         * @param width The width of the generation (in tiles).
         * @param height The height of the generation (in tiles).
         * @param periodicOutput Whether the generation should be periodic / a repeatable texture.
         */
        public constructor(data: any, subsbetName: string, width: number, height: number, periodicOutput: boolean)

        /**
         * Retrieve the RGBA data of the generation.
         * @param array Array to write the RGBA data into (must already be set to the correct size), if not set a new Uint8Array will be created and returned. It is recommended to use Uint8Array or Uint8ClampedArray.
         * @param defaultColor RGBA data of the default color to use on untouched tiles.
         */
        public graphics(array?: RGBA, defaultColor?: number): RGBA
    }
}

Is it possible to specify colors at positions in the overlapping model?

I always want my output to be bordered by a specific color, I've tried modifying the array returned by model.graphics() between iterations, but that clearly is not the way to do this... is there any way to do this currently? something like.

let model = new OverlappingModel(data, width, etc);
let startingArr = model.gaphics();
//Set RGB of first pixel to (0,0,0)
startingArr[0] = 0;
startingArr[1] = 0;
startingArr[2] = 0;
//Overwrite existing graphics array
model.setGraphics(startingArr);

I'm having trouble with the simple tile model

I've gotten one to work before, however it took a lot of brute force trial and error. I feel I have a lack of understanding of how the definition works. Currently I'm just trying to get this to work.

Here is my current definition:

const dungeonDef = {
    path: '../../../../../static/assets/my_dungeon',
    tilesize: 48,
    tiles: [
        { name: "floor", symmetry: "X", weight: 15},
        { name: "wall_brul", symmetry: "X", weight: 5 },
        { name: "wall_brur", symmetry: "X", weight: 5 },
        { name: "wall_trdl", symmetry: "X", weight: 5 },
        { name: "wall_trdr", symmetry: "X", weight: 5 },
    ],
    neighbors: [
        { left: "floor", right: "floor" },
        { left: "floor", right: "wall_brul" },
        { left: "floor", right: "wall_trdl"},
        { left: "wall_brul", right: "wall_brur" },
        { left: "wall_trdl", right: "wall_trdr"},
        { left: "wall_brur", right: "floor"},
        { left: "wall_trdr", right: "floor"}
    ],
};

I feel i have it constrained like so:
Floor can be to the right of floor
bottom run wall with corner going up to the left can go to the right of floor
floor can go to the right of bottom run wall with corner going up to the right
bottom run wall with corner going up to the right can go to the right of bottom run wall with corner going up to the left
and same for the top runs.

And how its looking:
image

How I would like it to look:
image
A bunch of these structures

So I'm confused 2 fold.
Why are things that are never defined to be able to be next to each other doing so
and how would I make sure they can align properly top and bottom?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.