Forem: Desmond Gilmour

3D Spinning Molecule Using Avogadro, Blender and Three.js

Desmond Gilmour — Sun, 30 Apr 2023 13:16:50 +0000

TL;DR

In this blog post, we'll explore how to convert any molecule of interest into an .obj file, which will enable you to create and display molecular animations on your personal website.

Intro

As a chemist and computer scientist, you might find your creativity expressed in various ways. When I come across well-designed tools or personal websites with engaging features, I tend to get excited about what they are doing. I imagine this might help you with the same.

What You Will build

In this blog post, we'll guide you through adding a molecule to your personal site. The molecule displayed here is called epinephrine:

This will be done in two steps.

We will create the object file based of this youtube video using Avogadro, OpenBabel and final blender.
Implement your new molecule object as a Next.js component.

Getting Started

overing the entire process would result in an excessively long blog post, so we'll rely on a detailed YouTube video for the initial steps. This video will walk you through the creation of the .mol object, and its instructions can easily be adapted to different molecules.

The only deviation from the video is that I exported the fully-created molecule as an '.fbx' file.

Building the component

We'll briefly explain how to build this component before presenting the representative code.

Import necessary dependencies and a 3D model file in FBX format (Epinephrine.fbx).
Create a functional component Molecule that uses the useRef hook to create a reference to a DOM element (the container for the 3D scene).
Use the useEffect hook to set up the Three.js scene when the component is mounted. This hook is called once when the component is mounted, and the clean-up function is called when the component is unmounted.
Inside the useEffect hook, create a new Three.js scene, camera, and renderer. The renderer is added to the container element (retrieved using the containerRef).
Load the 3D object (molecule) using the FBXLoader. Once the object is loaded, add it to the scene, set up lighting (ambient, directional, and point lights), and add the lights to the scene.
Define an animate function that animates the 3D object by rotating it around the Z-axis. The renderer then renders the scene, and the animate function is called again using requestAnimationFrame. This creates an animation loop.
As a clean-up function, remove the renderer DOM element from the container and dispose of the renderer when the component is unmounted.
Render a div element with the reference to containerRef and a specified width and height, which serves as the container for the Three.js scene.

Full Code

import React, { useRef, useEffect } from 'react';
import * as THREE from 'three';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
import molecule from "./Epinephrine.fbx";

export default function Molecule() {
    const containerRef = useRef();

    useEffect(() => {

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(
            75, 
            containerRef.current.clientWidth / containerRef.current.clientHeight,
            0.1, 
            2000 
        );
        camera.position.z = 625;


        // Create a Three.js renderer
        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setClearColor(0x000000, 0);
        renderer.setSize(containerRef.current.clientWidth, containerRef.current.clientHeight);

        // Add the renderer to the container
        containerRef.current.appendChild(renderer.domElement);

        // Load the 3D object
        const loader = new FBXLoader();
        loader.load(molecule, (object) => {
            object.rotation.x = Math.PI / 2;
            scene.add(object);
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
            scene.add(ambientLight);

            const directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.5);
            directionalLight1.position.set(0, 1, 0);
            scene.add(directionalLight1);

            const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5);
            directionalLight2.position.set(0, -1, 0);
            scene.add(directionalLight2);
            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
            directionalLight.position.set(-1, 1, 1);
            scene.add(directionalLight);

            const pointLight1 = new THREE.PointLight(0xffffff, 1, 100);
            pointLight1.position.set(-5, 5, 5);
            scene.add(pointLight1);

            const pointLight2 = new THREE.PointLight(0xffffff, 1, 100);
            pointLight2.position.set(5, -5, 5);
            scene.add(pointLight2);

            // Animate the object
            function animate() {
                object.rotation.z += 0.01;
                renderer.render(scene, camera);
                requestAnimationFrame(animate);
            }
            animate();
        });

    // Clean up
        return () => {
            containerRef.current.removeChild(renderer.domElement);
            renderer.dispose();
        };
    }, []);

    return <div ref={containerRef} style={{
        width: '200px', 
        height: '300px',  
    }}/>;
}

If you have any questions or want to discuss this further, feel free to reach out to me through the social media links available on my personal website. I'd be happy to help!

Lasso Highlighting In Datamol

