DEV Community

thecashewtrader
thecashewtrader

Posted on

A simple 3x+1 visualiser

TL;DR

What is 3x+1?

3x+1 is a simple math problem. You start by plotting a number, say x, on the graph. If x is even, you plot x/2, otherwise you plot 3x+1, stopping when x=1.
For example, the 3x+1 array for 3 would be:

[3, 10, 5, 16, 8, 4, 2, 1]

Features of the visualiser

The visualiser is still in it's early stages, with a lot of glue code and styling issues. The main features for now are:

  • Generate an interactive graph for any number.
  • Zoom, pan, and generally navigate the graph
  • Export said graph as an image

Demo

The website

The website

The image output

Image output

The tools used

  • Svelte - Frontend framework
  • Vite - Bundler
  • TailwindCSS + DaisyUI - UI library/framework
  • Chart.js - To plot the graph
  • Chart.js zoom plugin - To add interactivity
  • Hammer.js - Used under the hood by Chart.js zoom plugin for gesture recognition

Discussion (0)