processing.js

Draw gradation dots full of canvas using a for loop statement

by uto usui

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="wrap">
	<h1>processing.js</h1>
	<p class="lead">variable / for <br> gradation dot</p>
	<canvas id="myCanvas"></canvas>
</div>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet">

SCSS

body {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 100vh;
  padding: 1em;
	font-family: 'Dancing Script';
	text-align: center;
  background-image: linear-gradient(-30deg,#f7cac9 20%,#91A8d0 85%);
}

h1 {
	font-size: 42px;
	font-weight: bold;
	color: #32355a;
}

canvas {
	margin: 20px auto;
	border: 3px dashed rgba(#32355a, .55);
  background-color: rgba(white, .15);
}

JavaScript

</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
    );
	}
}