Desmond Gilmour — Mon, 17 Apr 2023 18:07:37 +0000

TL;DR

In this blog post, we'll explore the lasso_highlight_image() function in Datamol, a Python library for scientists working with molecular data. We'll see how it can be used to highlight specific parts or features of a molecule quickly. We'll also provide some examples of how to use the function and discuss its limitations and areas for improvement for future contributors.

Intro

If you work with chemical data and need to visualize it, you'll want to check out Datamol. This Python library has a new addition called lasso highlight, which was initially produced by Christian W. Feldmann. The lasso highlighting function allows you to quickly identify and visualize specific parts or features of a molecule. It's useful for identifying functional groups, comparing and contrasting different molecules, and analyzing molecular structure and properties.

Examples

To use the lasso_highlight_image() function, you supply a molecule and specify the substructures you want to highlight. The function returns an image of the molecule with the specified substructures highlighted. You can provide the target and search molecules in SMILES format or as a rdkit.Chem.mol object. The function also takes parameters to specify the image type (PNG or SVG), size, and image characteristics.The details of each parameter can be found here.

Here are two examples to help you get started:

1.Lasso highlight with multiple substructures with PNG image

import datamol as dm

target_molecule = "CO[C@@H](O)C1=C(O[C@H](F)Cl)C(C#N)=C1ONNC[NH3+]"
substructure = ["CONN", "N#CC~CO"]

dm.lasso_highlight_image(target_molecule, substructures, (400, 400), use_svg=False)

Lasso highlight with single substructures with SVG image

import datamol as dm

target_molecule = "CO[C@@H](O)C1=C(O[C@H](F)Cl)C(C#N)=C1ONNC[NH3+]"
substructure = dm.to_smarts("CONN")

dm.lasso_highlight_image(target_molecule, substructure, (300, 300))

Limitations and What's Next

Although the lasso_highlight_image() function is highly valuable, it does have a few limitations. To enhance its capabilities and overcome these constraints, the following features could be incorporated:

Add functionality to write to a file, similar to the to_image() function in Datamol/viz/viz.py.
Allow the analysis of multiple target molecules at once.
Canonicalize search molecules to prevent duplicate highlighting.
Update the documentation in Visualization.ipynb.

If you're interested in contributing to the project, check out the Datamol website and the contribution guidelines. Alternatively, feel free to contact me from my social media on my personal website for any questions or feedback.

Contributing to RDKit

Desmond Gilmour — Tue, 28 Mar 2023 19:26:06 +0000

If you want to get into cheminformatics or AI/ML for drug discovery, you may have encountered RDKit. It is a great tool to help you analyze chemical information and is used in many labs, making it a great open-source tool to contribute to if you're looking to work in the biotech industry!

I needed help figuring out how to contribute to the RDKit. However, one tutorial explained it well, although I did need just a bit more help figuring out how to exactly to do it. I wrote this blog to provide an informal way to fill the gaps in case anyone else is missing a certain piece to building RDKit too. I was working on MacOS Ventura 13.1 when I built RDKit.

The below steps will explain how to run, test, and ultimately contribute to the RDKit

1. Fork and clone to your local machine

You can do this a few different ways; choose whichever you like.

Visit RDkit's Github and fork the project.

Once forked, go to the green button on the repo that says "<> Code" and copy the HTTPS URL from the dropdown.

Open the folder you want to use and enter the command git clone https://github.com/<YOURUSERNAME>/rdkit where is replaced with your own.

2. Compile and Run RDKit on Your Machince

Open the project folder in whichever source code editor you prefer.

Make a conda environment using the below commands in your terminal...

conda create -c conda-forge -n my-rdkit-env rdkit
conda activate my-rdkit-env

Followed by the commands below to help RDKit locate what it needs to...

export RDBASE=`pwd`
export DYLD_LIBRARY_PATH="$RDBASE/lib"
export PYTHONPATH="$RDBASE"

You need to create your build folder and change the directory to it...

mkdir cmake-build
cd cmake-build

Use cmake called with the following flags. The .. after all the flags are essential for the command to navigate the files, do not exclude.

