--- title: Serpeński Gasket on Tektronix Terminal description: A simulation of a program that amazed 4 whole people at my high school in 1991 type: bare --- <!DOCTYPE html> <html> <head> <title>Tektronix Terminal</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet"> <style> html, body { background: black; color: white; width: 100%; height: 100%; margin: 0; } #credit { position: fixed; top: 20px; left: 20px; color: goldenrod; font-family: VT323, monospace; font-size: 22px; } </style> <script> lastPoint = [0, 0] points = [[0, 0], [0, 0], [0, 0]] interval = null function choose(arr) { return arr[Math.floor(Math.random() * arr.length)] } function midpoint(a, b) { return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2] } function drawPoint() { lastPoint = midpoint(choose(points), lastPoint) ctx.fillRect(lastPoint[0], lastPoint[1], 2, 2) } function go() { canvas = document.querySelector("canvas") ctx = canvas.getContext("2d") canvas.width = innerWidth canvas.height = innerHeight ctx.fillStyle = "goldenrod" lastPoint = [ Math.random() * canvas.width, Math.random() * canvas.height, ] points = [ [canvas.width / 2, 0], [canvas.width, canvas.height], [0, canvas.height], ] if (!interval) { interval = setInterval(drawPoint, 40) } } addEventListener("load", go) addEventListener("resize", go) </script> </head> <body> <canvas></canvas> <div id="credit">The Serpenski Gasket<br>1991 by Neale Pickett</div> </body> </html>