# Help with Interactive Periodic Table

**URL:** <https://discourse.processing.org/t/help-with-interactive-periodic-table/18898>\
**Category:** Coding Questions\
**Created:** [March 22, 2020, 1:21pm UTC](https://discourse.processing.org/t/help-with-interactive-periodic-table/18898 "2020-03-22T13:21:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![HumanoidX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humanoidx/32/8506_2.png) [@HumanoidX](https://discourse.processing.org/u/HumanoidX)\
**Post date:** [March 22, 2020, 1:21pm UTC](https://discourse.processing.org/t/help-with-interactive-periodic-table/18898/1 "2020-03-22T13:21:16Z")

</div>

Hi?

I’m working on an interactive periodic table, and I want the elements to show their data when my mouse hover over it.

This is what I have:

> **[Periodic\_Table\_2\_0.pde](https://www.dropbox.com/s/e4lhec52bri75xc/Periodic_Table_2_0.pde?dl=0)**
>
> Shared with Dropbox

When I hover over Hydrogen, it appear, and when I continue to hover to other elements it will disappear, but if I continue to hover to the background it does nothing! 😬 I know why it work this way, but don’t know how to fix it.

Please help me! This is my first post, so please help! I register my account just to ask this question. Please, and thanks!

Sorry for any grammar mistake.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 22, 2020, 4:25pm UTC](https://discourse.processing.org/t/help-with-interactive-periodic-table/18898/2 "2020-03-22T16:25:15Z")

</div>

Hello and welcome to the forum !

Great to have you here!

just set element = “”; prior to testing

If I may say, your program looks beautiful.

You might get leaner code if you would look into Object oriented programming.

Then you would have a class Element and derived from it a list with elements you can for loop over.

Warmest regards,

Chrisir

```auto

void checkHitbox() {

  element = "";

  test(1, 1, "H");

```

---

<div class="post-metadata">

**Author:** ![HumanoidX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humanoidx/32/8506_2.png) [@HumanoidX](https://discourse.processing.org/u/HumanoidX)\
**Post date:** [March 23, 2020, 2:17am UTC](https://discourse.processing.org/t/help-with-interactive-periodic-table/18898/3 "2020-03-23T02:17:01Z")

</div>

Thanks for the warm reply! 🤎 🤎 🤎 🤎  
I solved it!  
I added more hitboxes around the table so that when my cursor touched them, the variable “element” will turn to “~”(anything that represent “nothing” to you).

P.S. :  
Sorry! I’m a noob at classes and arrays!!! ☹

---

<div class="post-metadata">

**Author:** ![HumanoidX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humanoidx/32/8506_2.png) [@HumanoidX](https://discourse.processing.org/u/HumanoidX)\
**Post date:** [March 23, 2020, 2:27am UTC](https://discourse.processing.org/t/help-with-interactive-periodic-table/18898/4 "2020-03-23T02:27:24Z")

</div>

```auto
  test(0,0,"~");
  test(1,0,"~");
  test(2,0,"~");
  test(2,1,"~");
  test(3,1,"~");
  test(3,2,"~");
  test(3,3,"~");
  test(4,3,"~");
  test(5,3,"~");
  test(6,3,"~");
  test(7,3,"~");
  test(8,3,"~");
  test(9,3,"~");
  test(10,3,"~");
  test(11,3,"~");
  test(12,3,"~");
  test(12,2,"~");
  test(12,1,"~");
  test(13,1,"~");
  test(14,1,"~");
  test(15,1,"~");
  test(16,1,"~");
  test(17,1,"~");
  test(17,0,"~");
  test(18,0,"~");
  test(19,0,"~");
  test(19,1,"~");
  test(19,2,"~");
  test(19,3,"~");
  test(19,4,"~");
  test(19,5,"~");
  test(19,6,"~");
  test(19,7,"~");
  test(19,8,"~");
  test(18,8,"~");
  test(17,8,"~");
  test(16,8,"~");
  test(15,8,"~");
  test(14,8,"~");
  test(13,8,"~");
  test(12,8,"~");
  test(11,8,"~");
  test(10,8,"~");
  test(9,8,"~");
  test(8,8,"~");
  test(7,8,"~");
  test(6,8,"~");
  test(5,8,"~");
  test(4,8,"~");
  test(3,8,"~");
  test(2,8,"~");
  test(1,8,"~");
  test(0,8,"~");
  test(3,7,"~");
  test(3,6,"~");
  test(0,7,"~");
  test(0,6,"~");
  test(0,5,"~");
  test(0,4,"~");
  test(0,3,"~");
  test(0,2,"~");
  test(0,1,"~");
  test(1,9,"~");
  test(1,10,"~");
  test(1,11,"~");
  test(2,11,"~");
  test(3,11,"~");
  test(4,11,"~");
  test(5,11,"~");
  test(6,11,"~");
  test(7,11,"~");
  test(8,11,"~");
  test(9,11,"~");
  test(10,11,"~");
  test(11,11,"~");
  test(12,11,"~");
  test(13,11,"~");
  test(14,11,"~");
  test(15,11,"~");
  test(16,11,"~");
  test(17,11,"~");

```