Cacher is the code snippet organizer for pro developers

<div class="math" :style="'height: ' + masthead.height + 'px'">
  <canvas
    :id="id"
    :width="masthead.width"
    :height="masthead.height"
    :style="canvasStyle">
  </canvas>
</div>

// Eqution Object
import equations from '../../js/equations.js'

export default {
  props: {
    pixelSize: {
      default: 10
    },
    detail: {
      default: 1
    },
    frameRate: {
      default: 6
    },
    contrast: {
      default: 0.5
    },
    equation: {
      default: Math.floor(Math.random() * (equations.length - 1))
    },
    extraEquations: {
      default: () => []
    },
    clean: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      id: 'c-' + (new Date()).getTime(),
      realFrame: 0,
      frame: 0,
      masthead: this.$root.masthead
    }
  },
  computed: {
    // Set opacity based on colour depth
    canvasStyle () {
      return 'opacity:' + this.contrast / 6
    },

    // Canvas objects
    canvas () {
      return document.querySelector('canvas#' + this.id)
    },
    ctx () {
      return (this.canvas ? this.canvas.getContext('2d') : null)
    },

    // Calculated states that the drawFrame() function needs
    rows () {
      return (this.masthead.width / this.pixelSize) * this.detail
    },
    columns () {
      return (this.masthead.height / this.pixelSize) * this.detail
    },
    increment () {
      return 1 / this.detail
    },

    // Concatinate normal equation list with custom equations from prop
    // Used in a small utility I made to test what certain functions end up looking like
    equations () {
      return equations.concat(this.extraEquations)
    }
  },
  methods: {
    // Calculate the result of the current function at pixel (x,y) at frame n
    calculate (x, y, n) {
      if (this.equations[this.equation]) {
        return this.equations[this.equation](x, y, n)
      } else {
        return 1
      }
    },

    // Scale v over max to v over contrast, then mod against max in case v > max
    bound (v, max) {
      return Math.floor(((v / max) * (this.contrast * max)) + (max - (this.contrast * max))) % max
    },

    // Return the color representing value v
    cellColour (v) {
      let boundedValue = this.bound(v, 255)
      return 'rgb(' + boundedValue + ', ' + boundedValue + ', ' + boundedValue + ')'
    },

    // Draw the next or first frame to the canvas
    drawFrame () {
      for (let x = 0; x < this.rows; x += this.increment) {
        for (let y = 0; y < this.columns; y += this.increment) {
          let result = this.calculate(x, y, this.frame)
          this.ctx.fillStyle = this.cellColour(result)
          this.ctx.fillRect(x * this.pixelSize, y * this.pixelSize, this.pixelSize, this.pixelSize)
        }
      }
      this.frame += (1 / this.frameRate)
    },

    // Start animation using requestAnimationFrame()
    start () {
      let draw = () => {
        if (this.realFrame % this.frameRate === 0) this.drawFrame()
        this.realFrame += 1
        window.requestAnimationFrame(draw)
      }
      window.requestAnimationFrame(draw)
    }
  },
  mounted () {
    this.start()
  }
}

export default [
/*0*/	(x, y, n) => Math.floor(Math.sin(y) * Math.cos(x) * n * 255),
/*1*/	(x, y, n) => (~n ^ y | ~x) + Math.sqrt(x + n) * 255,
/*2*/	(x, y, n) => Math.floor(Math.log(x | y & n) * n ^ 20 | Math.sqrt(x * n) * y & ~n),
/*3*/	(x, y, i) => (x & x ^ i | y & y) * (~i * ~2888855) ^ (2 ^ x & y * i * 255) & ~i,
/*4*/	(x, y, n) => x ^ y | (x & n + 200) * ~y & n + 200,
/*5*/	(j, i, x) => Math.floor((0 ^ (j ^ Math.sin(x ^ j)) & (x ^ i ^ Math.sqrt(i))) * 255) ^ x,
/*6*/	(j, i, x) => Math.floor((0 ^ i + x & j + x) * 255),
/*7*/	(j, i, x) => Math.floor(x >> i << j * 255),
/*8*/	(j, i, x) => Math.floor(Math.floor(Math.sin(j * x) * 255) & Math.floor(i << Math.sin(x) * 255)),
/*9*/	(j, i, x) => Math.floor(x * Math.sin(x) * (x * Math.sin(x) / j ^ 2 ^ i + Math.sin(x) * j) * 2 ^ j),
/*10*/	(j, i, x) => Math.floor(Math.sqrt(Math.pow(x ^ i ^ j, 1 / i) / j) * (x ^ Math.sqrt(i)) * 255),
/*11*/	(j, i, x) => Math.floor( Math.sinh((i^j*(x*2)*Math.sin(x))/(Math.sin(x*j)*255)) * 255 ),
/*12*/	(j, i, x) => Math.floor(Math.tan(Math.sin(x * j) / Math.cos(x * i)) * 255),
/*13*/	(j, i, x) => Math.floor(Math.sin(x * 1 / j * i / x - i ^ x) * 255),
/*14*/	(j, i, x) => Math.floor( Math.tan(x-i-j)/Math.tanh(((j-(x*5000*x^x^x^x^i^j^x^x))/(i*x))/i+j)*255 ),
/*15*/	(j, i, x) => Math.floor(Math.tan(j * i) * (Math.sin(j * i) + x / i) * 255),
/*16*/	(j, i, x) => j * (x + 700) % (i ^ x + 700 - j),
/*17*/	(j, i, x) => Math.floor(Math.sin((Math.sin(x - j / 2) > 0 ? j : i) + x) * 255),
/*18*/	(j, i, x) => Math.sin(x * j / i) > 0 ? 255 : 0,
/*19*/	(j, i, x) => Math.floor(Math.sin(x - j % (i ^ x)) * 255),
/*20*/	(j, i, x) => Math.floor(Math.sin(Math.log(x) * j * i) * 255),
/*21*/	(j, i, x) => Math.floor(Math.sin(Math.max(j, i, x) - Math.min(j, i, x)) * 255),
/*22*/	(j, i, x) => Math.floor(Math.sin(Math.sin(x) + Math.sin(j) + Math.sin(i)) * 255),
/*23*/	(j, i, x) => Math.floor(Math.sin(j + Math.sin(i) * x) * 255),
/*24*/	(x, y, n) => Math.floor(Math.sin((x - y | n) & (y + x | n)) * 255),
/*25*/	(x, y, n) => Math.floor(Math.tan((x - y & n) + (y + x & n)) * 255),
/*26*/	(x, y, n) => Math.floor(Math.sin(x) * y * n ^ (y | x)),
/*27*/	(x, y, n) => Math.sin(x + n * 5 & y - n & n + 100) * 255,
/*28*/	(x, y, n) => n * y << (((n | x) << y | n & x) >> x),
/*29*/	(x, y, n) => n & x | y - x ^ n * (x | y),
/*30*/	(x, y, n) => (n + 200) * (Math.sin(x) * Math.cos(y * n)),
/*31*/	(x, y, n) => n * (y + x),
/*32*/	(x, y, n) => y * x * (Math.sin(n % (y*x)) + 15),
/*33*/  (x, y, n) => (n*(x/y))|(x^y)
]