I'm excited for my project. I'll be putting in all my drawings here soon, but I've planned out how an example progression of molecular drawing could go. I've looked at a few different tools for background (ChemAxon, MolView, etc) and think I have a good idea of the features that would be feasible. One thing I still need to decide is whether I'll allow drawing in 3D, or draw in 2D and then conversion to 3D for viewing. The progression of teaching needs to be ironed out as well. I hope to start experimenting with Threejs in the next few days.

Presenting a rough outline of my project helped me iron out some details I hadn't considered (Figure 1). One idea I particularly liked was having standard electron spaces clear, and allow what elements theuser drags in to snap into place with the appropriate number of electrons. This will visually demonstrate the bonding process much better than I could describe. My idea is more solid, but my timeline needs to be finalized before I identify whether I am on track or not. My primary focus this next week will be continuing to test out the Three.js capabilities (Figure 2), and perhaps attempt a simple 2D drawing interface.

Now that my PERT Chart is complete I feel I have a more solid step-by-step plan on how I'm going to get where I need to go. However, I am now also accutely aware of how much time of my week I need to be dedicating to this project. After having a week of exams and falling behind on my PERT milestones already, I need to reassess my daily schedule and how realiztic my PERT milestone dates really are. I'm going to do my best this next week to prioritize my project goals in whatever time I can find, and reaching out to professors before I get stuck too hard.

I made solid progress on the 2D drawing interface this week (Figure 1). I have buttons for the 10 or so elements I plan on displaying, and will have shading showing when one is togged. I've decided for clarity's sake to include a separate button for each element's basic information. This will avoid any issues with clicking the element for use vs for information. This week I plan to continue with the 2D interface and troubleshoot my issues loading in 3D files with Dr. McVey-Pankratz.

I ran into a couple roadblocks with my interface design. My priorities right now consist of getting element buttons to behave like radio input (one selected at a time), using canvas text for drawing with element symbols, and adding another column for selectable viewing options/molecule-editing needs. I'm stuck right now on the button selection, and if I m unable to sort it by the end of Monday, I'll be reaching out for more direction.

My buttons are working! Clicking on an element successfully creates an alert, and mouseover on info buttons creates an alert and console-log (Figure 1). Eventually, these will become smaller pop-ups, but at least they're functioning. Now I'm working on getting a php file to read in the JPG/PNGs I created of the symbols I want appearing upon the click of an element. I'm a little stuck here, but will try a few different tactics before meeting with McVey. This next week, I think my goal will be to get my symbols to appear and be placed on the canvas.

A user may now select hydrogen, and then click on the canvas where they'd like the symbol to appear (Figure 1). There are a few things I need to work out before adding more elements: the click on the canvas doesn't always work. I also need to drag my mouse a bit before getting the H to appear. This is likely due to the drawing code and implicit functions I am using, and will have to investigate further. Another issue that may come up is placement on the canvas. Eventually, when adding items, I can either (a) keep the items "centered" on the canvas, somehow finding the center item/center of mass and focusing on that, or (b) allow for the user to "drag" the canvas orientation until the molecule is centered. Converting to 3D will eventually need the entirety of the molecule centered, so that might be a good thing to start tackling now?

After a very productive couple meetings with MVP, I have made decent progress on the molecule drawing and know what my next steps are. McVey worked out how to avoid pasting symbol images over each other, and I've loaded all the symbol images I need into the html file. We decided it would be best to work on pasting images in a grid system (Figure 1), allowing for that needed space between symbols for bonds to form, andmaking the structure simple to expand upon. I've successfully implemented this feature for a single element capable of forming 4 bonds (Figure 2) and will be meeting with MVP to solidify methods for checking "open" places to bond for each different element. MVP was working on a way to select/move entire molecules around the canvas for viewing purposes, so I look forward to hear what progress she has made on this.

This last week, a lot of direction was fleshed out in my project, and I have a lot of tasks to tackle. Right off the bat, all elements are loaded and are snapping into place in the nearest open position to where the mouse was clicked. With the help of Dr. Meyer, it was decided that it would be easier later on if bonds didn't form automatically, but were instead selectively added in by the toggling of Add Bonds vs Add Elements. I'll need to create 6 new images for the bond types (horizontal/vertical single, double, and triple bonds) and they will potentially use the isClosest function to find where the user is attempting to place a bond. McVey and I also decided that some sort of diagram of information on the currently selected element would be necessary, as the user is currently not getting much useful feedback on their selection. My clear button is working, I just want to continue fleshing out the CSS to make it appear more seamless with the running format I have. I have lots to do, but I'm excited to keep working on it! I feel like I'm just on the edge of having something I can show off proudly.

I'm getting a little frustrated with my current pace of progression. It seems that I get the start of one of my goals met, and then run into problems in efficient or aesthetic implementation. Some of my priorities right now are (a) having a way to toggle between adding elements and adding bonds (which is not working with a simple bool js function), (b) having bonds appear between the two elements closest to the mouse upon clicking in the appropriate mode (which has to somehow find the second closest element, but my function currently doesn't do that) (Figure 1). Beyond this, I also need to (c) display currently selected elements and bonding information, (d) fix appearance of left-column buttons to fit, (e) preventing placement of elements on top of each other, and (f) dragging/deleting elements. This doesn't even start getting into how I'm going to be checking whether the molecules created are plausible or not. There is much to do, and very little time to do it. I feel like I only just started to hit my stride about four weeks ago, and now I have to fit twice the work in half that timeframe. It's my own failure to budget my time and energy properly, and I'll do my best to finish what I can.