Edit in JSFiddle

</script>
<script type="application/processing" data-processing-target="myCanvas">

size(320, 320);

colorMode(HSB,360,100,100,100);
// background color
background(180, 35, 80, 20);

// int（イント）： 整数型の変数を宣言
// width: canvasの幅
// height: canvasの高さ
int w = width;
int h = height;

// canvasのセンターに配置
noFill();
rectMode(CENTER);
rect(w/2, h/2, w*.65, h*.65);


// forループ (水玉)
int circleW = 30; // 円の大きさ
int num = 6; // 円の個数
int gutter = (w - circleW * num) / (num + 1); // 溝の幅 円の大きさと個数を基準に等分
noStroke(); // 線なし
for(int j = 0; j < num; j++){
	for(int i = 0; i < num; i++){
    // 描画
		fill(160+30*i, 60, 70, 60);
  	ellipse(
      (gutter + circleW / 2) + (gutter + circleW) * i,
      (gutter + circleW / 2) + (gutter + circleW) * j,
      circleW,
      circleW
    );
	}
}