​

var bubble, circle, popped;

var w2, h2, d;

var once = false;

​

function preload() {

  bubble = loadImage("Transparent_Bubble_PNG_Clip_Art_Image.png");

  popped = loadSound("cartoonpop.wav");

}

​

function setup() {

  createCanvas(400, 400);

  imageMode(CENTER);

  rectMode(CENTER);

  w2 = width / 2;

  h2 = height / 2;

}

​

function draw() {

  background(220);

  d = dist(mouseX, mouseY, w2, h2);

  bubblePop();

}

​

function bubblePop() {

  // when mouse is outside bubble, bubble is displayed

  if (d > 50) {

    image(bubble, w2, h2, 100, 100);

  } else {

    // when mouse touches bubble, it disappears

    bubble = 0; // bubble images disappears

    if (!once){ // if once is not true, sound plays

    popped.play();

    once = true;

    }

  }

}