Visualizations

Jump to bottom
Yue Wu edited this page May 6, 2021 · 4 revisions

Overview

When the visualizations begin, the avatar will walk to the top of the hill, and three replicas will appear. The original avatar is called Displayer, and the three avatars that will perform the visualizations are called Performers. The performer in the center will be directly controlled by the user; the other two are "presets" that reflect a relatively more healthy and a more unhealthy lifestyle. The performers can perform three visualizations:Activity, Prius, and Stats. There is also a Time Progress Manager to control the time and path selection. Additionally, there are the Visualizers to help with Activity and Prius visualizations.

Activity

Activity simulates the character's motion ability. The performers will be running on the street. A Blend Tree is used to control the character's animation from running to walking. When the character is in really bad shape, they will be unable to even walk, and will have to stay in a wheelchair.

We will also simulate motion by setting up different Props and making them move backwards. The kind of props are random, and their speed will reflect the running speed of the avatar.

Prius

There are three organs -- heart, liver, kidney -- for visualization. These displays do not extend Visualizer; they extend Organ Display and are managed by PriusVisualizer.

The organs will surround the avatar and will have a circular status bar around them, indicating their health levels. We apply a Billboard effect on the organs and status bars so they will always face the user.

Below are the animations for the organs:

Heart: pumping animation. The slower the heart pumps, the healthier the character is.

Liver: the stacking of bumps on the liver, causing fatty liver. This is also achieved with blend shapes.

Kidney: the stacking of bumps on the kidney, causing diabetes. This is also achieved with blend shapes.

Internals

There is a hidden "Internals" visualization within the Prius visualization. When the user approaches (move their device closer to) the displayer on the top of the hill, the avatar will fade out, and the internals view will pop out.

The internals view is meant to demonstrate how the Bodylogical simulator works: it collects the avatar's current lifestyle, calculates the health data, and then outputs the resulting lifestyle. The different "blocks" represent different organs. You can see the biometrics on the blocks themselves, with the lines as "connections". There will be sparkles traveling among the different metrics, representing data flow and calculation done inside the simulator.

Stats

