<![CDATA[<script>
$(document).ready(function(){
var $container = $('#article [name="canvas"] .content');
if(!$container.length) return;
$.getScript("https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.min.js")
.done(function(){
// Удаляем старый canvas, если он уже был
$container.find('canvas').remove();
new p5(function(p){
let original;
let current;
let brush;
let prevMouseX = null;
let prevMouseY = null;
const canvasSize = 1200;
const backgroundColor = "#000000";
const circleSize = 950;
// Ширина мягкого края
const circleBlur = 60;
// ---------------------------------------------------------
// SMEAR
// ---------------------------------------------------------
// Радиус кисти
const brushRadius = 90;
// Сила размазывания
const smearStrength = 0.85;
// Максимальная величина одного движения
const maxMovement = 20;
// Мягкость кисти
const brushSoftness = 0.2;
// ---------------------------------------------------------
// RESET
// ---------------------------------------------------------
// Каждые 12 секунд полностью
// возвращаем исходный круг
const resetInterval = 12000;
let lastResetTime = 0;
// ---------------------------------------------------------
// SETUP
// ---------------------------------------------------------
p.setup = function(){
let canvas = p.createCanvas(
canvasSize,
canvasSize
);
$(canvas.elt).appendTo($container);
p.pixelDensity(1);
p.noCursor();
original = p.createGraphics(
canvasSize,
canvasSize
);
original.pixelDensity(1);
current = p.createGraphics(
canvasSize,
canvasSize
);
current.pixelDensity(1);
createBrush();
drawOriginalCircle();
lastResetTime =
p.millis();
};
// ---------------------------------------------------------
// DRAW
// ---------------------------------------------------------
p.draw = function(){
if (
p.millis() - lastResetTime >=
resetInterval
) {
resetCanvas();
lastResetTime =
p.millis();
}
p.image(
current,
0,
0
);
};
// ---------------------------------------------------------
// ORIGINAL CIRCLE
// ---------------------------------------------------------
function drawOriginalCircle(){
original.background(
backgroundColor
);
let ctx =
original.drawingContext;
let centerX =
canvasSize / 2;
let centerY =
canvasSize / 2;
let radius =
circleSize / 2;
let outerRadius =
radius +
circleBlur;
// -------------------------------------------------------
// RADIAL GRADIENT
// -------------------------------------------------------
let gradient =
ctx.createRadialGradient(
centerX,
centerY,
0,
centerX,
centerY,
outerRadius
);
gradient.addColorStop(
0,
"#0041dd"
);
gradient.addColorStop(
0.78,
"#0041dd"
);
gradient.addColorStop(
0.84,
"#0038bf"
);
gradient.addColorStop(
0.90,
"#00277f"
);
gradient.addColorStop(
0.95,
"#001238"
);
gradient.addColorStop(
1,
"#000000"
);
// -------------------------------------------------------
// DRAW
// -------------------------------------------------------
ctx.fillStyle =
gradient;
ctx.beginPath();
ctx.arc(
centerX,
centerY,
outerRadius,
0,
Math.PI * 2
);
ctx.fill();
// -------------------------------------------------------
// COPY TO CURRENT
// -------------------------------------------------------
current.background(
backgroundColor
);
current.image(
original,
0,
0
);
}
// ---------------------------------------------------------
// CREATE BRUSH
// ---------------------------------------------------------
function createBrush(){
let size =
brushRadius * 2;
brush = p.createGraphics(
size,
size
);
brush.pixelDensity(1);
}
// ---------------------------------------------------------
// SMEAR
// ---------------------------------------------------------
function smear(
x,
y
){
if (
prevMouseX === null ||
prevMouseY === null
) {
prevMouseX =
x;
prevMouseY =
y;
return;
}
// -------------------------------------------------------
// MOVEMENT
// -------------------------------------------------------
let moveX =
x -
prevMouseX;
let moveY =
y -
prevMouseY;
let moveDistance =
p.sqrt(
moveX * moveX +
moveY * moveY
);
if (
moveDistance <
0.5
) {
return;
}
// -------------------------------------------------------
// LIMIT MOVEMENT
// -------------------------------------------------------
if (
moveDistance >
maxMovement
) {
let movementFactor =
maxMovement /
moveDistance;
moveX *=
movementFactor;
moveY *=
movementFactor;
}
let size =
brushRadius * 2;
// -------------------------------------------------------
// CLEAR BRUSH
// -------------------------------------------------------
brush.clear();
// -------------------------------------------------------
// SOURCE POSITION
// -------------------------------------------------------
let sourceX =
x -
brushRadius -
moveX *
smearStrength;
let sourceY =
y -
brushRadius -
moveY *
smearStrength;
// -------------------------------------------------------
// COPY IMAGE
// -------------------------------------------------------
brush.image(
current,
0,
0,
size,
size,
sourceX,
sourceY,
size,
size
);
// -------------------------------------------------------
// SOFT MASK
// -------------------------------------------------------
let ctx =
brush.drawingContext;
ctx.save();
ctx.globalCompositeOperation =
"destination-in";
let mask =
ctx.createRadialGradient(
brushRadius,
brushRadius,
0,
brushRadius,
brushRadius,
brushRadius
);
mask.addColorStop(
0,
"rgba(255,255,255,0.75)"
);
mask.addColorStop(
brushSoftness,
"rgba(255,255,255,0.65)"
);
mask.addColorStop(
0.55,
"rgba(255,255,255,0.3)"
);
mask.addColorStop(
0.8,
"rgba(255,255,255,0.08)"
);
mask.addColorStop(
1,
"rgba(255,255,255,0)"
);
ctx.fillStyle =
mask;
ctx.fillRect(
0,
0,
size,
size
);
ctx.restore();
// -------------------------------------------------------
// DRAW SMEAR
// -------------------------------------------------------
current.image(
brush,
x - brushRadius,
y - brushRadius
);
// -------------------------------------------------------
// STORE POSITION
// -------------------------------------------------------
prevMouseX =
x;
prevMouseY =
y;
}
// ---------------------------------------------------------
// RESET
// ---------------------------------------------------------
function resetCanvas(){
current.background(
backgroundColor
);
current.image(
original,
0,
0
);
prevMouseX =
null;
prevMouseY =
null;
}
// ---------------------------------------------------------
// MOUSE
// ---------------------------------------------------------
p.mouseMoved = function(){
if (
p.mouseX >= 0 &&
p.mouseX <= p.width &&
p.mouseY >= 0 &&
p.mouseY <= p.height
) {
smear(
p.mouseX,
p.mouseY
);
} else {
prevMouseX =
null;
prevMouseY =
null;
}
};
p.mouseDragged = function(){
if (
p.mouseX >= 0 &&
p.mouseX <= p.width &&
p.mouseY >= 0 &&
p.mouseY <= p.height
) {
smear(
p.mouseX,
p.mouseY
);
} else {
prevMouseX =
null;
prevMouseY =
null;
}
};
p.keyPressed = function(){
if (
p.key === "R" ||
p.key === "r"
) {
resetCanvas();
lastResetTime =
p.millis();
}
};
}, $container[0]);
})
.fail(function(){
console.error(
"p5 не загрузился"
);
});
});
</script>]]> 