cmake -DPy_ENABLE_SHARED=1 -DBOOST_ROOT="$CONDA_PREFIX" -DBoost_NO_SYSTEM_PATHS=ON -DBoost_NO_BOOST_CMAKE=TRUE -DRDK_INSTALL_INTREE=ON -DRDK_INSTALL_STATIC_LIBS=OFF -DRDK_BUILD_CPP_TESTS=ON -DPYTHON_NUMPY_INCLUDE_PATH="$(python -c 'import numpy ; print(numpy.get_include())')" -DRDK_BUILD_CAIRO_SUPPORT=ON -DRDK_BUILD_FREETYPE_SUPPORT=ON ..

Now we will build the RDKit using the command below, don't be surprised if this takes 1 hour or longer. Luckily, you will only have to do this once, as CMake is smart enough to rebuild the files you have changed.

(make -j 6 install ; find $RDBASE/rdkit -name \*.so -exec install_name_tool -add_rpath $RDBASE/lib {} \; -print )

Now you have a fully compiled and built RDKit you can use from here on out. You can use ctest to ensure it runs and all test cases are successful. Typically you would like to run test from only one test file and to do that you would run something similar to ctest -R <test_name> This way you can focus better on your own changes.

3. Finding an Issue and Making A Branch

Now that everything is built, you can navigate to GitHub and pick an issue that interests you and branch to start working on this issue as such...

git branch fixes-#<issue number>

Insert the issue number where is; this way when your PR is merged, it automatically is linked to the issue so it can be removed.

I hope this helps clarify building and contributing to RDKit. I would love feedback about potential changes I can add to this post, so please do not hesitate to share.

Thanks for reading!

How to Automatically Update Resume On Your Personal Site From OverLeaf

Desmond Gilmour — Mon, 27 Mar 2023 22:45:29 +0000

I don't know about you, but I struggle with keeping track of the hundreds of iterations of my resume and keeping my website updated with the most recent one. So I thought to automate it.

This post explains how to automatically update your resume from OverLeaf onto your personal website. This post is specific to paid users of OverLeaf since it is a paid feature to push from OverLeaf to GitHub

Open the drop-down where it says menu on the top left-hand side of your project. It will produce a drop-down, as shown in the picture below. Click sync to GitHub.

Enter a repository name and a brief descriptions to and create the repository.

Go to GitHub to see a new repository where only your latex file from OverLeaf should exist. In this repo, go to the Actions tab at the top, as shown in the picture below

Create a new workflow, and then enter the code below. This code will create the PDF version of the latex file with every push into this repository. Each push will create a new release of your resume's latest iteration, and it will be an artifact attached to this. You may encounter an error based off the permission of the GitHub Action but this issue is explained well in this post.

name: Build LaTeX document
on: [push]
jobs:
  build_latex:
    runs-on: ubuntu-latest
    steps:
      - name: Set up Git repository
        uses: actions/checkout@v2
      - name: Compile LaTeX document
        uses: xu-cheng/latex-action@v2
        with:
          root_file: main.tex
      - name: Uploading artifact
        uses: actions/upload-artifact@v2
        with:
          name: PDF
          path: main.pdf
      - name: Get Time
        id: time
        uses: nanzm/get-time-action@v1.1
        with:
          timeZone: -5
          format: 'YYYY-MM-DD-HH-mm-ss'
      - name: Create Release
        id: create_release
        uses: softprops/action-gh-release@v1
        with:
          name: Resume compiled on ${{ steps.time.outputs.time }}
          tag_name: ${{ steps.time.outputs.time }}
      - name: Upload Release Asset
        id: upload-release-asset
        uses: actions/upload-release-asset@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          upload_url: ${{ steps.create_release.outputs.upload_url }}
          asset_path: ./main.pdf
          asset_name:  resume-${{ steps.time.outputs.time }}.pdf
          asset_content_type: application/pdf

Navigate to your program, where your download resume link exists. We will use GitHub's Graphql API to retrieve the download URL for the PDF version of your resume. Space Jelly explains the following code very well. This was placed at the top of Navbar React component of my personal project.

