@Lolo_berk

Actually, I changed my mind and figured why not add some quick polished to the topbar, toolbar, and math explorer; since they’re just text formatting, font, and color tweaks. I honestly love it even more. I’m going to make the features more graphic and follow my green/pixelated theme. I also can’t wait to add some pixel art decals and background images in there.

Okay lastly, I implemented the equations + step-by-step solving process and explanations for the current math I have behind each shape. Now users can see the distance formula for segments, perimeter and area formulas (including ones with PI and radii for circles), and all the interior angle + sum of angles within the math explorer. I think this will be very helpful to anyone who wants a better understanding of geometry and is a visual learner. I think the next thing I’m going to work towards is making the math explorer a little more organized; maybe add in a few drop down/collapse options and also try to replicate the mockup design I created in Canva to make it look more polished! Anyway, I’m very happy with how this looks, and even more excited for how it will look completely finished. I’m also glad this project has taught me as much as it has because it took a lot of patience with debugging to get where it is now.

I added probably the most important and defining feature of the geometry engine. I thought the engine could serve a more meaningful purpose for the users if it displayed the actual equations and mathematics behind each shape or segment they create, including their perimeter, area, angle arcs, etc, and was accessible. I think this was my goal from the start, and I love how it’s developing so far! I decided to put the equations and math explanations into a panel, but not one that obscures the grid or crowds it too much, so I went with an expandable panel that can be dragged and placed around the engine. I actually really like it this way and how it looks. I added in special ID’s for each shape or segment so that they could be selected as a whole, and so that the math explorer is able to recognize the selections and receive the ID’s. After that, I transferred the code from my previous functions that calculated distance, slope, perimeter, area, and angle arcs into the math explorer panel blocks so they appear for each shape selected respectively. It’s working great so far, and I can’t wait to add the explanations for each and also add onto my equation library (which is at the bottom).

Okay I just finished adding the interior angle arcs and markings to line segments (vertical angles), triangles, rectangles (all 90 degrees), and polygons. These all work with the hide/show intersections and angles button that toggles them on and off. This took me a little while since I had to implement the math for calculating each shape’s interior angles, but ESPECIALLY because I ended up spending an entire hour debugging the line segment arcs and adding at least 4 more console logs for it. I wanted the vertical angles to be clearly labeled (2 different colors) as 2 equal pairs across from each other, and it was such a struggle to render them correctly as such. At least it’s fixed now, and I can finally move onto my next step. What I want to do this time is add a side bar of some sort next to the grid to display the equations used for each shape’s calculation of perimeter, area, angles, etc.

Alright so devlog #5! I attached a video below of me testing out the new tools and add-ons of the geometry engine.
I’ve cleaned up a lot of the must-need fixes from before, such as building clear grid lines and especially the snap to grid tool for plotting points. This problem showed up when I was attempting to create the rectangles in the engine, as the points I selected were rejected by the validating system because they weren’t perfectly aligned. I would end up with points such as 3.99 or 2.09 and plotting whole integers was a challenge. But, I fixed it to where the snap to grid allows the user to easily select whole numbers while still having the leniency to plot decimal points at 0.25, 0.5, and 0.75. After adding that, I was able to complete my rendering and click handling for all my tool bar buttons including the polygon.
About 3 days ago I added a zoom feature (as seen in the video attached) that preserves your shapes / point coordinates and proportions even when altering the coordinate plane scale inside the window; which I really like how it turned out. As for what I’ve worked on yesterday and today, I decided to upgrade some existing features by implementing intersections points and angles. Currently, they only apply to line segments that have an intersection point, but I will soon be adding it to my other toolbar shapes. The coding for the arc angles was especially tricky, but I learned so much. First, before even creating the render for the arc angles, I learned that I can use the console tab to test my code’s calculations and verify the outputted angle is accurate before having it drawn in the coordinate plane.
I struggled most with establishing which equation would form these arc angles the simplest and also getting them to show up properly. At the same time, I actually learned a new equation I’ve not yet used before in math and in geometry; the dot product. I really do admire how mathematical equations that I’ve actually used and recognized, translate to code and seeing how they’re outputted.
Okay lastly, I added a toggle hide/show button on the top bar for intersections and angles. I felt that having all the labels and extra points on the shapes may crowd the visualization a little bit, and giving the user the option to see their creation without it would be good. Anyway, I’m excited to continue upgrading the abilities and tools of the engine as I go.

