xxxxxxxxxx60
const maxspeed = 255;new Vue({ el: '#app', data: { message: 'Use the slider to control the speed and observe the blur effect with trail', speed: 5, // Initial speed positionX: 200, // Start in the middle of the canvas direction: 1, }, computed: { // Compute blur effect based on speed blurEffect() { return Math.min(Math.max(this.speed / 20, 0), 5); // Limits the blur effect to a max value }, // Compute trail opacity based on speed trailOpacity() { return Math.min(0.2 + this.speed / 500, 0.5); // Adjust the opacity for the trail effect } }, mounted() { const app = this; new p5((p) => { const CANVAS_SIZE = 400; p.setup = () => { p.createCanvas(CANVAS_SIZE, CANVAS_SIZE); }; p.draw = () => { // Instead of clearing the background, draw a semi-transparent rectangle // to achieve a trail effect. Adjust the alpha value based on speed for dynamic visibility. p.fill(100, 100, 100, 255 * app.trailOpacity); p.noStroke(); p.rect(0, 0, p.width, p.height); // Apply blur effect dynamically p.drawingContext.filter = `blur(${app.blurEffect}px)`; p.fill(255, 100, 150); p.ellipse(app.positionX, p.height / 2, 50, 50); // Reset filter to avoid affecting other drawings p.drawingContext.filter = 'none'; // Update the position based on speed and direction app.positionX += app.speed * app.direction; // Dynamically adjust speed using noise for more natural variation app.speed += p.map(p.noise(p.frameCount/1000), 0, 1, -0.05, 0.05); // Ensure speed stays within the slider's range app.speed = p.constrain(app.speed, 1, maxspeed); // Change direction if it hits the canvas boundaries if (app.positionX >= p.width - 25 || app.positionX <= 25) { app.positionX = p.constrain(app.positionX, 25, p.width-25) app.direction *= -1; } }; }, this.$el.querySelector('.canvas-container')); }});