JSFiddle - React, Tailwind, and code Playground

by intrinsica

HTML

<script src="https://cdn.rawgit.com/GoodBoyDigital/pixi.js/v3.0.6/bin/pixi.js"></script>
<script id="processingcode" type="application/processing">
    size(window.innerWidth-40,120);
    strokeWeight(2);
    translate(50,25);
    triangle(0,0, 200,10, 0,10);
    rect(0,10, 200,50);
</script>
Rendered with PIXI WebGL:<br>

JavaScript

var o1 = new PIXI.Graphics;
	o1.position.x = 50;
	o1.position.y = 25;
	o1.beginFill(0xFFFFFF);
	o1.lineStyle(2, 0x000000);
	o1.drawPolygon(0,0, 200,10, 0,10); // sloped roof
	
	var o2 = new PIXI.Graphics;	
	o2.position.x = 50;
	o2.position.y = 25;
	o2.beginFill(0xFFFFFF);
	o2.lineStyle(2, 0x000000);
	o2.drawRect(0,10, 200,50); // frame
    
	var stage= new PIXI.Container();  
	stage.addChild( o1 );
    stage.addChild( o2 );
    
	var renderer1= new PIXI.WebGLRenderer( window.innerWidth-40, 120, { backgroundColor: 0xCCCCCC, antialias: true } );
	var renderer2= new PIXI.CanvasRenderer( window.innerWidth-40, 120, { backgroundColor: 0xCCCCCC, antialias: true } );
    
    document.body.appendChild( renderer1.view );
    document.body.appendChild( document.createElement("br") );
    document.body.appendChild( document.createTextNode("Rendered with PIXI Canvas:" ) );
    document.body.appendChild( document.createElement("br") );
	document.body.appendChild( renderer2.view );
    document.body.appendChild( document.createElement("br") );
    document.body.appendChild( document.createTextNode("Rendered with Processing:" ) );
    document.body.appendChild( document.createElement("br") );
    var canv=document.createElement("canvas");
    canv.setAttribute("id", "canvas3");
    document.body.appendChild( canv );
    
	requestAnimationFrame( animate );
	function animate() {
	    //requestAnimationFrame( animate );
	    renderer1.render( stage );
	    renderer2.render( stage );
    }
    
    new Processing(document.getElementById("canvas3"),
               document.getElementById("processingcode").text);