https://codepen.io/OriginalName/pen/mwXbyw?editors=0010 (the link on codepen)
It seems to be a simple mistake but I’m trying to get the circle to grow when they are within 50px and follow the mouse. They do other stuff but this seems to be my main issue thanks in advance. There is some unnecessary code that I’ve commented out.
canvas = document.querySelector(“canvas”);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext(“2d”);
var mouse = {
x: undefined,
y:undefined
}
var maxRadius = 40;
var minRadius = 2;
window.addEventListener(“mousemove”, function(event){
mouse.x = event.x;
mouse.y = event.y;
});
window.addEventListener(“resize”, function()
{
canvas.width = window.innerWidth;
canvas.height = window.Height;
});
var circleArray = [];
function Circle(x, y, dx, dy, radius, rgb) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
// this.color = color;
this.radius = radius;
this.minRadius = minRadius;
this.draw = function() {
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
c.strokeStyle = this.color;
c.stroke();
//fillStyle = colorArray[Math.random() * colorArray.length]
};
this.update = function() {
if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
this.dx = -this.dx;
}
if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
this.dy = -this.dy;
}
this.x += this.dx;
this.y += this.dy;
//interactivity
if (mouse.x - this.x < 50 && mouse.x - this.x > - 50 && mouse.y - this.y < 50 && mouse.y - this.y > -50) {
if (this.radius < maxRadius)
this.radius += 1;
}
else if (this.radius > this.minRadius){
this.radius -= 1;
}
this.draw();
};
}
var circleArray = [];
for (var i = 0; i < 800; i++) {
var x = Math.random() * innerWidth - radius;
var y = Math.random() * innerHeight - radius;
var dx = (Math.random() ) * 4;
var dy = (Math.random() ) * 4;
var radius = Math.random() * 3 + 1;
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var rgb = "rgba(" + r + ", " + g + ", " + b + ", " + 0.9 + ")";
circleArray.push(new Circle(x, y, dx, dy, radius, rgb));
circleArray[i].draw();
}
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, innerWidth, innerHeight);
for (var i = 0; i < circleArray.length; i++) {
circleArray[i].update();
}
}
animate();
/* var coloArray = {
"#ffaa33",
"#99ffaa",
"#00ff00",
"#4411aa",
"#ff1100",
};