kchapelier / wavefunctioncollapse Goto Github PK
View Code? Open in Web Editor NEWJavascript port of https://github.com/mxgmn/WaveFunctionCollapse
License: MIT License
Javascript port of https://github.com/mxgmn/WaveFunctionCollapse
License: MIT License
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
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?
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
}
}
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'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.
How I would like it to look:
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.