Introduction: Hitomezashi Stitch Pattern Generator Webpage

By plus.google.com/+NeilMartinIsHer

This is a webpage tool that you can use to create a Hitomezashi stitch pattern. Written in javascript & P5 and deployed on a glitch server. Try it here: https://hitomezashi.glitch.me/. This was inspired by this Numberphile video https://youtu.be/JbfhzlMk2eY. This instructable will show you how to make your own copy of this webpage and make changes to the code.

Step 1: Make Your Own Copy of This Project

You can view the project files by visiting this link https://glitch.com/edit/#!/hitomezashi. You wont be able to edit the files because you do not have permission to edit other peoples projects by default. However, it is very easy to make your own copy of the hitomezashi project, just by clicking the REMIX button! You will have to create a free glitch account before these steps will work.

  1. View the project files by opening https://glitch.com/edit/#!/hitomezashi
  2. Open the project options by clicking on the "hitomezashi" name in the top left.
  3. Click the REMIX button to make your own copy of the project.
  4. [optional] You can rename the project if you are not happy with the supplied random name by clicking on your new project name at the top of the project options. Note, this project name will also be included in the link that you share with the public.

Step 2: Make Changes to Your Project

Now that you have your own copy of this project, you can make as many changes as you like to your files without affecting the original project. Any changes you make should be shown in the webpage preview on the right side of the page after a few seconds. Try making a small change right now...

  1. Select the "script.js" on the left side of the screen. The middle of the page is the script editor, which should now be showing the contents of "script.js".
  2. At the top of the script you will see the line "let size = 20;". Change the value of 20 to a different value in the range 6 to 40.
  3. Notice how webpage on the right side shows the changes to the script you just made? Try some more values!

Step 3: Share Your New Webpage With the World!

It's easy to share your new webpage with everyone. It's already being hosted on the glitch.com servers, you just need to find the link.

  1. Click on the Share button next to your icon in the top left of your project, this will open a dialog box with some links.
  2. The top link is the one you want to share with the world. It goes directly to your new webpage.
  3. The bottom link is the one that goes to the code editor. You can share this one too if you want to show people your code. They will not be able to change your code.
  4. Any new changes you make to your code will be shown in the above links that you have already shared.

Step 4: What Do the Files Do?

index.html

HTML files are what browsers load up when you visit websites. If you omit the html filename from an URL, then the browser will look for the default name.. index.html. This contains the bulk of the text shown in the webpage and also contains references to some important files.

  1. <link rel="stylesheet" href="/style.css" /> :This is a reference to your style.css file, more on that below.
  2. <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script> : This is a reference to the p5 script, which this project requires. p5 provides lots of useful functions which this project makes use of. You can find out more about p5 here.. https://p5js.org/
  3. <script src="/script.js" defer></script> : This is a reference to the script.js file which is where all this projects javascript is stored. More on that below.


style.css

The style sheet contains information about the visual and formatting aspects of various pieces of the HTML. You could specify all of that in the HTML itself, but it is good practice to separate it out into a CSS file so that all of your HTML files can refer to that single style sheet. Any change you make to that single sheet will affect all of the HTML files that refer to that style sheet.

script.js

This is the file that contains the javascript that defines the behaviour of your webpage. It is responsible for rendering the stitches, decoding and encoding the text boxes, performing the randomization of the pattern and enabling the user to click on the pattern itself to alter it. In the next section I will go into a little more detail about what each function does.


Step 5: What Do the Functions Do?

In script.js there are a few function definitions, here is a brief description of what each is for.

setup

The p5 system calls this function once, right after the webpage is loaded, so it's a good place to put any initialization code that should be executed only once. This function creates the canvas where the stitches will be rendered. It also creates the two text boxes and randomize buttons.

draw

The p5 system calls this function every frame, many times a second. This is a good place to handle animations or anything that needs to be redrawn every frame. This function clears the background with a light grey colour, sets the stroke width then calls findHighlightedStitch and drawStitches (both detailed below).

randomizeBoth

This is the function that is called when the randomize button is clicked (that connection was made in setup). It randomizes the contents of the strings stitchesHorz and stitchesVert, then updates the text boxes with their new values.

newHorzText

This is the function that is called when the contents of the horizontal text box are changed (that connection was made in setup). When the contents are changed, the new value is copied into the stitchesHorz string.

newVertText

This is the function that is called when the contents of the vertical text box are changed (that connection was made in setup). When the contents are changed, the new value is copied into the stitchesVert string.

setCharAt

This is a helper function that is used by the mouseClicked function that can set the nth character in a string to the specified value. It also extends the string in length if you attempt to change a value beyond the end of the string.

mouseClicked

The p5 system calls this function every time the left mouse button is pressed. So it's a good place to add code that needs to do something when the mouse is pressed. This function only does something if one of the stitches is highlighted. If it is highlighted by hovering the mouse over a particular stitch, then it will adjust the appropriate character in the appropriate string to flip the stitch.

findHighlightedStitch

This is called every frame and checks the mouse position to see if it lines up with a horizontal or vertical stitch. If it does then it sets either selectedX or selectedY to the index of the stitch, or -1 if no stitches are selected.

drawStitches

This is called every frame and iterates through all of the vertical stitches and calls stitchDown for each one. It also calld stitchRight for each horizontal stitch.

stitchRight

This renders a horizontal stitch pattern across the screen at the specified x,y position.

stitchDown

This renders a vertical stitch pattern down the screen at the specified x,y position.


Step 6: What Next?

Now you can make minor changes to the provided code to make a personalized version of the example webpage. Or you can make huge changes and come up with a completely different webpage altogether! Check out https://p5js.org/ to see what other cool functions they have that you can use. Enjoy!

If there are any questions, please feel free to ask in the comments.