processing.js

square

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">square</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%;
	height: 100vh;
	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(480, 320);

// 線の太さ
strokeWeight(5);

// 矩形を描く
// rect(a, b, c, d)
rect(30, 100, 100, 180);

strokeWeight(1);
// rect(a, b, c, d, r)
rect(350, 200, 50, 50, 10);

// 塗りつぶさない
noFill();

// 座標指定を設定する
// rect(左上頂点のx座標, 左上頂点のy座標, 幅, 高さ)  デフォルトの値
rectMode(CORNER);
rect(100, 150, 100, 100);

// rect(左上頂点のx座標, 左上頂点のy座標, 右下頂点のx座標, 右下頂点のy座標)
rectMode(CORNERS);
rect(350, 100, 400, 50);

// rect(中心のx座標, 中心のy座標, 幅, 高さ)
rectMode(CENTER);
rect(200, 150, 100, 100);

// rect(中心のx座標, 中心のy座標, 幅の半分, 高さの半分)
rectMode(RADIUS);
rect(200, 150, 100, 100);

// 自由に四角形を描く
// quad(x1, y1, x2, y2, x3, y3, x4, y4)
quad(38, 31, 86, 20, 69, 63, 30, 76);