Blog

Tic-Tac-Toe

2019-04-08T18:00:00Z

Website History

2019-12-25T00:00:00Z

My personal website has gone through several iterations. Here I briefly describe the motivation and technologies behind each major version.

V1 - Jekyll ¶

Inspired by several friends, I began learning about web development in December 2018. Using Jekyll with the Moon theme, I built a personal website and hosted it on GitHub Pages. Though the website looked good, I hardly knew how it worked, so I explored further.

V2 - “Vanilla” ¶

To better understand basic web technologies, I built a new website from the ground up with vanilla HTML, CSS, and JavaScript. Eventually, I used Browserify to modularize my JavaScript code. I also used liquidjs to build a primitive static site generator similar to Jekyll. Overall, this project taught me about the wide variety of libraries and tools available for web developers.

V3 - React ¶

To gain more experience with high-level frameworks, I built the next version of my website with React. Though I enjoyed the flexibility React provided, I also found it too heavy for a personal website. React is tailored for large, interactive websites, but my personal website was small and static. Furthermore, using pure React on the client-side meant that JavaScript had to be executed before any content was rendered, so search engines had a harder time indexing my content. Some search engines, like Google, did execute the JavaScript and analyze the result, but others, like DuckDuckGo, did not, and so my website did not show up. Hence, I concluded that I should use a static site framework like Jekyll, while plugging in small React components if needed.

V4 - Jekyll (again) ¶

Thus, I came full circle and decided to use Jekyll once more, initially with the al-folio theme, and then with the TeXt theme – with numerous custom tweaks, of course. I also integrated React into this theme, allowing me to add interactive components when needed.

V5 - Eleventy ¶

Most recently, I have adopted the Eleventy framework. Eleventy fulfills a similar role as Jekyll, but since it is implemented in JavaScript, I can more easily integrate many of my favorite tools, including Tailwind CSS, markdown-it, KaTeX, and Preact.

Integer Replacement

2020-01-13T19:00:00Z

This is a problem I brought along to the WICSxACM Technical Interview Prep workshop on January 13, 2020.

Problem Description ¶

Source: LeetCode 397

Given a positive integer $n$ , you can perform the following operations:

If $n$ is even, replace $n$ with $n/2$
If $n$ is odd, replace $n$ with either $n + 1$ or $n - 1$

What is the minimum number of replacements needed for $n$ to become $1$ ?

Hints ¶

The initial temptation is to go for a fancy, math-based $O(1)$ solution, but there are more general approaches that will increase your chances of actually coming up with a solution. What are some other approaches you can think of?
How can you think of the problem as a graph? (For this workshop, I know there have been quite a few other graph problems, so this will be fresh in your mind.)

Solution ¶

I have implemented one possible solution to the problem in C++.

Approach 1: BFS ¶

This solution was suggested in the Hints. The idea is to think of the numbers as a graph, where each number is a node and there are edges connecting each node $x$ to $x/2$ if $x$ is even, or to $x + 1$ and $x - 1$ if $x$ is odd. We can then perform a BFS (Breadth-First Search) on the graph to find the length of the shortest path from $n$ to $1$ .

Time complexity: $O(n)$ – we can only encounter numbers in the range $[1, 2n]$ since if you reach $2n$ , you wasted a bunch of steps because $2n$ can just be divided by $2$ to get $n$ . Since we never visit the same number twice, the time complexity is $O(2n) = O(n)$
Space complexity: $O(n)$ – same reason as above.

class Solution {
 public:
  int integerReplacement(int n) {
    // Queue for BFS -- each pair holds a number `x` and the number
    // of steps it is from `n`. We use `long long` to account for the
    // edge case when `n == INT_MAX`. Note that as we pop nodes from
    // and add nodes to this queue, the number of steps gradually
    // increases. Furthermore, note that we are guaranteed to visit all nodes
    // that are `k` steps from `n` before any nodes that are `k + 1` steps
    // from `n`.
    queue<pair<long long, int>> q;

    // Visited set -- holds numbers that have already been encountered.
    // Numbers enter this set when they are first encountered by the
    // algorithm. We do not want to revisit these numbers because we only
    // care about the minimum number of steps to visit them.
    unordered_set<long long> visited;

    // The queue starts with `n` at 0 steps, and `n` is visited to begin with.
    q.push({n, 0});
    visited.insert(n);

    // BFS loop.
    while (!q.empty()) {
      // Retrieve the next `x` and `steps` from the queue.
      long long x;
      int steps;
      tie(x, steps) = q.front();  // See std::tie
      q.pop();

      // We solved the problem -- return the number of steps.
      if (x == 1) return steps;

      if (x % 2 == 0) {
        // If x is even, the only node connected to it will be `x/2`
        if (visited.find(x / 2) == visited.end()) {
          // Make sure to record that `x/2` is visited.
          visited.insert(x / 2);
          // Add `x/2` with one more step than `x`.
          q.push({x / 2, steps + 1});
        }
      } else {
        // Same as above, except we now have `x + 1` and `x - 1`
        if (visited.find(x + 1) == visited.end()) {
          visited.insert(x + 1);
          q.push({x + 1, steps + 1});
        }
        if (visited.find(x - 1) == visited.end()) {
          visited.insert(x - 1);
          q.push({x - 1, steps + 1});
        }
      }
    }

    // If for some reason no solution was found.
    return -1;
  }
};

Alternate Approaches ¶

If you look at the discussions on the original LeetCode problem, you will see references to dynamic programming (DP) and recursion.

N-Queens

2020-06-06T03:00:00Z

The $n$ -queens problem is the problem of placing $n$ queens on an $n \times n$ chessboard such that no two queens are attacking each other. The following tool provides a visualization of a “brute-force” algorithm for solving the problem. This algorithm advances across the board column by column. In each column, the queen is moved down until it no longer conflicts with any of the previous queens. Once such a position is found, the queen in the next column is placed. This continues until the last queen is placed, solving the problem. If at any time a queen in a certain column cannot be placed anywhere, we “backtrack” to the previous column and move that queen down to its next valid position. Once we have placed all $n$ queens, we can continue this algorithm to find other solutions.

This tool shows the current queen in blue. Queens that conflict with the current queen as it is moved are shown in red. The top row of numbers shows the position (row number) of each queen in the corresponding column. The controls on the side adjust board size and speed of the visualization. There are also buttons for running the visualization, taking a single step, and stopping.

Notes ¶

For example implementations of this algorithm in C++, refer to this GitHub repo.
While the algorithm described and visualized above is designed to find all solutions to the $n$ -queens problem for any $n$ , it is not the most efficient if we only seek to find one solution. In this case, we can turn to a closed-form solution, such as the one described in the paper Explicit solutions to the N-queens problem for all N and implemented here.

Applying to Grad School

2020-07-25T18:00:00Z

Having applied to CS Ph.D. programs over the past year or so, I decided to write down a few lessons I learned. To begin, I will talk about my overall experience. The summer after high school (2017), I took the GRE, as I knew I wanted to pursue graduate education, and the GRE was not much of a stretch after the SAT and ACT. In spring 2019, I spoke to my professors about what grad school entailed, and whether it would be a good fit for me. These professors recommended I apply to CS Ph.D. programs as well as the NSF GRFP. After touring the schools where I was accepted earlier this year (2020), I chose to attend USC. Below is a list of tips I learned throughout this process – some items come from first-hand experience, while others were passed along to me.

Figure out what you’re getting yourself into. Grad school is no small undertaking. Basically, you’ll be spending up to 6 years working full-time as a researcher in your advisor’s lab. Unlike in undergraduate, courses will be secondary – you’ll take a few, but they will mostly be aimed at supplementing your research. In short, grad school is more like a job than “school.” One article I found particularly helpful in understanding grad school was this blog post from my advisor at USC.
- Some have asked whether they should do a master’s before / instead of a Ph.D. My general impression is that master’s degrees are more focused on coursework, though many programs do involve writing a thesis. In general, if you are pursuing a research career, a Ph.D. is the way to go. Furthermore, many Ph.D. programs allow you to petition for a master’s once you have passed certain milestones. If you are thinking of completing a master’s and then a Ph.D., keep in mind that a master’s is not required to pursue a Ph.D. (i.e. you can go straight from undergrad to Ph.D.), and a master’s will not necessarily take time off your Ph.D.
Talk to as many people as possible. Get advice from lots of people when you are trying to figure out the program and school to which you should apply. Keep in mind that you will receive many viewpoints, some conflicting with each other. It is up to you to distill the information that is helpful for your situation.
Figure out an area in which to specialize. You should be going into a Ph.D. program with a general idea of what problems you want to work on. This will help you decide which professors you want to work with, as well as what you write in your various application materials. Certainly, this will require some soul searching – read some papers, think about your personal history, and figure out what you want to work on next.
Choose the professor(s), not just the school. Grad school is all about the people, since you are basically picking your manager and coworkers for the next several years. Thus, as you select schools, make sure you are looking through professors’ publications/websites. You may also want to check whether the school has multiple professors working in your field of interest, as having a community of like-minded researchers can be beneficial. To this end, CS rankings is a great website for finding prominent schools and professors in your field of interest.
Email professors who you may be interested in working with. If you are genuinely interested in working with certain professors, spend some time composing an email asking about their recent research. Importantly, do not go around asking professors if they will accept you, but do ask if they are accepting students for their lab. If a professor is not taking any students, your application may be wasted. Note: some professors will explicitly ask that you not email them.
Choose your recommenders carefully. Recommenders must be people who know you well enough that they can write a letter about your ability to do independent research. Ideally, they are professors with whom you have done research. If you have not done research with enough professors, get to know your current instructors by attending their office hours. Above all, do not be afraid to ask for a recommendation. Writing recommendations is a regular part of a professor’s job, and if they know you well enough, they will be willing to help you.
Ask your recommenders early, and keep them in the loop. Give your recommenders as much time as possible to write your recommendations. By June of 2019, I had asked two of my recommenders, and by the end of the summer, I had asked my third. As I applied, I kept them updated on my list of grad schools, and I let them know when I had sent out requests for letters (usually, the application system lets you send a letter request to your recommender; the recommender then opens this email and submits the letter).
The personal statement is the part that you can control. Most of your application will already be set by the time you start applying. Your GPA probably will not change much, your GRE scores will be set, your recommenders will write what they write, and you will not suddenly gain a plethora of new research experiences. However, the personal statement is something that you can change right now, so make sure that it is pristine.
Get everyone to review your application. This is especially true for the personal statement. Send it to as many people as you can – not just the professors / recommenders you are working with, but also counselors, family members, and (especially) peers. In particular, I found it really helpful to get advice from friends who had just applied to and entered grad school, as well as friends who were currently applying to grad school.
Consider if you want to go abroad. The advice in this list is tailored to US programs, but you can always consider places like the UK, Canada, and Singapore. Keep in mind that the processes and programs in other countries may be different. For instance, UK Ph.D. programs tend to be shorter than US ones.
Apply to fellowships too. Fellowships like the NSF GRFP provide funding to graduate students and come with high prestige. Some schools also have offices dedicated to helping students apply to such awards. For example, UCI has the Scholarship Opportunities Program.
Start early. Applying to grad school is a tedious process, and you will need as much time as you can get. Starting early means you have more time to write your essays and get reviews from professors and anyone else helping you. If you’re reading this article a couple months before you would apply, you’re already on the right track.
The application process does not end with submit. Unfortunately, you’re not done when you hit the submit button on your application. Though applications are typically due in mid-December (with some in late November or early January), expect to be contacted for interviews and visits with professors starting in January. Essentially, before choosing to work with you for the next several years, professors will want to know more about you than they can glean from your application. To prepare for these interviews, review the professor’s recent work and make sure you can answer questions about everything on your application, especially research experiences. Of course, make sure to ask if there is anything you should prepare when a professor contacts you.

With that, I hope this list has clarified some of the Ph.D. application process. Best of luck on your applications!

CPPN Image Generator

2020-12-17T03:00:00Z

Compositional Pattern-Producing Networks (CPPNs) are networks which, among other things, may be used to encode images at (theoretically) infinite resolution. While other networks simultaneously output all pixels for an image, CPPNs take in individual $x$ and $y$ coordinate and output one pixel at time. This demo generates random images with a CPPN. The CPPN architecture is as follows:

An input layer takes in a random latent vector with values in the range $[-1, 1]$ , as well as $x$ and $y$ coordinates of the pixel and a radius $r = \sqrt{x^2 + y^2}$ .
The inputs flow through several fully connected layers with tanh activations.
Finally, there is an output layer of size 1 (for greyscale images) or size 3 (for RGB images) with sigmoid activation (this ensures all outputs are in the range $[0, 1]$ ).

All weights are initially drawn from a unit normal distribution. When you press the Restart button, these weights will be re-initialized. To get the final image, pixel values are calculated on a grid of width uniformly spaced coordinates in the $x$ direction and height uniformly spaced coordinates in the $y$ direction.

For more info about CPPNs, I recommend referring to David Ha’s blog post. This demo is based on that blog post, as well as the corresponding demo. The network in this demo was implemented with TensorFlow.js. The implementation is contained in the HTML for this page (i.e. you can view it with “inspect element”).

Width: 240

Height: 240

Hidden Layers: 8

Hidden Layer Dimension: 16

Color Mode

Latent Vector Size: 2

Using CMA-ME to Land a Lunar Lander Like a Space Shuttle

2021-02-05T08:00:00Z

This post was published as a tutorial in the pyribs library. Head over there to learn more! https://docs.pyribs.org/en/stable/tutorials/lunar_lander.html

Learning a Repertoire of Robot Arm Configurations

2021-02-05T08:00:01Z

This post was published as a tutorial in the pyribs library. Head over there to learn more! https://docs.pyribs.org/en/stable/tutorials/arm_repertoire.html

Illuminating the Latent Space of an MNIST GAN

2021-02-05T08:00:02Z

This post was published as a tutorial in the pyribs library. Head over there to learn more! https://docs.pyribs.org/en/stable/tutorials/lsi_mnist.html

Generating Images to Fool an MNIST Classifier

2021-02-05T08:00:03Z

This post was published as a tutorial in the pyribs library. Head over there to learn more! https://docs.pyribs.org/en/stable/tutorials/fooling_mnist.html

Running Distributed Quality-Diversity Algorithms on HPC

2021-02-17T06:00:00Z

View the tutorial and slides here.

Matplotlib Figures and File Formats

2022-05-27T16:00:00Z

You’ve visualized your data with Matplotlib, and now you want to include your figures in your paper, presentation, website, or other document. However, exporting your figure from Matplotlib is not always trivial if you want to ensure high quality — a look at the plt.savefig() function shows there are over a dozen arguments you can tweak when saving your figures. In this post, I’ll focus on one small aspect of this problem, namely, how to choose the correct file format for saving your figure. For a quick summary of the tips in this article, see the Conclusion.

Update (May 30, 2022): To clarify, this article only reviews the common formats I am familiar with. For a full list of file formats supported by Matplotlib, see here.

Setup ¶

In this post, we’ll use the following code, adapted from this Matplotlib scatter plot example. This code should work as long as you have numpy and matplotlib installed.

"""Example of saving a scatterplot to different image formats.

Adapted from
https://matplotlib.org/stable/gallery/shapes_and_collections/scatter.html#sphx-glr-gallery-shapes-and-collections-scatter-py
"""
import matplotlib.pyplot as plt
import numpy as np

# Fixing random state for reproducibility
np.random.seed(19680801)

N = 100
x = np.random.rand(N)
y = np.random.rand(N)
colors = np.random.rand(N)
area = (30 * np.random.rand(N))**2  # 0 to 15 point radii

plt.scatter(x, y, s=area, c=colors, alpha=0.5)
plt.tight_layout()

# Save to various formats.
plt.savefig("plot.pdf")
plt.savefig("plot.svg")
plt.savefig("plot.png", dpi=300)
plt.savefig("plot.jpg")  # Avoid using JPEGs if possible!

This code outputs the following plot in PDF, SVG, PNG, and JPEG formats.

Scatter plot output by the code above.

Lesson 1: Prefer vector-based formats ¶

When exporting figures, the first lesson is to always prefer vector-based image formats. To see why this is, we need to understand the difference between vector and raster graphics. Vector graphics represent images with shapes such as points, lines and curves, while raster graphics represent images with pixels. Importantly, vector graphics have infinite resolution, meaning that you can zoom in and the image will still appear clear, while raster images will become blurry/pixelated. While raster images are excellent for photos of the “real world” (e.g. people and places), most plots consist of points, lines, and curves, making vector graphics the ideal format.

Difference between vector and raster graphics. In a vector graphic, the image still appears sharp when zoomed in because the image is composed of various geometric shapes. In raster graphics, the image appears blurry when zoomed in because the image is composed of pixels.

In practice, there are two vector-based formats to stick to. First, if writing a paper with Latex, save your figure as a PDF:

plt.savefig("plot.pdf")

Then, include the PDF in your Latex document as follows (assuming you are using the graphicx package). See here for more info about Latex and figures.

\begin{figure}
  \includegraphics[width=\linewidth]{plot.pdf}
  \caption{My awesome plot.}
  \label{fig:plot}
\end{figure}

Second, if you are creating your figure for a website, save it as an SVG:

plt.savefig("plot.svg")

Then, include the SVG with an img tag, e.g.

<img src="plot.svg" alt="My awesome plot" />

With these two formats, your plots will remain crisp and clear when your audience needs to zoom in :)

Several notes regarding SVGs and PDFs:

Fonts: Both PDFs and SVGs will be fully independent in terms of fonts, i.e. if you use font X in your plot, you will not need to have font X installed on your system when you open the PDF or SVG version of the plot. This is because for PDF, all necessary fonts are embedded in the PDF during export, and for SVG, all text is converted to paths (i.e. lines and curves).
Embedding SVG directly in HTML: It may be possible to embed the SVG directly in the HTML (i.e. without an img tag), but I find that this causes the SVG to always have a fixed size, i.e. even if the screen is small the SVG will not shrink correspondingly. I have yet to find a simple way to make SVGs easily scale their size when directly embedding them.

Lesson 2: When raster-based formats are necessary, use PNG ¶

In some cases, you will find it necessary to use a raster-based format because a vector-based format is not feasible. For example, many web-based tools (e.g. Google Docs, Google Slides) prohibit SVGs because SVGs may contain malicious CSS and JavaScript. Furthermore, such tools do not accept PDFs because PDFs are technically not images. In such cases, it is necessary to save the image in a raster-based format like PNG or JPEG.

When doing so, use PNGs for the highest image quality. The key difference between PNGs and JPEGs lies in how they compress images. While PNGs use lossless compression, which reduces the image size without losing any data, JPEGs use lossy compression, which deletes image data in order to reduce the image size further. This means that plots saved as JPEGs often have compression artifacts, i.e. distortions which occur because the JPEG removed image data when saving. For more information, refer to this comparison between JPEG and PNG.

Comparison between images saved in PNG and JPEG formats. While the circles in the PNG have a smooth color, the JPEG introduces compression artifacts.

While raster-based images will not be as crisp as vector-based images, you can compensate for this by increasing the resolution when saving. To do this, pass the DPI (dots per inch) parameter, e.g.

plt.savefig("plot.png", dpi=300)

The DPI required will depend on (1) the size of your Matplotlib figure in inches, and (2) the size of the image you need in your document. 300 DPI is usually sufficient, though you will need to go higher if your image is larger in the final document than in Matplotlib (e.g. if it is 8in. x 6in. in the final document but only 4in. x 3in. in Matplotlib).

Alternative Formats ¶

Finally, here are some alternative image formats:

PGF: Matplotlib supports saving images as a PGF file, which is a set of commands that can be parsed by the Latex pgf package to create figures directly in a Latex document. I have not used this format because it requires having Latex installed on the system where I am plotting, and PDFs are already sufficient for my purposes. For more information on saving to PGF, see here.
TIFF: TIFFs are a raster-based format typically used in print applications. Since I spend most of my time working with the web, I am more familiar with PNGs. For a comparison between PNGs and TIFFs, see here.

Conclusion ¶

While it may be sufficient to save all your Matplotlib figures in one format, choosing the right format can make your figures clearer and more professional. This article introduces several guidelines for choosing the right format, which may be summarized by the following table.

Where will you use your figure?	You should save your figure in this format:
Latex document (e.g. a paper or report)	PDF
Website	SVG
Web-based tool (e.g. Google Docs, Google Slides)	SVG if allowed, PNG otherwise
Word processor (e.g. Microsoft Word)	SVG if allowed, PNG otherwise

Bonus Tips ¶

TrueType Fonts ¶

Many venues require that your paper use Type 1 / TrueType fonts, but Matplotlib uses Type 3 fonts by default. To make sure you use TrueType fonts when exporting your figures to PDF, use the following code:

import matplotlib
matplotlib.rcParams['pdf.fonttype'] = 42
matplotlib.rcParams['ps.fonttype'] = 42

See this blog post for more info.

Heatmaps ¶

When saving heatmaps e.g. those generated by Seaborn’s heatmap() or Matplotlib’s pcolormesh(), you may find that the PDF shows thin white lines between the cells, even if you did not specify any borders around the heatmap cells. This occurs because the PDF viewer is struggling to render the large number of independent cell objects.

Thin white lines show up between the cells when saving this heatmap in a PDF.

To resolve this issue, rasterize the heatmap cells by passing rasterized=True to heatmap() or pcolormesh(), i.e.

sns.heatmap(..., rasterized=True)
plt.pcolormeash(..., rasterized=True)

This will convert the cells of the heatmap (but not the rest of the plot) into a single image which can easily be rendered. See this StackOverflow question for more info.

The heatmap after rasterizing the cells – note there are no more unwanted white lines.

Upgrading CMA-ME to CMA-MAE on the Sphere Benchmark

2023-02-22T08:00:00Z

This post was published as a tutorial in the pyribs library. Head over there to learn more! https://docs.pyribs.org/en/stable/tutorials/cma_mae.html

Generating Tom Cruise Images with DQD Algorithms

2023-02-22T08:00:01Z

This post was published as a tutorial in the pyribs library. Head over there to learn more! https://docs.pyribs.org/en/stable/tutorials/tom_cruise_dqd.html

Scaling CMA-MAE on the Sphere Benchmark

2023-12-16T08:00:00Z

This post was published as a tutorial in the pyribs library. Head over there to learn more! https://docs.pyribs.org/en/stable/tutorials/scalable_cma_mae.html

Incorporating Human Feedback into Quality Diversity for Diversified Text-to-Image Generation

2024-03-14T08:00:00Z

This post was published as a tutorial in the pyribs library. Head over there to learn more! https://docs.pyribs.org/en/stable/tutorials/qdhf.html

Exploring Deceptive Mazes with Novelty Search

2025-06-26T08:00:00Z

This post was published as a tutorial in the pyribs library. Head over there to learn more! https://docs.pyribs.org/en/stable/tutorials/ns_maze.html

Orchestrating LLMs to Write Diverse Stories with Quality Diversity through AI Feedback

2025-08-12T08:00:00Z

This post was published as a tutorial in the pyribs library. Head over there to learn more! https://docs.pyribs.org/en/stable/tutorials/qdaif.html