JSFiddle - React, Tailwind, and code Playground

by nhulea

HTML

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

JavaScript

/*
  Author: Chris Shier, http://csh.bz
  Date: September 7th, 2013

|---------------------------------------------------------------------------|
|                                  Controls                                 |
|---------------------------------------------------------------------------|
| Desktop    |      Touch       |                  Effect                   |
|------------|------------------|-------------------------------------------|
| `Click`    | Two Finger Tap   | Cycle Brush Type (Path, Wide, Circle)     |
| `1 2 3`    | Three Finger Tap | Change Color (Countercolor, Rainbow, B&W) |
| `W`        | Four Finger Tap  | Invert Canvas Colors                      |
| `Spacebar` | n/a              | Toggle Canvas Smoothing (Smooth/Pixel)    |
| `G`        | n/a              | Generate Animated GIF                     |
| `P`        | n/a              | Generate Static PNG                       |
| `R`        | n/a              | Invert & Threshold                        |
| `D`        | n/a              | Invert & Banding                          |
| `C`        | n/a              | Start WebCam                              |
|---------------------------------------------------------------------------|
 */
var PI, animloop, between, brush_mode, camsPainted, color_mode, compare, connected, cos, cycle, decay, distance, dither, dot, drawLine, drawLine1, drawLine2, drawLine3, edgePaint, flatten, fps, fpsFilter, fps_now, gif_canvas, gif_captureCanvas, gif_ctx, greyscale, hsla, i, imageSmoothing, initCam, initCanvas, invert, keyPress, killCam, lastUpdate, last_zoom, match, me, mean, overlay, paintCam, rainbow, rgba, scaled_count, sin, sizeCanvas, sizeCanvasesToWindow, smoothing_bool, socket, storeCanvas, threshold, uDLine1, uDLine2, uDLine3, uDPoints, userData, v_canvas, v_ctx, webcam_modes, webcam_running, webcam_status, x_mean, x_old, y_mean, y_old, zoom, _i;

PI = Math.PI;

userData = [];

me = [null, 500, 500, 0];

connected = false;

x_mean =...