We used to have a ribbon chart visualization (https://youtu.be/qqq2l5SmZmE?t=135), but it looked messy in 3D space, so we decided to scrap it. Instead, we will create a path on the street, using the colors to indicate the health status of the performer.

Time Progress and Path Selection

This manager includes two functionalities: toggling time and toggling path/choice. They are put together because in an earlier version these two come together, but now that they are separated, they can be separated into two scripts.

Time is used in Activity and Prius, to simulate how the character would be like in the future. The main method is UpdateYear(), while the "music player" uses TimePlayPause() and TimeStop() which just wraps the original method. The Slider interactable will give a value of 0 to 1; the value first goes through the adapter to be converted to a year value, and then sent to the method. Updating the year in one visualization will affect the other as well.

To achieve a fluid year progression, UpdateYear accepts a float instead of an int. It will calculate the score of two nearest integer values and Lerp them to get an intermediate value (for example, given the index 4.3, the script will calculate the score at index 4 and index 5, and then lerp to get the score of index 4.3), which is used to update the visualizations. Although the slider handle moves each frame, the score is recalculated once a second to avoid consuming too much resource.

Path is used in Line Chart. There will be a panel floating to the right of the switcher showing the lifestyles of each path. The main method is UpdatePath(). Updating the path will affect Activity and Prius as well.

Clone this wiki locally

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Visualizations
Jump to bottom

Yue Wu edited this page May 6, 2021
·
4 revisions
Overview
When the visualizations begin, the avatar will walk to the top of the hill, and three replicas will appear. The original avatar is called Displayer, and the three avatars that will perform the visualizations are called Performers. The performer in the center will be directly controlled by the user; the other two are "presets" that reflect a relatively more healthy and a more unhealthy lifestyle. The performers can perform three visualizations:Activity, Prius, and Stats. There is also a Time Progress Manager to control the time and path selection. Additionally, there are the Visualizers to help with Activity and Prius visualizations.
Activity
Activity simulates the character's motion ability. The performers will be running on the street. A Blend Tree is used to control the character's animation from running to walking. When the character is in really bad shape, they will be unable to even walk, and will have to stay in a wheelchair.
We will also simulate motion by setting up different Props and making them move backwards. The kind of props are random, and their speed will reflect the running speed of the avatar.
Prius
There are three organs -- heart, liver, kidney -- for visualization. These displays do not extend Visualizer; they extend Organ Display and are managed by PriusVisualizer.
The organs will surround the avatar and will have a circular status bar around them, indicating their health levels. We apply a Billboard effect on the organs and status bars so they will always face the user.
Below are the animations for the organs:
Heart: pumping animation. The slower the heart pumps, the healthier the character is.
Liver: the stacking of bumps on the liver, causing fatty liver. This is also achieved with blend shapes.
Kidney: the stacking of bumps on the kidney, causing diabetes. This is also achieved with blend shapes.
Internals
There is a hidden "Internals" visualization within the Prius visualization. When the user approaches (move their device closer to) the displayer on the top of the hill, the avatar will fade out, and the internals view will pop out.
The internals view is meant to demonstrate how the Bodylogical simulator works: it collects the avatar's current lifestyle, calculates the health data, and then outputs the resulting lifestyle. The different "blocks" represent different organs. You can see the biometrics on the blocks themselves, with the lines as "connections". There will be sparkles traveling among the different metrics, representing data flow and calculation done inside the simulator.
Stats
We used to have a ribbon chart visualization (https://youtu.be/qqq2l5SmZmE?t=135), but it looked messy in 3D space, so we decided to scrap it. Instead, we will create a path on the street, using the colors to indicate the health status of the performer.
Time Progress and Path Selection
This manager includes two functionalities: toggling time and toggling path/choice. They are put together because in an earlier version these two come together, but now that they are separated, they can be separated into two scripts.
Time is used in Activity and Prius, to simulate how the character would be like in the future. The main method is UpdateYear(), while the "music player" uses TimePlayPause() and TimeStop() which just wraps the original method. The Slider interactable will give a value of 0 to 1; the value first goes through the adapter to be converted to a year value, and then sent to the method. Updating the year in one visualization will affect the other as well.
To achieve a fluid year progression, UpdateYear accepts a float instead of an int. It will calculate the score of two nearest integer values and Lerp them to get an intermediate value (for example, given the index 4.3, the script will calculate the score at index 4 and index 5, and then lerp to get the score of index 4.3), which is used to update the visualizations. Although the slider handle moves each frame, the score is recalculated once a second to avoid consuming too much resource.
Path is used in Line Chart. There will be a panel floating to the right of the switcher showing the lifestyles of each path. The main method is UpdatePath(). Updating the path will affect Activity and Prius as well.
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Visualizations
Jump to bottom

Yue Wu edited this page May 6, 2021
·
4 revisions
Overview
When the visualizations begin, the avatar will walk to the top of the hill, and three replicas will appear. The original avatar is called Displayer, and the three avatars that will perform the visualizations are called Performers. The performer in the center will be directly controlled by the user; the other two are "presets" that reflect a relatively more healthy and a more unhealthy lifestyle. The performers can perform three visualizations:Activity, Prius, and Stats. There is also a Time Progress Manager to control the time and path selection. Additionally, there are the Visualizers to help with Activity and Prius visualizations.
Activity
Activity simulates the character's motion ability. The performers will be running on the street. A Blend Tree is used to control the character's animation from running to walking. When the character is in really bad shape, they will be unable to even walk, and will have to stay in a wheelchair.
We will also simulate motion by setting up different Props and making them move backwards. The kind of props are random, and their speed will reflect the running speed of the avatar.
Prius
There are three organs -- heart, liver, kidney -- for visualization. These displays do not extend Visualizer; they extend Organ Display and are managed by PriusVisualizer.
The organs will surround the avatar and will have a circular status bar around them, indicating their health levels. We apply a Billboard effect on the organs and status bars so they will always face the user.
Below are the animations for the organs:
Heart: pumping animation. The slower the heart pumps, the healthier the character is.
Liver: the stacking of bumps on the liver, causing fatty liver. This is also achieved with blend shapes.
Kidney: the stacking of bumps on the kidney, causing diabetes. This is also achieved with blend shapes.
Internals
There is a hidden "Internals" visualization within the Prius visualization. When the user approaches (move their device closer to) the displayer on the top of the hill, the avatar will fade out, and the internals view will pop out.
The internals view is meant to demonstrate how the Bodylogical simulator works: it collects the avatar's current lifestyle, calculates the health data, and then outputs the resulting lifestyle. The different "blocks" represent different organs. You can see the biometrics on the blocks themselves, with the lines as "connections". There will be sparkles traveling among the different metrics, representing data flow and calculation done inside the simulator.
Stats
We used to have a ribbon chart visualization (https://youtu.be/qqq2l5SmZmE?t=135), but it looked messy in 3D space, so we decided to scrap it. Instead, we will create a path on the street, using the colors to indicate the health status of the performer.
Time Progress and Path Selection
This manager includes two functionalities: toggling time and toggling path/choice. They are put together because in an earlier version these two come together, but now that they are separated, they can be separated into two scripts.
Time is used in Activity and Prius, to simulate how the character would be like in the future. The main method is UpdateYear(), while the "music player" uses TimePlayPause() and TimeStop() which just wraps the original method. The Slider interactable will give a value of 0 to 1; the value first goes through the adapter to be converted to a year value, and then sent to the method. Updating the year in one visualization will affect the other as well.
To achieve a fluid year progression, UpdateYear accepts a float instead of an int. It will calculate the score of two nearest integer values and Lerp them to get an intermediate value (for example, given the index 4.3, the script will calculate the score at index 4 and index 5, and then lerp to get the score of index 4.3), which is used to update the visualizations. Although the slider handle moves each frame, the score is recalculated once a second to avoid consuming too much resource.
Path is used in Line Chart. There will be a panel floating to the right of the switcher showing the lifestyles of each path. The main method is UpdatePath(). Updating the path will affect Activity and Prius as well.
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Visualizations
Jump to bottom

Yue Wu edited this page May 6, 2021
·
4 revisions
Overview
When the visualizations begin, the avatar will walk to the top of the hill, and three replicas will appear. The original avatar is called Displayer, and the three avatars that will perform the visualizations are called Performers. The performer in the center will be directly controlled by the user; the other two are "presets" that reflect a relatively more healthy and a more unhealthy lifestyle. The performers can perform three visualizations:Activity, Prius, and Stats. There is also a Time Progress Manager to control the time and path selection. Additionally, there are the Visualizers to help with Activity and Prius visualizations.
Activity
Activity simulates the character's motion ability. The performers will be running on the street. A Blend Tree is used to control the character's animation from running to walking. When the character is in really bad shape, they will be unable to even walk, and will have to stay in a wheelchair.
We will also simulate motion by setting up different Props and making them move backwards. The kind of props are random, and their speed will reflect the running speed of the avatar.
Prius
There are three organs -- heart, liver, kidney -- for visualization. These displays do not extend Visualizer; they extend Organ Display and are managed by PriusVisualizer.
The organs will surround the avatar and will have a circular status bar around them, indicating their health levels. We apply a Billboard effect on the organs and status bars so they will always face the user.
Below are the animations for the organs:
Heart: pumping animation. The slower the heart pumps, the healthier the character is.
Liver: the stacking of bumps on the liver, causing fatty liver. This is also achieved with blend shapes.
Kidney: the stacking of bumps on the kidney, causing diabetes. This is also achieved with blend shapes.
Internals
There is a hidden "Internals" visualization within the Prius visualization. When the user approaches (move their device closer to) the displayer on the top of the hill, the avatar will fade out, and the internals view will pop out.
The internals view is meant to demonstrate how the Bodylogical simulator works: it collects the avatar's current lifestyle, calculates the health data, and then outputs the resulting lifestyle. The different "blocks" represent different organs. You can see the biometrics on the blocks themselves, with the lines as "connections". There will be sparkles traveling among the different metrics, representing data flow and calculation done inside the simulator.
Stats
We used to have a ribbon chart visualization (https://youtu.be/qqq2l5SmZmE?t=135), but it looked messy in 3D space, so we decided to scrap it. Instead, we will create a path on the street, using the colors to indicate the health status of the performer.
Time Progress and Path Selection
This manager includes two functionalities: toggling time and toggling path/choice. They are put together because in an earlier version these two come together, but now that they are separated, they can be separated into two scripts.
Time is used in Activity and Prius, to simulate how the character would be like in the future. The main method is UpdateYear(), while the "music player" uses TimePlayPause() and TimeStop() which just wraps the original method. The Slider interactable will give a value of 0 to 1; the value first goes through the adapter to be converted to a year value, and then sent to the method. Updating the year in one visualization will affect the other as well.
To achieve a fluid year progression, UpdateYear accepts a float instead of an int. It will calculate the score of two nearest integer values and Lerp them to get an intermediate value (for example, given the index 4.3, the script will calculate the score at index 4 and index 5, and then lerp to get the score of index 4.3), which is used to update the visualizations. Although the slider handle moves each frame, the score is recalculated once a second to avoid consuming too much resource.
Path is used in Line Chart. There will be a panel floating to the right of the switcher showing the lifestyles of each path. The main method is UpdatePath(). Updating the path will affect Activity and Prius as well.
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Visualizations
Jump to bottom

Yue Wu edited this page May 6, 2021
·
4 revisions
Overview
When the visualizations begin, the avatar will walk to the top of the hill, and three replicas will appear. The original avatar is called Displayer, and the three avatars that will perform the visualizations are called Performers. The performer in the center will be directly controlled by the user; the other two are "presets" that reflect a relatively more healthy and a more unhealthy lifestyle. The performers can perform three visualizations:Activity, Prius, and Stats. There is also a Time Progress Manager to control the time and path selection. Additionally, there are the Visualizers to help with Activity and Prius visualizations.
Activity
Activity simulates the character's motion ability. The performers will be running on the street. A Blend Tree is used to control the character's animation from running to walking. When the character is in really bad shape, they will be unable to even walk, and will have to stay in a wheelchair.
We will also simulate motion by setting up different Props and making them move backwards. The kind of props are random, and their speed will reflect the running speed of the avatar.
Prius
There are three organs -- heart, liver, kidney -- for visualization. These displays do not extend Visualizer; they extend Organ Display and are managed by PriusVisualizer.
The organs will surround the avatar and will have a circular status bar around them, indicating their health levels. We apply a Billboard effect on the organs and status bars so they will always face the user.
Below are the animations for the organs:
Heart: pumping animation. The slower the heart pumps, the healthier the character is.
Liver: the stacking of bumps on the liver, causing fatty liver. This is also achieved with blend shapes.
Kidney: the stacking of bumps on the kidney, causing diabetes. This is also achieved with blend shapes.
Internals
There is a hidden "Internals" visualization within the Prius visualization. When the user approaches (move their device closer to) the displayer on the top of the hill, the avatar will fade out, and the internals view will pop out.
The internals view is meant to demonstrate how the Bodylogical simulator works: it collects the avatar's current lifestyle, calculates the health data, and then outputs the resulting lifestyle. The different "blocks" represent different organs. You can see the biometrics on the blocks themselves, with the lines as "connections". There will be sparkles traveling among the different metrics, representing data flow and calculation done inside the simulator.
Stats
We used to have a ribbon chart visualization (https://youtu.be/qqq2l5SmZmE?t=135), but it looked messy in 3D space, so we decided to scrap it. Instead, we will create a path on the street, using the colors to indicate the health status of the performer.
Time Progress and Path Selection
This manager includes two functionalities: toggling time and toggling path/choice. They are put together because in an earlier version these two come together, but now that they are separated, they can be separated into two scripts.
Time is used in Activity and Prius, to simulate how the character would be like in the future. The main method is UpdateYear(), while the "music player" uses TimePlayPause() and TimeStop() which just wraps the original method. The Slider interactable will give a value of 0 to 1; the value first goes through the adapter to be converted to a year value, and then sent to the method. Updating the year in one visualization will affect the other as well.
To achieve a fluid year progression, UpdateYear accepts a float instead of an int. It will calculate the score of two nearest integer values and Lerp them to get an intermediate value (for example, given the index 4.3, the script will calculate the score at index 4 and index 5, and then lerp to get the score of index 4.3), which is used to update the visualizations. Although the slider handle moves each frame, the score is recalculated once a second to avoid consuming too much resource.
Path is used in Line Chart. There will be a panel floating to the right of the switcher showing the lifestyles of each path. The main method is UpdatePath(). Updating the path will affect Activity and Prius as well.
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Visualizations
Jump to bottom

Yue Wu edited this page May 6, 2021
·
4 revisions
Overview
When the visualizations begin, the avatar will walk to the top of the hill, and three replicas will appear. The original avatar is called Displayer, and the three avatars that will perform the visualizations are called Performers. The performer in the center will be directly controlled by the user; the other two are "presets" that reflect a relatively more healthy and a more unhealthy lifestyle. The performers can perform three visualizations:Activity, Prius, and Stats. There is also a Time Progress Manager to control the time and path selection. Additionally, there are the Visualizers to help with Activity and Prius visualizations.
Activity
Activity simulates the character's motion ability. The performers will be running on the street. A Blend Tree is used to control the character's animation from running to walking. When the character is in really bad shape, they will be unable to even walk, and will have to stay in a wheelchair.
We will also simulate motion by setting up different Props and making them move backwards. The kind of props are random, and their speed will reflect the running speed of the avatar.
Prius
There are three organs -- heart, liver, kidney -- for visualization. These displays do not extend Visualizer; they extend Organ Display and are managed by PriusVisualizer.
The organs will surround the avatar and will have a circular status bar around them, indicating their health levels. We apply a Billboard effect on the organs and status bars so they will always face the user.
Below are the animations for the organs:
Heart: pumping animation. The slower the heart pumps, the healthier the character is.
Liver: the stacking of bumps on the liver, causing fatty liver. This is also achieved with blend shapes.
Kidney: the stacking of bumps on the kidney, causing diabetes. This is also achieved with blend shapes.
Internals
There is a hidden "Internals" visualization within the Prius visualization. When the user approaches (move their device closer to) the displayer on the top of the hill, the avatar will fade out, and the internals view will pop out.
The internals view is meant to demonstrate how the Bodylogical simulator works: it collects the avatar's current lifestyle, calculates the health data, and then outputs the resulting lifestyle. The different "blocks" represent different organs. You can see the biometrics on the blocks themselves, with the lines as "connections". There will be sparkles traveling among the different metrics, representing data flow and calculation done inside the simulator.
Stats
We used to have a ribbon chart visualization (https://youtu.be/qqq2l5SmZmE?t=135), but it looked messy in 3D space, so we decided to scrap it. Instead, we will create a path on the street, using the colors to indicate the health status of the performer.
Time Progress and Path Selection
This manager includes two functionalities: toggling time and toggling path/choice. They are put together because in an earlier version these two come together, but now that they are separated, they can be separated into two scripts.
Time is used in Activity and Prius, to simulate how the character would be like in the future. The main method is UpdateYear(), while the "music player" uses TimePlayPause() and TimeStop() which just wraps the original method. The Slider interactable will give a value of 0 to 1; the value first goes through the adapter to be converted to a year value, and then sent to the method. Updating the year in one visualization will affect the other as well.
To achieve a fluid year progression, UpdateYear accepts a float instead of an int. It will calculate the score of two nearest integer values and Lerp them to get an intermediate value (for example, given the index 4.3, the script will calculate the score at index 4 and index 5, and then lerp to get the score of index 4.3), which is used to update the visualizations. Although the slider handle moves each frame, the score is recalculated once a second to avoid consuming too much resource.
Path is used in Line Chart. There will be a panel floating to the right of the switcher showing the lifestyles of each path. The main method is UpdatePath(). Updating the path will affect Activity and Prius as well.
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Visualizations
Jump to bottom

Yue Wu edited this page May 6, 2021
·
4 revisions
Overview
When the visualizations begin, the avatar will walk to the top of the hill, and three replicas will appear. The original avatar is called Displayer, and the three avatars that will perform the visualizations are called Performers. The performer in the center will be directly controlled by the user; the other two are "presets" that reflect a relatively more healthy and a more unhealthy lifestyle. The performers can perform three visualizations:Activity, Prius, and Stats. There is also a Time Progress Manager to control the time and path selection. Additionally, there are the Visualizers to help with Activity and Prius visualizations.
Activity
Activity simulates the character's motion ability. The performers will be running on the street. A Blend Tree is used to control the character's animation from running to walking. When the character is in really bad shape, they will be unable to even walk, and will have to stay in a wheelchair.
We will also simulate motion by setting up different Props and making them move backwards. The kind of props are random, and their speed will reflect the running speed of the avatar.
Prius
There are three organs -- heart, liver, kidney -- for visualization. These displays do not extend Visualizer; they extend Organ Display and are managed by PriusVisualizer.
The organs will surround the avatar and will have a circular status bar around them, indicating their health levels. We apply a Billboard effect on the organs and status bars so they will always face the user.
Below are the animations for the organs:
Heart: pumping animation. The slower the heart pumps, the healthier the character is.
Liver: the stacking of bumps on the liver, causing fatty liver. This is also achieved with blend shapes.
Kidney: the stacking of bumps on the kidney, causing diabetes. This is also achieved with blend shapes.
Internals
There is a hidden "Internals" visualization within the Prius visualization. When the user approaches (move their device closer to) the displayer on the top of the hill, the avatar will fade out, and the internals view will pop out.
The internals view is meant to demonstrate how the Bodylogical simulator works: it collects the avatar's current lifestyle, calculates the health data, and then outputs the resulting lifestyle. The different "blocks" represent different organs. You can see the biometrics on the blocks themselves, with the lines as "connections". There will be sparkles traveling among the different metrics, representing data flow and calculation done inside the simulator.
Stats
We used to have a ribbon chart visualization (https://youtu.be/qqq2l5SmZmE?t=135), but it looked messy in 3D space, so we decided to scrap it. Instead, we will create a path on the street, using the colors to indicate the health status of the performer.
Time Progress and Path Selection
This manager includes two functionalities: toggling time and toggling path/choice. They are put together because in an earlier version these two come together, but now that they are separated, they can be separated into two scripts.
Time is used in Activity and Prius, to simulate how the character would be like in the future. The main method is UpdateYear(), while the "music player" uses TimePlayPause() and TimeStop() which just wraps the original method. The Slider interactable will give a value of 0 to 1; the value first goes through the adapter to be converted to a year value, and then sent to the method. Updating the year in one visualization will affect the other as well.
To achieve a fluid year progression, UpdateYear accepts a float instead of an int. It will calculate the score of two nearest integer values and Lerp them to get an intermediate value (for example, given the index 4.3, the script will calculate the score at index 4 and index 5, and then lerp to get the score of index 4.3), which is used to update the visualizations. Although the slider handle moves each frame, the score is recalculated once a second to avoid consuming too much resource.
Path is used in Line Chart. There will be a panel floating to the right of the switcher showing the lifestyles of each path. The main method is UpdatePath(). Updating the path will affect Activity and Prius as well.
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Visualizations
Jump to bottom

Yue Wu edited this page May 6, 2021
·
4 revisions
Overview
When the visualizations begin, the avatar will walk to the top of the hill, and three replicas will appear. The original avatar is called Displayer, and the three avatars that will perform the visualizations are called Performers. The performer in the center will be directly controlled by the user; the other two are "presets" that reflect a relatively more healthy and a more unhealthy lifestyle. The performers can perform three visualizations:Activity, Prius, and Stats. There is also a Time Progress Manager to control the time and path selection. Additionally, there are the Visualizers to help with Activity and Prius visualizations.
Activity
Activity simulates the character's motion ability. The performers will be running on the street. A Blend Tree is used to control the character's animation from running to walking. When the character is in really bad shape, they will be unable to even walk, and will have to stay in a wheelchair.
We will also simulate motion by setting up different Props and making them move backwards. The kind of props are random, and their speed will reflect the running speed of the avatar.
Prius
There are three organs -- heart, liver, kidney -- for visualization. These displays do not extend Visualizer; they extend Organ Display and are managed by PriusVisualizer.
The organs will surround the avatar and will have a circular status bar around them, indicating their health levels. We apply a Billboard effect on the organs and status bars so they will always face the user.
Below are the animations for the organs:
Heart: pumping animation. The slower the heart pumps, the healthier the character is.
Liver: the stacking of bumps on the liver, causing fatty liver. This is also achieved with blend shapes.
Kidney: the stacking of bumps on the kidney, causing diabetes. This is also achieved with blend shapes.
Internals
There is a hidden "Internals" visualization within the Prius visualization. When the user approaches (move their device closer to) the displayer on the top of the hill, the avatar will fade out, and the internals view will pop out.
The internals view is meant to demonstrate how the Bodylogical simulator works: it collects the avatar's current lifestyle, calculates the health data, and then outputs the resulting lifestyle. The different "blocks" represent different organs. You can see the biometrics on the blocks themselves, with the lines as "connections". There will be sparkles traveling among the different metrics, representing data flow and calculation done inside the simulator.
Stats
We used to have a ribbon chart visualization (https://youtu.be/qqq2l5SmZmE?t=135), but it looked messy in 3D space, so we decided to scrap it. Instead, we will create a path on the street, using the colors to indicate the health status of the performer.
Time Progress and Path Selection
This manager includes two functionalities: toggling time and toggling path/choice. They are put together because in an earlier version these two come together, but now that they are separated, they can be separated into two scripts.
Time is used in Activity and Prius, to simulate how the character would be like in the future. The main method is UpdateYear(), while the "music player" uses TimePlayPause() and TimeStop() which just wraps the original method. The Slider interactable will give a value of 0 to 1; the value first goes through the adapter to be converted to a year value, and then sent to the method. Updating the year in one visualization will affect the other as well.
To achieve a fluid year progression, UpdateYear accepts a float instead of an int. It will calculate the score of two nearest integer values and Lerp them to get an intermediate value (for example, given the index 4.3, the script will calculate the score at index 4 and index 5, and then lerp to get the score of index 4.3), which is used to update the visualizations. Although the slider handle moves each frame, the score is recalculated once a second to avoid consuming too much resource.
Path is used in Line Chart. There will be a panel floating to the right of the switcher showing the lifestyles of each path. The main method is UpdatePath(). Updating the path will affect Activity and Prius as well.
Clone this wiki locally