---

layout: default

---

canvas#sketch {

width: 100px;

height: 100px;

border: 1px solid

}

textarea#code, textarea#output {

width: 90%;

}

<h2>Processing Helper</h2>

<p>Paste your Processing code below and execute whichever options you require:</p>

<h2>Processing Code</h2>

<textarea rows="20" cols="80" id="code"></textarea>

<input onclick="runSketch();" type="button" value="Run"></input>

<input onclick="convertToJS();" type="button" value="Convert to JS"></input>

<input onclick="generateDataURI();" type="button" value="Generate Data URI"></input>

<h2>Canvas</h2>

<div id="sketch-container">

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

<h2>Output</h2>

<textarea rows="20" cols="80" id="output" readonly="readonly">None.</textarea>

<script src="jsbeautify.js"></script>

<script src="processing-helper.js"></script>