multi-noise-vueless.html

<pre id="portrait"></pre>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.js"></script>

<script>
    let {noise, random, dist, millis, map} = p5.prototype
    let r = 3

    const simplex = new SimplexNoise()

    new p5();

    let $portrait = document.querySelector('#portrait')
    let width = innerWidth,
        height = innerHeight,
        noiseFn = simplex.noise3D.bind(simplex),
        whiteness = 0,
        speedFactor = 0.0000001,
        t = 0,
        barX= 0,
        lineLength = 0
    
    
    function setup() {
        addEventListener('resize', () => {
            width = innerWidth
            height = innerHeight
        })

        addEventListener('mousemove', e => {
            if (mouseIsPressed) {
                whiteness = map(e.clientY, 0, innerHeight, -0.3, 0.3)
                speedFactor = map(e.clientX, 0, innerWidth, 0.0000001, 0.000003)
                barX = map(e.clientX, 0, innerWidth, 0, lineLength)
            }
        })

        addEventListener('keydown', ({key}) => {
            if (key == '1')
                noiseFn = simplex.noise3D.bind(simplex)
            if (key == '2')
                noiseFn = noise
            if (key == 'Escape') {
                paused = !paused
            }
        })
    }


    function draw() {
        let lines = ""
        lineLength = width / 8.4
        for (let y = 0; y < height / 9; y++) {
            let str = ""
            for (let x = 0; x < width / 8.4; x++) {
                str += charForPos(x, y, char)
            }
            lines += str + "\n"
        }
        $portrait.innerHTML = lines
    }

    /**
     * Draw, basically
     */
    function charForPos(x, y, char) {
        let n;

        if (mouseIsPressed) {
            // speed lines
            if ((y <= 1 ) && x <= barX) {
                return "&nbsp;"
            }
        }

        t += speedFactor
        n = noiseFn(x * 0.04, y * 0.04, t)

        // noise
        if (n > .9 + whiteness)  return "&nbsp;"
        if (n > .7 + whiteness)   return "."
        if (n > .65 + whiteness)   return "~"
        if (n > .55 + whiteness)  return "H"
        if (n > .5 + whiteness) return "3"
        if (n > .4 + whiteness)   return "&blk34;"

        return '&block;'
    }
    



</script>


<style>
    body {
        cursor: none;
        margin: 0;
        overflow: hidden;
        cursor: default;
        user-select: none;
    }
    #portrait {
        font-family: monospace;
        line-height: .65;
        font-size: 14px;
    }
</style>