The assignment is to create a web application that uses p5 to display data from a dataset of my choosing.
I wanted to create an app that guided you through different stretches for every muscle group. This would be useful for people who are new to exercising, or practicing mobility, and want to learn specific stretches and the muscle groups that they target. I want to have a character that has clickable body parts that when selected show an illustration and provide a description on the particular stretch.
I don’t have any current plans to incorporate the p5 library.
In order to create an image with different clickable sections, I had to create an SVG. This can be done with any vector-based illustration software, and I chose Adobe Fresco because it is available on iPad, and it would give the more organic, hand-drawn look that I was going for.
I loosely referenced some anatomical diagrams, but I kept to a pretty abstract and general representation of each of the muscle groups. I wanted to create a character that was cute, but still gave general anatomical information, which was a bit difficult to not make it feel uncanny-valley-ish.
In order to select each of the muscle groups differently, they all had to be in different layers. I wasn’t super comfortable naming and rearranging layers in Fresco, but they make it really easy to transfer the file to Illustrator for more precise editing and such. I hit share, and then open in Illustrator for Desktop, and it automatically opened the file in illustrator on my laptop without me touching anything! Idk why this blew me away.
The names that I give the layers will eventually become the id names when I exported it as an SVG, so I made sure to name the layers according to the naming conventions I wanted.
When I exported the SVG, it used classes to give each layer a different color. This might be helpful in some situations, but since each color would correlate to the muscle group, and therefore the ID it was assigned, this wasn’t necessary.
I also wanted to use the same colors throughout the rest of the site for a more pleasing and cohesive look, so I decided to use CSS variables for the first time. I gave each color a name based on the muscle group it correlated to, so the colors could be easily accessed in javascript too. I asked chatGPT to help me with the javascript needed to get the variables from css.
// Get color variable from css file (chatGPT)
let hoverColor = getComputedStyle(root).getPropertyValue('--' + hoveredBodyPart + '-color').trim();Ï
For the javascript, I went through a couple of iterations, becoming more efficient with each one. I had to assign different colors to each of the shapes based on the ID, and at first I was doing each one individually. I eventually realized that I could put the muscle group names into an array, and since all of the ID names had consistent naming, I could use a for loop to do the same thing for each of them. At first, I had the color values in an array as well, but I later realized it was more efficient to use CSS variables. I used this function to change the color of each group when it was hovered over, as well as displaying the name of the group.
function hover(bodyPart) {
//grabs the color from the css variables (thanks, chatGPT)
let hoverColor = getComputedStyle(root).getPropertyValue('--' + bodyPart + '-color').trim();
//composes the element Id string
let bodyPartElementId = 'bendi-' + bodyPart;
let bodyPartElement = document.getElementById(bodyPartElementId);
let muscleGroupElement = document.getElementById('muscle-group');
if (bodyPartElement) {
//set all body parts to white first.
bodyPartElement.style.fill = "white";
//when mouse hovers over element, set to its color
bodyPartElement.addEventListener('mouseover', function () {
console.log(bodyPartElementId + " hovered");
bodyPartElement.style.fill = hoverColor;
muscleGroupElement.innerHTML = bodyPart;
muscleGroupElement.style.backgroundColor= hoverColor;
});
//when mouse moves off, set to white.
bodyPartElement.addEventListener('mouseout', function () {
console.log(bodyPartElementId + " unhovered");
bodyPartElement.style.fill = "white";
muscleGroupElement.innerHTML = "";
});
} else {
console.error("Element with ID " + bodyPartElementId + " not found!");
}
}
As of right now, here is how Bendi is performing: