minBlock.js

Is a Pure Javascript Canvas Implementation of Matrix Grid ( Primary Application was to Generate Github Like Random Avatar or Pixel Pattern)




Github Like Avatar Implementation (Not Accurate)


Change

THis Thing was Implemented By Slight Modification in the init() function


init({
          divId          : CanvasId,
          time           : 300,
          randomColor    : false,
          colorPrimary   : primaryColor,
          colorSecondary : secondaryColor,
          pause: true
        });

Getting It Into Your Html


<script type="text/javascript" src="https://raw.githubusercontent.com/flouthoc/minBlock.js/master/index.js"></script>

Where To Put It


<html>
<head>
<script type="text/javascript" src="index.js">
</script>
</head>
<body>
<canvas id="myCanvas" width="510" height="510">
</canvas>

<script type="text/javascript">
init('myCanvas',300);
</script>
</body>
</html>

Regular


init({
        divId          : canvasID,
        time           : timefortransition,
        randomColor    : false,
      });

This Basic Example of minBlock . The first argument Contains the ID of the canvas Division while the second argument is time in milliseconds which is responsible for transition between two pattern.

For Fixed Color

init(); can be modified eaisly as it is the start function and independant of rest of the function and arguments.


  init({
        divId          : canvasID,
        time           : timefortransition,
        randomColor    : true,
        colorPrimary   : PrimaryColor,
        colorSecondary : SecondaryColor'
      });


To-Do's (Not Yet Implemented)

1.) Making it Sensitive for nxn Matrix

2.) Simplifying Arguments To JSON format

3.) Minifying the source