constructor(name, graduation_year, grade) {

    this.name = name;

    this.graduation_year = graduation_year;

    this.grade = grade;

  }

​

  get_tooltip() {

    return `${this.name}\nClass of ${this.graduation_year}\nGrade ${this.grade}`;

  }

}

​

class Classroom {

  constructor() {

    this.students = [];

    this.selected_student = null;

  }

​

  add_student(student) {

    this.students.push(student);

  }

​

  remove_student(student) {

    const index = this.students.indexOf(student);

    if (index > -1) {

      this.students.splice(index, 1);

    }

  }

​

  draw_students() {

    let x = 50;

    let y = 50;

    const radius = 30;

    for (const student of this.students) {

      fill(255, 255, 255);

      stroke(0, 0, 0);

      ellipse(x, y, radius * 2);

      fill(0, 0, 0);

      textSize(12);

      textAlign(CENTER, CENTER);

      text(student.name, x, y);

      if (this.selected_student === student) {

        const tooltip = student.get_tooltip();

        const tooltip_width = textWidth(tooltip);

        const tooltip_x = x - tooltip_width / 2 +20;

        const tooltip_y = y - radius - 10;

        fill(255, 255, 200);

        rect(tooltip_x, tooltip_y-5, tooltip_width-20, 50);

        fill(0, 0, 0);

        textSize(12);

        textAlign(CENTER, CENTER);

        text(tooltip, tooltip_x + 70, tooltip_y + 20);

      }

      x += radius * 3;

      if (x > width - radius * 2) {

        x = 50;

        y += radius * 3;

      }

    }

  }

​

  mouseMoved() {

    let selected_student = null;

    let x = 50;

    let y = 50;

    let radius=30;

    for (const student of this.students) {

      const d = dist(mouseX, mouseY, x, y);

      if (d < radius) {

        selected_student = student;

        break;

      }

      x += radius * 3;

      if (x > width - radius * 2) {

        x = 50;

        y += radius * 3;

      }

    }

    this.selected_student = selected_student;

  }

}

​

function setup() {

  createCanvas(600, 400);

  classroom = new Classroom();

  const student1 = new Student("John", 2023, 11);

  classroom.add_student(student1);

  const student2 = new Student("Jane", 2024, 10);

  classroom.add_student(student2);

  const student3 = new Student("Mark", 2022, 12);

  classroom.add_student(student3);

  const student4 = new Student("Alice", 2025, 9);

  classroom.add_student(student4);

  const student5 = new Student("Linda", 2023, 11);

  classroom.add_student(student5);

}

​

function draw() {

  background(200);

  classroom.draw_students();

}

​

function mouseMoved() {

  classroom.mouseMoved();

}

​