unusual mouse click issue with newbie code

[Michael Lomman]

A little background. I am trying to create a program that creates a string of rising bubbles from the mouse pointer, when i moves, and that change size when the mouse is pressed. I also want to create a 'pop' effect when the bubbles reach high enough on the screen. 

I can make the bubbles rise and change shape but the pop effect is causing some issues, with interesting results.

The first bubble 'pops' and all the bubbles disappear. Clicking the mouse on the screen causes bubbles to intermittently appear. 

Hoping someone may be able to offer some advice.

<code>

int circleWidth = 25;
int circleHeight = 25;
float s;

// an array to store a list of bubbles

ArrayList<array> risingBubbles;
risingBubbles = new ArrayList<array>();    // create a new array list risingBubbles()

void setup() {
 size(400,400);
 background(#49BDEF);
 fill(255,255,0);
 stroke(255);
}//end setup

void star() {
 line(risingBubble[0],risingBubble[1],risingBubble[0],risingBubble[1]+7);
 line(risingBubble[0],risingBubble[1],risingBubble[0]+5,risingBubble[1]-5);
 line (risingBubble[0],risingBubble[1],risingBubble[0]-5,risingBubble[1]-5);
 fill(#49BDEF);
 noStroke();
 ellipse(risingBubble[0],risingBubble[1],4,4);
}

void draw(){
 background(#49BDEF);
//is mouse moving inside canvas?
if (pmouseX != mouseX || pmouseY !=mouseY){
 newRisingBubble();
} // end if
frameRate(10);
   
 for (int i = 0; i<risingBubbles.size() ;i++){
 
 risingBubble = risingBubbles.get(i);
 
 ellipse(risingBubble[0],risingBubble[1],circleWidth,circleHeight);
 
 risingBubble[1] = risingBubble[1] - 15;
 
 //remove bubble from array when y value is 20, run star();                        // star()  doesn't work yet.
 if (risingBubble[1]<20) {
 
 star();
       risingBubbles.remove(i);
     
 }//end if
 
 }//end for

}//end draw

void newRisingBubble() {
 
 risingBubbles.add([mouseX,mouseY]);
 
 }//end newRisingBubble
 
void mousePressed() {
 circleWidth = 35;
 circleHeight=35;
 fill(255,0,0);
}//end mousePressed


void mouseReleased(){
 circleWidth = 25;
 circleHeight = 25;
 fill(255,255,0);
}//end mouseReleased

</code>

[Lee Brunjes]

So, I'm on my phone so I can't test, but it looks like the star function turns off stroke and sets the fill color to the background color.

This will cause the bubbles to not appear on the canvas because the canvas does not reset after each call to draw. The reason that you are seeing changes after clicks is that the fill value is set again in mouse pressed and released.

The fix is to set a stroke and fill again at the end of the star function.

Hope that helps,

Lee

--
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to processingjs...@googlegroups.com.
To post to this group, send email to proces...@googlegroups.com.
Visit this group at https://groups.google.com/group/processingjs.
For more options, visit https://groups.google.com/d/optout.

[Michael Lomman]

Many Thanks Lee.

You hit the nail on the head so to speak. That fixed the issue I had.

I suspected it might be something simple.

Again many thanks.

To unsubscribe from this group and stop receiving emails from it, send an email to processingjs+unsubscribe@googlegroups.com.

To post to this group, send email to proces...@googlegroups.com.
Visit this group at https://groups.google.com/group/processingjs.
For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to the Google Groups "Processing.js" group.

To unsubscribe from this group and stop receiving emails from it, send an email to processingjs+unsubscribe@googlegroups.com.