StSS 2.1

{"name":"StSS 2.1 [Brownsville]","description":"Less code today, more math.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/kmv4hhwvmugiuzif8rd8","view_count":2,"fork_count":0,"expires_at":null,"created_at":"2024-10-09T16:58:09.858527Z","updated_at":"2024-10-09T16:58:26.450825Z","user_id":60,"status":"PRIVATE","parent_id":1801,"id":3530,"user":{"photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active"},"code":{"script.js":"/*\n\n Simulate the Solar System — Week 2, Class 1\n\n Welcome back!\n\n Last week we programmed velocity, acceleration, mass, and force into our physics objects.\n\n We saw how to measure where something is using coordinates.\n\n The physics we've programmed so far has really just been math with those numbers!\n\n Let's level up our math game today.\n\n **Geometry** is the mathematics of space. It goes back thousands of years and it has never gone out of style.\n We still think in terms of geometry all the time — distances, angles, shapes.\n \"Geo\"-\"metry\" comes from Greek: \"Earth measurement\".\n This math has always been important for physics.\n\n Today I want to introduce you to the most rewarding idea in geometry: the *Right Triangle*.\n\n \"If you understand right triangles, you understand the world.\"\n ...As far as I am aware, nobody ever said that. But it's still kinda true.\n\n You'll see why by the end of today!\n\n*/\n\n/*\n 2.1.1 — The Best Tool Ever\n\n What is a *right triangle*? The name comes from \"right angle.\"\n A *right angle* is one-quarter of a full rotation, or one-half of a straight angle.\n\n Think of a \"perfect corner.\" You are imagining a right angle.\n\n 90 degrees (90º). A full-circle rotation is 360º so one-quarter is 90º.\n\n Angles thinner than right angles are called *acute* angles.\n\n Angles wider than right angles are called *obtuse*.\n\n It is a rule of geometry that a triangle can only have *one* right or obtuse angle.\n\n At least two angles of a triangle must be acute.\n\n This is because a triangle has a total budget of 180º for all three of its angles.\n \n ~ ~ ~\n\n Run this program. Click any two points.\n\n You made a right triangle! Ignore the math text at the bottom. Just check out the triangle.\n\n Exercise: How is it possible that you can click just two points and generate a right triangle?\n Why don't you have to specify a third point? How unique are these right triangles?\n\n You should see some numbers floating atound the triangle. They are:\n The lengths of the sides, in grid squares; and\n The measures of the angles, in degrees.\n \n Exercise: Make a triangle and drag its points around. Can you find any patterns in the numbers that produces?\n A relationship between angles and sides?\n What stands out to you?\n \n Write down some patterns here:\n\n\n\n ______________________________________________________________________\n \n Right triangles become useful in *so* many math and physics situations.\n We've already seen the idea pop up, actually:\n Imagine you need to program some kind of *vector*: a velocity, acceleration, or force.\n If that vector, say the velocity of a ball, points in a diagonal direction, \n we need to split that diagonal up into a right triangle.\n Why?\n So we can find .vx and .vy — the computer expects us to move pixels along rows and columns,\n straight horizontal and vertical lines...at right angles! \n\n Check out what I mean: Make a diagonal line on the app.\n The dotted lines are exactly the .vx and .vy you'd want to produce the velocity represented by the bold diagonal line.\n And depending on your perspective, one of the two acute angles tells you what direction th ebold diagonal line is pointing.\n\n I hope you see why analyzing right triangles will make our physics programming more powerful.\n\n Here's the question a mathematician would ask:\n \"If I know a little about the sides and angles of a right triangle, can I figure out *everything* (all the sides and angles)?\"\n\n The answer is *yes*. Let's see why and how.\n\n 2.1.2 — The Crown Jewel\n First up, the pink box in the top left.\n It holds an *equation* relating the sides of the triangle.\n On the left side, the lengths of the two shorter sides.\n On the right, the length of the long side, the *hypotenuse*.\n\n And each term is *squared*: multiplied by itself.\n\n (The bottom equation shows the squares written out.)\n\n What's going on here? \n The great miracle, the crown jewel of geometry, ...\n ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡\n ... **Pythagoras' Theorem**\n !!!!!!!!!!!!!!!!!!!!!!!\n \n What's so special about this equation?\n First notice that there's no special relationship between the *unsquared* side lengths of a triangle.\n It's never A + B = C. (In fact, it's impossible to make a right triangle where A + B = C.)\n But that doesn't mean there's no pattern at all.\n\n Thousands of years ago, Ancient Greek gigachad Pythagoras proved that \n if you add the squares of the two short sides, it always sums up to the square of the long side..\n ...of a right triangle.\n\n In other words, if you know two side lengths of a right triangle, *you can always find the third.*\n Just solve a one-line equation!\n\n Exercise: Billy got hit by a 15 N force straight up *and* a 20 N force straight to the right.\n What is the strength of the equivalent up-and-right force that represents both at once?\n [Make this on the app!]\n\n Thinking back to physics, now we are halfway to combining .vx and .vy into a single \"v\".\n We need to sort out how to calculate direction. But then we are going to have the bones of a *very* flexible physics system.\n\n 2.1.3 — Trigonometry\n Now we address the orange box. Another right-triangle-puzzle:\n I have a force of 28 N and I want it to hit a ball at a 35º angle.\n How much Force.x and Force.y to achieve that?\n\n Given just the hypotenuse (long side) and a single angle, can you build a right triangle with the correct side lengths?\n\n Exercise: Make some right triangles with very small and very large angles. \n What happens to the legs?\n\n When an angle is small, the leg touching it is long.\n When an angle is big, the leg touching it is short.\n The reverse is true for the *opposite* leg.\n And if the two acute angles are the same — both 45º — both legs are the same too.\n\n This shows that there's a relationship between side length and angle.\n\n People have studied those relationships for a long time. \n The broad term for this study is *Trigonometry* or \"Triangle-Measure\".\n From trigonometry we get the idea of the *cosine*, function, abbreviated cos()\n \n Cosine is the *percentage* of the hypotenuse that a leg is given its angle.\n Cosine is a function where you plug in an angle and it gives you the percentage of the hypotenuse of the adjacent leg.\n cos(60º) == 0.50 or 50% because the leg touching a 60º angle is half the length of the hypotenuse.\n\n The complimentary function is *sine*.\n Sine gives the percentage of the hypotenuse of the *opposite* leg.\n sin(60º) == 0.87 because the leg opposite a 60º ia 87% the length of the hypotenuse.\n\n Math lives in the soul of all computers, and your computer was born knowing sines and cosines for jillions of angles, and can look them up in tables.\n You can thank the work of medieval monks (among others) who toiled for countless hours recording books of sines and cosines that we have since copied.\n What a time to be alive!\n\n Sine and cosine *hook us up.* We are now masters of the right triangle.\n\n Check it out:\n \"I have a 28 N force hitting a ball at a 35º angle.\"\n \n We need to program the right Force.x and Force.y to apply to our ball.\n \n We envision a right triangle whose hypotenuse is 28 that has a 35º angle. \n (Try to make this triangle yourself or walk through with the following steps.)\n\n Use a calculator like https://www.wolframalpha.com/:\n\n cos(35) == 0.81915...\n Which means Force.x is about 82% of the diagonal force, 28 N.\n 0.81915 * 28 == 22.9362. That's Force.x! Simple as!\n\n Sine gives us Force.y.\n sin(35) == 0.57357...\n So Force.y is about 57% of 28 N.\n 0.57357 * 28 == 16.05996. Force.y. Check.\n\n{ {\n Force.x = 22.9362; Force.x = Math.cos(angle) * Force.diagonal\n Force.y = 16.05996 Force.y = Math.sin(angle) * Force.diagonal\n} }\n\nCode like that will produce a diagonal force of 28 N at an angle of 35º.\n\nKeep this technique in mind for Thursday when we program fancier motion!\n \n*/\n\n// The code, for the curious:\n\nlet smoothMode = false; // Will turn on/off snapping triangle points to the grid.\nlet points = []; // For Corners of the triangle\nlet draggedPoint = null; // To track the one you're dragging.\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(230, 230, 250);\n // Draw from center of image rather than top-left corner.\n imageMode(CENTER)\n // Listen for the clear button...\n const clearButton = document.getElementById(\"clearButton\");\n // ... and clearCanvas on click.\n clearButton.addEventListener(\"click\", clearCanvas);\n const smoothModeCheckbox = document.getElementById(\"smoothModeCheckbox\");\n smoothModeCheckbox.addEventListener(\"change\", () => {\n smoothMode = smoothModeCheckbox.checked;\n });\n\n}\n\nfunction draw() {\n background(230, 230, 250);\n // Always draw the grid.\n drawGrid();\n if (points.length > 0) {\n if (points.length === 2) {\n // Draw the right triangle once two points are clicked.\n drawRightTriangle();\n }\n // But draw any points that are clicked either way.\n drawPoints();\n }\n}\n\nfunction drawRightTriangle() {\n // We can assume two points have been clicked.\n // Make a new array and assign those two points the names p1 and p2.\n let [p1, p2] = points;\n\n // Now we calculate the length of the sides.\n let diagonalLength;\n // Get the horizontal and vertical lengths with subtraction on coordinates.\n let horizontalLength = abs(p2.x - p1.x); // The abs() turns the answer positive no matter what.\n let verticalLength = abs(p2.y - p1.y);\n // Here's the by-hand implementation.\n diagonalLength = Math.sqrt(horizontalLength * horizontalLength + verticalLength * verticalLength);\n\n // We get the midpoints of each side so we can position text by them.\n // Midpoints are easy with coordinates: just *average* the x- and y-coordinates.\n let midHorizontal = createVector((p1.x + p2.x) / 2, p1.y); // The horizontal leg has a fixed y-coordinate\n let midVertical = createVector(p2.x, (p1.y + p2.y) / 2); // The vertical leg has a fixed x-coordinate\n let midDiagonal = createVector((p1.x + p2.x) / 2, (p1.y + p2.y) / 2);\n\n // Draw the diagonal line\n stroke(0);\n line(p1.x, p1.y, p2.x, p2.y);\n\n // Turn on dotted-line mode\n drawingContext.setLineDash([5, 5]); // 5 pixels on, 5 pixels off\n\n line(p1.x, p1.y, p2.x, p1.y); // Use p1's y-coordinate\n line(p2.x, p2.y, p2.x, p1.y); // Use p2's x-coordinate\n\n // Reset to solid lines.\n drawingContext.setLineDash([]);\n\n // Now we display lengths as numbers (text)\n noStroke();\n fill(0);\n textSize(16);\n\n // We ask the question \"is smooth mode on?\" And if the answer is \"yes\" we round the distance to the nearest grid space.\n let horizontalLengthText = smoothMode ? (horizontalLength / 10).toFixed(1) : (horizontalLength / 10).toFixed(0);\n let verticalLengthText = smoothMode ? (verticalLength / 10).toFixed(1) : (verticalLength / 10).toFixed(0);\n // The diagonal line can always have 2 decimal points.\n let diagonalLengthText = (diagonalLength / 10).toFixed(2);\n\n // Display horizontal length\n if (p1.y < p2.y) {\n text(horizontalLengthText, midHorizontal.x, midHorizontal.y - 20);\n } else {\n text(horizontalLengthText, midHorizontal.x, midHorizontal.y + 20);\n }\n\n // Display vertical length\n if (p1.x < p2.x) {\n text(verticalLengthText, midVertical.x + 20, midVertical.y);\n } else {\n text(verticalLengthText, midVertical.x - 40, midVertical.y);\n }\n\n // Display diagonal length\n if (p1.x < p2.x) {\n text(diagonalLengthText, midDiagonal.x - 60, midDiagonal.y);\n } else {\n text(diagonalLengthText, midDiagonal.x + 20, midDiagonal.y + 20);\n }\n\n // Now, the pink box.\n let horizontalSquared = Math.pow(horizontalLength / 10, 2).toFixed(0);\n let verticalSquared = Math.pow(verticalLength / 10, 2).toFixed(0);\n let diagonalSquared = Math.pow(diagonalLength / 10, 2).toFixed(0);\n\n const valuesElement = document.getElementById(\"values\");\n valuesElement.innerHTML = `$$${horizontalLengthText}^2 + ${verticalLengthText}^2 = ${diagonalLengthText}^2$$
$$(${horizontalSquared} + ${verticalSquared} = ${diagonalSquared})$$`;\n document.getElementById(\"formula\").classList.add(\"show\");\n\n // Calculate and display the angles.\n let angleC = 90; // The right angle will always be 90º.\n let angleA = degrees(atan2(verticalLength, horizontalLength)).toFixed(0);\n let angleB = degrees(atan2(horizontalLength, verticalLength)).toFixed(0);\n\n textSize(12);\n fill(0);\n\n // Display angles\n if (p1.x < p2.x && p1.y < p2.y) {\n text(`${angleA}°`, p1.x + 20, p1.y + 20); // Near p1\n text(`${angleB}°`, p2.x - 40, p2.y - 20); // Near p2\n text(`${angleC}°`, p2.x - 20, p1.y + 20); // Near right angle\n } else if (p1.x > p2.x && p1.y < p2.y) {\n text(`${angleA}°`, p1.x - 20, p1.y + 20); // Near p1\n text(`${angleB}°`, p2.x + 20, p2.y - 20); // Near p2\n text(`${angleC}°`, p2.x + 20, p1.y + 20); // Near right angle\n } else if (p1.x < p2.x && p1.y > p2.y) {\n text(`${angleA}°`, p1.x + 20, p1.y - 20); // Near p1\n text(`${angleB}°`, p2.x - 40, p2.y + 20); // Near p2\n text(`${angleC}°`, p2.x - 20, p1.y - 20); // Near right angle\n } else {\n text(`${angleA}°`, p1.x - 20, p1.y - 20); // Near p1\n text(`${angleB}°`, p2.x + 20, p2.y + 20); // Near p2\n text(`${angleC}°`, p2.x + 20, p1.y - 20); // Near right angle\n }\n\n\n // We use built-in sine and cosine functions.\n // (Those expect *radians* instead of degrees, so we convert back.)\n let sineA = (sin(radians(angleA))).toFixed(2);\n let cosineA = (cos(radians(angleA))).toFixed(2);\n let sineB = (sin(radians(angleB))).toFixed(2);\n let cosineB = (cos(radians(angleB))).toFixed(2);\n\n // More fancy LaTeX stuff.\n const trigElement = document.getElementById(\"trig\");\n trigElement.innerHTML = `\n \n \n \n \n \n \n \n \n \n

$$\\\\cos(${angleA}°) = ${cosineA}$$	$$\\\\sin(${angleA}°) = ${sineA}$$
$$\\\\cos(${angleB}°) = ${cosineB}$$	$$\\\\sin(${angleB}°) = ${sineB}$$

\n `;\n\n document.getElementById(\"trigValues\").classList.add(\"show\"); // Add class to show the orange box\n MathJax.typeset(); // MathJax is the LaTeX renderer.\n}\n\nfunction clearCanvas() {\n points = [];\n draggedPoint = null;\n // Clear the formulas\n document.getElementById(\"values\").innerHTML = '';\n document.getElementById(\"trig\").innerHTML = ''; // Clear the trigonometric values\n document.getElementById(\"formula\").classList.remove(\"show\"); // Remove class to hide the pink box\n document.getElementById(\"trigValues\").classList.remove(\"show\"); // Remove class to hide the orange box\n MathJax.typeset(); // Rerender MathJax to clear the display\n}\n\nfunction drawGrid() {\n // Pretty easy, like before.\n stroke(200);\n strokeWeight(1);\n\n for (let x = 0; x <= width; x += 10) {\n line(x, 0, x, height); // Vertical lines\n }\n\n for (let y = 0; y <= height; y += 10) {\n line(0, y, width, y); // Horizontal lines\n }\n}\n\nfunction drawPoints() {\n // Really easy: just little red circles.\n fill(255, 0, 0);\n for (let p of points) {\n ellipse(p.x, p.y, 10, 10);\n }\n}\n\n// The mouse has to do a couple different things:\n// Making points and dragging existing points.\nfunction mousePressed() {\n // First check if the mouse is within the canvas boundaries\n if (mouseX < 0 || mouseX > width || mouseY < 0 || mouseY > height) {\n return; // Do not create points if the mouse is off the canvas\n }\n\n if (points.length < 2) { // If you have 0 points or 1 point\n // Snap the point to the nearest grid corner\n let snappedX = round(mouseX / 10) * 10;\n let snappedY = round(mouseY / 10) * 10;\n points.push(createVector(snappedX, snappedY));\n } else { // But if 2 points already exist, do nothing unless...\n for (let p of points) {\n // ... you click a point. Then set that one as current.\n if (dist(mouseX, mouseY, p.x, p.y) < 10) {\n draggedPoint = p;\n break;\n }\n }\n }\n}\n\nfunction mouseDragged() {\n if (draggedPoint) { // We only care if you have just clicked a point.\n if (smoothMode) {\n // Smooth mode lets the points go anywhere.\n draggedPoint.x = mouseX;\n draggedPoint.y = mouseY;\n } else {\n // Smooth mode off keeps the points on grid-line corners.\n draggedPoint.x = round(mouseX / 10) * 10;\n draggedPoint.y = round(mouseY / 10) * 10;\n }\n }\n}\n\nfunction mouseReleased() {\n draggedPoint = null;\n}\n\n","style.css":"body {\n background-color: rgba(0, 255, 0, 0.1);\n /* Light transparent green background */\n}\n\n#top-container {\n display: flex;\n align-items: center;\n margin-bottom: 20px;\n height: 100px;\n /* Set a fixed height to avoid clipping */\n}\n\n#clearButton {\n background-color: green;\n color: white;\n font-size: 20px;\n padding: 15px 30px;\n border: none;\n border-radius: 10px;\n box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);\n cursor: pointer;\n transition: all 0.3s ease;\n margin-left: 40px;\n /* Adjusted margin to fit both boxes on the same level */\n}\n\n#clearButton:hover {\n background-color: darkgreen;\n}\n\n#formula {\n text-align: left;\n padding-left: 50px;\n /* Position formulas 50 pixels from the left edge */\n}\n\n#formula.show {\n background-color: lightpink;\n /* Light pink background */\n padding: 10px;\n /* Padding inside the box */\n border: 2px solid #ffcccc;\n /* Border around the formula box */\n border-radius: 5px;\n /* Rounded corners */\n}\n\n#values {\n display: inline-block;\n}\n\n#trigValues {\n text-align: left;\n padding-left: 50px;\n /* Position trigonometric values 50 pixels from the left edge */\n margin-left: 20px;\n /* Space between the two boxes */\n}\n\n#trigValues.show {\n background-color: orange;\n /* Orange background */\n padding: 10px;\n /* Padding inside the box */\n border: 2px solid #ffa500;\n /* Border around the trig values box */\n border-radius: 5px;\n /* Rounded corners */\n}\n\n#trig {\n display: inline-block;\n}\n\n#trig table {\n border-collapse: separate;\n border-spacing: 40px 5px;\n /* Space between columns */\n}\n\n.switch {\n position: relative;\n display: inline-block;\n width: 60px;\n height: 34px;\n margin-left: 20px;\n /* Adjust margin to position the switch properly */\n}\n\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: .4s;\n border-radius: 34px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 26px;\n width: 26px;\n left: 4px;\n bottom: 4px;\n background-color: white;\n transition: .4s;\n border-radius: 50%;\n}\n\ninput:checked+.slider {\n background-color: #2196F3;\n}\n\ninput:checked+.slider:before {\n transform: translateX(26px);\n}\n\n#smoothModeLabel {\n margin-left: 10px;\n font-size: 20px;\n vertical-align: middle;\n color: darkgreen;\n font-family: Arial, sans-serif; /* Match the font of the Clear button */\n}","index.html":"\n\n\n\n \n \n StSS 2.1\n \n \n \n\n\n\n

\n \n \n \n \n\n Smooth Mode\n

\n \n \n\n\n"},"chat_history":[],"assets":[{"name":"SS","cloudinary_id":"kmv4hhwvmugiuzif8rd8","resource_type":"image","id":23961,"project_id":3530,"created_at":"2024-10-09T16:58:09.866309Z","deleted":false}],"messages_sent":0,"comments":[],"steps":[]}