Computational Visual Design (CVD-Lab), DIA, "Roma Tre" University, Rome, Italy
Biomedical Informatics & Computational Graphics 2012
Information graphics or infographics are graphic visual representations of information, data or knowledge.
In medical literature, it is used to illustrate biological systems, especially ones that cannot be photographed, like images of microscopic or sub-microscopic systems.
A novel approach to medical illustration based on interactive virtual 3D models and animation is taking momentum.
The future possibilities of such systems are endless
Examples from:
VPH Network of Excellence aims to help support and progress European research in biomedical modeling and simulation of the human body.
improve ability to predict, diagnose and treat disease, with a dramatic impact on the future of healthcare, pharmaceutical and medical device industries
provide the infrastructure that will enable academic, clinical and industrial researchers to communicate, and to exchange data and technologies in a standardised way.
VPH NoE ToolKit technical and methodological framework to support and enable VPH research - the collaborative investigation of the human body as a single complex system.
The framework should allow observations made in laboratories, hospitals and the field, to be collected, catalogued, organized, shared and combined in any possible way.
The framework should enable experts to analyze these observations collaboratively and develop systemic hypotheses that involve the knowledge of multiple scientific disciplines.
The framework should make it possible to interconnect predictive models defined at different scales, with multiple methods and varying levels of detail, into systemic networks
it should also make it possible to verify the hypoteses (in silico) validity by comparison with other clinical (in vivo) or laboratory (in vitro) observations.
a programming paradigm in which the flow of the program is determined by events—i.e., sensor outputs or user actions (mouse clicks, key presses) or messages from other programs or threads.
a web service is a software system designed to support interoperability between different computers on the same network (W3C)
the main characteristic of a web service is to provide a software interface that other systems can interact with
the interface is operated through messages included in an envelope
messages are transported via HTTP and formatted in XML
using some lightweight protocol for exchange of messages between software components.
web applications exchange data and execute complex operations via the interfaces they expose publicly and the use of operations they make available
web service architectures make generally, but not necessarily, use of XML data representations
more efficient implementations use JSON
we start from an initial library of interoperable components, as template GUI components, and accumulates successful operations as templates for new services.
New elements for headers, footers, menus, sections and articles.
New Selectors, new Properties, animations, 2D/3D Transformations, rounded Corners, shadow Effects, downloadable Fonts
HTML5 <video>, HTML5 <audio>
Using the <canvas> element with WebGL support, Using inline SVG, Using CSS3 2D/3D
local data storage, Local file access, Local SQL database, Application cache, Javascript Web workers, XHTMLHttpRequest 2
New form elements, new attributes, new input types, automatic validation.
CSS3 specification is split up into smaller "modules".
selectors are patterns used to select the element(s) you want to style.
move, scale, turn, spin, and stretch elements.
Animations and transition effects can replace animated images, Flash animations, and JavaScripts
several new text features. Use whatever font, by including the font file on the web server
create multiple columns like in newspapers!
resizing elements, box sizing, and outlining
several new background properties, with greater control of the background element. Rounded borders, add shadow to boxes, and use an image as a border
distributed version control system to handle everything from small to very large projects
Online project hosting. Includes source-code browser, in-line editing, wikis, and ticketing
prototype-based scripting language that is dynamic, weakly typed and has first-class functions
programming language that compiles to JavaScript. Syntactic sugar inspired by Ruby, Python and Haskell to enhance JavaScript's brevity and readability
dimension-independent geometric language embedded in Javascript
both 2D and 3D medical images (DICOM format)
returning a tensor (multidimensional array) of points
w/o the curved object they generate (0-, 1-, 2-, or 3-manifold)
typically, either a B-spline or Bézier curve/surface
with visual feedback on the curve or surface generated
definition of complex motions of either rigid or flexible objects through the interactive definition of splines in their configuration space
orchestration of coordinated motion of several moving actors through network programming and project scheduling techniques
the high-level description of the animation behavior is called the storyboard
it is represented as a directed acyclic graph (DAG) with only one node of in-degree zero (called start or source node) and only one node of out-degree zero (called end or sink node)
the source node will represent the animation start. The sink node will represent the animation end
nodes and arcs of the storyboard will be called events and animation segments, respectively
via interactive input of nodes and arcs on the HTML5 canvas
function from actors to segments to arcs to start/ending times
from durations of animation segments to start-end pairs
via cubic splines in configuration space
recording and/or streaming delivery of video-clips generated by the 3D animation subsystem
video-clips are generated by the 3D animation subsystem, adding one or more virtual cameras to the animated scene, i.e. to the storyboard of the animation
each virtual camera has a behavior (a spline curve in the space of parameters setting its position, orientation, rotation and field-of-view), as a function of time over each animation segment.
during the storyboard execution, moving images seen from any video-camera are recorded in a suitable digital format, and at any useful frame-rate
recorded video-clips are accountable to off-line video montage by whatever non-linear video editing software
interactive setting of position, orientation, rotation and field-of-view of each camera, as a function of time over the evenly discretized time-domain of each animation segment.
indexed by keywords, to store video clips or still images, either generated internally by the BioPlasm platform or acquired externally by any source
made available on demand to each client using the appropriate streaming platform and coding
using the free and open-source VideoJS library1
several molecular visualizers exist in various languages, e.g.:
we intend to write the BioPlasm visualizer in JavaScript + plasm.js, starting from PDB data format
of course, we already developed preliminary versions of such tool using previous PLaSM version (pyplasm)
here we want to activate a modeling/visualization service using CouchDB and a JSON version of the XML format of PDB files, as a first experiment to manage BIG (biological) DATA with a NO-SQL approach
install a Apache CouchDB database. This one is a document-oriented database that can be queried and indexed using JavaScript in a MapReduce fashion
implement a two-ways conversion between the two data description languages
implement a plasm.js protein visualizer from the JSON PDB format
write an experimental BioEuler search index
implement a javascript query tool based only on two visual symbols (rectangle and rectangle with rounded corners)
Multi-instance video Chat
a lightweight, 100% skinnable using CSS, easy to use, understand and extend, has consistent look between browsers, can be viewed both with full-screen and full-Window modes, offers native volume control on the viewing widget and may force fallback to Flash when the source is unsupported by HTML5↩