メニュー 閉じる

143. p5.jsでスタイルシートを設定した文字をアニメーションさせてみる02

142をちょっと修正。

http://www.velvet-number.com/p5_test/test103/

var text_div01;
var targetx;
var targety;
var txtposx = 0;
var txtposy = 0;



function preload () {

}

function setup () {

	pixelDensity (displayDensity ());
	createCanvas (windowWidth, windowHeight);
	colorMode (RGB, 256);
	background (255);

	text_div01 = createDiv ('p5.jsでdiv要素を作ってCSSを設定');
	text_div01.style ('font-family', 'sans-serif');
	text_div01.style ('font-size', '24px');
	text_div01.style ('font-weight', '700');
	text_div01.style ('color', '#000000');
	text_div01.style ('text-align', 'center');

}

function draw () {

	targetx = mouseX / 10;
	targety = mouseY;

	txtposx += (targetx - txtposx) * 0.1;
	txtposy += (targety - txtposy) * 0.1;

	text_div01.position (txtposx, txtposy);
	text_div01.style ('font-size', txtposx + 'px');

}

Posted in p5.js , processing