canvas-bubble/canvas.js
// Object Oriented Function for Multiple Circles
Object Oriented Function for Multiple Circles
Object Oriented Function for Multiple Circles
function Circle(x, y, dx, dy, radius) {
	this.x = x;
	this.y = y;
	this.dx = dx;
	this.dy = dy;
	this.radius = radius;
	this.minRadious = radius;
	this.color = colorArray[Math.floor(Math.random() * colorArray.length)];
	this.draw = function(){
		c.beginPath();
		c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
		c.fillStyle = this.color;
		c.fill()
	}
	this.update = function(){
		if(this.x + radius > innerWidth || this.x - this.radius < 0){
			this.dx = -this.dx;
		}
		if(this.y + radius > innerHeight || this.y - this.radius < 0){
			this.dy = -this.dy;
		}
		this.x += this.dx;
		this.y += this.dy;
		if( mouse.x - this.x < 50 && mouse.x - this.x > -50 &&
			mouse.y - this.y < 50 && mouse.y - this.y > -50
		){
			if (this.radius < maxRadious){
				this.radius += 1;
			}
		}else if (this.radius > this.minRadious){
			this.radius -= 1;
		}
		this.draw();
	}
}
function Circle ( x , y , dx , dy , radius ) { this . x = x ; this . y = y ; this . dx = dx ; this . dy = dy ; this . radius = radius ; this . minRadious = radius ; this . color = colorArray [ Math . floor ( Math . random ( ) * colorArray . length ) ] ; this . draw = function ( ) { c . beginPath ( ) ; c . arc ( this . x , this . y , this . radius , 0 , Math . PI * 2 , false ) ; c . fillStyle = this . color ; c . fill ( ) } this . update = function ( ) { if ( this . x + radius > innerWidth || this . x - this . radius < 0 ) { this . dx = - this . dx ; } if ( this . y + radius > innerHeight || this . y - this . radius < 0 ) { this . dy = - this . dy ; } this . x += this . dx ; this . y += this . dy ; if ( mouse . x - this . x < 50 && mouse . x - this . x > - 50 && mouse . y - this . y < 50 && mouse . y - this . y > - 50 ) { if ( this . radius < maxRadious ) { this . radius += 1 ; } } else if ( this . radius > this . minRadious ) { this . radius -= 1 ; } this . draw ( ) ; } }
Object Oriented Function for Multiple Circles
Object Oriented Function for Multiple Circles
// For interactivity