Pond

index.html

h1 ⸨ POND ⸩

pre

label
  | viewing angle:
  input[type='range' min='0.2' max='1' step='0.1' value='0.2']

Pond.markdown

Pond

Forked from Riley Shaw's Pen Pond.

A Pen by Michael Anthony Casey on CodePen.

License.

script.js

const {sin, cos, pow} = Math;
// Would be much cooler to take something like
// Array.from({length: 92}, (_, i) => String.fromCharCode(i + 33)),
// apply each to a canvas element, count the pixel weight, and sort
// the list automatically
const chars = [' ', '.', ';', '?', '/', '{'];
const [w, h] = [100, 40];

// Get references to DOM nodes.
const slider = document.querySelector('input');
const pre = document.querySelector('pre');

// Hook the slider up.
let viewingAngle = slider.value;
slider.addEventListener('input', () => viewingAngle = slider.value);

// Main draw loop.
!(function draw (t) {
  pre.textContent = Array.from({length: h}, (_, y) => Array.from({length: w}, (_, x) => chars[
    Math.round(Math.abs(sin(

      (t - pow(
        (viewingAngle*pow(x-w/2, 2) + pow(y-h/2, 2)
      ), .7)) / 18

    )) * (chars.length - 1))]
).join(' ')).join('\n');

  requestAnimationFrame(draw.bind(null, t + 1));
})(0);

style.css

body
  transform: translate(-50%, -50%)
  font: 8px monospace
  position: absolute
  text-align: center
  left: 50%
  top: 50%
  
h1
  display: inline-block
  font-size: 3em
  color: #efefef
  
  &:hover
    &, & + pre, & + pre + label
      color: blue
    
  
pre
  margin: 0
  
label, input
  margin-top: 1.5em
  display: block
  
label
  font-size: 16px
  
input
  margin-right: auto
  margin-left: auto