Эффект матрицы на фотографиях

Пример:

Выбрать другую фотографию для примера:

HTML:

<div id="matrix"></div>

1	<div id="matrix"></div>

JS:

Подключаем библиотеку p5.min.js и скрипт эффекта:

let img;
const detail = 4;
let particles = [];
let grid = [];
let letters = [];
let ctx;
function preload() {
	img = loadImage('/demo/i/photo.jpg'); // Ссылка на фото
}
class Particle {
	constructor (x, y) {
		this.x = x || random(width);
		this.y = y || random(height);
		this.prevY = this.y;
		this.speed = 0;
		this.v = random(0, 0.7);
		this.image = random(letters);
	} 
	update (speed) {
		if (grid.length) {
			this.speed = grid[floor(this.y / detail)][floor(this.x / detail)] * 0.97;
		}
		this.y += (1 - this.speed) * 2 + this.v;
		
		if (this.y > height) {
			this.y = 0;
		}
	}
	draw () {
		image(this.image, this.x, this.y);
	}
}
function setup () {
	const canwidth = document.getElementById('matrix').offsetWidth; 	
	const canheight = ( canwidth * img.height ) / img.width;
	const canvas = createCanvas(canwidth, canheight);
	canvas.parent("matrix");  
	const imgRatio = canwidth/canheight;
	if (canwidth/canheight > imgRatio) {
		resizeCanvas(floor(canheight * imgRatio), floor(canheight));
		} else {
		resizeCanvas(floor(canwidth), floor(canwidth / imgRatio));
	}
	ctx = canvas.drawingContext; 
	pixelDensity(1);
	const alphabet = 'あいうえおかきくけこがぎぐげごさしすせそざじずぜぞぢづでどなにぬねの'.split('');
	alphabet.forEach(letter => {
		const letterImage = createGraphics(10, 10);
		letterImage.textAlign(CENTER, CENTER);
		letterImage.fill(0, 255, 0);
		letterImage.text(letter, 6, 6);
		letters.push(letterImage);
	});
	clear();
	ctx.globalAlpha = 1;
	loop();
	image(img, 0, 0, width, height);
	loadPixels();
	clear();
	noStroke();  
	grid = [];
	for (let y = 0; y < height; y+=detail) {
		let row = [];
		for (let x = 0; x < width; x+=detail) {
			const r = pixels[(y * width + x) * 4];
			const g = pixels[(y * width + x) * 4 + 1];
			const b = pixels[(y * width + x) * 4 + 2];
			const _color = color(r, g, b);
			const _brightness = brightness(_color) / 100;
			row.push(_brightness);
		}
		grid.push(row);
	}
	particles = [];
	for (let i = 0; i < 4000; i++) {
		particles.push(new Particle(null, (i/4000) * height));
	}
}
function draw () {
	ctx.globalAlpha = 0.2;
	fill(0);
	rect(0,0,width,height);
	particles.forEach(p => {
		p.update();
		ctx.globalAlpha = (p.speed + 0.15) * 0.3;
		p.draw();
	});
}

let img;

const detail = 4;

let particles = [];

let grid = [];

let letters = [];

let ctx;

function preload() {

img = loadImage('/demo/i/photo.jpg'); // Ссылка на фото

}

class Particle {

constructor (x, y) {

this.x = x || random(width);

this.y = y || random(height);

this.prevY = this.y;

this.speed = 0;

this.v = random(0, 0.7);

this.image = random(letters);

}

update (speed) {

if (grid.length) {

this.speed = grid[floor(this.y / detail)][floor(this.x / detail)] * 0.97;

}

this.y += (1 - this.speed) * 2 + this.v;

if (this.y > height) {

this.y = 0;

}

draw () {

image(this.image, this.x, this.y);

}

function setup () {

const canwidth = document.getElementById('matrix').offsetWidth;

const canheight = ( canwidth * img.height ) / img.width;

const canvas = createCanvas(canwidth, canheight);

canvas.parent("matrix");

const imgRatio = canwidth/canheight;

if (canwidth/canheight > imgRatio) {

resizeCanvas(floor(canheight * imgRatio), floor(canheight));

} else {

resizeCanvas(floor(canwidth), floor(canwidth / imgRatio));

}

ctx = canvas.drawingContext;

pixelDensity(1);

const alphabet = 'あいうえおかきくけこがぎぐげごさしすせそざじずぜぞぢづでどなにぬねの'.split('');

alphabet.forEach(letter => {

const letterImage = createGraphics(10, 10);

letterImage.textAlign(CENTER, CENTER);

letterImage.fill(0, 255, 0);

letterImage.text(letter, 6, 6);

letters.push(letterImage);

});

clear();

ctx.globalAlpha = 1;

loop();

image(img, 0, 0, width, height);

loadPixels();

clear();

noStroke();

grid = [];

for (let y = 0; y < height; y+=detail) {

let row = [];

for (let x = 0; x < width; x+=detail) {

const r = pixels[(y * width + x) * 4];

const g = pixels[(y * width + x) * 4 + 1];

const b = pixels[(y * width + x) * 4 + 2];

const _color = color(r, g, b);

const _brightness = brightness(_color) / 100;

row.push(_brightness);

}

grid.push(row);

}

particles = [];

for (let i = 0; i < 4000; i++) {

particles.push(new Particle(null, (i/4000) * height));

}

function draw () {

ctx.globalAlpha = 0.2;

fill(0);

rect(0,0,width,height);

particles.forEach(p => {

p.update();

ctx.globalAlpha = (p.speed + 0.15) * 0.3;

p.draw();

});

}

За основу взят скрипт, найденный на codepen.io у пользователя Louis Hoebregts

Пример:

Выбрать другую фотографию для примера:

HTML:

JS:

Смотрите также:

Развевающийся флаг на JS

Звуковые эффекты при клике или наведении

Отложенная загрузка контента

Добавить комментарий: