{"id":1,"date":"2024-04-14T14:42:30","date_gmt":"2024-04-14T14:42:30","guid":{"rendered":"https:\/\/openlab.sps.cuny.edu\/joshua-tan-portfolio\/?p=1"},"modified":"2024-07-17T18:40:51","modified_gmt":"2024-07-17T18:40:51","slug":"hello-world","status":"publish","type":"post","link":"https:\/\/openlab.sps.cuny.edu\/joshua-tan-portfolio\/2024\/04\/14\/hello-world\/","title":{"rendered":"Trial"},"content":{"rendered":"\n\n\n\n\n \n\n\n window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag(‘js’, new Date());\n\n gtag(‘config’, ‘UA-8175315-16’);\n\n\n \n Rolling<\/title>\n\n\n\n\n<H3> Four views of rolling<\/H3>\n\n \n\n <div id=\"buttons\">\n \n \n <input type="button" id="stepback" value="<\n >” onclick=”stepForward()”>\n \n <\/div>\n\n <div id=\"viewbuttons\">Rolling: \n \n \n \n \n <\/div>\n\n\n\n\n \n\n\/\/ Simulation first posted on 7-20-2018\n\n\n function setView(newView)\n {\n \/\/get the element\n mode = Number(newView);\n if (mode == 1) {\n message1 = “View 1 – Rolling is the superposition of pure translation and pure rotation.”;\n message2 = “For a point on the outer edge of the wheel the translational distance”;\n message3 = “traveled equals the distance traveled around the edge in rotation.”;\n title = “Pure translation”;\n }\n\n if (mode == 2) {\n message1 = “View 2 – The net velocity (red) of a particular point is the vector sum of the”;\n message2 = “velocity due to translation (blue) and the velocity due to rotation (green).”;\n message3 = “Note that the net velocity of a point on the bottom of the wheel is zero.”;\n title = “Using superposition to find the net velocity at a point”;\n }\n\n if (mode == 3) {\n message1 = “View 3 – Here you can see how the velocity of a particular point on the edge”;\n message2 = “of a rolling wheel changes as time goes by. The translational velocity is always”;\n message3 = “the same, while the velocity due to rotation steadily changes direction.”;\n title = “See how the net velocity of a point changes as the wheel rolls”;\n }\n\n if (mode == 4) {\n message1 = “View 4 – A point on the outer edge of the wheel traces out an interesting.”;\n message2 = “path – the shape of this path is called a cycloid. Note that the point is”;\n message3 = “instantaneously at rest when it is in contact with the road.”\n title = “The path followed by a point on the edge of the wheel”;\n }\n \n reset();\n }\n\n\n function play() {\n window.clearTimeout(timer);\n runFlag = 1;\n runMotion();\n\n }\n\n function pause() {\n window.clearTimeout(timer);\n runFlag = 0;\n\n }\n\n function stepForward() {\n window.clearTimeout(timer);\n runFlag = 1;\n drawMotion();\n\n }\n\n function stepBack() {\n window.clearTimeout(timer);\n index = index-2;\n if (index < -1) index = -1;\n time = index\/20;\n xPos = xBase;\n runFlag = 1;\n drawMotion();\n\n }\n\n\n function reset() {\n window.clearTimeout(timer);\n index = -1;\n time = 0.0;\n runFlag = 1;\n\n runMotion();\n\n }\n\n\n var canvas = document.getElementById("myCanvas");\n var context = canvas.getContext("2d");\n var index = -1;\n\n var xBase = 494; \/\/ for the graph\n var xBase2 = 60; \/\/ for the motion\n var yBase = 70; \/\/ for the graph\n var yBase2 = 230; \/\/ for the motion\n var xInit = 37;\n var message1 = 'Choose a view to explore rolling without slipping';\n var message2 = " ";\n var message3 = " ";\n var title = "Four views of rolling – use the buttons to choose a view";\n var yStart = yBase+120;\n var plotColor = '#ff00ff';\n var scenario = 1;\n var radius = 5;\n var time = 0.0;\n var deltat = 1\/20.0;\n var timer;\n var runFlag = 1;\n\n var mode = 0;\n var wheelRadius = 80;\n var nSpokes = 20;\n var nArray = 600;\n var cycloid = new Array(nArray);\n for (var i = 0; i = 4000) runFlag = 0;\n\n \/\/ console.log(“In the drawMotion function, with runFlag = ” + runFlag + ” Fx = ” + Fx);\n\n if (runFlag == 1) { \/\/ run if runFlag equal 1, not if equal 0\n \/\/ clear\n context.clearRect(0, 0, canvas.width, canvas.height);\n\n index = index + 1;\n\n \/\/ set background color for the entire thing\n context.fillStyle = “#ffd”;\n context.fillRect(0, 0, canvas.width, canvas.height);\n\n\n context.strokeStyle = ‘#000’;\n context.lineWidth = 1;\n\n\n \/\/ set line color\n context.strokeStyle = ‘#999’;\n context.lineWidth = 2;\n\n time = index\/50.0;\n\/\/ xPos = vxInit*time;\n\/\/ yPos = vyInit*time – 0.5*g*time*time;\n\/\/ var vy = vyInit – g*time;\n \/\/ console.log(time + ‘ ‘ + xPos + ‘ ‘ + yPos);\n\n\n\n \/\/ draw the road\n\n context.beginPath();\n context.strokeStyle = ‘#999’;\n context.lineWidth = 20;\n context.moveTo(50,yBase2);\n context.lineTo(canvas.width-50,yBase2); \n context.stroke(); \n\n if (mode == 0) { \/\/ draw a stationary wheel\n context.beginPath();\n context.strokeStyle = ‘black’;\n context.lineWidth = 2;\n context.fillStyle = “#99f”\n context.arc(xBase2+wheelRadius, yBase2-wheelRadius-10, wheelRadius, 0, 2 * Math.PI, false);\n context.stroke(); \n context.fill(); \n\n \/\/ draw spokes\n for (var i = 0; i < nSpokes; i++) {\n context.beginPath();\n context.strokeStyle = '#383';\n context.lineWidth = 2;\n context.moveTo(xBase2+wheelRadius, yBase2-wheelRadius-10);\n context.lineTo(xBase2+wheelRadius+wheelRadius*Math.cos(2.0*Math.PI*i\/nSpokes), yBase2-wheelRadius-10+wheelRadius*Math.sin(2.0*Math.PI*i\/nSpokes)); \n context.stroke(); \n\n } \n }\n\n if (mode == 1) { \/\/ draw the moving wheel\n if (index 2.0*Math.PI*wheelRadius) { \n d = 2.0*Math.PI*wheelRadius; \n dIndex = Math.trunc(2.0*Math.PI*wheelRadius); \n }\n console.log(d);\n context.beginPath();\n context.strokeStyle = ‘black’;\n context.lineWidth = 2;\n context.fillStyle = “#99f”\n context.arc(xBase2+wheelRadius+d, yBase2-wheelRadius-10, wheelRadius, 0, 2 * Math.PI, false);\n context.stroke(); \n context.fill(); \n\n \/\/ draw spokes\n for (var i = 0; i < nSpokes; i++) {\n context.beginPath();\n context.strokeStyle = '#383';\n context.lineWidth = 2;\n context.moveTo(xBase2+wheelRadius+d, yBase2-wheelRadius-10);\n context.lineTo(xBase2+wheelRadius+d+wheelRadius*Math.cos((2.0*Math.PI*i\/nSpokes)), yBase2-wheelRadius-10+wheelRadius*Math.sin((2.0*Math.PI*i\/nSpokes))); \n context.stroke(); \n\n } \n context.beginPath();\n context.strokeStyle = "red";\n context.lineWidth = 3;\n context.moveTo(xBase2+wheelRadius, yBase2-wheelRadius-10);\n context.lineTo(xBase2+wheelRadius+d, yBase2-wheelRadius-10);\n context.stroke(); \n }\n else if (index 2.0*Math.PI*wheelRadius) { \n d = 2.0*Math.PI*wheelRadius; \n dIndex = Math.trunc(2.0*Math.PI*wheelRadius); \n }\n console.log(d);\n context.beginPath();\n context.strokeStyle = ‘black’;\n context.lineWidth = 2;\n context.fillStyle = “#99f”\n context.arc(xBase2+wheelRadius, yBase2-wheelRadius-10, wheelRadius, 0, 2 * Math.PI, false);\n context.stroke(); \n context.fill(); \n\n \/\/ draw spokes\n for (var i = 0; i < nSpokes; i++) {\n context.beginPath();\n context.strokeStyle = '#383';\n context.lineWidth = 2;\n context.moveTo(xBase2+wheelRadius, yBase2-wheelRadius-10);\n context.lineTo(xBase2+wheelRadius+wheelRadius*Math.cos((2.0*Math.PI*i\/nSpokes)+d\/wheelRadius), yBase2-wheelRadius-10+wheelRadius*Math.sin((2.0*Math.PI*i\/nSpokes)+d\/wheelRadius)); \n context.stroke(); \n\n } \n context.beginPath();\n context.fillStyle = "red";\n context.arc(xBase2+wheelRadius-wheelRadius*Math.sin(d\/wheelRadius), yBase2-wheelRadius-10+wheelRadius*Math.cos(d\/wheelRadius), radius, 0, 2 * Math.PI, false); \n context.fill(); \n }\n\n else if (index 2.0*Math.PI*wheelRadius) { \n d = 2.0*Math.PI*wheelRadius; \n dIndex = Math.trunc(2.0*Math.PI*wheelRadius); \n }\n console.log(d);\n context.beginPath();\n context.strokeStyle = ‘black’;\n context.lineWidth = 2;\n context.fillStyle = “#99f”;\n context.arc(xBase2+wheelRadius+d, yBase2-wheelRadius-10, wheelRadius, 0, 2 * Math.PI, false);\n context.stroke(); \n context.fill(); \n\n context.beginPath();\n context.strokeStyle = ‘red’;\n context.lineWidth = 2;\n context.arc(xBase2+wheelRadius+d, yBase2-wheelRadius-10, wheelRadius, 0.5*Math.PI+d\/wheelRadius, 2.5 * Math.PI, false);\n context.stroke(); \n\n \/\/ draw spokes\n for (var i = 0; i 1800) { index = -1; }\n }\n\n if (mode == 2) { \/\/ draw a stationary wheel\n context.beginPath();\n context.strokeStyle = ‘black’;\n context.lineWidth = 2;\n context.fillStyle = “#99f”\n context.arc(xBase2+wheelRadius+Math.PI*wheelRadius, yBase2-wheelRadius-10, wheelRadius, 0, 2 * Math.PI, false);\n context.stroke(); \n context.fill(); \n\n \/\/ draw spokes\n for (var i = 0; i 2.0*Math.PI*wheelRadius) { \n d = 2.0*Math.PI*wheelRadius; \n }\n console.log(d);\n context.beginPath();\n context.strokeStyle = ‘black’;\n context.lineWidth = 2;\n context.fillStyle = “#99f”\n context.arc(xBase2+wheelRadius+d, yBase2-wheelRadius-10, wheelRadius, 0, 2 * Math.PI, false);\n context.stroke(); \n context.fill(); \n\n \/\/ draw spokes\n for (var i = 0; i 600) { index = -1; }\n }\n\n\n if (mode == 4) { \/\/ draw the moving wheel\n var d = index;\n var dIndex = index;\n if (d > 2.0*Math.PI*wheelRadius) { \n d = 2.0*Math.PI*wheelRadius; \n dIndex = Math.trunc(2.0*Math.PI*wheelRadius); \n }\n console.log(d);\n context.beginPath();\n context.strokeStyle = ‘black’;\n context.lineWidth = 2;\n context.fillStyle = “#99f”\n context.arc(xBase2+wheelRadius+d, yBase2-wheelRadius-10, wheelRadius, 0, 2 * Math.PI, false);\n context.stroke(); \n context.fill(); \n\n \/\/ draw spokes\n for (var i = 0; i < nSpokes; i++) {\n context.beginPath();\n context.strokeStyle = '#383';\n context.lineWidth = 2;\n context.moveTo(xBase2+wheelRadius+d, yBase2-wheelRadius-10);\n context.lineTo(xBase2+wheelRadius+d+wheelRadius*Math.cos((2.0*Math.PI*i\/nSpokes)+d\/wheelRadius), yBase2-wheelRadius-10+wheelRadius*Math.sin((2.0*Math.PI*i\/nSpokes)+d\/wheelRadius)); \n context.stroke(); \n\n } \n context.beginPath();\n context.fillStyle = "red";\n context.arc(xBase2+wheelRadius+d+wheelRadius*Math.sin(d\/wheelRadius), yBase2-wheelRadius-10-wheelRadius*Math.cos(d\/wheelRadius), radius, 0, 2 * Math.PI, false); \n context.fill(); \n\n cycloid[dIndex].xValue = xBase2+wheelRadius+d+wheelRadius*Math.sin(d\/wheelRadius);\n cycloid[dIndex].yValue = yBase2-wheelRadius-10-wheelRadius*Math.cos(d\/wheelRadius);\n\n for (i=0; i 600) { index = -1; }\n }\n\n\n\n \/\/ console.log(“In the drawMotion function, with runFlag = ” + runFlag + ” x2 = ” + x2);\n\n\n\n context.font = ’16pt Calibri’;\n context.fillStyle = ‘blue’;\n\n context.textAlign = ‘left’;\n context.fillText(message1, xBase2, 280);\n context.fillText(message2, xBase2, 310);\n context.fillText(message3, xBase2, 340);\n\n context.font = ’16pt Calibri’;\n context.fillStyle = ‘purple’;\n\n context.textAlign = ‘center’;\n context.fillText(title, canvas.width\/2, 30);\n\n\n }\n }\n\n function runMotion() {\n drawMotion();\n if (runFlag == 1) {\n timer = window.setTimeout(runMotion, 500\/60);\n }\n }\n\n\n function drawArrow(Fx,Fy,Px,Py, arrowColor) {\n var theta = Math.atan2(Fy,Fx);\n context.strokeStyle = arrowColor;\n context.lineWidth = 4;\n context.beginPath();\n context.moveTo(Px, Py);\n context.lineTo(Px+5.0*Fx, Py-5.0*Fy);\n context.stroke();\n\n context.lineWidth = 2;\n\n var Fmag = Math.sqrt(Fx*Fx+Fy*Fy);\n if (Fmag > 5) Fmag = 5;\n\n context.fillStyle = arrowColor;\n context.beginPath();\n context.moveTo(Px+5.0*Fx-3*Fmag*Math.cos(theta+0.25*(Math.PI\/2)),Py-5.0*Fy+3*Fmag*Math.sin(theta+0.25*(Math.PI\/2)));\n context.lineTo(Px+5.0*Fx,Py-5.0*Fy);\n context.lineTo(Px+5.0*Fx-3*Fmag*Math.cos(theta-0.25*(Math.PI\/2)),Py-5.0*Fy+3*Fmag*Math.sin(theta-0.25*(Math.PI\/2)));\n\n context.stroke();\n context.fill();\n\n }\n\n \n\n\n \n\n\n\n<p>Simulation first posted on 7-20-2018. Written by Andrew Duffy<\/p>\n\n\n\n<p><a href=\"http:\/\/creativecommons.org\/licenses\/by-nc-sa\/4.0\/\" rel=\"license\"><img decoding=\"async\" style=\"border-width: 0\" src=\"https:\/\/i.creativecommons.org\/l\/by-nc-sa\/4.0\/88x31.png\" alt=\"Creative Commons License\"><\/a><br>This work by Andrew Duffy is licensed under a <a href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/4.0\/\" rel=\"license\">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License<\/a>.<br>This simulation can be found in the collection at <a href=\"http:\/\/physics.bu.edu\/~duffy\/classroom.html\" rel=\"dct:source\">http:\/\/physics.bu.edu\/~duffy\/classroom.html<\/a>. The simulation is shared here as an archive. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag(‘js’, new Date()); gtag(‘config’, ‘UA-8175315-16’); Rolling Four views of rolling <input type="button" id="stepback" value="< >” onclick=”stepForward()”> Rolling: \/\/ Simulation first posted on 7-20-2018 function setView(newView) { \/\/get the element mode = Number(newView); if (mode == 1) { message1 = “View 1 – Rolling is the superposition of pure … <a href=\"https:\/\/openlab.sps.cuny.edu\/joshua-tan-portfolio\/2024\/04\/14\/hello-world\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Trial”<\/span><\/a><\/p>\n","protected":false},"author":86,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/openlab.sps.cuny.edu\/joshua-tan-portfolio\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.sps.cuny.edu\/joshua-tan-portfolio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.sps.cuny.edu\/joshua-tan-portfolio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.sps.cuny.edu\/joshua-tan-portfolio\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.sps.cuny.edu\/joshua-tan-portfolio\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":11,"href":"https:\/\/openlab.sps.cuny.edu\/joshua-tan-portfolio\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/openlab.sps.cuny.edu\/joshua-tan-portfolio\/wp-json\/wp\/v2\/posts\/1\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/openlab.sps.cuny.edu\/joshua-tan-portfolio\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.sps.cuny.edu\/joshua-tan-portfolio\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.sps.cuny.edu\/joshua-tan-portfolio\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}