Processing Polka dot pattern

2015-08-07 Pattern polka dot. Processing

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: Polka dot pattern [EverydaySketch]
 date: 2015-08-07
 */
color violet = color(58, 48, 66);
color yellow = color(237, 230, 35);
color cyan = color(5, 190, 255);

// float x = map(sin(t), -1, 1, 0, radius);
// float y = map(cos(t), -1, 1, 0, radius);


float num = 20;
// gap, height, width
float gap, cellH, cellW;

void setup() {
  size(800, 600, P2D);
  smooth(6);
}
void draw() {
  fill(violet, 99);
  rect(0, 0, width, height);
 // translate(0, 0);
  fill(#ffffff);
//  strokeWeight(5);
  //stroke(255);
    noStroke();
    for (int i = 0; i < num; ++i) {
    for (int j = 0; j < num; ++j) {
      gap = width/num;
      cellW = gap;
      cellH = sqrt(3)*gap;
/*      point(i*cellW, j*cellH);
      point(i*cellW - cellW/2, j*cellH - cellH/2); */
    //  vertex(i*cellW, j*cellH);
  //    vertex(i*cellW - cellW/2, j*cellH - cellH/2);
//      vertex(i*cellW + cellW, j*cellH + cellH);
dots(i*cellH, j*cellW, cellW/5);
dots(i*cellH - cellH/2, j*cellW - cellW/2, cellW/5);
        
    }
  }
    
}

void dots(float x, float y, float ratio){
	float correct = TWO_PI/10;
    ellipseMode(RADIUS);
	ellipse(x, y, ratio, ratio);
}
	/*
	triangle(
		x + cos(TWO_PI/3 + correct)*radio,
		y + sin(TWO_PI/3 + correct)*radio,
		x + cos(TWO_PI/3*2 + correct)*radio,
		y + sin(TWO_PI/3*2 + correct)*radio,
		x + cos(TWO_PI/3*3 + correct)*radio,
		y + sin(TWO_PI/3*3 + correct)*radio
	);
	//fill(random(127,200), 255, random(100,150));
	triangle(
		x + cos(TWO_PI/3 - correct)*radio,
		radio + y + sin(TWO_PI/3 - correct)*radio,
		x + cos(TWO_PI/3*2 - correct)*radio,
		radio + y + sin(TWO_PI/3*2 - correct)*radio,
		x + cos(TWO_PI/3*3 - correct)*radio,
		radio + y + sin(TWO_PI/3*3 - correct)*radio
	);
	*/