02560 Web Graphics and Scientific Visualization

Week 1 - webpage, canvas, and simple drawing

1. Make a DTU Student Homepage. The tutorial is at http://gbar.dtu.dk/faq/50-homepage. To use this tutorial you need access to your home directory on the server. You can get this using one of the following two tutorials:
   • Home directory access via commandline SCP or GUI FTP or Drive Mapping.
   • Home directory access via WinSCP.
   • If the script that should create a link to your public_html folder is out of order, use pwd to get the path of your home directory. Then use this pathto find the path to your homepage folder. As can be seen in the tutorial, the home page path should be of the form /www/xx/x/public_html. Once you have located your homepage folder, you can create a link to it in your standard home directory using the command ln -s /www/xx/x/public_html public_html


2. Write a couple of paragraphs about something scientific or technical that it could be interesting to visualize. Put this text on your new webpage. If you are out of ideas, here are some example topics:
   • vis of medical scans (CT, MR, or likewise) [Inside Bill Moorier's head - an interactive MRI brain scan explorer]
   • vis of measured brain signals [Smartphone Brain Scanner]
   • vis of water flow or wave simulations [Water Rendering and Simulation] [WebGL Water]
   • vis of topology optimization simulations [Interactive 3D TopOpt App]
   • vis of neutron scattering [Imaging at DTU]
   • vis of wind flow around an aeroplane or a wind turbine [DTU Wind Energy]
   • vis of smoke or fire simulation [and more: Ron Fedkiw's Research]
   • vis of heat transfer in a processing chip or an engine [or likewise: COMSOL Blog on Heat Transfer]
   • vis of genome wide association data [GenoKey Blog]
   • vis of light scattering in materials [KeyShot Gallery]
   • etc. [NVIDIA CUDA Applications]
   • etc. [COMSOL Model Gallery]
   • etc. [Scientific Visualization Sites - by Topic]


3. Work your way as far into GL as time permits, preferably through Chapters 1-3. This involves:
   • Inserting an HTML5 canvas on your webpage. This is the place where you can do visualization.
   • Enabling the use of WebGL in your canvas. This is done by retrieving a gl context through JavaScript.
   • Drawing points on the canvas using mouse clicks.
   • Drawing lines and triangles on the canvas.


4. Draw something that in some way illustrates your text paragraphs (a curve using line segments, for example, or a pie chart using triangles).

Reading Material