Skip to content

An interactive Turing Machine written in Javascript, HTML and CSS

License

Notifications You must be signed in to change notification settings

johnnyawesome/TuringMachine

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b2da467 Β· Jun 12, 2024

History

22 Commits
Jun 12, 2024
Jun 12, 2024
Jun 12, 2024

Repository files navigation

TuringMachine πŸ€–

An interactive Turing Machine written in Javascript, HTML and CSS

Interactive Turing Machine

What is a turing machine?

In short, it's a minimalist computer, invented in 1936 by Alan Turing.

While minimalistic in it's design, it is in fact Turing Complete.

In short, universal Turing Machines are amazing! Such a simplistic design that is able to compute anything that is computeable - count me in! 🀩

To learn more about Turing Machines, I highly recommend this video by Computerphile.

Code

In this project, I opted for minimalism.

Since the Turing Machine is a minimalist device in itself, I, too, opted for a bare-bones approach using only JavaScript, HTML and CSS for this project.

Interactive

The Turing Machine I wrote is highly interactive and customizeable:

You can customize the head's πŸ€– starting state and position:

Head starting state and position

You can define your own, custom set of rules or you can load a pre-defined ruleset:

Rule Set

You can also choose your own starting-values for the tape:

Tape starting values

And finally, you can adjust the calculation-speed (the time per interval for one step) of the Turing Machine:

Calculation-Speed per step

Metrics

Metrics about the head πŸ€–

When you run the Turing Machine, several live-metrics are displayed for the head, as well as a live-version of the tape:

Head and tape live-metrics

From left to right, you can see various data about the head πŸ€–:

  • The current state of the head
  • The head's next state
  • The head's current position
  • The direction the head will move next

Metrics about the tape πŸ€–

At the bottom, there is a live-version of the tape and it's current data:

Head and tape live-metrics

  • All the data (the 0's and 1's) that are written on the tape are displayed and updated in realtime
  • In the upper row, here's a small robot-head πŸ€– indicating where the head of the Turing Machine is currently located above the tape
  • The bottom-row shows all the data that the tape currently holds, and is updated each step
  • The current field of the tape that the head is processing, is highlighted in blue

Conclusion

I was looking forward to coding this legandary "computer before there were computers".

You'll learn a lot coding your own version of the Turing Machine, I highly recommend it!

Plus, it's just satisfying to watch it rattle up and down the tape! ☺

Interactive Turing Machine