Arduino & Genuino Products

Arduino, an open source microcontroller that allows developers use of it for DIY (Do It Yourself) and custom projects that can relate with real life daily application. There are a lot of thousands of projects already build using this microcontroller. There are five types of Arduino boards are entry level, enhanced features, internet of things, wearable and 3D printing.

Arduino - Products.

Arduino – Products.

For entry level is suitable for those want to make as their first learning in microcontroller world. There are Arduino/Genuino Uno, Arduino Pro, Arduino Pro Mini, Arduino/Genuino Micro, Arduino Nano, Arduino/Genuino Starter Kit, Arduino Basic Kit and Arduino Motor Shield. Similar to Raspberry PI, a rival to Arduino with is good for entry level. Later we will discuss more details about the comparision between these two. For entry level, mostly Arduino Uno is the most popular compare to the others because the price is cheap and support most of the functions and external device integration such as camera, ultra sonic and DC motor. Besides that it’s really suitable for students for those have basic programming in C++ and it’s easy to use.

If the developers want more advanced functionalites, features and faster performance, they can select for enhanced features type. There are Arduino/Genuino Mega, Arduino Zero, Arduino Due and Arduino Proto Shield. The major differences between these two Arduino are number of pins and memory size. Enhanced features type got a lot number of pins and large memory compare to entry level less number of pins and small memory. You can integrate a lot of external devices such as camera, ultra sonic and DC motor on enhanced features type. Besides that the performance can be more better than entry level type during program execution.

Compare to internet of things, this type can connect to internet or clouds that can exchange the data between internet and the embedded device (Arduino). It can perform machine to machine communications (M2M) and apply it to smart cities. The microcontroller can connect to internet using GSM, ethernet and Wifi. Arduino Yun and Arduino Ethernet Shield support for ethernet connection (LAN or called local area network), Arduino GSM Shield only support for GSM connection (only GPRS, not 3G,4G or LTE) and Arduino Wifi Shield 101 support for wireless connection.

For those interested to wearable technology, they can choose wearable type. There are five microcontrollers, Arduino Gemma, Lilypad Arduino USB, Lilypad Arduino Main Board, Lilypad Arduino Simple and Lilypad Arduino Simple Snap. What actually is wearable? Wearable is a clothing and accessories that integrated with computer and advanced electronic technologies like we seen today. There are a lot of existing wearable technologies out there such as iWatch, android wear, Pabble and Jawbone (3/24). It can be similar with internet of things because it’s connected to the internet but it more on fashion or accessories perspective, it’s wearable.

If you a hobbyist in 3D printing, 3D printing type is a best selection because it’s only one microcontroller that support 3D printing features. It’s called Materia 101. It uses an Arduino Mega2560 with a white shield for controlling 3D printers. It’s open source, not for commercial purpose as all Arduino products.

P.S: For those interested to build DIY projects, can buy online from here, http://my.element14.com/arduino.

Learning Three.js and WebGL part 1

In this tutorial you will learn how to create 3d animation using WebGL and Three.js framework.

Overview

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background. WebGL programs consist of control code written in JavaScript and shader code that is executed on a computer’s Graphics Processing Unit (GPU). WebGL is designed and maintained by the non-profit Khronos Group. http://en.wikipedia.org/wiki/WebGL

WebGL

WebGL

Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser. Three.js scripts may be used in conjunction with the HTML5 canvas element, SVG or WebGL. http://en.wikipedia.org/wiki/Three.js

<html>

