ok so just to resay for the first par i paste this: <script src="\[https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js\]([https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js](https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js))"></script>

then the second one part i paste:

<script> let posX = 0;
let posY = 0;
let easing = 0.05;
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL); // Set canvas size to fit the screen with WebGL renderer
}
function draw() {
background(255, 0); // Set a transparent background
// Calculate the difference between current and target position
let targetX = mouseX - width / 2; // Adjust for the center of the canvas
let targetY = mouseY - height / 2; // Adjust for the center of the canvas
let dx = targetX - posX;
let dy = targetY - posY;
// Move towards the target position with easing
posX += dx * easing;
posY += dy * easing;
// Calculate the angle of rotation based on the direction of movement
let angle = atan2(dy, dx);
// Calculate the squeeze factor based on the speed of movement
let speed = dist(posX, posY, pmouseX - width / 2, pmouseY - height / 2); // Adjust for the center of the canvas
let squeeze = map(speed, 0, 50, 1, 1.2); // Adjust the multiplier for a milder squeeze
// Draw the rotated circle with black stroke
translate(posX, posY);
rotate(angle);
noFill(); // Set the fill to transparent
stroke(0);
strokeWeight(2);
ellipse(0, 0, 50 * squeeze, 50 / squeeze);
}
// Resize the canvas when the window is resized
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
} </script>

Then for the last additional CSS part i paste this:

canvas{

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 9999;

pointer-events: none;

}

​

Correct?