<commit_before>---
layout: post
title: Bandaged Cube Explorer
---

tl;dr, I made a program for exploring bandaged configurations of the 3x3x3
Rubik's cube. You can play with it
[here](https://joshmermelstein.com/bandaged-cube-explorer). If you are
interested in the source code, it's available on 
[my github](https://github.com/JoshMermel/bandaged-cube-explorer/tree/gh-pages).
Read on to learn about what it does and how it works or skip to the bottom for
some links to nice examples.

Bandaged Cubes
==============

I recently came across [this video](https://www.youtube.com/watch?v=7ke6momBndU)
about how to think about bandaged twisty puzzles. The video is not long and does
a good job of introducing the premise of bandaging a puzzle so I'll skip over
explaining that here.

Before watching that video, I had been aware of the idea of bandaging and had
even tried solving a few bandaged puzzles, but something hadn't clicked for me.
My experience was that simplest ones were too easy and didn't present and new
challenges; but that harder ones were too difficult to even formulate an
approach. That video was exciting because the "loops in a graph" strategy seemed
like it could be applied to many other bandaged configurations. 

I was also delighted about the way the threefold symmetry of the puzzle got
reflected into threefold symmetry in the graph. When I first tried to get into
bandaged puzzles, I found a few docs online containing collections of named
configurations like [this
doc](https://docs.google.com/document/d/1Iuk8NSOQ_fd7lXQMFlCw_0YYhef8GEJBn5y2GZCPtRE/edit),
and [this other
doc](https://docs.google.com/document/d/15XcIy1BNbSbQ0lZ8vRIP9iYDao2pQD5Kmxhc_lv2H2s/edit).
What they both lacked was guidance on what kind of experience to expect when
solving each puzzle. The threefold symmetry of the puzzle and the graph gave me
hope that a bandaged puzzle's state graph might give a hint to what kind of
solve to expect.

Playing with d3.js
==================

Pretty early in my design process, I came across a [github
project](https://github.com/paulnasca/paul_cube_bandaged_graph) where someone
had already done exactly what I was imagining. Even better, the author included
a csv of all distinct bandaging schemes and some metadata about each one. There
were a few things I didn't like about it though.

1. It required the user to run python - meaning it was inaccessible to many
   potential users.
2. I couldn't get the cube drawings to work for me.
3. Sometimes the graphs it generated were so tangled up that it was impossible
   to see what was going on.

I decided I would make my own version to address these points. First of all, my
version would be a webapp so it could be used from more platforms. And second,
my version would be interactive so the user could zoom and shift nodes around as
needed.

The platform I chose was d3.js's force directed layout. The idea is that each
node is given a slight negative charge and each edge is given a slight spring
force. The charge means that nodes spread out away from each other and the
spring force means that connected nodes stay near each other. For many graphs,
this sort of layout does a good job at both global and local layout. Best of all
- d3.js supports a huge amount of customization and a huge number of features.

I decided to avoid labels on nodes or edges because I was worried they would
make the graph unreadable as it grew. Instead I decided to color code my edges
according to which face was was turned and to indicate direction with an
arrowhead and to add mouseover previews for each node's meaning. To deal with
the varied size of state graphs, I used d3's standard panning and zooming
features. To deal with awkward graph layouts, I added interactive dragging so
the user could untangle graphs manually.

Drawing self edges
==================

One limitation I ran into with d3 was was drawing edges from nodes to
themselves. By default, this drew a line whose start and end points were the
same - a.k.a. nothing. I found a helpful answer on github how to turn these into
arcs from the point to one very nearby. This worked well, and as a side
benefit, I could modify my choice of nearby point to change the orientation of
the loop.

One nice example of this is [the graph for an unbandaged Rubik's
cube](https://joshmermelstein.com/bandaged-cube-explorer?id=0). On this cube,
all 6 face loop back to the only state. As a solver, this sort of self edge is
quite useful so I was happy to be able to show all 6 so distinctly.

On the way to finding that answer, I experimented with a different approach
where I added a not-drawn node in the middle of each edge and used it to make
edges curve. This turned out not to solve the self edge problem but I liked it
so it got to stay.

Reverse Engineering the Spec<commit_msg>fix punctuation<commit_after>---
layout: post
title: Bandaged Cube Explorer
---

tl;dr, I made a program for exploring bandaged configurations of the 3x3x3
Rubik's cube. You can play with it
[here](https://joshmermelstein.com/bandaged-cube-explorer). If you are
interested in the source code, it's available on 
[my github](https://github.com/JoshMermel/bandaged-cube-explorer/tree/gh-pages).
Read on to learn about what it does and how it works or skip to the bottom for
some links to nice examples.

Bandaged Cubes
==============

I recently came across [this video](https://www.youtube.com/watch?v=7ke6momBndU)
about how to think about bandaged twisty puzzles. The video is not long and does
a good job of introducing the premise of bandaging a puzzle so I'll skip over
explaining that here.

Before watching that video, I had been aware of the idea of bandaging and had
even tried solving a few bandaged puzzles, but something hadn't clicked for me.
My experience was that simplest ones were too easy and didn't present and new
challenges; but that harder ones were too difficult to even formulate an
approach. That video was exciting because the "loops in a graph" strategy seemed
like it could be applied to many other bandaged configurations. 

I was also delighted about the way the threefold symmetry of the puzzle got
reflected into threefold symmetry in the graph. When I first tried to get into
bandaged puzzles, I found a few docs online containing collections of named
configurations like [this
doc](https://docs.google.com/document/d/1Iuk8NSOQ_fd7lXQMFlCw_0YYhef8GEJBn5y2GZCPtRE/edit),
and [this other
doc](https://docs.google.com/document/d/15XcIy1BNbSbQ0lZ8vRIP9iYDao2pQD5Kmxhc_lv2H2s/edit).
What they both lacked was guidance on what kind of experience to expect when
solving each puzzle. The threefold symmetry of the puzzle and the graph gave me
hope that a bandaged puzzle's state graph might give a hint to what kind of
solve to expect.

Playing with d3.js
==================

Pretty early in my design process, I came across a [github
project](https://github.com/paulnasca/paul_cube_bandaged_graph) where someone
had already done exactly what I was imagining. Even better, the author included
a csv of all distinct bandaging schemes and some metadata about each one. There
were a few things I didn't like about it though.

1. It required the user to run python - meaning it was inaccessible to many
   potential users.
2. I couldn't get the cube drawings to work for me.
3. Sometimes the graphs it generated were so tangled up that it was impossible
   to see what was going on.

I decided I would make my own version to address these points. First of all, my
version would be a webapp so it could be used from more platforms. And second,
my version would be interactive so the user could zoom and shift nodes around as
needed.

The platform I chose was d3.js's force directed layout. The idea is that each
node is given a slight negative charge and each edge is given a slight spring
force. The charge means that nodes spread out away from each other and the
spring force means that connected nodes stay near each other. For many graphs,
this sort of layout does a good job at both global and local layout. Best of
all, d3.js supports a huge amount of customization and a huge number of
features.

I decided to avoid labels on nodes or edges because I was worried they would
make the graph unreadable as it grew. Instead I decided to color code my edges
according to which face was was turned and to indicate direction with an
arrowhead and to add mouseover previews for each node's meaning. To deal with
the varied size of state graphs, I used d3's standard panning and zooming
features. To deal with awkward graph layouts, I added interactive dragging so
the user could untangle graphs manually.

Drawing self edges
==================

One limitation I ran into with d3 was was drawing edges from nodes to
themselves. By default, this drew a line whose start and end points were the
same - a.k.a. nothing. I found a helpful answer on github how to turn these into
arcs from the point to one very nearby. This worked well, and as a side
benefit, I could modify my choice of nearby point to change the orientation of
the loop.

One nice example of this is [the graph for an unbandaged Rubik's
cube](https://joshmermelstein.com/bandaged-cube-explorer?id=0). On this cube,
all 6 face loop back to the only state. As a solver, this sort of self edge is
quite useful so I was happy to be able to show all 6 so distinctly.

On the way to finding that answer, I experimented with a different approach
where I added a not-drawn node in the middle of each edge and used it to make
edges curve. This turned out not to solve the self edge problem but I liked it
so it got to stay.

Reverse Engineering the Spec
{'fraction_non_alphanumeric': 0.04892712760443661, 'fraction_numerical': 0.0068415051311288486, 'mean_word_length': 4.277899343544858, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 14, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2266847', 'n_tokens_mistral': 2638, 'n_tokens_neox': 2521, 'n_words': 1554}