cc.html

<style>
  p {
    font-size: 16px;
  }
  #collatz {
    border: 1px solid black;
  }
  #collatz-div {
    white-space: pre;
    display: flex;
  }
  .collatz-item {
    font-size: 10px;
    padding: 6px;
    text-align: center;
  }
</style>

<h1>Collatz Conjecture</h1>

<canvas id="collatz"></canvas>

<!-- <div id="collatz-div"></div> -->

<p>Inspired by:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/LqKpkdRRLZw" frameborder="0" allowfullscreen></iframe>

<br>
<br>
<a href="/">Back to home</a>

<script>
  var canvasWidth = 600
  var canvasHeight = 400
  var canvas = document.getElementById('collatz')
  canvas.width = canvasWidth
  canvas.height = canvasHeight
  
  var ctx = canvas.getContext('2d')
  // start point consist of x, y coordinates and previous vector (angle)
  var startPoint = [100, canvasHeight-20, 50]
  var lineLength = 3
  var angleDelta = 3
  
  for (var i = 1; i <= 10000; i++)
    draw(i)
  
  function draw(n) {
    var p = startPoint 
    var stack = new Array()
    
    ctx.strokeStyle = getRandomColour()
    ctx.lineWidth = 12
    ctx.lineCap = 'round'
    ctx.beginPath()
    ctx.moveTo(p[0], p[1])
    
    do {
      n = getNextNumber(n)
      stack.push(n)
    } while (n != 1)
    
    while (stack.length > 0) {
      if (stack.pop() % 2 == 0) {
        p = drawNext(p, angleDelta)
      } else {
        p = drawNext(p, -angleDelta)
      }
    }
    
    ctx.stroke()
    // ctx.strokeStyle = "white"
    // ctx.lineWidth = 10
    // ctx.stroke()
  }
  
  function drawNext(p, angleChange) {
    // move new vector by 30 degrees
    var newAngleDegrees = p[2] + angleChange
    var newAngleRadians = toRadians(newAngleDegrees)
    var xChange = lineLength * Math.cos(newAngleRadians)
    var yChange = lineLength * Math.sin(newAngleRadians)
    p = [p[0]-xChange, p[1]-yChange, newAngleDegrees]
    ctx.lineTo(p[0], p[1])
    return p
  }
  
  function toRadians (angle) {
    return angle * (Math.PI / 180);
  }
  
  var collatzDiv = document.getElementById('collatz-div')
  
  for (var i = 1; i <= 500; i++) {
    var n = i
    var collatzItem = document.createElement("div");
    collatzItem.className = 'collatz-item'
    collatzItem.textContent += n + "\r\n"
    do {
      n = getNextNumber(n)
      collatzItem.textContent += n + "\r\n"
    } while (n != 1)
    // collatzItem.textContent += "\r\n"
    collatzDiv.appendChild(collatzItem)
  }
  
  function getNextNumber(n) {
    if (n % 2 == 0) {
      return n/2
    } else {
      return 3*n + 1
    }
  }
  
  function getRandomInt(min, max) {
    min = Math.ceil(min)
    max = Math.floor(max)
    return Math.floor(Math.random() * (max - min)) + min
    //The maximum is exclusive and the minimum is inclusive
  }
  
  function getRandomColour(min, max) {
    return 'rgb( ' + getRandomInt(0,256) + ', ' + getRandomInt(0,256) + ', ' + getRandomInt(0,256) + ')'
  }
</script>