p5.dom.jsを使ってみる

p5.jsのライブラリの中からp5.dom.jsを使ってみます。
p5.jsの基本的な使い方は以前の記事を参照ください。

サンプルコード

p5.jsと合わせてp5.dom.jsを読み込ませます。

<script src="./p5.min.js"></script>
<script src="./p5.dom.min.js"></script>

p5.dom.jsのメソッドの中からいくつか試してみます。

HTML

<div id="container"></div>

JavaScript

var div;
var img;
var a;
var element;
var checkbox;
var slider;
var input;
var button;
function setup() { // 最初に実行される関数
	var canvas = createCanvas(640, 480); // canvasの作成
	canvas.parent('container');
	select('canvas').position(0, 300);
	background(240);
	noStroke();

	div = createDiv('divのテキスト');
	div.id('div').style('color', 'red');

	img = createImg('image.jpg');
	img.class('image').position(200, 0);

	a = createA('http://p5js.org/', 'p5.js');
	a.mousePressed(function() {
		alert('mousePressed');
	});

	element = createElement('p','elementのテキスト');

	checkbox = createCheckbox('チェック');
	checkbox.changed(function() {
		if (this.checked()) {
			div.hide();
		} else {
			div.show();
		}
	});

	slider = createSlider(0, 100, 50);
	slider.position(10, 200);
	slider.input(function() {
		console.log('sliderの値:' + slider.value());
	});
	input = createInput();
	input.size(120).position(160, 200);
	input.input(function() {
		console.log('inputの値:' + input.value());
	});
	button = createButton('sliderとinputの値変更');
	button.position(300, 200);
	button.mousePressed(function() {
		console.log('buttonクリック');
		slider.value(80); // スライダーの値を変更
		input.value('テスト'); // inputの値を変更
	});
}

p5.dom.jsを使ったデモページ

サンプルコード2

video周りのメソッドをいくつか試してみます。

JavaScript

function setup() { // 最初に実行される関数
	var video = createVideo(['movie.mp4']).size(960, 540).autoplay(true);

	var playButton = createButton('play');
	playButton.mousePressed(function() {
		video.play();
	});
	var stopButton = createButton('stop');
	stopButton.mousePressed(function() {
		video.stop();
	});
	var pauseButton = createButton('pause');
	pauseButton.mousePressed(function() {
		video.pause();
	});
	var loopButton = createButton('loop');
	loopButton.mousePressed(function() {
		video.loop();
	});
	var noLoopButton = createButton('noLoop');
	noLoopButton.mousePressed(function() {
		video.noLoop();
	});
	var volmButton = createButton('vol-');
	volmButton.mousePressed(function() {
		if(video.volume() >= 0.1) {
			video.volume(video.volume() - 0.1);
		}
	});
	var volpButton = createButton('vol+');
	volpButton.mousePressed(function() {
		if(video.volume() <= 0.9) {
			video.volume(video.volume() + 0.1);
		}
	});
	var showControlsButton = createButton('showControls');
	showControlsButton.mousePressed(function() {
		video.showControls();
	});
	var hideControlsButton = createButton('hideControls');
	hideControlsButton.mousePressed(function() {
		video.hideControls();
	});
	var speedButton = createButton('speed');
	speedButton.mousePressed(function() {
		video.speed(2);
	});
	var timeButton = createButton('time');
	timeButton.mousePressed(function() {
		console.log(video.time());
		video.time(60);
	});
	var durationButton = createButton('duration');
	durationButton.mousePressed(function() {
		console.log(video.duration());
	});
	video.onended(function() {
		console.log('onended');
	});
	video.addCue(5, addCueFunction, '5秒');
	video.addCue(10, addCueFunction, '10秒');
}

function addCueFunction(val) {
	console.log(val);
}

videoのメソッドを使ったデモページ

【参考サイト】

• p5.js | reference