MVM examples/Point addition.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../build/Sketch-lang.js" ></script>
<script type="text/javascript" src="gl-matrix-min.js"></script>
<script type="text/javascript">
window.onload = function(){
x = new XMLHttpRequest();
x.open("GET", "https://dl.dropboxusercontent.com/u/15574345/laughing-ironman/shaders/sketch-default.json", true);
x.onload = function(){
execute(x.response);
};
x.send();
}
execute = function(text){
// Setup canvas
var canvas = document.getElementById("testingcanvas");
var glctx = canvas.getContext("webgl", { preserveDrawingBuffer: true });
// Setup palette
var manager = new Palette.Manager(glctx);
manager.addShader(text);
var prog = manager.getProgram("square", 'square');
prog.setDrawMode(Palette.Program.POLYGON);
prog.setConfig(Palette.Program.VS_MODE, {width: [canvas.width], height: [canvas.height]});
// Clear canvas
glctx.clearColor(0.0,0.0,0.0,1.0);
glctx.clear(glctx.COLOR_BUFFER_BIT|glctx.DEPTH_BUFFER_BIT);
// Create shpes
var point1 = [100,100];
var point2 = [400,300];
var constantPool = [point1,point2];
// Program
var codeStore = [4, 0, // Push 6
4, 1, // Push 0
29, 2, // Add points, store line at 2
4, 2, // Push 2
25, // Draw Line
27]; // Render
window.mvm = new MVM(glctx, manager, codeStore, constantPool, [], 1);
window.mvm.interpret();
}
</script>
</head>
<body>
<canvas id="testingcanvas" width="800" height="600">Get a modern browser please!</canvas>
</body>
</html>