forked from laurabreiman/science-of-cooking
-
Notifications
You must be signed in to change notification settings - Fork 0
/
home-screen.html
113 lines (95 loc) · 7.37 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
105
106
107
108
109
110
111
112
113
<html>
<head>
<title>Cook My Steak</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="data.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 rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
</head>
<body>
<div class = "navbar">
<div class = "navbar-inner">
<a class = "brand" id = "title">Cook My Meat</a>
<div class = "nav-collapse collapse pull-right">
<a class = "brand rules" href="#rulesModal" data-toggle = "modal">Instructions</a>
</div>
<div class = "nav-collapse collapse pull-right">
<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 has 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">
<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 runtime of a two days is approximately two seconds. Why you would want to cook something longer than that is beyond us, but it is up to you. 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 as you change the table. It shows how the internal temperature 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. I addition, the current temperature at the point of your mouse is displayed in a tooltip. You can also make live updates to your instructions and the steak will “re-cook” to show the internal temperatures. </p>
<img src="img3.png">
<p>However, proteins do not re-nature once the temperature has cooled. To demonstrate this, if you save the steak, and choose it in the dropdown table you can observe the maximum internal state reached. You can select a previously saved steak to compare the recipes and final steak profile. </p>
<img src="img4.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>This visualization was created by MIT students Kate Roe, Laura Breiman, and Marissa Stephens 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.</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 completely accurate. This simulation is not a perfect model for cooking actual meat. Stove temperatures, pan types, meat consistancy are variable from case to case. Please be certain to check that you meat is throughouly cooked before consumption unless you enjoy getting food posioning.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<div id="startModal" 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">Make Your Meat</h3>
</div>
<div class="modal-body">
<p>In the age of test-tube grown burgers costing around $300,000 and molecular gastronomy restaraunts charging hundreds of dollars per person, the average person must turn elsewhere to add some science to their food. Using this applet, you can simulate cooking your food for free! Oh, and learn about heat diffusion and whatnot.</p>
</div>
<div class="modal-footer">
<button class="btn cookButton" data-dismiss="modal" aria-hidden="true">Get Cooking!</button>
</div>
</div>
<div id="recipe-inp" 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">Load Recipe</h3>
</div>
<div class="modal-body">
<div id="stringInput"><input class='recipe-input' type='text'></div>
</div>
<div class="modal-footer">
<button class="btn cookButton" data-dismiss="modal" aria-hidden="true">Get Cooking!</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>