【Tweakpane】の練習！「マウス操作」で値を変更できるようにする！【学習メモ】

テクノロジー

2021.03.04 2020.02.05

HTML

<!DOCTYPE html>
<html lang="js">
<head>
	<meta charset="UTF-8">
	<title>Tweakpane Demo</title>
</head>
<body>
	<script src="https://cdn.jsdelivr.net/npm/tweakpane@1.3.2/dist/tweakpane.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>
	<script src="js/main.js"></script>
</body>
</html>

JavaScript

'use strict';

const params = {
	width: 100,
	height: 100,
	depth: 100,
	backgroundColor: '#f00',
	canRotate: true,
};

function setup() {
	createCanvas(400, 200, WEBGL);

	const pane = new Tweakpane({
		title: 'Parameters',
	});
	const sizesFolder = pane.addFolder({
		title: 'Size',
	});
	sizesFolder.addInput(params, 'width', {
		min: 0,
		max: 200,
	});
	sizesFolder.addButton({
		title: 'Randomize width',
	}).on('click', () => {
		params.width = Math.random() * 100;
		pane.refresh();
	});
	sizesFolder.addInput(params, 'height', {
		step: 50,
		min: 0,
		max: 200,
	});
	sizesFolder.addInput(params, 'depth', {
		options: {
			small: 50,
			medium: 100,
			large: 200,
		},
	});
	pane.addSeparator();
	pane.addInput(params, 'backgroundColor');
	pane.addInput(params, 'canRotate');
	pane.addButton({
		title: 'Export',
	}).on('click', () => {
		const results = pane.exportPreset();
		console.log(JSON.stringify(results, null, 2));
	});
}

function draw() {
	background(color(params.backgroundColor));

	if (params.canRotate) {
	rotateX(frameCount * 0.01);
	rotateY(frameCount * 0.01);
	}

	noFill();
	stroke(255);
	box(params.width, params.height, params.depth);
}

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