<![CDATA[<script>
$(document).ready(function(){
var $container = $('#article [name="canvas"] .content');
if (!$container.length) return;
$container.find('canvas').remove();
new p5(function(p){
let particles = [];
let baseTextLayer;
let colors = [
"#101c77",
"#d9214d",
"#1f25db",
"#f082a3"
];
let coeff = 2;
p.setup = function() {
p.createCanvas(1300, 600);
p.rectMode(p.CENTER);
p.noStroke();
let txt = "Revival";
let tSize = 200 * coeff;
let gradientColors =
colors.map(c => p.color(c));
let pg = p.createGraphics(
p.width,
p.height
);
pg.pixelDensity(1);
pg.background(255);
pg.textFont("system-ui");
pg.textSize(tSize);
pg.fill(0);
pg.noStroke();
pg.textAlign(
p.CENTER,
p.CENTER
);
pg.text(
txt,
p.width / 2,
p.height / 2 - tSize * 0.03
);
pg.loadPixels();
baseTextLayer = p.createGraphics(
p.width,
p.height
);
baseTextLayer.pixelDensity(2);
baseTextLayer.clear();
baseTextLayer.textFont("system-ui");
baseTextLayer.textSize(tSize);
baseTextLayer.fill("#adb1c9");
baseTextLayer.noStroke();
baseTextLayer.textAlign(
p.CENTER,
p.CENTER
);
baseTextLayer.text(
txt,
p.width / 2,
p.height / 2 - tSize * 0.03
);
let step = 4;
for (let y = 0; y < p.height; y += step) {
for (let x = 0; x < p.width; x += step) {
let index =
4 * (x + y * p.width);
let r = pg.pixels[index];
let g = pg.pixels[index + 1];
let b = pg.pixels[index + 2];
let brightness =
(r + g + b) / 3;
if (brightness < 125) {
particles.push({
x: x,
y: y,
size: 4,
color: getGradientColor(
x,
y,
gradientColors
),
angle: 0,
scale: 1,
backScaleMax: p.random(2, 17),
backWidthFactor: p.random(0.5, 1),
backHeightFactor: p.random(0.5, 1),
delay: p.random(0.04, 0.28)
});
}
}
}
};
p.draw = function() {
p.background("#f9fafc");
p.image(
baseTextLayer,
0,
0
);
let softness = 0.018;
for (let particle of particles) {
let d = p.dist(
p.mouseX,
p.mouseY,
particle.x,
particle.y
);
let t =
1 / (1 + d * softness);
t = p.constrain(t, 0, 1);
t = p.pow(t, 0.4);
let targetAngle =
p.PI * t;
let targetScale =
1 + t * particle.backScaleMax;
particle.angle = p.lerp(
particle.angle,
targetAngle,
particle.delay
);
particle.scale = p.lerp(
particle.scale,
targetScale,
particle.delay
);
drawParticle(particle);
}
};
function drawParticle(particle) {
if (particle.angle < p.HALF_PI) {
return;
}
p.push();
p.translate(
particle.x,
particle.y
);
let flipScale =
p.cos(particle.angle);
p.scale(
flipScale,
1
);
p.fill(particle.color);
let backSize =
particle.size * particle.scale;
p.rect(
0,
0,
backSize * particle.backWidthFactor,
backSize * particle.backHeightFactor
);
p.pop();
}
function getGradientColor(
x,
y,
gradientColors
) {
let nx = x / p.width;
let ny = y / p.height;
let baseT =
nx * 0.75 +
ny * 0.25;
let noiseScale = 0.55;
let noiseStrength = 0.0;
let n = p.noise(
x * noiseScale,
y * noiseScale
);
let t =
baseT +
(n - 0.5) * noiseStrength;
t = p.constrain(t, 0, 1);
let segmentCount =
gradientColors.length - 1;
let scaledT =
t * segmentCount;
let index =
p.floor(scaledT);
index = p.constrain(
index,
0,
segmentCount - 1
);
let localT =
scaledT - index;
localT =
localT *
localT *
(3 - 2 * localT);
return p.lerpColor(
gradientColors[index],
gradientColors[index + 1],
localT
);
}
}, $container[0]);
});
</script>]]> 
