About
The Bees Project is a digital environment where the user can interact with a model of a honeybee. The purpose of this project is to help the user learn about the anatomy of honeybees in a hands-on digital environment.
Links
Prototype demos of the Bees Project can be played in web browsers using the following links.
Demo 02: Placeholder Model Demo
Functionality
The Bees Project currently contains the following functionalities.
- Rotate Model
- Scale Model
- Object Spread
- Group Selection
- Label Display Options
- Hide / Show Group
- Mouse Click Selection
- Mouse Look
- Camera Center
Rotate Model:
The user can rotate the model of the honeybee using the sliders on the UI control panel. There is a slider for each of the three primary axes: X, Y, and Z. The Y axis slider will always rotate the model around the world Y axis. The X and Z axis sliders will rotate the honeybee model around its local X and Z axes.
Scale Model:
The user can alter the scale of the honeybee model by using the scale slider on the UI control panel. This slider allows the user to make the model larger or smaller.
Object Spread:
The user can expand the segments of the honeybee model away from each other using the object spread slider. This slider allows the user to spread the model pieces apart much like the exploded view of an engine.
Group Selection:
The user can select specific groups of body parts using the group buttons on the UI in the upper left corner of the screen. Selecting one of these groups allows the user to expand just the pieces of the model related to the selected group instead of the entire model at once.
Label Display Options:
The user can alter which pieces of the honeybee model have visible labels using the label display options. Currently the user can select to hide all labels, show all labels, show labels for only the currently selected group, or show only the label of the single currently selected object/piece.
Hide / Show Group:
The user can hide or display the objects in each group by clicking the hide/show group button for the corresponding group. These buttons are located in the top left corner of the screen just to the right of each sections group name.
Mouse Click Selection:
The user can select and target individual pieces of the honeybee model by clicking them with the left mouse button. Selecting an object will make it so that the object spread slider only moves the group the selected object is part of. Selecting an object will also display its individual label or its group labels depending on the current label options if labels are not set to all be hidden. If the user clicks on a spot on the screen not containing an object or the object clicked on is not part of a group (such as the platform under the model) then all groups will be selected.
Mouse Look:
The user can change the direction the camera is facing by moving the mouse while holding down the right mouse button. This will pan the camera in the direction corresponding to the mouses movement direction.
Camera Center:
The user can center the viewpoint of the camera by clicking the camera center buttons on the UI. The button labeled “Center Camera” will recenter the camera on the middle of the honeybee model. The button labeled “Center On Target” will recenter the camera view on the currently selected object.
Development Steps
The development steps taken to create this project are detailed below.
- Rotate Model Functionality
- Ratio Movement Functionality
- RatioGroup Functionality
- TargetRatioGroup Functionality
- Group Color Change Functionality
- Hide/Peel Group Functionality
- First Demo: Greybox Demo
- Model Scaling
- Mouse Look Functionality
- Focus Camera Functionality
- Cycle Focus Point Functionality
- Mouse Select Functionality
- Label Options Functionality
- Placeholder Model
- Second Demo: Placeholder Model Demo
Rotate Model Functionality:
The first step to creating the functionality in this project was to give the user the ability to rotate the model. So I created a small control panel containing a slider and wrote code to connect the sliders movement to the rotational value of a cube relative to the worlds Y-axis. Once I had that working, I added sliders connected to the cubes local X and Z axes.
The images below display the greybox cube being manipulated around each axis using the corresponding rotation slider.
Y Axis:
X Axis:
Z Axis:
Ratio Movement Functionality:
The next major feature I needed to create and integrate into the grey-box bees project was the ratio movement functionality. This feature allows the user to move an object between a start point and an end point using a slider. I knew this feature had to be dynamic so that no matter where the start and end points were moved to the functionality would remain consistent. Implementing this feature was the first step toward giving the user the ability to expand sets of segments of a single model apart at the same time to create an “exploded view” of the model.
The image below displays an example of the greybox ratio movement object. The moving object is the blue cube. The movement start point is the green sphere. The movement end point is the red sphere.
Ratio Groups Functionality:
The next step I took was to create ratio groups. These groups allow the user to manipulate the ratio movement positions of multiple objects at once using a single slider. When the slider is moved each object in the ratio group is moved between its start and end points a distance relative to the ratio provided by the slider.
The images below show the moving objects (blue cubes) each moving from their own starting point (green spheres) to their end point (red spheres) as a group based on the position of the moving object slider.
Target Ratio Groups Functionality:
Once I had implemented ratio groups into the project, I needed a way to dynamically select specific movement groups as the target for receiving the ratio from the slider. Implementing this functionality meant that the user could move any ratio group with a single slider, rather than requiring an individual slider for each group.
In the image below group 01 has been selected, allowing the user to only move those objects when moving the moving objects slider.
Group Color Change Functionality:
The next feature I added to the project was the group color change functionality. This feature changes the color of the moving objects to display which group is currently targeted to move when the slider is moved. I also added a version of this feature that would change the color of the objects in each group to represent which group they belonged to.
The image below displays each object in the greybox demo changed to match the color of their corresponding group.
Hide/Peel Groups Functionality:
The hide /peel group functionality was the next feature I added. This feature allows the user to hide all of the objects in the currently targeted group. Once we have integrated complex anatomical models into the bees project, this feature will allow the user to hide or peel layers away to more easily view the content underneath.
First Demo – Greybox Demo:
At this point, having built and integrated most of the basic functionalities into the project, it seemed like a good point to make an initial greybox demo. Posting this first demo allowed me to test the functionalities in a live web application. This also allowed me to start getting feedback from my team mates to make sure the features and functionalities matched up correctly with the group’s ideas, intents, and visions of how they should work.
I built and posted the first demo of the graybox bee project at the link below.
Model Scaling Functionality:
Next, I wanted to give the user the ability to make the model larger or smaller to get a better view of it. So, I created the model scale slider. This slider changes the scale of the entire model, shrinking or enlarging it based on the slider’s movement.
The images below display the model being scaled smaller and scaled larger using the model scale slider.
Mouse Look Functionality:
I wanted the give the user the ability to change the direction the camera was facing in case any of the model pieces were expanded or scaled in a way that placed them outside of the screen. To accomplish this, I added the mouse look functionality. This feature allows the user to pan the camera view around the scene by moving the mouse while holding down the right mouse button.
Focus Camera Functionality:
Once I implemented the mouse look feature, I realized I had created the need for a feature that would recenter the camera. So, I created the center camera feature which returns the camera view to point to the center of the model. When I implemented this feature, I noticed the potential for an additional version of this feature that might be helpful to the user, the focus camera feature. The focus camera functionality allows the user to center the camera on specific pieces of the model, rather than just centering on the middle of the entire model itself.
Cycle Focus Point Functionality:
Now that I had created a feature that would focus the camera view on specific objects in the scene, I needed a way for the user to dynamically cycle through which object they wanted to focus on. To do this, I created the cycle focus point feature which can be accessed by the user through the buttons labeled next focus and previous focus.
Mouse Select Functionality:
After testing out the cycle focus feature for a little bit, I decided I wanted to create a more intuitive way for the user to directly select focus targets, so I created the mouse select functionality. This feature allows the user to target objects directly by clicking on them with the left mouse button instead of having to cycle through all the potential targets in the scene to find the object they want to target.
Label Options Functionality:
The next feature I added was labels for each object in the scene as well as a set of options related to dynamically displaying the labels. The label options allow the user to hide all labels, show all labels, show the labels for only the currently selected group objects, or show only the label of the currently targeted focus object.
The images below display the label options for displaying all labels, displaying group labels, and only displaying the label for the currently selected object.
Placeholder Model:
The next step in development was to find and add a placeholder model. After a short search on Sketchfab I found the bee model that would work as a placeholder, which can be found HERE. Importing and editing this model into smaller pieces allowed me to build a version of the demo project which tested the basic functionality of the project in a context which is closer to what the final state may look like. This version allowed me to test how group objects, the mouse select, and other features would work when actual models were integrated, instead of the original greybox cubes from the first demo.
Second Demo – Placeholder Model Demo:
Once I implemented the placeholder model pieces, build a new demo of the project, tested the features, and fixed any bugs found, it was time to build and post another demo for testing and feedback.
The second demo can be found and played at the following link:
Demo 02: Placeholder Model Demo
