Algorithm Update


Challenge: How do I adapt Dan Shiffman’s distance algorithm so that the starting point on the path is always “the hive”?

For the sake of both clarity and accuracy, I decided that all students should begin their paths at the same point–the point where hive is located. This meant that I had to adjust the distance algorithm, because Dan Shiffman had designed it so that any point could be used for the starting position. After a bit of fumbling about in the JavaScript file, I remembered how the algorithm works! This is the sequence in which the path order gets tested (assuming a path array with a length of eight):

[0,1,2,3,7,6,5,4] etc.

What this means is that all the possibilities for any “starting position” (the point at index 0) are tested before the starting position is swapped. All I had to do was stop looping as soon as the first element in my array was no longer was equal to zero:

if (order[0] != 0) {

Once I figured that out, I was able to log the shortest and longest paths, seen below. I want the students to not only have access to the “optimal” path, but also be able to compare it to the “least optimal” path.


Serial Communication from Arduino to p5


Finally, it was time to get my Arduino to talk to my p5 sketch. The last time I tried this I made a big mistake with my setup so the Arduino was constantly sending serial messages and overloading the serial port buffer. This created a huge lag on the p5 end. I’ve learned from my mistakes and now am checking for state change, so the only time a message will be sent is when the user is pressing a button. When a button is pressed, the Arduino will print out a string with the corresponding flower’s color.

In order to receive messages, I’m using Shawn Van Every’s p5.serialport library. In the serialEvent() function I’m using the serial.readLine() method. I then loop through my flower objects to check for the matching color, so I can draw a path to the correct flower.

As you can see in the video below, everything seems to be working! Now I need to make it work with seven giant arcade buttons, instead of three tiny push buttons.


p5js Prototype and Algorithm


Before I began prototyping in p5, I was lucky to be able to follow a few of Dan Shiffman’s Coding Train tutorials on the traveling salesman problem. I’ll be using Dan’s distance algorithm for my installation. I got Dan’s code working, which you can see in the image below. 512 is the path distance measured in pixels. The purple path on top is the one that has the shortest total distance, and the white path below is the current path being tested. It’s a brute-force algorithm, so every single possible path is tested in order to find the optimal route.

In office hours I asked him if it made sense to run the algorithm concurrently with my flower visualization program, and he suggested that I hard code the flower positions and store the optimal distance beforehand to make my life easier.

Now that I didn’t have to worry about the algorithm, I was able to start the fun part: designing a p5 prototype that a user could interact with! My goal is to get data on the flower path from the arcade buttons, but in the meantime I wrote a function to test for mouse clicks on the flowers (represented by colorful dots).

Here is my wishlist for my javascript program:

  • User inputs for name (aka worker bee name), class (aka your hive), and attempt number
  • Save path order and distance to a JSON file
  • Compare Button to display all path attempts side by side
  • Restart Pollination Training Button

Push Button Test


Before I start setting up my arcade buttons, I need to make sure that I can reliably send messages with basic push buttons on a breadboard. For testing purposes, I’m just using three buttons instead of seven—a red, green, and blue button to represent red, green, and blue flowers.

I needed to detect state change in any of the three buttons. This is crucial, because I only want to send a message when a button is moving from LOW to HIGH—otherwise I’ll clog up the serial port with unnecessary information.

In Javascript I would create a “button object” or “flower object” but I don’t think such a thing exists in C. So instead I made a series of corresponding arrays: one for pin numbers, one for the current states, one for the previous states, and one for the message to be sent (the color of the flowers). Then I used two for loops: one to declare each button pin as an input, and one to read the pins and test for state change.

The code totally works! On to the p5 side of things.