Пример:
Выбрать другую фотографию для примера:
HTML:
|
1 |
<div id="matrix"></div> |
JS:
Подключаем библиотеку p5.min.js и скрипт эффекта:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
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
Добавить комментарий: