Class Particle

assets/js/bubbleParticle.js:27–105

const textCoordinates=ctx.getImageData(0,0,canvas.width,canvas.height);

class Particle{

constructor(x,y){
    this.x=x;
    this.y=y;
    this.size=3;
    this.baseX=this.x; //holds the initial position of particle
    this.baseY=this.y;
    this.density=(Math.random()*10)+1;
    this.distance;

}
draw(){
    ctx.fillStyle="rgba(255,255,255,0.8)";
     ctx.strokeStyle="rgba(34,147,214,1)";
    
    ctx.beginPath();
if(this.distance < mouse.radius-5){
    this.size=13;
    ctx.arc(this.x,this.y,this.size,0,Math.PI*2);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(this.x-3,this.y-3,this.size/2.5,0,Math.PI*2);
    ctx.arc(this.x+7,this.y-1,this.size/3.5,0,Math.PI*2);
}
else if(this.distance <= mouse.radius){
this.size=10;
ctx.arc(this.x,this.y,this.size,0,Math.PI*2);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(this.x-2,this.y-2,this.size/3,0,Math.PI*2);

}
else{
this.size=8;
ctx.arc(this.x,this.y,this.size,0,Math.PI*2);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(this.x-1,this.y-1,this.size/3,0,Math.PI*2);

}
ctx.closePath();  

ctx.fill();

}
update(){
    let dx=mouse.x-this.x;
    let dy=mouse.y-this.y;
    let distance=Math.sqrt(dx*dx +dy*dy);
    this.distance=distance;
    let forceDirectionX=dx/distance;
    let forceDirectionY=dy/distance;
    let maxDistance=mouse.radius;
        let force=(maxDistance-distance)/maxDistance;