Okay so within the past 4-ish days, I have added many new features! I coded the rendering and click behavior for the circle, triangle, and rectangle tools. Also, I’m using SVG to render my shapes. —————————————————————————––––––––––––––––––————One of the things I enjoyed most about coding the tools is actually the mathematical components I implemented. I had JavaScript calculate distance between points, slope along lines, side lengths and area for triangles and rectangles (later polygons), and I had it calculate radii + area for circles. I had a little fun with this since I got to use familiar equations we actually use in class such as area formulas like Heron’s formula for SSS triangles, slope formula, and used PI for circle area and circumference. ——————————————————————————————————————–—–Along with this though, there was definitely A LOT of debugging. After I coded each tool, I tested it and had to work around the click behavior failing to recognize the unique ID’s, and the SVG not rendering correctly. At one point my file was overwrote somehow and the only reason I was able to recover all my code from my triangle and rectangle tools was because of my web browser’s console tab. —————————————————————————————————————–––Anyway, I’m so excited to keep adding more visual tools to this and make the design come to life at the end! Oh and I also included a video below of me testing out the new tools.

Okay I updated the point tool in the engine and added my first line tool feature. Now selected points appear orange and larger, while previously made points remain blue and smaller. Along with this, I added the first version of the line tool feature where a segment can be made between 2 existing points that recognizes the unique endpoint IDs. More features and add-ons for the tools later this week!

Little mini update for today, this is a mockup design I made using Canva to model what I hope the final look for the geometry engine will look like! I did do some coding on it today however, it was more updating and debugging. I haven’t added any new focuses like transformations and interactive features for any of the shapes quite yet. I will get to that tomorrow. Let me know what you think of the mockup design tho!

Hi! There have been many changes since my last devlog of this project. I had a lot of trouble with the correct Pygame installation version syncing with my Python code, and I wanted to tweak parts of my code anyway, so I decided to restart and switch back to previous languages I had already worked with. That being CSS, HTML, and JavaScript. ————————————————————————————————————— This time instead of trying to render the entire engine at once (and in a single coding file), I made a list of things to focus on creating first that I’ll gradually edit and go back to update; also to ensure that the engine is actually interactive and working as I go. My focuses currently are: [Points, Lines, Circles, Rectangles, Triangles, Polygons, Transformations, Intersections, Distances + Angles (later), Coordinate plane, and Camera movement / zoom which will be later.]———————————————————————————————————–– Today I was able to successfully code the coordinate plane + window, top-bar and toolbar, selection types and a selection status below the toolbar, and interactive features with points. The status tool shows the point you made and its coordinates as well! It took a while for me to get the x and y axes to show up in the proper orientation, as well as the selection status tool to work, but I was able to debug both! I then spent some time in Canva designing a mock-up of what I want the final website to look like. It’s not much yet, but I’d say it’s definitely a big improvement from my last coding project!

Hi, for my second coding project I’ve decided to create a Geometry Manipulation Engine where you can create shapes and polygons and view them in 3D; and see the math behind each. —————————————————————————————————————————–So far, I’ve created the 2D sketch plane, which doesn’t look like much yet, but I’ll keep posting updates. Recently I added the camera, renderer, and loop the scene on top of the code for the basic shapes. ——————————————————————————————————————————I’m not sure yet if this will closely resemble an engine like GeoGebra, or a CAD design software, but my goal is to code a little geometry building space with simple mathematics behind it (angles, arc lengths, side lengths). I’m very excited to see what this project will look like finished! :))

I experimented a little with coding in VS Code and decided to make a basic model of keys on a keyboard layout to start. I used JavaScript, CSS, & HTML for this, and the keys do change color when hovered over with the cursor. After drafting the basic layout, I added some color. I hope to build on this idea more in the future and possibly a hardware project of building an actual keyboard!