Skip to main content

A Hitomezashi Maker

08 Dec 2021 - Tags: pretty-pictures

It’s been a hot second since I’ve done something artistic, and a recent numberphile video gave me something small and simple to do! Plus, a really close friend of mine is a talented fibre artist, and since this type of artwork (hitomezashi) is originally a kind of decorative mending, I thought it would be fun to code this up and send it to her! It makes a great demo even without the fibre background, and I hope you all have fun playing with it ^_^.

It’s probably worth watching the video first, as otherwise it won’t make a ton of sense what this is doing, but the idea is pretty simple: You turn a pair of bitstrings into a pattern by reading a 0 as “start at the edge” and a 1 as “start off the edge”. You can input your own bitstrings (or words, which we can convert to bitstrings), or you can pick random bitstrings, where you can set the vertical or horizontal probability of choosing a 0 or a 1 in any given position in the string.

It turns out the regions you build in this way are always 2-colorable, which is a cute exercise that they bring up in the video. The proof follows pretty quickly once you make the right observation, and I encourage you to give it a go! In addition to the choice of bitsring, I’ve added a slightly more nuanced way you can show your artistry by adding an option to choose the 2 colors that get used!

Apologies in advance that this is a bit slow, haha. It turns out that making graphs in sage is really not the right tool for this! Still, this gets the job done ^_^.


0.56
0.44
#ffffff
#ffffff
#000000
rowString: 0011001101100000001110110100010110
colString: 11010101011011111110101001011110101100
Help | Powered by SageMath
Accepted: {"data":{"text/plain":"text/image-filename file","text/image-filename":"tmp_u79ppu1t.png?m=1742326937.950586"},"source":"sagecell"}
Accepted: {"name":"stdout","text":"rowString: 0011001101100000001110110100010110\ncolString: 11010101011011111110101001011110101100\n"}
Accepted: {"data":{"application/sage-clear":{"changed":["color1","color2","stitchColor","showBits"]},"text/plain":"Clear display"},"source":"sagecell"}
Accepted: {"data":{"application/sage-interact":{"new_interact_id":"791c63d6-b44c-4174-bad6-8fbf5383708b","controls":{"color1":{"control_type":"color_selector","default":"#ffffff","hide_input":false,"raw":false,"label":"color1","update":true},"color2":{"control_type":"color_selector","default":"#ffffff","hide_input":false,"raw":false,"label":"color2","update":true},"stitchColor":{"control_type":"color_selector","default":"#000000","hide_input":false,"raw":false,"label":"stitchColor","update":true},"showBits":{"control_type":"checkbox","default":true,"raw":true,"label":"showBits","update":true}},"layout":[[["color1",1]],[["color2",1]],[["stitchColor",1]],[["showBits",1]],[["_output",1]]],"locations":null,"readonly":false},"text/plain":"Sage Interact"},"source":"sagecell"}
Accepted: {"data":{"application/sage-clear":{"changed":["rowPercent","colPercent"]},"text/plain":"Clear display"},"source":"sagecell"}
Accepted: {"data":{"application/sage-interact":{"new_interact_id":"48beec00-595d-4d41-9bc7-6bddfa41133d","controls":{"rowPercent":{"control_type":"slider","subtype":"discrete","display_value":true,"default":56,"range":[0,100],"values":["0.00","0.010","0.020","0.030","0.040","0.050","0.060","0.070","0.080","0.090","0.10","0.11","0.12","0.13","0.14","0.15","0.16","0.17","0.18","0.19","0.20","0.21","0.22","0.23","0.24","0.25","0.26","0.27","0.28","0.29","0.30","0.31","0.32","0.33","0.34","0.35","0.36","0.37","0.38","0.39","0.40","0.41","0.42","0.43","0.44","0.45","0.46","0.47","0.48","0.49","0.50","0.51","0.52","0.53","0.54","0.55","0.56","0.57","0.58","0.59","0.60","0.61","0.62","0.63","0.64","0.65","0.66","0.67","0.68","0.69","0.70","0.71","0.72","0.73","0.74","0.75","0.76","0.77","0.78","0.79","0.80","0.81","0.82","0.83","0.84","0.85","0.86","0.87","0.88","0.89","0.90","0.91","0.92","0.93","0.94","0.95","0.96","0.97","0.98","0.99","1.0"],"step":1,"raw":true,"label":"rowPercent","update":true},"colPercent":{"control_type":"slider","subtype":"discrete","display_value":true,"default":44,"range":[0,100],"values":["0.00","0.010","0.020","0.030","0.040","0.050","0.060","0.070","0.080","0.090","0.10","0.11","0.12","0.13","0.14","0.15","0.16","0.17","0.18","0.19","0.20","0.21","0.22","0.23","0.24","0.25","0.26","0.27","0.28","0.29","0.30","0.31","0.32","0.33","0.34","0.35","0.36","0.37","0.38","0.39","0.40","0.41","0.42","0.43","0.44","0.45","0.46","0.47","0.48","0.49","0.50","0.51","0.52","0.53","0.54","0.55","0.56","0.57","0.58","0.59","0.60","0.61","0.62","0.63","0.64","0.65","0.66","0.67","0.68","0.69","0.70","0.71","0.72","0.73","0.74","0.75","0.76","0.77","0.78","0.79","0.80","0.81","0.82","0.83","0.84","0.85","0.86","0.87","0.88","0.89","0.90","0.91","0.92","0.93","0.94","0.95","0.96","0.97","0.98","0.99","1.0"],"step":1,"raw":true,"label":"colPercent","update":true}},"layout":[[["rowPercent",1]],[["colPercent",1]],[["_output",1]]],"locations":null,"readonly":false},"text/plain":"Sage Interact"},"source":"sagecell"}
Accepted: {"data":{"application/sage-clear":{"changed":["randomRow","randomCol"]},"text/plain":"Clear display"},"source":"sagecell"}
Accepted: {"data":{"application/sage-interact":{"new_interact_id":"35008aa5-6260-4398-a5e4-677d70b34c10","controls":{"randomRow":{"control_type":"checkbox","default":true,"raw":true,"label":"randomize row?","update":true},"randomCol":{"control_type":"checkbox","default":true,"raw":true,"label":"randomize col?","update":true}},"layout":[[["randomRow",1]],[["randomCol",1]],[["_output",1]]],"locations":null,"readonly":false},"text/plain":"Sage Interact"},"source":"sagecell"}

Messages

Later on in the video, they switch over to an isoperimetric version of this idea, where they work with triangles instead of squares, and they have three input strings. Can you write code, analogous to the above, which lets people play around with this alternative approach?