Student projects syllabus

Computational Visual Design (CVD-Lab), DIA, "Roma Tre" University, Rome, Italy

Biomedical Informatics & Computational Graphics 2012

Project goals


Biomedical infographics

Information graphics or infographics are graphic visual representations of information, data or knowledge.

Virtual Anatomy

Examples from:

Virtual Physiological Human (VPH) framework

Virtual Physiological Human (VPH) framework


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.

Event-driven programming

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.

Web applications (1/2)

Web applications (2/2)


Semantic Elements

New elements for headers, footers, menus, sections and articles.

Full CSS3 Support

New Selectors, new Properties, animations, 2D/3D Transformations, rounded Corners, shadow Effects, downloadable Fonts

HTML5 Multimedia (Video and Audio)

HTML5 <video>, HTML5 <audio>

2D/3D Graphics

Using the <canvas> element with WebGL support, Using inline SVG, Using CSS3 2D/3D

Web Applications

local data storage, Local file access, Local SQL database, Application cache, Javascript Web workers, XHTMLHttpRequest 2

HTML5 Forms

New form elements, new attributes, new input types, automatic validation.

CSS3 Modules

CSS3 specification is split up into smaller "modules".


selectors are patterns used to select the element(s) you want to style.

2D/3D Transformations

move, scale, turn, spin, and stretch elements.

Transitions, Animations

Animations and transition effects can replace animated images, Flash animations, and JavaScripts

Text Effects, Web Safe Fonts

several new text features. Use whatever font, by including the font file on the web server

Multiple Column Layout

create multiple columns like in newspapers!

User Interface

resizing elements, box sizing, and outlining

Backgrounds and Borders

several new background properties, with greater control of the background element. Rounded borders, add shadow to boxes, and use an image as a border

Project tools (open-source)


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

Project scheduling

  1. Project design: due Monday, April 2, 2012
  2. Working prototype: due Monday, April 30, 2012
  3. Project deadline: Thursday, June 7, 2012

Theme 1: 3D Objects

3D Objects core features

display images on the canvas

both 2D and 3D medical images (DICOM format)

pick points on the canvas

returning a tensor (multidimensional array) of points

display the picked points

w/o the curved object they generate (0-, 1-, 2-, or 3-manifold)

display the curve or surface generated from points

typically, either a B-spline or Bézier curve/surface

edit the points

with visual feedback on the curve or surface generated

Theme 2: 3D animations

3D animations core features

storyboard graph input

via interactive input of nodes and arcs on the HTML5 canvas

association of actors to animation segments

function from actors to segments to arcs to start/ending times

implementation of the dynamic programming algorithm

from durations of animation segments to start-end pairs

non-linear behavior of segments

via cubic splines in configuration space

Theme 3: on-demand multimedia (2D/3D video/images)

on-demand multimedia core features

setting camera behavior

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.

video/image database

indexed by keywords, to store video clips or still images, either generated internally by the BioPlasm platform or acquired externally by any source

on-demand video/still service

made available on demand to each client using the appropriate streaming platform and coding

server-side support

using the free and open-source VideoJS library1

Theme 4: protein modeler/visualizer

protein modeler/visualizer core features

local protein database

install a Apache CouchDB database. This one is a document-oriented database that can be queried and indexed using JavaScript in a MapReduce fashion

XML to JSON pdb data format conversion

implement a two-ways conversion between the two data description languages

protein visualization service

implement a plasm.js protein visualizer from the JSON PDB format

similarity search service

write an experimental BioEuler search index

visual query tool

implement a javascript query tool based only on two visual symbols (rectangle and rectangle with rounded corners)

Theme 5

Multi-instance video Chat

  1. 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