const [downloadableResume, setDownloadableResume] = useState();

  const baseUrl = "https://api.github.com/graphql";

  const httpLink = createHttpLink({
    uri: baseUrl,
  });

  const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        ...headers,
        authorization: `Bearer $${process.env.GITHUB_ACCESS_TOKEN}`,
      },
    };
  });

  const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
  });

  useEffect(() => {
    client.query({
        query: gql`
        {
          viewer {
            login
          }
          repository(name: "resume", owner: "dessygil") {
            id
            releases(first: 1) {
              edges {
                node {
                  id
                  releaseAssets(first: 1) {
                    edges {
                      node {
                        downloadUrl
                      }
                    }
                  }
                }
              }
            }
          }
        }
        `,
      })
      .then((response) => {
        setDownloadableResume(response.data.repository.releases.edges[0].node.releaseAssets.edges[0].node.downloadUrl);
      });
  }, []);

This should be all you need to build a fully automated pipeline for your personal website. If there is anything else that you would like to see added to this post, please don't hesitate to reach out.

Runaway Button React App

Desmond Gilmour — Tue, 31 Jan 2023 17:58:46 +0000

I made my partner a valentines site using react, and I used emailJS to notify me when they said yes! It was a quick build, but one thing I did get caught on was trying to take people's jquery or vanilla js code from CodePen and use it in my react app for the runaway button on the site.

The runaway button is perfect for pranking friends, and a small thing like this makes computer science very enjoyable for a beginner, so I decided to share.

I've cut a lot of code to focus on the main parts (rest can be found Github). The component has a set x and y where the button begins, but once someone tries to move over the button, the position will change using Math.random(), which is reflected in the CSS of the button.


function App() {

  const [x, setx] = useState(52);
  const [y, sety] = useState(55);

  function mouseOver() {
    setx(Math.random() * 100);
    sety(Math.random() * 100);
  }

  var noStyle = {
    left: x + "%",
    top: y + "%",
    position: "absolute",
  };

  return (
     <button
       onMouseOver={mouseOver}
       style={noStyle}
       onClick={popUp}
     >
       Click me!
     </button>
  );
}

export default App;

Reaching Out To Recruiters

Desmond Gilmour — Wed, 04 Jan 2023 04:41:29 +0000

Sales is a great teacher

If there is one thing I've learned from sales, it's to persevere. Each no brings you closer to a yes. This especially applies when looking for a new job.

As I write this, I'm in the middle of a career transition from sales and am currently applying for software engineering jobs. I still apply to as many jobs as possible using the traditional methods (LinkedIn and Indeed), but nothing has a higher ROI than reaching out and getting a possible referral or contacting the recruiters directly.

The message below is a note you can add when you send a connection request, and since you only have 300 characters, you have to be concise. Once they add you back, you have a line of contact, and you can reach out to them every few months.

Hi [name], saw you were hiring for [role] at [company]. I have experience in [relevant experience matching job posting], which would be a great fit. Would love to discuss!

You can say anything, but a method like this is the most direct and reproducible for multiple recruiters at the same company.

If you have any other templates you follow, I would love to read them in the comments.

Automate LinkedIn Invites To Be Withdrawn

Desmond Gilmour — Tue, 03 Jan 2023 23:43:54 +0000

All sales begin with Social selling

It's true. Most prospects you interact with nowadays will probably have seen your posts or posts from someone else from your company on LinkedIn. Now, similar to me, I'm guessing you are mass connecting with everyone and their mother from the company you are prospecting... eventually these connection requests begin adding up, and the next thing you know, you have over 2000 pending requests.

Luckily, you can automate the cleanup of these requests.

Navigate to https://www.linkedin.com/mynetwork/invitation-manager/sent/
Open the developer console (right-click and inspect and then choose the console tab)
Enter this snippet of code into the console and wait

var firstButton = document.getElementsByClassName("invitation-card__action-btn artdeco-button artdeco-button--muted artdeco-button--3 artdeco-button--tertiary ember-view")

var secondButton = document.getElementsByClassName("artdeco-modal__confirm-dialog-btn artdeco-button artdeco-button--2 artdeco-button--primary ember-view")

setInterval(()=>{
    for(var i=0;i<firstButton.length;i++){
        firstButton[i].click()
        secondButton[0].click()
    }},1500)

It should look something similar to this.

If you plan to continue your tasks, this code can run in the background. This code has helped me, whether I am mass-adding recruiters, prospects, or people at companies I would like to work for.

Good luck, and thank you for reading.