Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed asymmetrical tiles by changing tile side labels and match check… #18

Closed
wants to merge 1 commit into from
Closed

Fixed asymmetrical tiles by changing tile side labels and match check… #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 17 additions & 16 deletions sketch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,28 +20,28 @@ function preload() {
tileImages[10] = loadImage(`${path}/10.png`);
tileImages[11] = loadImage(`${path}/11.png`);
tileImages[12] = loadImage(`${path}/12.png`);
tileImages[13] = loadImage(`${path}/4f.png`);
//tileImages[13] = loadImage(`${path}/4f.png`);
}

function setup() {
createCanvas(800, 800);
// randomSeed(1);

// Loaded and created the tiles
tiles[0] = new Tile(tileImages[0], [0, 0, 0, 0]);
tiles[1] = new Tile(tileImages[1], [1, 1, 1, 1]);
tiles[2] = new Tile(tileImages[2], [1, 2, 1, 1]);
tiles[3] = new Tile(tileImages[3], [1, 3, 1, 3]);
tiles[4] = new Tile(tileImages[4], [4, 2, 4, 0]);
tiles[5] = new Tile(tileImages[5], [4, 1, 1, 5]);
tiles[6] = new Tile(tileImages[6], [1, 2, 1, 2]);
tiles[7] = new Tile(tileImages[7], [3, 2, 3, 2]);
tiles[8] = new Tile(tileImages[8], [3, 1, 2, 1]);
tiles[9] = new Tile(tileImages[9], [2, 2, 1, 2]);
tiles[10] = new Tile(tileImages[10], [2, 2, 2, 2]);
tiles[11] = new Tile(tileImages[11], [2, 2, 1, 1]);
tiles[12] = new Tile(tileImages[12], [1, 2, 1, 2]);
tiles[13] = new Tile(tileImages[13], [5, 0, 5, 2]);
tiles[0] = new Tile(tileImages[0], ['000', '000', '000', '000']);
tiles[1] = new Tile(tileImages[1], ['111', '111', '111', '111']);
tiles[2] = new Tile(tileImages[2], ['111', '222', '111', '111']);
tiles[3] = new Tile(tileImages[3], ['111', '333', '111', '333']);
tiles[4] = new Tile(tileImages[4], ['001', '222', '100', '000']);
Copy link
Author

@telemak0 telemak0 Apr 26, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new side labelling system allows for special labels to identify asymmetrical tiles while leaving symmetrical tiles working just fine. In order to identify 2 matching asymmetrical sides we need to use a mirrored label, in this case '100' and '001'.

tiles[5] = new Tile(tileImages[5], ['001', '111', '111', '100']);
tiles[6] = new Tile(tileImages[6], ['111', '222', '111', '222']);
tiles[7] = new Tile(tileImages[7], ['333', '222', '333', '222']);
tiles[8] = new Tile(tileImages[8], ['333', '111', '222', '111']);
tiles[9] = new Tile(tileImages[9], ['222', '222', '111', '222']);
tiles[10] = new Tile(tileImages[10], ['222', '222', '222', '222']);
tiles[11] = new Tile(tileImages[11], ['222', '222', '111', '111']);
tiles[12] = new Tile(tileImages[12], ['111', '222', '111', '222']);
//tiles[13] = new Tile(tileImages[13], [5, 0, 5, 2]);

for (let i = 2; i < 14; i++) {
for (let j = 1; j < 4; j++) {
Expand Down Expand Up @@ -130,7 +130,8 @@ function draw() {
const cell = random(gridCopy);
cell.collapsed = true;
const pick = random(cell.options);
cell.options = [pick];
// undefined options? why?
cell.options = [pick ? pick : 0];
Copy link
Author

@telemak0 telemak0 Apr 26, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is what was causing a crash sometimes during stream. Somehow this random option pick becomes undefined. I quickly fixed it by setting it to tile 0 when it happens but would be nice to know why it happens at all.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is b/c cell.options is empty if/when there are no possibilities that will fit?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that was the reason. If the function collapses from two different directions it's easy that a cell reaches an invalid status because it's two neighbors are drawing something that can't be joined. It's a limitation from the tileset. We would need to add backtracking to fix it.


const nextGrid = [];
for (let j = 0; j < DIM; j++) {
Expand Down
12 changes: 8 additions & 4 deletions tile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,28 @@ class Tile {
for (let i = 0; i < tiles.length; i++) {
let tile = tiles[i];
// UP
if (tile.edges[2] == this.edges[0]) {
if (this.reverseEdge(tile.edges[2]) == this.edges[0]) {
this.up.push(i);
}
// RIGHT
if (tile.edges[3] == this.edges[1]) {
if (this.reverseEdge(tile.edges[3]) == this.edges[1]) {
this.right.push(i);
}
// DOWN
if (tile.edges[0] == this.edges[2]) {
if (this.reverseEdge(tile.edges[0]) == this.edges[2]) {
this.down.push(i);
}
// LEFT
if (tile.edges[1] == this.edges[3]) {
if (this.reverseEdge(tile.edges[1]) == this.edges[3]) {
this.left.push(i);
}
}
}

reverseEdge(edge) {
return edge.split("").reverse().join("");
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We now compare each tile side label against the mirrored image of itself. For symmetrical tiles it's "unnecessary" as it compares '000' with '000'. But for asymmetrical tiles it compares successfully '100' against the right match '001'.

This auxiliary method just reverses the string by transforming it first to an array to use the reverse() method.

}

rotate(num) {
const w = this.img.width;
const h = this.img.height;
Expand Down