Processing hexagons

2015-12-09

by schrodingers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.13/processing.min.js"></script>
<canvas></canvas>

CSS

</style> <script type="text/javascript"> window.addEventListener('load', function() {
  var scripts=document.body.getElementsByTagName('script');
  var canvases=document.body.getElementsByTagName('canvas');
  new Processing(canvases[0], scripts[0].text);
}

, false);
// Here prevent javascript in body from throwing error </script> <style>

JavaScript

/*
 title: Grid hex
 date: 2015-12-09
 */


color[] spring = {#ff6699, #ff9900, #ffcc00, #9adb1b, #00cc66,  #00cccc, #00ccff, #6633cc, #ff66cc};
 float hsize = 30;
                  
void setup() {
  size(800, 600);	
  for ( int x = 0; x < 10; ++x ) {    
  for ( int y = 0; y < 20; ++y ) {
    float xoff = 0;
    if (  y % 2 == 1 ) xoff = ( hsize * 1.5 );
    drawHexa( 100 + xoff + x * ( hsize * 3 ), 100 + y * ( sqrt( 3 ) / 2 * hsize ), 30 );
  }
  }

  
}

void draw() {
  stroke( 255 );  
  fill( 5 );
 
}

 
void drawHexa( float x, float y, float r ) {
 
  beginShape();
  for ( float a = 0; a < TWO_PI; a += PI / 3 ) {
    vertex( x + cos( a ) * r, y + sin( a ) * r );
  }
  endShape();
 
}