processing.js

star

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">star</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">

void setup() {
	size(320, 320);
  smooth();
  colorMode(HSB,360,100,100,100);
  background(180, 35, 80, 20);
  noLoop();
}

void draw() {
	float randColor = random(150, 250);
  starDraw(width/2/2,height/2,randColor);
  starDraw(width/2+width/2/2,height/2,randColor);
}

void starDraw(int centerX, int centerY, int randColor) {
	int w = width/2;
  int h = height/2;
  int num = 5*2; // 頂点数(山+谷)
  int r; // 頂点から中心までの距離(半径)
  int r_out = w/2; // 中心からとげまでの距離
  int r_in = r_out/2; // 中心から谷までの距離(谷の深さ)

  float x;
  float y;

  fill(randColor, 50, 85, 65);

  pushMatrix();
  translate(centerX, centerY);
  rotate(radians(-90));

  beginShape();
  for (int i = 0; i < num; i++) {
  	// 偶数と奇数で処理を分ける(山と谷)
    if (i%2 == 0) {
      r = r_out;
    } else {
      r = r_in;
    }

    x = r * cos(radians(360/num * i));
    y = r * sin(radians(360/num * i));

    vertex(x, y); // 座標
  }
  endShape(CLOSE);

  popMatrix();
}