メニュー 閉じる

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

マウスの反応を調整して、背景にアニメーションを入れてみました。

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

var back_img;

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

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

var bubbles = [];

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 () {

	back_img = loadImage ('images/main_img/back_image.jpg');

	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;
	}

	console.log (displayDensity());

}

function draw () {

	background (0);

	screen_py += wheel_pos;

	image (back_img, 0, 0, width * displayDensity (), height * displayDensity ());

	bubbles.push (new BubblesBase (random (width), height + 40.0, random (20,0), random (0.1, 20.0)));

	for (var i = 0; i < bubbles.length; i++) {
		bubbles[i].update ();
		bubbles[i].render ();
		if (bubbles[i].by < 0) {
			bubbles.splice (i, 1);
		}
	}

	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.997;

		this.target_x = (-1.0 * (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);
	}

}

function BubblesBase (x, y, r, up) {

	this.bx = x;
	this.by = y;
	this.br = r;

	this.update = function () {

		this.by -= up;

	}

	this.render = function () {

		ellipseMode (CENTER);
		fill (255, 80);
		noStroke ();
		ellipse (this.bx, this.by, this.br);

	}

}

 

 

Posted in p5.js , processing