JSFiddle - React, Tailwind, and code Playground

by timeu

HTML

<script src="http://fiddle.jshell.net/js/lib/mootools-1.2.5-core-nc.js"></script>
<canvas id="canvas1"></canvas>
<script id="processingcode" type="application/processing">

LDBrowser browser = null;

var eventHandler = {};

void api_addEventHandler(String handler,callback)
{
    eventHandler[handler] = callback;
}

List<DataPoint> api_getHighlightedDataPoints() {
    return browser.highlightDataPoints;
}

void api_clearEventHandlers()
{
   eventHandler = {};
}

void api_setData(int[] snps,float[][] r2,int start,int end) {
    browser.setData(snps,r2,start,end);
}   

void api_setSize(int width,boolean isDraw) {
    if (width==0)
        return;
    size(width,width/2+browser.snpPosBandHeight);
    browser.setSize(width,width,isDraw);
}

void api_setHighlightPosition(int position) {
    browser.setHighlightPosition(position);
}
    
void setup()
{
  int width=1024;
  int height=1024;
  int threshold = 0.3;
  browser = new LDBrowser(width,height,threshold);
  frameRate(1);
  size(width,height);
  background(0);
  smooth();
  noLoop();
}

void draw()
{
  background(255);
  noFill();
  browser.display();
}
    
class LDBrowser {
    QuadTree quadTree;
    ArrayList dataPoints;
    ArrayList filteredDataPoints;
    int[] snps = null;
    float separation = 0;
    int width = 100;
    int height = 100;
    int viewStart = 0;
    int viewEnd = 0;
    int zoomStart = 0;
    int zoomEnd = 0;
    float pxPerBp = 0;
    float threshold = 0.3;
    float maxHue = 60;
    int offsetLegendX = 40;
    int offsetLegendY = 90;
    int snpPosBandHeight = 50;
    int scalerLegendWidth = 50;
    color bgrColor = null;
    color highlightBgrColor = #C0C0C0;
    ArrayList highlightDataPoints = new ArrayList();
    int highlightPosition = null;
    float scaleFactor = 1/sqrt(2);
    float rotationFactor  = radians(-45);
    PGraphics pg = null;
    PGraphics pgSNPs = null;
    
    public LDBrowser(width,height,threshold) {
        this.threshold = threshold;
        colorMode(HSB, 360,...

JavaScript

var pjs = new Processing(document.getElementById("canvas1"), document.getElementById("processingcode").text);
var appScope = this;
window.addEvent('domready', function() {
    new Request.JSON({
        url: '/gh/gist/response.json/2827853/',
        data: {'delay': 1},
        method: 'get',
        update: 'demo',
        onSuccess: function(response) {
            pjs.api_setSize(1024,false);
            pjs.api_setData(response['snps'],response['r2']);
        }
    }).send();
})