サイト制作に関するメモ書き

HOME > JavaScript > p5.dom.jsを使ってみる

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を使ったデモページ

parent(parent) parentに要素を追加。
select(name) 要素を選択。
position(x, y) positionの指定を追加。
createDiv(html) div要素を作成。
id(id) 要素にIDを追加。
style(property, value) 要素にstyleを追加。
createImg(src) img要素を作成。
class(class) 要素にclassを追加。
createA(href, html) a要素を作成。
mousePressed(function) 要素上でマウスボタンが押されたときに実行。
createElement(tag, content) 指定した要素を作成。
createCheckbox(label) checkbox要素を作成。
changed(function) 要素の値が変更されたときに実行。
hide() 要素を非表示にする。
show() 要素を表示する。
createSlider(min, max, value) スライダー要素を作成。
input(function) inputで値の入力があったときに実行。
value(value) inputに指定したvalueを設定。
引数がない場合は要素の値を返す。
createInput() input要素(type=”text”)を作成。
size(w, h) 要素の幅と高さを指定。
createButton() button要素を作成。

 

サンプルコード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のメソッドを使ったデモページ

createVideo(src) video要素を作成。
autoplay(boolean) 自動再生するかどうかを設定。
play() メディア要素を再生。
stop() メディア要素を停止。
pause() メディア要素を一時停止。
loop() メディア要素にループを設定して再生。
noLoop() メディア要素にループを設定しないで再生。
volume(val) メディア要素の音量を設定。
引数がない場合は現在の音量を返す。
音量の範囲は0.0~1.0の間
showControls() メディア要素のコントロールを表示。
hideControls() メディア要素のコントロールを非表示。
speed(speed) メディア要素の再生速度の設定。
引数がない場合は現在の再生速度を返す。
time(time) メディア要素の再生時間を設定。
引数がない場合は現在の再生時間を返す。
duration() メディア要素の全体の時間を返す。
onended(function) メディア要素の再生が最後まで完了したときに実行。
ループしている場合は実行されない。
addCue(time, function) メディア要素が指定した時間まで再生されたときに実行する処理を設定。

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP