Hi its me again I have some code that will produce a circle when mouse will move and clicked. It will be destroyed when it hits the window inner Height. I want to make to rainbow while you move the mouse. Is it possible you could help me pls.
Here is the code:
/** @type {HTMLCanvasElement} */
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var maxDist = 50;
var mouse = {
x: undefined,
y: undefined,
}
var circleArray = [];
canvas.addEventListener("mousemove", function(event) {
mouse.x = event.x;
mouse.y = event.y;
for (var i = 0; i < 1; i++) {
//var x = Math.random() (canvas.width - r 2) + r;
//var y = Math.random() (canvas.height - r 2) + r;
var r = Math.random() * 30;
var dx = (Math.random() - 0.5) * 45;
var dy = (Math.random() - 0.5) * 45;
circleArray.push(new Circle(mouse.x, mouse.y, dx, dy, r, "black"));
}
})
canvas.addEventListener("click", function(event) {
mouse.x = event.x;
mouse.y = event.y;
for (var i = 0; i < 100; i++) {
//var x = Math.random() (canvas.width - r 2) + r;
//var y = Math.random() (canvas.height - r 2) + r;
var r = Math.random() * 30;
var dx = (Math.random() - 0.5) * 40;
var dy = (Math.random() - 0.5) * 40;
circleArray.push(new Circle(mouse.x, mouse.y, dx, dy, r, "purple"));
}
})
class Circle {
constructor(x, y, dx, dy, r, c) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.r = r;
this.color = c
}
draw() {
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = this.color;
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
ctx.stroke();
ctx.closePath();
}
update() {
if (this.x + this.r > canvas.width || this.x - this.r < 0) {
this.dx = -this.dx;
this.r -= this.r;
}
if (this.y + this.r > canvas.height || this.y - this.r < 0) {
this.dy = -this.dy;
this.r -= this.r;
}
this.x += this.dx;
this.y += this.dy;
if (mouse.x - this.x < maxDist && mouse.x - this.x > -maxDist && mouse.y - this.y < maxDist && mouse.y - this.y > -maxDist) {
this.dx = -this.dx;
this.dy = -this.dy;
}
this.draw();
}
}
function animate() {
requestAnimationFrame(animate);
ctx.fillStyle = "rgba(45, 45, 45, 0.5)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < circleArray.length; i++) {
circleArray[i].update();
}
}
animate();
pls help me make it raindow.