<head>
<title>WebGL Up And Running &mdash; Example 1</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript">

    function initWebGL(canvas) {

        var gl;
        try 
        {
            gl = canvas.getContext("experimental-webgl");
        } 
        catch (e)
        {
            var msg = "Error creating WebGL Context!: " + e.toString();
            alert(msg);
            throw Error(msg);
        }

        return gl;        
     }

    function initViewport(gl, canvas)
    {
        gl.viewport(0, 0, canvas.width, canvas.height);
    }

    var projectionMatrix, modelViewMatrix;

    function initMatrices()
    {
	   // The transform matrix for the square - translate back in Z for the camera
	   modelViewMatrix = new Float32Array(
	           [1, 0, 0, 0,
	            0, 1, 0, 0, 
	            0, 0, 1, 0, 
	            0, 0, -3.333, 1]);
       
	   // The projection matrix (for a 45 degree field of view)
	   projectionMatrix = new Float32Array(
	           [2.41421, 0, 0, 0,
	            0, 2.41421, 0, 0,
	            0, 0, -1.002002, -1, 
	            0, 0, -0.2002002, 0]);
	
    }

    // Create the vertex data for a square to be drawn
    function createSquare(gl) {
        var vertexBuffer;
    	vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        var verts = [
             .5,  .5,  0.0,
            -.5,  .5,  0.0,
             .5, -.5,  0.0,
            -.5, -.5,  0.0
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
        var square = {buffer:vertexBuffer, vertSize:3, nVerts:4, primtype:gl.TRIANGLE_STRIP};
        return square;
    }

    function createShader(gl, str, type) {
        var shader;
        if (type == "fragment") {
            shader = gl.createShader(gl.FRAGMENT_SHADER);
        } else if (type == "vertex") {
            shader = gl.createShader(gl.VERTEX_SHADER);
        } else {
            return null;
        }

        gl.shaderSource(shader, str);
        gl.compileShader(shader);

        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            alert(gl.getShaderInfoLog(shader));
            return null;
        }

        return shader;
    }
    
	var vertexShaderSource =
		
		"    attribute vec3 vertexPos;\n" +
		"    uniform mat4 modelViewMatrix;\n" +
		"    uniform mat4 projectionMatrix;\n" +
		"    void main(void) {\n" +
		"		// Return the transformed and projected vertex value\n" +
		"        gl_Position = projectionMatrix * modelViewMatrix * \n" +
		"            vec4(vertexPos, 1.0);\n" +
		"    }\n";

	var fragmentShaderSource = 
		"    void main(void) {\n" +
		"    // Return the pixel color: always output white\n" +
        "    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" +
    	"}\n";


    var shaderProgram, shaderVertexPositionAttribute, shaderProjectionMatrixUniform, shaderModelViewMatrixUniform;

    function initShader(gl) {

    	// load and compile the fragment and vertex shader
        //var fragmentShader = getShader(gl, "fragmentShader");
        //var vertexShader = getShader(gl, "vertexShader");
        var fragmentShader = createShader(gl, fragmentShaderSource, "fragment");
        var vertexShader = createShader(gl, vertexShaderSource, "vertex");

        // link them together into a new program
        shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);

        // get pointers to the shader params
        shaderVertexPositionAttribute = gl.getAttribLocation(shaderProgram, "vertexPos");
        gl.enableVertexAttribArray(shaderVertexPositionAttribute);
        
        shaderProjectionMatrixUniform = gl.getUniformLocation(shaderProgram, "projectionMatrix");
        shaderModelViewMatrixUniform = gl.getUniformLocation(shaderProgram, "modelViewMatrix");

        
        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert("Could not initialise shaders");
        }
    }

     function draw(gl, obj) {

         // clear the background (with black)
         gl.clearColor(0.0, 0.0, 0.0, 1.0);
         gl.clear(gl.COLOR_BUFFER_BIT);

    	 // set the vertex buffer to be drawn
         gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);

         // set the shader to use
         gl.useProgram(shaderProgram);

 		// connect up the shader parameters: vertex position and projection/model matrices
         gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0);
         gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix);
         gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix);

         // draw the object
         gl.drawArrays(obj.primtype, 0, obj.nVerts);
      }
          
    function onLoad() {
        var canvas = document.getElementById("webglcanvas");
        var gl = initWebGL(canvas);
        initViewport(gl, canvas);
        initMatrices();
        var square = createSquare(gl);
        initShader(gl);
        draw(gl, square);
    }


</script>


</head>


<body onload="onLoad();">

    <canvas id="webglcanvas" style="border: none;" width="500" height="500"></canvas>

</body>

</html>

Original source code: https://github.com/tparisi/WebGLBook/blob/master/Chapter%201/example1-1.html