-
Notifications
You must be signed in to change notification settings - Fork 2
/
beam.html
239 lines (190 loc) · 14 KB
/
beam.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<body></body>
<!-----------------Imports GlowScript Libraries and NumJs------------------------>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" href="https://www.glowscript.org/css/redmond/2.1/jquery-ui.custom.css" rel="stylesheet" />
<link type="text/css" href="https://www.glowscript.org/css/ide.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/javascript" src="https://www.glowscript.org/lib/jquery/2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.glowscript.org/lib/jquery/2.1/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="https://www.glowscript.org/package/glow.3.0.min.js"></script>
<script type="text/javascript" src="https://www.glowscript.org/package/RSrun.3.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nicolaspanel/numjs@0.15.1/dist/numjs.min.js"></script>
<!---------------------------Adds Style-------------------------------------------------->
<link rel="stylesheet" href="app_pages.css">
<!------------------------Run make_page and change_under_text to define functions (changeUnderText is optional)------------------->
<script src="make_page.js"></script>
<script src="misc_funcs.js"></script>
<script src="widget_groups.js"></script>
<!------------------------JavaScript------------------------------------------------>
<script type="text/javascript">
// Define your labels for the stages
var titles=["See the Beam","Look Inside","Moment","Shear Moment Relation","Shear","Force Balance","Summary"]
//#region <create text and append to text div>
var text=[]
text[0]="<p>Beams are all around us. They make up the buildings we live in and the bridges we cross. They're also around us at smaller scales, like cross car beams in your car and a table top. They're not defined by any particular application: they're simply a structural element, usually substantially longer in one direction, which responds to transverse loads, or loads perpendicular to that direction, by bending. These elements are of particular importance to civil engineers.</p><p>Engineers make predictions about structures and how they will respond to loads. This requires them to understand and quantify the internal stresses in elements of these structures.</p><p>Photo of a building under construction, allowing you to see the beams which support it. Photo credit to structuralengineeringbasics.com</p>"
text[1]="<p>Any load applied on a beam, whether it be from the weight of a person or the weight of a building, will lead to internal stresses throughout the beam. This topic will look at one section of the beam; this way we can look at the internal stresses acting on this section.</p><p> The length of the beam is along the x direction; the beam is cut along the yz plane.</p><p>The internal bending moment in a beam consists of compressive and tensile normal stresses that act along the beam's length, or the x direction. There is also a shear force, which consists of shear stresses which act vertically, or the y direction.</p><p>This is a first look, but how do we quantify these stresses and how do they relate? This topic will explore that, starting with normal stresses.</p>"
text[2]="<p>Normal stresses in the beam produce an internal bending moment. This stress varies in the cross-section: it is 0 at the neutral axis, compressive on one side, and tensile on the other side.</p><p> More precisely, the stress at a point is linearly proportional to its y coordinate (see the <a href='https://www.seeciv.com/bending.html'>bending topic</a> for the derivation):</p> $$ \\sigma=\\frac{M}{I}y$$ <p>Move the slider to change the moment on the left side of the section of beam. Notice that the moment on the right side and the moment on the left side are opposite but not equal in magnitude though.</p><p> Why doesn't this difference cause an imabalance in moment?</p>"
text[3]="<p>The difference in moment is balanced by a force couple from the shear force. The greater the shear, the greater the difference in moment. Therefore they're related as follows:</p> $$\\underbrace{\\color{blue}{M_{Right}}}_{0.0}-\\underbrace{\\color{blue}{M_{Left}}}_{0.0}=\\underbrace{\\color{red}{V}}_{0.0}\\Delta x$$ <p>\\(\\Delta x\\) is the length of the section and is the lever arm of the shear force couple.</p><p> As \\(\\Delta x\\) goes to 0, the relation becomes:</p> $$V=\\frac{dM}{dx}$$ <p>You might notice that the shear stress is also not uniform. The next slides will explore that in more depth.</p>"
text[4]="<p>The shear stress is a maximum at the neutral axis and goes to 0 at the top and bottom of the beam. Notice that the shear stress goes up one side and down on the other, balancing the vertical force.</p><p>In general, the vertical shear stress must be balanced by an equal horizontal shear stress:</p> $$\\tau_{xy}=\\tau_{yx}$$ <p>Therefore, there must be a horizontal shear stress in the beam as well; change the cut location to see it. This shear stress is equal to the vertical shear stress at the point it is cut.</p><p>Why doesn't this horizontal shear stress cause a net horizontal force?</p>"
text[5]=("<p>The horizontal force from the shear stress is balanced by a force produced by the difference in moment. The moment one one side produces the force:</p>").concat(
"$$\\color{blue}{F}=\\int \\ \\color{blue}{\\sigma} dA=\\frac{\\color{blue}{M}}{I}\\int ydA=\\frac{\\color{blue}{M}}{I}Q$$").concat(
"<p>The forces from the normal stress are balanced by the horizontal shear force \\(\\Delta H\\):</p>").concat(
"$$\\underbrace{\\color{red}{\\Delta H}}_{0.0}=(\\underbrace{\\frac{\\color{blue}{M_{Right}}}{I}}_{0.0}-\\underbrace{\\frac{\\color{blue}{M_{Left}}}{I}}_{0.0})\\underbrace{Q}_{0.0}$$").concat(
"$$\\frac{\\color{red}{\\Delta H}}{\\Delta x}=\\frac{\\color{blue}{\\Delta M}}{\\Delta x}\\frac{Q}{I}$$").concat(
"<p>Shear flow is defined as \\(\\frac{\\Delta H}{\\Delta x}\\) and is the horizontal shear force per length of beam. Divide that by the beam thickness \\(b\\) to get shear stress:</p>").concat(
"$$\\color{red}{\\tau}=\\frac{\\color{red}{V}Q}{Ib}$$")
text[6]="<p>Normal stresses produce bending moments and shear stresses produce shear forces.</p> <p>The equation for normal stress:</p> $$\\sigma=\\frac{M}{I}y$$<p> The equation for shear stress:</p> $$\\tau=\\frac{VQ}{Ib}$$ <p>The relation between bending moment and shear force:</p> $$M_{Right}-M_{Left}=V\\Delta x$$<p>The stresses in a beam are distributed so that all forces and moments are perfectly balanced when a load is applied, keeping it, and anyone who happens to be relying on it, at rest.</p>"
//#endregion
makePage(titles,text,stressesInBeam)
// You can also create an array for the text in the text box and refer to it in the changeStageGraphics method
function stressesInBeam(textDiv,graphDiv){
//#region <define initial values>
var space=1/3
var dx=1
var h=1 // half of the height
var b=1
var A=2*h*b
var I=1/12*b*(2*h)**3
var initLeftMoment=8
var initShear=-5
var initCutLoc=1 // initially shows the full box
var isRound=false
var bottomOpacity=1
var topOpacity=0.3
var stageOpacity=0.1
var scale=30 // scales the arrow length down by this value
//#endregion
//#region <set up canvas>
window.__context= {glowscript_container: graphDiv}
var scene=canvas({width: graphDiv.offsetWidth,height: graphDiv.offsetHeight,resizable: false,userzoom: false,autoscale: false})
scene.center=vec(-.2,0,0)
scene.forward=vec(.5,-.8,-1)
scene.range=1.5
//#endregion
// <create coordinate system object>
var coordShape=makeCoordShape(vec(1,0,0),0.2)
//#region <create boxes>
var boxBottom=box({opacity: bottomOpacity})
var boxTop=box({opacity: topOpacity})
var boxes=[boxBottom,boxTop]
var beamBox=box({size: vec(100,2*h+.01,b+.01)})
//#endregion
//#region <create arrows>
var LNA=[]
var RNA=[]
var LVA=[]
var RVA=[]
var TVA=[]
for (let z=-b/2; z<=b/2;z+=space){
for (let y=-h;y<=h;y+=space){
LNA.push(arrow({pos: vec(-dx/2,y,z),round: isRound,color: vec(0,0,1)}))
RNA.push(arrow({pos: vec(dx/2,y,z),round: isRound,color: vec(0,0,1)}))
LVA.push(arrow({pos: vec(-dx/2,y,z),round: isRound,color: vec(1,0,0)}))
RVA.push(arrow({pos: vec(dx/2,y,z),round: isRound,color: vec(1,0,0)}))
}
for (let x=-dx/2;x<=dx/2;x+=space){
TVA.push(arrow({pos: vec(x,0,z),round: isRound,color: vec(1,0,0)}))
}
}
//#endregion
//#region <create widgets and combine into array>
var cutLocSlider=makeSliderGroup(graphDiv,"15%","8%","Horizontal Cut Location",500,"vertical",[-1,1],initCutLoc,update)
var momentSlider=makeSliderGroup(graphDiv,"3%","8%","Moment on Left Side",200,"vertical",[-10,10],initLeftMoment,update,"blue")
var shearSlider=makeSliderGroup(graphDiv,"3%","55%","Shear Force",200,"vertical",[-10,10],initShear,update,"red")
cutLocSlider.style.zIndex=2 // so it doesn't block the other slider
//#endregion
//#region <create image>
var beamImg=document.createElement("img")
beamImg.src="beams.png"
beamImg.style.position="absolute"
beamImg.style.left=0
beamImg.style.width="100%"
beamImg.style.zIndex=2
graphDiv.appendChild(beamImg)
//#endregion
MathJax.Hub.Queue(RS_list_decorate([ "Typeset", MathJax.Hub ]),update)
function update(){
//#region <get values from sliders and compute value>
var cutLoc=Number(cutLocSlider.children[2].value)
var leftMoment=Number(momentSlider.children[1].value)
var shear=Number(shearSlider.children[1].value)
var rightMoment=leftMoment+shear*dx
var Q=(cutLoc**2-h**2)*b/2
var dH=Q*(rightMoment-leftMoment)/I
function tau(V,y){return -3/2*V/A*(1-y**2/h**2)}
function sigma(M,y){return M*y/I}
//#endregion
//#region <shear and moment relation>
for (let i=0;i<LNA.length;i++){
LNA[i].axis=vec(sigma(leftMoment,LNA[i].pos.y),0,0).divide(scale)
RNA[i].axis=vec(sigma(rightMoment,RNA[i].pos.y),0,0).divide(-scale)
LVA[i].axis=vec(0,tau(shear,LVA[i].pos.y),0).divide(-scale)
RVA[i].axis=vec(0,tau(shear,RVA[i].pos.y),0).divide(scale)
}
//#endregion
//#region <cut location>
// change box dimension:
boxBottom.size=vec(dx,h+cutLoc,b)
boxTop.size=vec(dx,h-cutLoc,b)
boxBottom.pos=vec(0,-(h-cutLoc)/2,0)
boxTop.pos=vec(0,(h+cutLoc)/2,0)
// change visibility of arrows above and below:
var sideArrows=[LNA,RNA,LVA,RVA]
for (let i=0;i<sideArrows.length;i++){
var arrowGroup=sideArrows[i]
for (let j=0;j<arrowGroup.length;j++){
var arrowSel=arrowGroup[j]
if (arrowSel.pos.y>cutLoc){arrowSel.visible=false}
else{arrowSel.visible=true}
}
}
// change top shear value:
for (let i=0;i<TVA.length;i++){
var arrowSel=TVA[i]
arrowSel.pos.y=cutLoc
arrowSel.axis=vec(tau(shear,cutLoc),0,0).divide(scale)
}
//#endregion
// update underbraces
var stageText=document.getElementsByClassName("stage-text")
changeUnderText(1,rightMoment,0,stageText[3])
changeUnderText(2,leftMoment,0,stageText[3])
changeUnderText(3,shear,0 ,stageText[3])
changeUnderText(1,dH,0,stageText[5])
changeUnderText(2,rightMoment/I,0,stageText[5])
changeUnderText(3,leftMoment/I,0,stageText[5])
changeUnderText(4,Q,1,stageText[5])
}
stressesInBeam.changeStageGraphic=function(stage){
// defined just to shorten code:
var MS=momentSlider.style
var VS=shearSlider.style
var CS=cutLocSlider.style
var IMG=beamImg.style
//#region <change opacity based on stage>
if(stage==0){
changeOpacity([LNA,RNA,LVA,RVA,TVA,beamBox],0)
MS.visibility=VS.visibility=CS.visibility="hidden";IMG.visibility="visible"
}else if(stage==1){
changeOpacity([beamBox],0.3);changeOpacity([LNA,RNA,LVA,RVA,TVA],1)
MS.visibility=VS.visibility=CS.visibility=IMG.visibility="hidden"
}else if(stage==2){
changeOpacity([beamBox],0);changeOpacity([LVA,RVA,TVA],stageOpacity);changeOpacity([LNA,RNA],1)
VS.visibility=CS.visibility=IMG.visibility="hidden";MS.visibility="visible"
}else if(stage==3){
changeOpacity([beamBox],0);changeOpacity([LNA,RNA,LVA,RVA,TVA],1)
CS.visibility=IMG.visibility="hidden";MS.visibility=VS.visibility="visible"
}else if(stage==4){
changeOpacity([beamBox],0);changeOpacity([LNA,RNA],stageOpacity);changeOpacity([LVA,RVA,TVA],1)
MS.visibility=IMG.visibility="hidden";CS.visibility=VS.visibility="visible"
}else if(stage==5){
changeOpacity([beamBox],0);changeOpacity([LVA,RVA],stageOpacity);changeOpacity([TVA,LNA,RNA],1)
IMG.visibility="hidden";MS.visibility=VS.visibility=CS.visibility="visible"
}else if (stage==6){
changeOpacity([beamBox],0);changeOpacity([LNA,RNA,LVA,RVA,TVA],1)
IMG.visibility="hidden";MS.visibility=VS.visibility=CS.visibility="visible"
}
//#endregion
}
}
</script>