JSFiddle - React, Tailwind, and code Playground

by Kyle Bezio

HTML

<canvas id="pjs"></canvas>
</p>
<script id="script1" type="application/processing" data-processing-target="pjs">
    // simulation constants
    int ContraintIterations = 10;
    float Gravity = 9.8;
    float Drag = 1.0;
    float CollisionDrag = 0.9;
    float DT = 1.0 / 64.0;

    // particle simulation state
    int MaxN = 100;
    int N = 0;

    int StateSize = 6;
    float[][] InitState = new float[StateSize][MaxN];
    float[][] State = new float[StateSize][MaxN];
    int StatePositionX = 0;
    int StatePositionY = 1;
    int StatePrevPositionX = 2;
    int StatePrevPositionY = 3;
    int StateAccelerationX = 4;
    int StateAccelerationY = 5;

    // springs
    int NumSprings = 0;
    int MaxNumSprings = 6 * MaxN;
    int SpringsPerParticle = 12;
    float[] SpringRestLength = new float[MaxNumSprings];
    int[] SpringParticle1 = new int[MaxNumSprings];
    int[] SpringParticle2 = new int[MaxNumSprings];

    // view settings and transforms
    int WindowWidthHeight = 600;
    float WorldSize = 2.0;
    float PixelsPerMeter;
    float OriginPixelsX;
    float OriginPixelsY;

    // bounds of the simulation domain
    float MinX;
    float MaxX;
    float MinY;
    float MaxY;

    // UI controls
    Boolean Run = false;
    Boolean DrawHelp = true;
    int DrawParticle = -1;
    int ParticlePaint = -1;

    PFont myFont;

    void setup() {
        // Create the window size, set up the transformation variables.
        size(WindowWidthHeight, WindowWidthHeight);
        PixelsPerMeter = ((float) WindowWidthHeight) / WorldSize;
        OriginPixelsX = 0.5 * (float) WindowWidthHeight;
        OriginPixelsY = 0.5 * (float) WindowWidthHeight;

        MinX = -0.5 * WorldSize;
        MaxX = 0.5 * WorldSize;
        MinY = -0.5 * WorldSize;
        MaxY = 0.5 * WorldSize;

        // create the mass spring system
        GenerateRandomSystem();

        // Set up normalized colors.
        colorMode(RGB, 1.0);

        // Set up the stroke color and width.
...