Interactive Ball

Code:

var brushSize;

var BallX;

var BallY;

var ballSize;

var xSpeed;

var ySpeed;

var bColor;

function setup() {

// put setup code here

createCanvas(1250, 620);

brushSize = 40;

ballX = 50;

ballY = 100;

ballSize = 65;

xSpeed = 10;

ySpeed = 5;

bColor = color(random(0, 255), random(0, 255), random(0,255))

mColor = color(0, 0, 0)

}

function draw() {

// put drawing code here

background(250);

fill(mColor);

ellipse(mouseX, mouseY, brushSize, brushSize);

fill(bColor);

ellipse(ballX, ballY, ballSize, ballSize);

ballX += xSpeed;

ballY += ySpeed;

if ((ballX > (1250-ballSize/2))||(ballX < ballSize/2)){

xSpeed = -xSpeed;

bColor = color(random(0, 255), random(0, 255), random(0, 255))

}

if ((ballY > (620-ballSize/2))||(ballY< ballSize/2)){

ySpeed = -ySpeed;

bColor = color(random(0, 255), random(0, 255), random(0, 255))

}

//if ((ballX = (mouseX - brushSize/2))&&(ballX = (mouseX + brushSize/2)){

if ((mouseX > (ballX-ballSize/2))&&(mouseX < (ballX+ballSize/2))&&(mouseY > (ballY-ballSize/2))&&(mouseY < (ballY+ballSize/2))){

xSpeed = -xSpeed;

ySpeed = -ySpeed;

bColor = color(random(0, 255), random(0, 255), random(0, 255))

mColor = color(random(0,255), random(0, 255), random(0, 255))

}

}

function mousePressed(){

background(250);

}

---

My goal is to create a program in which your mouse directly effect the ball. Eventually I want the mouse to draw and whatever it draws effects the ball still; sort of creating an environment for the ball to bounce around in.

The problem I am running into right now, is that when the ball touches the mouse, only the ySpeed changes and the ball gets stuck in the mouse, jittering in place, changing colors rapidly. I feel like if the xSpeed changed also it would bounce away before getting stuck in the ySpeed loop. I am not sure though.