mikepan.github.io/flipbook.html at master · mikepan/mikepan.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Mike Pan: Portfolio</title>
		<meta name="description" content="Portfolio for Mike Pan, contains CG artwork, photos and codes.">
		<meta name="viewport" content="width=device-width, initial-scale=.7, user-scalable=no">
		<link rel="stylesheet" href="css/normalize.min.css">
		<link rel="stylesheet" href="css/main.css">
		<!--[if lt IE 9]><script src="js/html5shiv.js"></script><![endif]-->
		<!-- TODO: Use webfonts -->
	</head>
	<body>
		<div class='splash' id='splashFlipbook'></div>

		<div id='centre'>

			<header>
				<a href="/">
				<span id='headerPan'>Mike Pan</span>
				<span id='headerSub'>• Portfolio</span>
				</a>
				<hr class='faintHR'/>
			</header>

			<article>
				<h3>Molecular Flipbook for Harvard Medical School + University of Utah</h3>
				<p>We are all visual learners. Seeing something in motion is far more memorable than reading a description of it. Molecular Flipbook is an animation software designed for molecular biologists to create animation of protein interaction and share them online.</p>

				<img src='content/mfb/nucleosome.jpg'>

				<p>This US-based research project is made possible by a grant from the NSF. It has two components: a software application that allows biologist to create simple animations, and a website to share and view these animations.</p>

				<p>I am responsible for the development of the application. Because we wanted the application to have a fun, interactive feel, the Blender Game Engine was chosen as the platform. All the coding is done in Python. A scientific library called MGLTools were used to handle some of the backend computations. Because the application is built on top of Blender, it was pretty easy to make it cross-platform.</p>

				<img src='content/mfb/desktop.jpg'>

				<p>For user interactions, we wanted to create a user interface that requires minimal training to use. Specifically, the application should be intuitable. Concepts familiar to 3D artists like 'keyframes', 'camera', and 'tween interpolations' might not be to scientists. So a lot of work was done in mapping these concepts to other more familiar ideas. For example, the animation system represent timeline and keyframes with a slide system found in Powerpoint.</p>

				<p>I have never built an application of this scale before, so there was a learning curve. The biggest challenge had been dealing with the less-than-ideal design decisions I've made when I just started out, many of which is too ingrained now to refactor.</p>


				<img src='content/mfb/linker.jpg'>

				<p>Building the application using Blender and Python gives me a very high-level platform to work with. Most of the complexity(such as 3D math) is abstracted away. Python itself is a very expressive language. The net result is very fast iteration time during development, great for a proof-of-concept application like this one.</p>

				<img src='content/mfb/biomt.jpg'>

				<div class='spotlight'><a href="http://molecularflipbook.org">Molecular Flipbook Home</a></div>


			<div id='flourish'>※</div>
			</article>


			<section id='aboot'>

				<div id='right'>
				<ul>
				<li><a href="/">Home</a></li>
				<li><a href="http://github.com/mikepan">GitHub</a></li>
				<li><a href="http://twitter.com/themikepan">Twitter</a></li>
				<li><a href="http://vimeo.com/mikepan">Vimeo</a></li>
				</ul>
				</div>

				<div id='cen'>
					<p>Mike dabbles in 3D art, programming, game-making, book-writing and photography.</p>
					<p>With 12 years of Blender experience and a keen interest in scientific visualization, he has worked for the University of British Columbia in Canada, Institute of Clinical Physiology in Italy, and Harvard Medical School.</p>
					<p>You can contact him for quotes and projects at mike.c.pan@gmail.com</p>
				</div>

				<div style='clear:both'></div>

			</section>

			<footer>
				<hr class='faintHR'/>
				Mike Pan | Vancouver, Canada | 2015
				<hr class='faintHR'/>
			</footer>

		</div> <!-- end center -->


		<script>
			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
			})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
			ga('create', 'UA-50473962-1', 'mikepan.com');
			ga('send', 'pageview');
		</script>


	</body>
</html>