Я пытаюсь сделать волну с интерактивной анимацией на холсте и библиотекой Processing.js.Эта волна должна двигаться как вода.Когда часть волны взаимодействует с координатами мыши, преобразование происходит слишком быстро.Кто знает, как сделать это преобразование плавным и медленным с processing.js / p5.j?
Есть ссылка на этот пример на codepen: https://codepen.io/todoryshyna-maryna/pen/wQbdXO?editors=0010
Есть пример кода:
function program(proc) {
var yvalues = [];
theta = 0.0;
theta01 = 0.0;
theta02 = 0.0;
points = [
[1583.5, 103.8, 1564.9, 157.4, 1476.2, 157.4],
[1387.5, 157.4, 1321.2, 119.2, 1200.5, 119.3],
[1079.7, 119.5, 1046.6, 180.0, 960.0, 180.0],
[865.7, 180.0, 819.4, 129.4, 699.7, 129.3],
[580.0, 129.2, 548.6, 159.9, 461.3, 159.9],
[374.0, 159.9, 361.2, 102.8, 0.0, 90.0],
[361.2, 75.2, 374.7, 23.9, 461.3, 23.7],
[547.9, 23.4, 586.3, 59.1, 699.8, 59.1],
[813.3, 59.1, 865.8, 0.0, 960.0, 0.0],
[1046.2, 0.0, 1089.3, 67.5, 1199.6, 67.5],
[1309.9, 67.5, 1387.4, 22.5, 1475.9, 23.3],
[1564.3, 24.0, 1583.1, 75.2, 1920.0, 90.0],
];
proc.setup = function() {
width = window.outerWidth;
height = window.innerHeight;
proc.size(width, 450);
proc.smooth(8);
proc.frameRate(30);
proc.strokeWeight(1);
amplitude = proc.height / 8;
w = proc.width + 16;
};
proc.draw = function() {
proc.background(255, 255, 255, 0);
let color = proc.color(0, 255, 199, 100);
let set = {
points: points,
vertex: '',
color: color,
animateWave: animateWave1,
}
createWave(proc, set, [1920.0, 90.0]);
proc.noStroke();
};
}
var canvas = document.getElementById("canvas");
var instance = new Processing(canvas, program);
instance.translate(0, 450 / 4);
instance.scale(0.8, 0.8);
function createWave(proc, props, points) {
proc.beginShape();
proc.lineJoin = 'round';
proc.vertex(points[0], points[1]);
var pointsLength = props.points.length;
props.points.forEach((point, index) => {
props.animateWave(proc, point, index, pointsLength, props.random);
})
proc.fill(props.color);
proc.endShape();
}
function animateWave1(proc, point, index, pointsLength, random) {
var sin2 = 2;
var sinHalf = 1.5;
var ty = proc.bezierTangent(20, 10, 90, 80, 0.5);
var tx = proc.bezierTangent(85, 10, 90, 15, 0.5);
var a = proc.atan2(ty, tx);
a += proc.PI;
var cy1 = (proc.sin(theta) * amplitude / 3) + (point[1] * proc.sin(sin2));
var cy2 = (proc.sin(theta) * amplitude / 3) + (point[3] * proc.sin(sin2));
var cy3 = (proc.sin(theta) * amplitude / 3) + (point[5] * proc.sin(sin2));
var cy1i0 = (proc.sin(theta01) * amplitude / 3) + (point[1] * proc.sin(sin2));
var cy2i0 = (proc.sin(theta01) * amplitude / 3) + (point[3] * proc.sin(sin2));
var cy3i0 = (proc.sin(theta01) * amplitude / 3) + (point[5] * proc.sin(sin2));
var cy1i1 = (proc.sin(theta02) * amplitude / 3) + (point[1] * proc.sin(sin2));
var cy2i1 = (proc.sin(theta02) * amplitude / 3) + (point[3] * proc.sin(sin2));
var cy3i1 = (proc.sin(theta02) * amplitude / 3) + (point[5] * proc.sin(sin2));
var cy01 = (proc.cos(theta + (Math.PI)) * amplitude / 4) + (point[1] * proc.sin(sinHalf));
var cy02 = (proc.cos(theta + (Math.PI)) * amplitude / 4) + (point[3] * proc.sin(sinHalf));
var cy03 = (proc.cos(theta + (Math.PI)) * amplitude / 4) + (point[5] * proc.sin(sinHalf));
var cy01i0 = (proc.cos(theta01 + (Math.PI)) * amplitude / 4) + (point[1] * proc.sin(sinHalf));
var cy02i0 = (proc.cos(theta01 + (Math.PI)) * amplitude / 4) + (point[3] * proc.sin(sinHalf));
var cy03i0 = (proc.cos(theta01 + (Math.PI)) * amplitude / 4) + (point[5] * proc.sin(sinHalf));
var cy01i2 = (proc.cos(theta02 - 2 + (Math.PI)) * amplitude / 4) + (point[1] * proc.sin(sinHalf));
var cy02i2 = (proc.cos(theta02 - 2 + (Math.PI)) * amplitude / 4) + (point[3] * proc.sin(sinHalf));
var cy03i2 = (proc.cos(theta02 - 2 + (Math.PI)) * amplitude / 4) + (point[5] * proc.sin(sinHalf));
/* --------comparison bottom points---------- */
var yScale = 0;
var yScale2 = 0;
var yScale3 = 0;
if (index < (pointsLength) / 2) {
if (index === (pointsLength / 2) - 1) {
cy03 = point[5];
}
if (index === 0 || index === 1) {
cy01 = cy01i0;
cy02 = cy02i0;
cy03 = cy03i0;
if (index === 1) {
cy03 = cy03i0 / (amplitude / 55.5);
cy02 = cy02i0 / (amplitude / 55.5);
}
}
if (index === 2 || index === 3) {
cy01 = cy01i2;
cy02 = cy02i2;
cy03 = cy03i2;
if (index === 3) {
cy03 = cy03i2 / (amplitude / 56.8);
cy02 = cy02i2 / (amplitude / 55.8);
}
}
if (proc.mouseX > proc.width / 2.5 && proc.mouseX + 80 <= proc.width / 1.2) {
if (index === 1) {
cy01 = proc.lerp(proc.mouseX / 2.3, cy01 / 2, 0.5)
cy02 = proc.lerp(proc.mouseX / 2.3, cy02 / 3, 0.5)
cy03 = proc.lerp(proc.mouseX / 2.3, cy03 / 3, 0.5) - 70
}
if (index === 0) {
cy01 = proc.lerp(proc.mouseX / 2.3, cy01 / 3, 0.5)
cy02 = proc.lerp(proc.mouseX / 2.3, cy02 / 3, 0.5)
cy03 = proc.lerp(proc.mouseX / 2.3, cy03 / 2, 0.5)
}
} else if (proc.mouseX > proc.width / 3 && proc.mouseX + 80 <= proc.width / 1.5) {
if (index === 2) {
cy01 = proc.lerp(proc.mouseX / 2, cy01, 0.5)
cy02 = proc.lerp(proc.mouseX / 2, cy02, 0.9)
}
if (index === 1) {
cy01 = proc.lerp(proc.mouseX / 2, cy01, 1)
cy02 = proc.lerp(proc.mouseX / 2, cy02, 0.5)
cy03 = proc.lerp(proc.mouseX / 2, cy03, 0.5)
}
} else if (proc.mouseX > proc.width / 4 && proc.mouseX + 80 <= proc.width / 2.5) {
if (index === 2) {
cy01 = proc.lerp(proc.mouseX / 1.8, cy01, 0.5)
cy02 = proc.lerp(proc.mouseX / 1.8, cy02, 0.5)
cy03 = proc.lerp(proc.mouseX / 1.8, cy03, 0.5)
}
if (index === 1) {
cy03 = proc.lerp(proc.mouseX / 1.8, cy03 - 100, 0.5)
}
if (index === 3) {
cy01 = proc.lerp(proc.mouseX / 1.8, cy01, 0.5)
cy02 = proc.lerp(proc.mouseX / 1.8, cy02, 0.5)
cy03 = proc.lerp(proc.mouseX / 1.8, cy03, 0.7)
}
} else if (proc.mouseX > proc.width / 7 && proc.mouseX + 80 <= proc.width / 3) {
if (index === 4) {
cy01 = proc.lerp(proc.mouseX, cy01 - 50, 0.4)
cy02 = proc.lerp(proc.mouseX, cy02, 0.9)
cy03 = cy03 + 10
}
if (index === 3) {
cy01 = proc.lerp(proc.mouseX, cy01, 0.9)
cy02 = proc.lerp(proc.mouseX, cy02 - 50, 0.6)
cy03 = proc.lerp(proc.mouseX, cy03 - 50, 0.5)
}
} else if (proc.mouseX > proc.width / 16 && proc.mouseX + 80 <= proc.width / 5) {
if (index === 4) {
cy01 = proc.lerp(proc.mouseX + 80, cy01, 0.5)
cy02 = proc.lerp(proc.mouseX + 80, cy02, 0.5)
cy03 = proc.lerp(proc.mouseX + 80, cy03, 0.5)
}
if (index === 3) {
cy01 = point[1];
cy03 = proc.lerp(proc.mouseX / 1.5, point[5] + 70, 0.5)
}
if (index === 5) {
cy01 = proc.lerp(proc.mouseX + 90, cy01, 0.5)
cy02 = proc.lerp(proc.mouseX + 90, cy02, 0.5)
cy03 = point[5]
}
}
proc.bezierVertex(
point[0], cy01 + proc.sin(a) * -4,
point[2], cy02 + proc.sin(a) * -4,
point[4], cy03 + proc.sin(a) * -4
);
}
/* --------comparison top points---------- */
if (index >= (pointsLength) / 2) {
if (index === pointsLength - 1) {
cy3 = point[5];
}
if (index === pointsLength - 1 || index === pointsLength - 2) {
cy1 = cy1i0;
cy2 = cy2i0;
cy3 = cy3i0;
if (index === pointsLength - 1) {
cy3 = point[5];
} else {
cy2 = cy2i0 / (amplitude / 55.5);
cy1 = cy1i0 / (amplitude / 55.5);
}
}
if (index === pointsLength - 3 || index === pointsLength - 4) {
cy1 = cy1i1;
cy2 = cy2i1;
cy3 = cy3i1;
if (index === pointsLength - 3) {
cy2 = cy2i1 / (amplitude / 55.5);
cy3 = cy3i1 / (amplitude / 58.5);
}
}
if (index === pointsLength - 5 || index === pointsLength - 6) {
cy1 = cy1;
cy2 = cy2;
cy3 = cy3;
if (index === pointsLength - 5) {
cy2 = cy2 / (amplitude / 55.5);
cy3 = cy3 / (amplitude / 55.5);
}
}
proc.bezierVertex(
point[0], cy1 - yScale + proc.sin(a),
point[2], cy2 - yScale2 + proc.sin(a),
point[4], cy3 - yScale3 + proc.sin(a)
);
}
theta += 0.004;
theta01 += 0.0042;
theta02 += 0.0044;
}
#canvas {
width: 100%;
max-width: 1920px;
}
<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>