Create a gist now

Instantly share code, notes, and snippets.

processing png
<!DOCTYPE html>
<html>
<head>
<title>processing png</title>
<script src="http://processingjs.org/content/download/processing-js-1.1.0/processing-1.1.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<div>
<canvas width="0" height="0"></canvas> (Canvas)
</div>
<div>
<img class="png" /> &lt;- Save or drag and drop this image as a file.
</div>
<form class="preview" action="javascript:void(0);">
<div>
<textarea rows="12" cols="60">
void setup() {
int m = 4; // mergin
int s = 16; // size
size(s, s);
// smooth(); // This can have meaning with orignal Java implementation of Processing
strokeWeight(2);
background(200);
stroke(100);
line(m, m, s - m, s - m);
line(s - m, m, m, s - m);
//save("close.png");
}
</textarea>
</div>
<div>
<input type="submit" value="update" />
</div>
</form>
<script>
function updateCanvasAndImg () {
var canvas = $("canvas")[0];
new Processing(canvas, $("textarea")[0].value);
$("img.png").attr("src", canvas.toDataURL());
}
$("form").live("submit", updateCanvasAndImg);
$(updateCanvasAndImg);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment