Abubu.js
The WebGL Computational Library

## Unit rectangle: the default geometry in Abubu.js

In this example, we want to change our geometry from a rectangle of size, 0.5 to a rectangle with a size of 1.0. So, in our previous example, we have to change all instances of 0.5 to 1.0. So, we will have:

var my_geometry = {
vertices :  [
1.0,    1.0,    0.,
0.0,    1.0,    0.,
1.0,    0.0,    0.,
0.0,    0.0,    0.,
] ,
noVertices: 4 , // No of vertices
noCoords  : 3 , // No of coordinates
premitive : 'triangle_strip' ,
} ;


If we open the new program in a browser we should see this.

For reasons that will become clear in the following tutorials, this is the default geometry in the Abubu.Solver class. So, if no geometry is provided to the solver definition, it will be a unit rectangle as defined above will be assumed. Let's modify our previous example to reflect this:

<!DOCTYPE html>
<html>
<script src='http://abubujs.org/libs/Abubu.latest.js'
type='text/javascript'></script>
<!-- body of the html page -->
<body>
<canvas id="canvas_1"
width=512 height=512
style="border:1px solid #000000;" >
<!-- This message is displayed if canvas is not available -->
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>

<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
precision highp float ; // high percision for float variables
precision highp int ;   // high percision for integer variables

in vec4 position;       // position of vertices as input of the shader

// Main body of the vertex shader
void main() {
/*  an identity map of the position of physical
world coordinates to the rendered coordinate space */
gl_Position = vec4(position.x,position.y,position.z,1.0);
}
</script>

<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
precision highp float ;
precision highp int ;

out vec4 outcolor ; /*  output of the shader
pixel color         */
// Main body of the shader
void main() {
/* setting r,g,b,a values of the output color as an
opaque red */
outcolor = vec4(1.0,0.,0.,1.) ;
return ;
}</script>

<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
<!-- Main script -->
<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
<script>
// get the shader source by its id ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function source(id){
return document.getElementById(id).text ;
}

// Get the canvas ------------------------------------------------------
var canvas_1 = document.getElementById('canvas_1') ;

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* NOTICE: GEOMETRY DEFINITION IS REMOVED */
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

// Setup a solver ------------------------------------------------------
var renderer = new Abubu.Solver( {
canvas          : canvas_1,
/* NO GEOMETRY PROVIDED */
} ) ;

// rendering (running) the solver
renderer.render() ;
</script>
</html>


Now, if you open this application, you should see the same result as seen before when a unit rectangle was provided.

The unit rectangle program