【dat.GUI】の練習！インタラクティブに値を変更できる「パネル」【学習メモ】

テクノロジー

2021.03.04 2020.02.07

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>dat. GUI demo</title>
</head>
<body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
  <script src="main.js"></script>
</body>
</html>

JavaScript

'use strict';

var myBox;

function MyBox() {
	this.w = 100;
	this.h = 100;
	this.d = 100;
}

function setup() {
	var gui;
	createCanvas(400, 300, WEBGL);
	myBox = new MyBox();
	gui = new dat.GUI();
	gui.add(myBox, 'w', 50, 200, 10);
	gui.add(myBox, 'h', 50, 200,);
	gui.add(myBox, 'd', 10, 300);
}

function draw() {
	background(180);
	rotateX(frameCount * 0.01);
	rotateY(frameCount * 0.01);
	noFill();
	stroke(255);
	box(myBox.w, myBox.h, myBox.d);
}

おさかなへの応援メッセージ！おさかなに聞きたい事、質問！記事にしてほしい内容！などを大募集中！
「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください！