メニュー 閉じる

061. p5.jsで縦方向にスクロールするイメージギャラリーを作ってみる 01

p5.js内でイメージを配置して、マウスのスクロールで上下移動するようにしてみました。
横方向にもちょっと動きますが、まだスマホには対応していないので調整が必要です。

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

var images01 = [];
var images02 = [];
var images03 = [];
var images04 = [];

var brands01 = [];
var brands02 = [];
var brands03 = [];
var brands04 = [];

var wheel_pos = 0.0;
var screen_py = 0.0;

var img_start = 400.0;
var img_count = 0;

var scroll_flag = true;

function preload () {

	for (var i = 0; i < 10; i++) {
		if (i < 9) {
			images01[i] = loadImage ('images/image01/cloth_img0' + (i + 1) + '.jpg');
		} else {
			images01[i] = loadImage ('images/image01/cloth_img' + (i + 1) + '.jpg');
		}
	}

	for (var i = 0; i < 10; i++) {
		if (i < 9) {
			images02[i] = loadImage ('images/image02/cloth_img0' + (i + 1) + '.jpg');
		} else {
			images02[i] = loadImage ('images/image02/cloth_img' + (i + 1) + '.jpg');
		}
	}

	for (var i = 0; i < 10; i++) {
		if (i < 9) {
			images03[i] = loadImage ('images/image03/cloth_img0' + (i + 1) + '.jpg');
		} else {
			images03[i] = loadImage ('images/image03/cloth_img' + (i + 1) + '.jpg');
		}
	}

	for (var i = 0; i < 10; i++) {
		if (i < 9) {
			images04[i] = loadImage ('images/image04/cloth_img0' + (i + 1) + '.jpg');
		} else {
			images04[i] = loadImage ('images/image04/cloth_img' + (i + 1) + '.jpg');
		}
	}

}

function setup () {

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

	for (var i = 0; i < images01.length; i++) {
		brands01.push (new ImageBase (images01[i], random (width), img_start + (img_count * (height / 2.0)), images01[i].width, images01[i].height));
		img_count += 1;
	}

	for (var i = 0; i < images01.length; i++) {
		brands02.push (new ImageBase (images02[i], random (width), img_start + (img_count * (height / 2.0)), images02[i].width, images02[i].height));
		img_count += 1;
	}

	for (var i = 0; i < images01.length; i++) {
		brands03.push (new ImageBase (images03[i], random (width), img_start + (img_count * (height / 2.0)), images03[i].width, images03[i].height));
		img_count += 1;
	}

	for (var i = 0; i < images01.length; i++) {
		brands04.push (new ImageBase (images04[i], random (width), img_start + (img_count * (height / 2.0)), images04[i].width, images04[i].height));
		img_count += 1;
	}

}

function draw () {

	background (0);

	screen_py += wheel_pos;

	for (var i = 0; i < brands01.length; i++) {
		brands01[i].update ();
		brands01[i].render ();
		brands02[i].update ();
		brands02[i].render ();
		brands03[i].update ();
		brands03[i].render ();
		brands04[i].update ();
		brands04[i].render ();
	}
}

function mouseWheel (event) {

	event.preventDefault();

	if (scroll_flag == true) {
		wheel_pos -= event.delta;
	}

}

function ImageBase (img, x, y, w, h) {

	this.image = img;
	this.pre_x = x;
	this.img_x = x;
	this.img_y = y;
	this.img_w = w;
	this.img_h = h;

	this.target_x = x;
	this.target_y = y;

	this.update = function () {

		wheel_pos *= 0.992;

		this.target_x = ((mouseX - width / 2.0) + this.pre_x - this.img_x) * 0.1;
		this.target_y = wheel_pos * 40.0;

		this.img_x += this.target_x * 0.400;
		this.img_y += this.target_y * 0.015;

	}

	this.render = function () {

		imageMode (CENTER);
		image (this.image, this.img_x, this.img_y, this.img_w, this.img_h);
	}

}

 

 

Posted in p5.js , processing