let bubbles;

​

// Store mouse press position so that a bubble can be created there

let mousePressX = 0;

let mousePressY = 0;

​

// Remember whether bubble is currently being created

let creatingBubble = false;

​

// Convert saved Bubble data into Bubble Objects

function loadData(bubblesData) {

  bubbles = [];

  for (let bubble of bubblesData) {

    // Get x,y from position

    let x = bubble.x;

    let y = bubble.y;

​

    // Get radius and name

    let radius = bubble.radius;

    let name = bubble.name;

​

    // Put object in array

    bubbles.push(new Bubble(x, y, radius, name));

  }

}

​

function setup() {

  let p5Canvas = createCanvas(640, 360);

​

  // Get saved data

  let savedData = getItem('bubbles');

​

  // If no data has been saved yet

  if (savedData === null) {

    // Use an empty array to start

    loadData([]);

  } else {

    // Otherwise convert the data to Bubble objects

    loadData(savedData);

  }

​

  // When canvas is clicked, call saveMousePress()

  p5Canvas.mousePressed(saveMousePress);

​

  ellipseMode(RADIUS);

  textSize(20);

​

  describe(

    'When the cursor clicks on the canvas, drags, and releases, a black outline circle representing a bubble appears on the white background. A prompt asks to name the bubble, and this name appears under the circle when the cursor hovers over it.'

  );

}

​

function draw() {

  background(255);

​

  // Display all bubbles

  for (let bubble of bubbles) {

    bubble.display();

  }

​

  // Display bubble in progress

  if (creatingBubble === true) {

    let radius = dist(mousePressX, mousePressY, mouseX, mouseY);

    noFill();

    stroke(0);

    strokeWeight(4);

    circle(mousePressX, mousePressY, radius);

  }

​

  // Label directions at bottom

  textAlign(LEFT, BOTTOM);

  fill(0);

  noStroke();

  text('Click and drag to add bubbles.', 10, height - 10);

}

​

// Save current mouse position to use as next bubble position

function saveMousePress() {

  mousePressX = mouseX;

  mousePressY = mouseY;

  creatingBubble = true;

}

​

// Add a bubble if in the process of creating one

function mouseReleased() {

  if (creatingBubble === true) {

    addBubble();

    creatingBubble = false;

  }

}

​

// Create a new bubble each time the mouse is clicked.

function addBubble() {

  // Add radius and label to bubble

  let radius = dist(mousePressX, mousePressY, mouseX, mouseY);

  let name = prompt('Enter a name for the new bubble');

​

  // If the user pressed 'Okay' and not 'Cancel'

  if (name !== null) {

    // Append the new JSON bubble object to the array

    bubbles.push(new Bubble(mousePressX, mousePressY, radius, name));

    storeItem('bubbles', bubbles);

  }

}

​

// Bubble class

class Bubble {

  constructor(x, y, radius, name) {

    this.x = x;

    this.y = y;

    this.radius = radius;

    this.name = name;

  }

​

  // Check if mouse is over the bubble

  mouseOver() {

    let mouseDistance = dist(mouseX, mouseY, this.x, this.y);

    return mouseDistance < this.radius;

  }

​

  // Display the bubble

  display() {

    stroke(0);

    noFill();

    strokeWeight(4);

    circle(this.x, this.y, this.radius);

    if (this.mouseOver() === true) {

      fill(0);

      noStroke();

      textAlign(CENTER);

      text(this.name, this.x, this.y + this.radius + 30);

    }

  }

}