/
home-screen.html
104 lines (87 loc) · 7.33 KB
/
home-screen.html
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
99
100
101
102
103
104
<html>
<head>
<title>Cook My Meat</title>
<script src='jquery.js'></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="d3/d3.v3.min.js" charset="utf-8"></script>
<script src="data.js"></script>
<script src="helpers.js"></script>
<script src="numeric-1.2.6.js"></script>
<script src="drawSaved.js"></script>
<script src="heat-diffusion.js"></script>
<script src="sample.js"></script>
<script src="graph.js"></script>
<script src="perfectSteak.js"></script>
<script src="testingDiffusion.js"></script>
<link href="home-screen.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="graph.css" rel="stylesheet">
<link href="jquery-smoothness-theme.css" rel="stylesheet">
</head>
<body>
<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-44980465-1', 'mit.edu');
ga('send', 'pageview');
</script>
<script language="javascript" type="text/javascript">
</script>
<div class = "navbar">
<div class = "navbar-inner">
<a class = "brand" id = "title">Cook My Meat</a>
<div class = "nav-collapse collapse pull-left">
<a class = "brand rules" href="#rulesModal" data-toggle = "modal">Instructions</a>
</div>
<div class = "nav-collapse collapse pull-left">
<a class = "brand about" href="#aboutModal" data-toggle = "modal">About</a>
</div>
</div>
</div>
<div id="rulesModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">How to Use Cook My Meat</h3>
</div>
<div class="modal-body">
<p>This simulation shows the heat transfer throughout various kinds of meat.
In the first section, you can input the starting values for the meat. The default is a 3cm piece of steak at room temperature (73°F or 23°C). The maximum meat thickness is 30 cm since we are assuming you're not trying to cook a whole cow. The initial temperature must be above absolute zero(-460 °F or -273°C). If the physical steak you're cooking is starting out at a temperature outside of this range, please contact the National Journal of Physics.
</p>
<img src="img1.png" class="firstImg">
<p>Next, you can input the specific instructions for the steak. Use the + buttons to add a row to the bottom and the x button to delete the given row. There is no maximum duration of time, as long as you are patient enough. The calculation for two days lasts approximately two seconds. You can cook the steak at any temperature above absolute zero. If you want to explore what a steak below absolute zero would look like, we suggest inventing a new theory of thermodynamics. In this example, the steak was cooked for 60 minutes at 60 degrees on both sides and then seared at 180 degrees on each side for a minute each. </p>
<img src="img2.png">
<p>The graph below is updated when you press the Cook button. It shows how the internal protein state of a thin slice of the center of the steak changes over time. The flame represents which side of the steak the heat is applied. Inside the flame is the temperature of the heat source for that side. When you mouseover a slice of steak, the legend highlights the information pertaining to the position of your mouse. In addition, the state at the point of your mouse is displayed in a tooltip. </p>
<img src="img3.png">
<p>You can also see the temperature of your meat over time by clicking the "Temperature" button next to "Protein State". This shows the temperature at every point in the meat over time. The mouseover tooltip now displays the temperature of the point in the meat.</p>
<img src="img4.png">
<p>If you wish to compare the differences between two recipes, you can select them from the dropdowns at the bottom of the page. When a recipe is selected, the final "slice" of the meat with color-coded protein states is shown.</p>
<img src="img5.png">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<div id="aboutModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">About</h3>
</div>
<div class="modal-body">
<p>Created by: MIT students <a href='https://github.com/cressid/' target="_newtab">Kate Roe</a>, <a href='https://github.com/laurabreiman/' target="_newtab">Laura Breiman</a>, and <a href='http://www.linkedin.com/pub/marissa-stephens/66/9ab/3' target="_newtab">Marissa Stephens</a></p>
<p>Advised by: <a href='http://people.csail.mit.edu/rcm/' target="_newtab">Rob Miller</a>, <a href='http://people.csail.mit.edu/fredo/' target="_newtab">Fredo Durand</a>, <a href='http://www.seas.harvard.edu/brenner/Home.html' target="_newtab">Michael Brenner</a>, and <a href='http://www.seas.harvard.edu/directory/sorensen' target="_newtab">Pia Sorenson</a><p>
<p>Developed for the 2013 edX course <a href='https://www.edx.org/course/harvard-university/spu27x/science-cooking-haute-cuisine/639' target="_newtab">Science and Cooking: From Haute Cuisine to Soft Matter Science</a>. It demonstrates the heat diffusion through meat over time. This heat diffusion is calculated by modeling the meat using the diffusion constant of water. The heat at each point in the meat is calculated at each time step by using a <a href='http://en.wikipedia.org/wiki/Crank-Nicolson_method' target="_newtab">Crank-Nicolson scheme</a> to solve the heat equation.</p>
<p>The temperatures for the different stages of protein denaturization come from Harold McGee's <i>On Food and Cooking: The Science and Lore of the Kitchen</i> (pages 152 and 210). It is important to note, however, that these temperatures are estimates and not completely universal. This simulation is not a perfect model for cooking actual meat. Stove temperatures, pan types, and meat consistency are variable from case to case. Please be certain to check that your meat is thoroughly cooked before consumption unless you enjoy getting food posioning.</p>
<p>Please send questions and comments to cookmymeat@mit.edu</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<link href="perfectSteak.css" rel="stylesheet">
<div class="perfectSteak"></div>
<div class='graph' id='graphSteak'></div>
<div class='chart-container'></div>
</body>
</html>