メニュー 閉じる

050. p5.jsでシリンダーにテクスチャを貼って中から覗いてみる

イメージ画像をシリンダーのプリミティブ形状にテクスチャとして貼って、内部から覗いてみます。
ついでにテキストイメージをテクスチャとした同じシリンダーも重ねるとこんな感じになりました。

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

var img01;
var img02;

var posx;
var posy;
var targetx;
var targety;

function preload () {

	img01 = loadImage ('assets/image01.jpg');
	img02 = loadImage ('assets/image02.png');

}

function setup () {

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

	posx = mouseX;
	posy = mouseY;
	targetx = 0.0;
	targety = 0.0;

}

function draw () {

	background(0);

	targetx = mouseX;
	targety = mouseY;

	posx += (targetx - posx) * 0.08;
	posy += (targety - posy) * 0.08;

	scale (-1.0, 1.0);
	rotateX (posy / 80.0);
	rotateY (posx / 80.0);

	texture (img01);
	cylinder (width, width * 3.0);

	texture (img02);
	cylinder (width, width * 3.0);

}

 

 

Posted in p5.js , processing