Before I get into the actually machine learning stuff, I need to setup the environment in which I’ll be running my final simulation(s). I decided that it would be useful for me to learn some basics in webGL. I am therefore creating a simple Javascript and webGL app that will run my simulation(s) in the browser.
The page itself is pretty simple:
[code language=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Machine Learning Exercise</title>
<link type="text/css" href="css/main.css" rel="stylesheet"/>
<script type="text/javascript" src="js/machLearnApp.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="onLoad()">
<canvas id="canvas">
canvas is not supported in your browser, please upgrade
</canvas>
</body>
</html>
[/code]
And the css that goes along with it:
[code language=”css”]
html, body{
border:none;
padding:none;
margin:none;
}
body{
background-color:#82cdff;
background-image:url("../images/back.png");
background-repeat:repeat;
}
#canvas{
width:960px;
height:580px;
background-color:#000;
margin-left:calc(50% – 480px);
}
[/code]
I have experience drawing with the canvas element in 2D as well as some minor experience with openGL so uniting the two shouldn’t be too hard. I found a great, simple tutorial for getting started here.
I simply tied into the pages existing onload function and initialized the webGL context there:
[code language=”javascript”]
function onLoad()
{
//Initialize webGL and canvas context
canvas = document.getElementById("canvas")
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if(!gl)
{
alert("could not initialize webGL context");
}
else
{
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
console.log("webGL context initialized successfully");
[/code]
after this I initialize my main app (which I’ll get into later) and create an animation/update loop for it to use.
[code language=”javascript”]
//load app
app = new MachLearnApp();
app.init();
//start main loop
window.requestAnimationFrame(loop);
}
}
function loop()
{
window.requestAnimationFrame(loop);
app.update();
app.render();
}
[/code]
As for the main app, I only set up the basic functionality so that it’s ready for me to start generating content. It has an initialization function as well as simple update and render functions. I assume that my final project will require more pseudo classes but this will do for now a base setup.
[code language=”javascript”]
function MachLearnApp() {
};
MachLearnApp.prototype.init = function()
{
gl.clearColor(0.0, 0.0, 0.0, 1.0);
}
MachLearnApp.prototype.update = function()
{
}
MachLearnApp.prototype.render = function()
{
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
}
[/code]