In practice, after the one-time setup I describe here, all I do after solving the crossword is print it and save the PDF to a folder called Notes/. The rest is automatic.

To begin with, I have Hazel monitor the Notes/ folder and run this rule:

All this does is checks if a PDF file has been added to the root level of the Notes/ folder which has the string Welcome to the India Mini crossword!. It then pulls out the date from the file and pushes it into a date-based subfolder; e.g, if the crossword was for the 10th of May, the PDF file moves to the folder Notes/2024/05/10/. This is nice because even if I miss a day and solve something later, simply saving the file will still auto-file it in the correct directory.

Next up, there is a second rule:

which processes the PDF file by extracting an image that contains the solved crossword. The actual work is carried out by this shell script, written mostly by chatGPT, complete with hard-coded paths:

#!/bin/bash

# Extract the first page
/usr/local/bin/pdftk /Users/neeldhara/Library/CloudStorage/Dropbox/Notes/$1/indiamini-crossword.pdf cat 1 output /Users/neeldhara/Library/CloudStorage/Dropbox/Notes/$1/first_page.pdf

echo /Users/neeldhara/Library/CloudStorage/Dropbox/Notes/$1/indiamini-crossword.pdf

# Convert the first page to a PNG
/opt/homebrew/bin/convert -density 300 -quality 100 /Users/neeldhara/Library/CloudStorage/Dropbox/Notes/$1/first_page.pdf /Users/neeldhara/Library/CloudStorage/Dropbox/Notes/$1/first_page.png

# Get the height and width of the image
height=$(/opt/homebrew/bin/identify -format "%h" /Users/neeldhara/Library/CloudStorage/Dropbox/Notes/$1/first_page.png)
width=$(/opt/homebrew/bin/identify -format "%w" /Users/neeldhara/Library/CloudStorage/Dropbox/Notes/$1/first_page.png)

# Calculate the half height and width
half_height=$((height/2))
half_width=$((width/2+5))

# Crop the image to the top right half
/opt/homebrew/bin/convert /Users/neeldhara/Library/CloudStorage/Dropbox/Notes/$1/first_page.png -crop 1100x1100+${half_width}+315 /Users/neeldhara/Library/CloudStorage/Dropbox/Notes/$1/indiamini-crossword.png

# Delete intermediate files
rm /Users/neeldhara/Library/CloudStorage/Dropbox/Notes/$1/first_page.png
rm /Users/neeldhara/Library/CloudStorage/Dropbox/Notes/$1/first_page.pdf

I finally have a very simple Keyboard Maestro macro that runs every morning at 7AM — except Sundays, because the Sunday crossword is not a mini :) — to create the crossword note in my Obsidian vault in a date-based folder:

The crossword note template is very minimal:

---
title: India Mini Crossword · <% tp.date.now("YYYY") %>-<% tp.date.now("MM") %>-<% tp.date.now("DD") %>
tags:
  - kw/c/crossword
  - kw/i/indiamini
  - puzzles/indiamini-crossword
asset: file:///Users/neeldhara/Library/CloudStorage/Dropbox/Notes/<% tp.date.now("YYYY") %>/<% tp.date.now("MM") %>/<% tp.date.now("DD") %>/indiamini-crossword.pdf
---


![Crossword](file:///Users/neeldhara/Library/CloudStorage/Dropbox/Notes/<% tp.date.now("YYYY") %>/<% tp.date.now("MM") %>/<% tp.date.now("DD") %>/indiamini-crossword.png)

The Templater plugin for Obsidian ensures that the dates expand correctly at the time the note is created. You could instead run a shell script to just generate these notes for all dates in advance, but I like this because the KM prompt reminds me to do the crossword :)

The individual crossword file simply shows the PNG file generated by the Hazel rule. I might eventually add solve times to the frontmatter. For the collage, I use this dataview query in a separate note:

console.log('Fetching pages from "Notes" with specific tag...');

const assets = dv.pages('"Notes"')
  .where(p => p.tags?.includes("puzzles/indiamini-crossword") && p.asset)
  .map(page => {
    // Replace .pdf with .png in the asset path
    const pngAsset = page.asset.replace('.pdf', '.png');
    console.log(`Found page: ${page.file.path} with asset: ${pngAsset}`);
    return {
      file: page.file.link,
      asset: pngAsset // Now the asset points to a .png file instead of a .pdf
    };
  });

dv.paragraph(`Total images found: ${assets.length}`);
assets.sort();

let fullstring = "";

if (assets.length === 0) {
  dv.paragraph("No assets found. Check the folder, tags, and frontmatter.");
} else {  
  assets.forEach((item, index) => {
    fullstring += `![|230](${item.asset})   `;
    if ((index + 1) % 3 === 0) { // After every third image
      fullstring += '\n'; // Append a line break
    }
  });
}


dv.paragraph(fullstring);

The media grid snippet for Obsidian gets the grid alignment going for the images.

And that’s it!

If you are

1. teaching a course at IIT Gandhinagar next term (Jan-Apr 2024),
2. working on your course plan, and
3. need a list of dates on which you have classes,

then you can use the generator below to get a list, by checking your teaching days.

Dates during the mid-sem exam (Feb 19 – 24, 2024) and the mid-sem recess (Mar 23 - 31, 2024) are excluded. Holidays are excluded too, but restricted holidays are not. If you need to view the holidays, you can indicate as much via the checkbox below.

For those outside IITGN: a standalone version is here and the source is here, in case you’d like to adapt this to your own context.

If you are

1. teaching a course at IIT Gandhinagar next term (Jan-Apr 2024),
2. working on your course plan, and
3. need a list of dates on which you have classes,

then you can use the generator below to get a list, by checking your teaching days.

Dates during the mid-sem exam (Feb 19 – 24, 2024) and the mid-sem recess (Mar 23 - 31, 2024) are excluded. Holidays are excluded too, but restricted holidays are not. If you need to view the holidays, you can indicate as much via the checkbox below.

For those outside IITGN: a standalone version is here and the source is here, in case you’d like to adapt this to your own context.

Background

Interactions and visualizations have been useful for explaining concepts, although they are known to potentially mislead or confuse as often as they have been thought of as tools that help clarify concepts. VisuAlgo is a very successful¹ example of interactive learning in CS education at an undergraduate level, which brings the algorithms that one would typically encounter in an introductory algorithms course to life: users can often provide their own input, and the interface does the rest. On the bottom-right corner one can typically see an implementation of the algorithm in code, which is “run through” as elements get manipulated on a “main stage”.

Other examples of deeply interactive experiences include:

1. Brilliant
2. Mathigon
3. Seeing Theory
4. The Wisdom and/or Madness of the Crowds
5. The Evolution of Trust
6. Parable of the Polygons
7. To Build a Better Ballot
8. Visualizing Quaternions
9. Mechanical Watch

…to name a few. These combine interactive workouts interleaved with text, and usually encourage active participation from the reader. However, while such tools can be invaluable, they are often tedious and time-consuming to build, not to mention that they require fairly specialized expertise. For instance, Ben Eater, the creator of the quaternions visualization, says about the process of builiding the visualization²:

Since there wasn’t really anything like this yet, we built it all ourselves from a variety of existing web tools: WebGL (using threejs plus some custom shaders) for 3d stuff, raw canvas for the 2d stuff, howlerjs for handling the audio playback, and lots of React for the UI and to glue it all together. It’s very much a bespoke app. In the future, I hope we’ll build more of these and as we do so, the tech will evolve to something more easily generalized.

The availability of tools like chatGPT and its ilk, powered by large language models, have been the subject of much heated debate, especially in the context of their role in education. They have been viewed (e.g, by plagiairsm detectors, where challenges about false positives persist) as tools that can help students cheat, although there is also much work arguing for their use in helping students learn.

Here, I want to focus on something perhaps more mundane, but a theme that has been one of my favorite chatGPT use cases over the last few months: it’s utility in helping create materials that are too tedious to bring to life otherwise. It turns out that I often envision neat little interactive experiences when I am thinking about how to describe something: it could just be a thing that lets folks play with examples to build out some intuition or it could be something that helps bring out a specific element of an argument or an idea. However, the barrier of entry to creating those experiences myself is just a little out of reach, enough for me to not do it. But with the kind of help I have had from chatGPT, I feel invested enough to mess around.

For a lot of standard topics, there are plenty of visualizations and interactive experiences already available: so one might wonder if this is worth it. I do think that leveraging existing content that’s already been done well is important, but: (a) not everything is already done, and (b) experiences created from scratch allow for instructors to incorporate their own variations on the textbook premise, and would also offer the flexibility to be transformed into assessments — both of these goals are often hard to meet with off-the-shelf demonstrations.

Note: Although a lot of this discussion is about how instructors can leverage chatGPT as a tool to efficiently create visualizations and interactive experiences for their learners, none of the text in the blog itself is generated with AI 😀 To make this distinction clear, all text quoted verbatim from either books or chatGPT’s output will be placed in grey boxes. Prompts to chatGPT are not AI-generated either and are shown in boxes with a green background.

For Instructors

I’ll describe two examples of visualizations of textbook topics that may not be widely available otherwise. The entire chatlogs for the specific demonstrations can be found as PDFs at the following links:

1. Subtraction Game
2. File Storage 1
3. File Storage 2

(The May 12 release of chatGPT was in use.)

Exhibit A. The Subtraction Game

The subtraction game is the following.

The Game of Subtraction

Subtraction is a game played on a heap of tokens. Each turn, the current player can remove either 1, 2, or 3 tokens from the pile, provided enough tokens exist. When the pile is empty there are no available moves. In this text, we will use a fancy number script to denote a subtraction position, e.g. S for a subtraction game with five tokens. Sample game: Starting from a pile of 6 , the first player takes one, then the second player takes two, then the first player takes all three to win the game.

— from Playing with Discrete Math.

The text goes on to encourage the reader to play the game to develop a feel for it, and uses the game as a running example to develop various concepts in combinatorial game theory, including strategies, positions, game trees, and so on.

The game of Subtraction can doubtless be played in a low-tech environment using a whiteboard, pen and paper, or an actual heap of tokens. However, an instructor may want to make an interactive version of the game available as a part of instructional material such as lecture notes. At this point, an instructor may look for an existing implementations, although in this particular example this may turn out to be a bit of a challenge: the internet is rife with so-called “subtraction” games, most of which have nothing to do with the game at hand. Besides, a custom implementation would provide a starting point for the development of related concepts, customized quizzes, and so on.

As discussed earlier, creating a playable version of Subtraction from scratch is arguably not a difficult exercise, but for most people it would be time-consuming to the point where the cost may outweigh the benefits. However, with a tool like chatGPT at hand, the process becomes substantially easier.

chatGPT Prompt

We are going to code a simple HTML/JS/CSS game.

Please create a game arena that is a 420 x 420 canvas with rounded corners. The background outside the canvas should be lightseagreen.

All the elements below should be centered within the canvas.

Inside the canvas, close to the top, draw a box with a random number between 15 and 50.

Just below this box, draw three boxes labeled 1, 2, and 3.

Just below these three boxes, display the text: “Lata’s turn to move.” Let us call this string ’whoseTurn‘.

Just below this text, add a link that says “Instructions”. This should bring up a modal with the text “SUBTRACTION is a game played on a heap of tokens. Each turn, the current player can remove either 1, 2, or 3 tokens from the pile, provided enough tokens exist. When the pile is empty there are no available moves. The player with no valid moves left loses.”.

Finally, when the user clicks on either 1, 2, or 3, the number in the central box should reduce by 1, 2, or 3 respectively. If the subtraction results in a negative number, disregard the click and alert the user that “Only moves resulting in a positive result remaining.”

When a button is clicked, if whoseTurn is “Lata’s turn to move”, then it should change to “Raj’s turn to move”, and vice versa.

When the number hits 0, if whoseTurn is “Lata’s turn to move”, then update whoseTurn to “Game over, Lata won”, and “Game over, Raj won” otherwise. At this point, none of the buttons should be clickable.

The output of chatGPT on this prompt, with some minor modifications in styling, leads to an interface that looks as shown below:

A natural extension to the game of subtraction is go beyond the numbers 1,2, and 3. One might then use a follow up prompt such as the one below.

chatGPT Prompt

Can you make it so that instead of 1, 2, 3, the buttons display three distinct random numbers between 1 and 9 (inclusive), and the rules are the same?

In this process we realize that the players may run out of moves even before the number in question hits zero. An easy way to mitigate this is to ensure that one of the numbers is always one, while the others are randomly chosen. The output of chatGPT may have minor issues: for instance, the documentation in the instructions modal would possibly not adapted to the new set of numbers, the buttons may display the numbers in non-ascending order, and so on. All of these “quirks” are easily fixed with follow up prompts, and a working demonstration of the final implementation can be found here.

Exhibit B. Storing Files on Tape

The problem of optimally storing files on a tape is a classic example of an optimization problem that admits a greedy algorithm: the intuitive approach to the solution turns out to be the correct one.

We reproduce the problem statement as given in Algorithms by Jeff Erickson.

The Optimal File Storage Problem

Suppose we have a set of files that we want to store on magnetic tape. In the future, users will want to read those files from the tape. Reading a file from tape isn’t like reading a file from disk; first we have to fast-forward past all the other files, and that takes a significant amount of time. Let be an array listing the lengths of each file; specifically, file has length . If the files are stored in order from 1 to , then the cost of accessing the th file is

The cost reflects the fact that before we read file we must first scan past all the earlier files on the tape. If we assume for the moment that each file is equally likely to be accessed, then the expected cost of searching for a random file is If we change the order of the files on the tape, we change the cost of accessing the files; some files become more expensive to read, but others become cheaper. Different file orders are likely to result in different expected costs. Specifically, let denote the index of the file stored at position on the tape. Then the expected cost of the permutation is Which order should we use if we want this expected cost to be as small as possible? The answer seems intuitively clear: Sort the files by increasing length. But intuition is a tricky beast. The only way to be sure that this order works is to take off and nuke the entire site from-orbit actually prove that it works!

— From Algorithms.

Now the key to appreciating the proof of the greedy algorithm here is to see that if we violate the “natural order” then we pay more in expected cost. While the calculation is straightforward, an instructor may find that it makes sense to motivate the main idea by allowing the learners to play around with some examples.

There are two approaches to visualizing this problem. In both cases, the stage consists of a tape represented as a long horizontal rectangle, and the files are represented as rectangles whose height matches the height of the tape, and whose lengths are proportional to their sizes. The expected cost of access of whatever is on the tape is displayed at all times, along with the optimal cost possible.

• A predefined set of files are given and are initially placed outside the tape. The user can position them on the tape by, for example, dragging and dropping them on the tape, or double clicking them: in either case, the chosen file is appended to the end of the tape. We may allow the user to reorder the files on the tape by drag and drop actions or remove them off the tape entirely. The expected cost is dynamically calculated and displayed.

• A set of files, say all equal in size, are already on the tape. The learner can then drag the boundaries to change the file lengths, and the change in costs update dynamically.

The First Approach

To create the first visualization, we started with the following prompt.

chatGPT Prompt

I want to help students understand the problem of “storing files on a tape”. I am seeking your help in creating the following interface via HTML, JS, and CSS. What I want is for the user to be able to drag and drop several rectangular blocks (which I will refer to as pieces henceforth), whose total length is a fixed number of units, on to something that looks like a tape.

So the interface should have a thin rectangular strip (which I will refer to as a tape henceforth) with a grey background at the center, and a collection of draggable pieces placed below it (none overlapping). When a piece is dropped on the tape, it should snap and align to the left without overlapping any of the strips that are already there. When a piece is dragged out of the tape, it should disappear from the tape and the pieces to the right of it should move leftward until the gap is filled.

Please make the total length of the tape 420px wide, and the lengths of the pieces should be either 20px, 30px, 40px, or 50px wide; and they should be made of different colors from a neutral palette. Note that the piece lengths should be generated randomly from this set, they should add up to 420px.

Let N be the number of pieces on the tape at any given point of time. There should be a display which shows the sum of the following quantities (and this should update as pieces are added or dropped on the top): the length of the first (i.e, leftmost) piece multiplied by N, the length of the second piece multiplied by (N-1), and so on, until the length of the last piece, multiplied by 1.

The first few outcomes on this and subsequent prompts had several issues:

• the boxes were not stacked horizontally;

• the drag and drop behaviors were unpredictable;

• the pieces had spacing between them when pushed on the tape.

However, all of this was eventually fixed by describing the inaccuracies in natural language. We also added some functionality allowing the learner to see if their attempt was optimal:

chatGPT Prompt

Below average, can we add the following text: “Target:” followed by the sum of the following numbers, where X is the total number of pieces:

the size of the smallest piece multiplied by X the size of the second smallest piece multiplied by X-1 and so on up to the size of the second largest piece multiplied by 2 the size of the largest piece multiplied by 1

Below the target, display the text “Keep going until all pieces are on the tape”, and if the tape has all the pieces but the average is not equal to the target, change the message to “Nice try, but you can do better!” and if the tape has all the pieces and the average is equal to the target, change the message to “Mission Accomplished!”.

Eventually, we obtain an interface that looks as shown in with some minor styling and updates in the desired widths.

Notice that one of the things that chatGPT had to do was randomly generate a set of pieces from a given set of widths that added up the exact width of the tape (as per our prompt). It did this using the following loop:

chatGPT Output

  // Create pieces
    let totalWidth = 0;
    while(totalWidth < 420) {
      
    const size = 
      sizes[Math.floor(Math.random() 
      * sizes.length)];

      if(totalWidth + size <= 420) {
        totalWidth += size;
        // Code to create the pieces
      }
    }

Evidently, if the sizes array does not have an appropriate set of sizes, this can loop forever. It turns out that chatGPT did not recognize this issue on its own, and it is typical of the sort of bug that the user would have to watch out for, either at the time of formulating specifications or while working through the output.

You can play around with the implementation that I finally ended up with here.

The Second Approach

For the second approach, we start off with the following prompt.³

chatGPT Prompt

Please give me separate css, js, and html files for the following demonstration

What I want initially is as follows

• centered on the screen there is a 420px x 50px horizontal slab

• there are three draggable dividers shown as black dotted lines inside the slab that divide the region equally into 4 parts of width 105 eac

• the regions should initially display the number 105.

If a divider is dragged, it changes the width of at most two regions that it is involved in. These regions should update their width. If any region becomes smaller than 20 px on drag, then any further drag should not be possible

Then I want a text below the slab which says cost, followed by the sum of the following numbers

• the width of the leftmost region * 4

• the width of the region next to the leftmost region * 3

• the width of the region to the left of the rightmost region * 2

• the width of the rightmost region * 1

divided by 4. This number should be dynamically updated as the regions change

Below cost, compute the following quantity and display it, prepended with the text “Optimal Cost”

• the width of the smallest region * 4

• the width of the second-smallest region * 3

• the width of the second-largest region * 2

• the width of the largest region * 1

divided by 4.

For visual clarity we also follow up with the following suggestion.

chatGPT Prompt

Can the background color be Mediumseagreen but with opacity proportional to the width (i.e, more opaque for wider regions and more transparent for smaller ones)?

The current version of this implementation is here, and it’s still a little quirky in terms of the first couple of times you drag the slider, but stabilizes soon after. I hope to fix this… eventually :)

Thanks to Abhinav for the prompt :)

During school, my earliest exposure to the notion of being an engineer was an at-the-time popular audio clip called The Knack, in which a doctor is diagnosing a kid with a condition involving extreme intuition for all things mechanical and electrical. It is implied that having “the knack” is not compatible with a normal life, since the kid is now destined to… be an engineer. This causes his mother to experience much concern and grief. The episode inspired me to keep a polite but firm distance from all things engineering, conveniently including the entrance exams meant to unlock the gates of the IITs.

College admissions are rife with two types of scenarios that are less than ideal: students ending up in programs that are not their cup of tea, and students missing out on experiences that would have been right up their alley. These mismatches are cumulatively expensive: there is the price paid in misallocated resources, and then there’s the personal cost of training for programs that eventually turn out to be a poor fit, which is typically very substantial.

Some of this can be mitigated with an appreciation of what these programs entail, and what the campuses have to offer. The IITs are known predominantly for their undergraduate programs in the traditional engineering disciplines. However, several of them also host excellent programs in the sciences. Further, there are an increasing number of undergraduate programs that have interdisciplinary themes (such as the Btech program in Civil and Infrastructure Engineering with specialization in Smart Infrastructure at IIT Jodhpur) and a focus on emerging technologies and areas (for instance, the BTech program in Artificial Intelligence at IIT Hyderabad or the undergraduate program in Design at IIT Delhi).

Currently, awareness about these opportunities is mostly a heady mix of word of mouth, Quora answers, vibes from coffee-table conversations at coaching centers, and placement statistics on popular media. Impressions of what campus life entails is also largely a combination of imagination fueled by things seen on, say, Netflix and the like. However, if you are a prospective student or a parent of one, you would do well to go beyond these secondary sources of intelligence and get some first-hand experience.

Most IITs host open days every so often: these are special days when the campuses are open to anyone to walk in, and professors and students from the organization delight in sharing what they are up to with accessible demonstrations or lab tours. A recent example is the G20-Ignite Sci-Tech fair which hosted hundreds of school students at the IIT Gandhinagar campus. Often, even one such experience can trigger an inner calling, helping you identify the thing you want to do for life – or at least for a substantial duration. 

You could also go beyond the glimpses offered by open days. Watch out for opportunities to collaborate over small projects. For example, the Center for Creative Learning at IIT Gandhinagar welcomes high school students for short term projects over summer, and students who do well in courses on the NPTEL platform have a shot at internships with the instructors of those courses. Many professors delight in talking to students: check out the various seasons of Talk to a Scientist, for example. You can also ask your school to reach out to professors at nearby institutions for an interactive session, or approach organizations like INYAS that focus deeply on outreach activities at the school level. Finally, several IITs also host bootcamps, hackathons, and so on: they are usually announced on their websites and social media channels, so keep an eye out for these!

Having said all this, a choice of career – or more immediately, a branch or stream – does not have to be prompted necessarily by an intense love at first sight. The routes leading to your final pursuit(s) can be potentially meandering, and not having an inner voice abundant in clarity should be no cause for alarm. Examples of this abound, and I’ll share a representative one. Ronald Graham is arguably best-known as an American mathematician who made fundamental contributions to combinatorics. Because his father worked in various jobs related to oil fields and shipbuilding, he moved schools often. He did not study in any school for more than eighteen months and often studied in grades higher than what would have been normal for his age.

At the age of 15, Graham won a Ford Foundation scholarship to the University of Chicago, where he spent three years learning gymnastics. Because of his outstanding performance in math on the scholarship examinations, he did not (have to) take any mathematics courses. After the duration of the scholarship, he moved to the University of California at Berkeley, where he majored in electrical engineering. During this time, a one-off number theory course with D H Lehmer “fired his imagination for the subject”. After four subsequent years in the Air Force, during which he also earned a B.S. in physics, he returned to UC Berkeley where he completed his Ph.D. in mathematics with D H Lehmer as his thesis advisor. 

All this is to say that life can be — and typically is — highly non-linear. I would argue that as much as we like to imagine being in control, planning one’s future down to summer-vacation-wise bucket lists is perhaps somewhat excessive. Your first branch and your first job does not have to be your last: for more evidence, I recommend reading Tim Ferriss’ book, Tribe of Mentors. Now, you might be prone to making your choices after optimizing for a dozen variables or more, or you might prefer leaving your destiny to the gods of randomness. I believe somewhere in between, there is an approach more reasonable than either extreme: make an informed choice after investing a finite amount of your own time and energy into understanding what actually lies in store.

The IITs are now far from being the only ticket to the good life and a powerful alumni network: if these are your main motivators, you might consider exploring less painful pathways to the same outcomes. If not, allow yourself the space to let your instincts come to the fore, and follow them to make your choices. This will maximize the chances that you will end up in a meaningful journey that involves truly enjoying what the programs have to offer, instead of being in a situation where you have simply transitioned from one rat race into another.

सपनों का घर है नींदो मे
उन्हे वहीं तू छोड दे
जो हकीकत सम्झोता लगे
वहीं सुकून है जान ले

A dream is an elusive enchantment;
while that that is to be treasured
is what has been for real
and is easily ignored.

But a mere figment of imagination,
a dream is captive and binding:
let it go to be free from
your quest never-ending.

Inspired by Pallavi Mahajan’s brilliant poetry.

If you are

1. teaching a course at IIT Gandhinagar next term (Aug-Dec 2023),
2. working on your course plan, and
3. need a list of dates on which you have classes,

then you can use the generator below to get a list, by checking your teaching days.

Dates during Exam I (Sep 02 – 06, 2023), Exam II (Oct 11 – 15, 2023), and the mid-sem recess (Oct 21 - 29, 2023) are excluded. Holidays are excluded too, but restricted holidays are not. If you need to view the holidays, you can indicate as much via the checkbox below.

For those outside IITGN: a standalone version is here and the source is here, in case you’d like to adapt this to your own context.

The initial position of a certain number — typically 13, as the name suggests — of sheep over a 7x7 grid is given. Some grid edges are not available because there happen to be bushes: so you cannot fence them. The bushes do not protect the sheep either, the wolf can slide under them.

Your goal is to enclose as many sheep as possible: the ones that are not fully protected by fences may, alas, be at considerable risk when the inevitable wolf attack happens.

There are three main constrianing factors in this game:

• The shape of the fences that you can draw are determined by the roll of a die;
• You cannot overwrite lines that are already drawn, you cannot also draw over bushes;
• You have ~11 chances to place your randomly gifted fence shapes.

You can find out more about the game here, where you can generate board layouts to print and play as well.

I found this game a lot of fun to play, and I thought it would be lovely to be able to play it on a computer, where the user can decide how many rounds, sheep, and bushes they want to play with. Given also that chatGPT has been apparently remarkably adept at coding games, I figured I’d give it a shot¹.

I describe my conversation with chatGPT below, but if you just want to cut to the case and check the game out, you can find the playable version here and the source here.

Here’s what we finally built:

And once you’ve finished playing you can share your accomplishment like so:

So, back to chatGPT. My first prompt was just a polite inquiry about willingness to participate in this exercise:

And well, it immediately made this, based on the prompt above: a game where you get to count to 13 sheep. Huh. Promising.

In my next few prompts, I steered it away from the default game. The first few steps just involved setting up the UI:

At this point I already had a nice-looking grid with 13 sheep on it (thanks to Flaticon for the cute sheep icon). The plus signs drawn on the boundary were oddly cropped out, so we fixed that next:

This didn’t immediately work but some nudging fixed it:

That worked — phew! Now we draw the bushes:

Next we get the dice roll UI up:

This actually worked out of the box, the next step was to make the roll dice functional:

So far, so good. Now all that was left was to get the fences drawn depending on what dice was rolled out.

This was perhaps the trickiest bit. My first attempt was this prompt here:

My hope was that the change of cursor would be a good way for the player to register that they need to move on the grid now. At this point, I was not thinking about the different orientations of the fences, because I was not sure about how to incorporate that into the UI (my first thought was to have the fences rotate on subsequent clicks until the player clicks on a confirm button, but that seemed too messy). I also did not give all six scenarios in one go since — from recent experience — the interface dies out on longer requests. You can prod it to continue from where it left off, but it’s typically messy.

In any case, we could not get the change of cursor to work. At this point, note that the code is also not tracking what borders are colored, so even as we got things to mildly work, we were often overwriting fences and bushes. So anyway, at some point I gave up and it was back to square one, but smaller steps. First, instead of a change of cursor, I just requested a canvas background color change to subtly communicate a change of game state:

Then we added a round tracker:

This took some back and forth to get working, since it was getting some details mixed up, but it was finally alright. I had to prompt more to take care of some edge cases and minor details, for instance:

Now we are back to actually trying to get the fences to be drawn. With some nervousness, I go:

At this point the code generated starts tracking what borders are visible. I did have to prompt it explicitly to update the earlier function that generated the bushes to feed into the visibility states. However, this went off pretty smoothly overall. For quite some time the fences drawn when the user clicked a grid cell were not the ones I wanted, but after a few nudges it got it about right.

Now it occured to me that I could actually show the orientations after the dice is rolled and the user can select one of them, and we can draw the appropriate fence after this selection is made.

Of course in the UI at the moment we just have these four numbers so it does not make a lot of sense to the player, so I whipped some images to show the user what fences would be drawn depending on what grid cell was clicked.

Now we come back to the fence drawing thing to account for the orientations as well:

Getting this going for all the 20 different cases was really the bulk of the back and forth. While it got the overall functionality right, there would be small and frequent bugs in the details. For instance, if a cell’s top border is being fenced, then the cell above it should have its bottom border’s visibility updated: it knows this, but frequently got combinations wrong, and so I did have to read the code generated carefully. I either fixed it manually when the bugs were minor, or went back to requesting corrections by explaining the issue when it was off by a whole lot.

You can see that some of the prompts are longer than the corresponding code :D

Maybe it’ll soon be possible to just upload a picture of the game instruction booklet and let chatGPT do the rest of the heavy lifting. Until then, this was the best I could think of: maybe there’s a shorter way? I did try using generic shape descriptions, but no luck on those.

Now the basic game was done, and there were three main features I’d have really liked to add at this point:

• Allow the user undo the previous fence placement.
• Count the number of protected sheep at the end.
• Make a version of this game where instead of rolling a dice, we let the user pick the fences they want: this can be useful for a multiplayer setting where we want the random choices to be the same for all players: so one player can roll the dice and the others can follow along.

I did try some of this: it’s impressive that chatGPT gets the main ideas right the first two requirements (the use of an action stack for implementing undo, and recognizing that we need some kind of flood fill algorithm for the score). However, all the implementations ended up being somewhat buggy and after some wrestling I decided to push these extras to the roadmap. The deterministic version of the game should not be hard to make, even manually at this point, so I hope to come back to it soon.

After this I mainly asked for chatGPT to let the user customize the parameters of the game:

It got this immediately right, and I wanted some styling:

and it’s response was:

Good to know! The modals worked out of the box, and it was easy to extend them so they asked for the number of sheep and bushes as well. The last thing I wanted to add was a sharing feature:

Now this it did remarkably well, except that when it tried to pass the entire image as a URL parameter, that didn’t work out. When I conveyed this, the response was:

Whoa… so ok, I don’t have developer accounts and I was not going to follow through, but this was definitely interesting!

I did interleave responses from chatGPT with help from Ghostwriter, which is the intelligence built into repl.it out of the box. Ghostwriter’s responses were usually not as sophisticated on comparable prompts, but on a couple of occassions chatGPT was completely lost on why something wasn’t working, but Ghostwriter would figure it out when asked pointed questions about an error. There seems to be some potential that they will be a good team — possibly also alongside Copilot, which I did not use at all here.

My experience with chatGPT and Ghostwriter as pair programmers was — I daresay — rewarding overall. When I first thought of doing this, perhaps partially intoxicated by all the hype, I figured I could get this done in a couple of hours at the most: I estimated twenty minutes for functional code, and about a 100 minutes for making up my mind about colors and fonts. This was a vast underestimate: I think I spent close to a good twelve hours (including a couple of early throw-away prototypes, and all the failed attempts on the flood filling) altogether²… at some point it did get a little addictive, and perhaps there was a sunk cost argument for not letting go halfway through.

As someone who does not know javascript, I found this to be a part empowering, part learning, and mostly amusing experience. It felt like picking up a natural language by directly talking to mostly fluent speakers who made random and small mistakes. My overall sentiments were very similar to the process described in this thread, where Ammaar Reshi uses GPT-4, Replit, MidJourney, and Claude to create a 3D space runner from scratch with ZERO [sic] knowledge of Javascript or 3D game programming: you should check this out if you are interested in a much more sophisticated demonstration for deploying AI tools to make games!

In its current form I think this also has interesting implications for how programming is taught: I hesitate to elaborate any further on this given how likely it is that any commentary will be obsolete by tomorrow. But in the very near term, I can imagine that reading, analyzing, and even learning alongside chatGPT could make for interesting experiences in the classroom.

1. Included the fontawesome5 package so I could add icons alongside the phone number, email, and website in the letterhead.

2. Changed ThisULCornerWallPaper to CenterWallPaper and added wpYoffset and wpXoffset so I could get a left margin on the logo (I suppose this could also be done by offsetting the logo in the letterhead.pdf file).

Here’s what the output looks like with some random sample content:

The markdown is very simple to edit — most of the information is up in the YAML header, and it looks like this:

author: Fyodor Michailovitch Dostoevsky
city: Moscow
from:
- By the Vladimirkirche
- care of Pryanischnikof, Grafengasse.
affiliation1: Add an affiliation
affiliation2: Potential Additional Information
contact: 
- \faPhone \ +91 79 1234 1729
- \faGlobe \ https://www.google.com
- \faEnvelope \ nobody@nowhere.com
to:
- Michael
- Someplace
- with an address
subject: An Update
salutation: My dearest
toname: brother
customdate: 1838-8-9

Write the body of the letter in markdown as usual, and generate the PDF by running:

pandoc letter.md -o output.pdf --template=template.tex --pdf-engine=xelatex

or have a makefile that looks like this:

TEX = pandoc
FLAGS = --pdf-engine=xelatex

src1 = template.tex letter.txt
op1 = output

all : $(op1).pdf

$(op1).pdf : $(src1)
    $(TEX) $(filter-out $<,$^ ) -o $@ --template=$< $(FLAGS)

For your first use, you would want to update the images for the letterhead and the signature, and optionally customize the fonts to your liking. Fork this repo to make your own!

Inspiration Check this page for a ranking of computer science departments.

import { shuffle } from "./shuffle.js"

arr = ["IIT Kharagpur", 
"IIT Bombay", 
"IIT Madras", 
"IIT Kanpur", 
"IIT Delhi", 
"IIT Guwahati", 
"IIT Roorkee", 
"IIT Ropar", 
"IIT Bhubaneswar", 
"IIT Gandhinagar", 
"IIT Hyderabad", 
"IIT Jodhpur", 
"IIT Patna", 
"IIT Indore", 
"IIT Mandi", 
"IIT (BHU) Varanasi", 
"IIT Palakkad", 
"IIT Tirupati", 
"IIT (ISM) Dhanbad", 
"IIT Bhilai", 
"IIT Dharwad", 
"IIT Jammu", 
"IIT Goa"];
x = shuffle(arr);
y = document.getElementById("quarto-document-content");

y.innerHTML += "1. " + x[0] + "<br> 2. " + x[1] +  "<br> 3. " + x[2] +  "<br> 4. " + x[3] +  "<br> 5. " + x[4] +  "<br> 6. " + x[5] +  "<br> 7. " + x[6] +  "<br> 8. " + x[7] +  "<br> 9. " + x[8] +  "<br> 10. " + x[9] +  "<br> 11. " + x[10] +  "<br> 12. " + x[11] +  "<br> 13. " + x[12] +  "<br> 14. " + x[13] +  "<br> 15. " + x[14] +  "<br> 16. " + x[15] +  "<br> 17. " + x[16] +  "<br> 18. " + x[17] +  "<br> 19. " + x[18] +  "<br> 20. " + x[19] +  "<br> 21. " + x[20] +  "<br> 22. " + x[21] +  "<br> 23. " + x[22];

The Leaderboard

You can find out more about Prof. Jain’s own take on the cultural foundations of IIT Gandhinagar here, where he is in conversation with Achal Mehra.

Canadian astronaut Chris Hadfield has said that leadership is not about glorious crowning acts. It’s about keeping your team focused on a goal and motivated to do their best to achieve it, especially when the stakes are high and the consequences really matter. It is about laying the groundwork for others’ success, and then standing back and letting them shine. If that sounds familiar, I think it’s because we have lived this experience at IIT Gandhinagar, thanks to Prof. Jain.

Our guiding principles have been often unconventional — whether it’s about having students first, or choosing to trade short-term gains for the long-term vision. They have sometimes led to decisions that would seem quite inexplicable to anyone who did not have the context. Some of you might remember how early we started the undergraduate program in Computer Science, for example. Ok, so for the record, we started it quite late, at least according to conventional wisdom.

Crucially, these core values have always been articulated in collaboration, with inputs from all stakeholders, which is what enables our shared conviction in them once they have been established.

Prof. Jain’s vision for IIT Gandhinagar is as precise as it’s bold – he knew exactly what needed to be done for this place to emerge as a model institution. He had recently shared with us his roadmap for IITGN from a dozen years ago. This roadmap committed not to vague ideas but concrete goals, complete with numbers for metrics that are fraught with uncertainty. It’s absolutely stunning how everything panned out almost exactly according to plan!

Our narrative has many collaborators, including our students, faculty, and staff. And while some of us are relatively inexperienced, Prof. Jain’s trust in everyone has been hugely empowering. It manifests in many concrete ways – starting from wanting for students to be recognized as adults, to turning young colleagues into decision-makers… and this is why all of us have a deep sense of ownership for IITGN.

An environment that gives all of us the freedom to experiment and the leeway to fail is extremely enabling. This has led to a wide spectrum of wins, many that are quantifiable and others that are less tangible. If you want to get a sense of how good the times have been, just look around – the sheer beauty and the attention to detail that the campus embodies is an excellent symbolism for the inclusive, thoughtful, and innovative leadership that we have experienced. When it comes to how far we have come, I could go on… pretty much forever, so I’ll defer you to the website for more details.

It is impossible to imagine IITGN without you. This is your brainchild through and through. Despite knowing that you’ll not be distancing in spirit, we will miss having you nurture the institution in the hands-on manner that you have always done. Your passion for the IITGN mission – of being a breakout university while operating within the limitations and strengths of the IIT system – is contagious. I am sure you plan to double down on this even though you may have a few distractions going forward.

I recently watched Maanaadu, a movie based on the idea of a time loop. In such stories, the plot involves the protagonist experiencing the same day over and over again, and their goal, typically, is to find an exit. If there is one day that we could put into a time loop, it would be today, and there would be no need to get out of it.

In the meantime – on behalf of all of us, thank you.

Thank you for your commitment, trust, and friendship; for listening patiently, for leading tirelessly, and for fighting the good fight through tough times, and for the good times through tough fights – ok, I’m going to be out of time, here, clearly – so let me just say, thank you for everything.

This year, I also concluded my stint with the Department of External Communications, which feels about as long. Indeed, little did I know that a casual remark that I had made during my interview¹, about wanting to be a writer for as long as I can remember, was carefully noted — and magically my service responsibilities would end up being related to my childhood dream. A few days after I joined, I met Achal Mehra, who introduced me to Connections: a four-page newsletter that went places every quarter. In my mind, that conversation kickstarted my collaboration with what everyone fondly calls “comms”. Seven years later, I’m here to report that the journey has been fun and fulfilling in equal measure.

Through this post, I’d like to introduce you to the comms team: if you have been to IITGN for an event, read about us in the press, have recieved a newsletter from us, visited our website, or followed our social media: these are the folks who work behind the scenes on these fronts. Being a part of this gang has been a huge inspiration: everyone is talented but always willing to learn; their hard work is driven by a sense of ownership; and there’s plenty of wit to help beat the heat :)

Here’s collection of some randomly chosen memories: my hat-tip to a stellar team.

Dog Bunny: A Cute Puzzle

Conrad Barski (@lisperati)’s latest, Dog Bunny Puzzle, had jumped to #1 on HN. The puzzle presents the following somewhat minimalist interface:

If you haven’t played it yet, you might want to go ahead and give it a shot first. Most people figured out the mechanics without any explicit instructions. A couple of things that may not be immediately clear, but typically discovered quickly within a few moves:

• The edges are labeled with conditions, and can be used only if all of the said conditions are met.

• The bunny or dog icons may sometimes cover up what kind of location they are at. You can drag them away to find out!

• Multiple animals can occupy the same spot at a time.

• It is possible to get into a dead end, a situation from where no legal moves are possible. In the verison of the game that is available at the time of this writing, the game offers no sign that you might be in this situation. This may however change.

After winging it on the puzzle, several questions seemed natural:

So the last question may strike you as a bit left-field, but that’s what I’m going to ramble about for the rest of this post :) It turns out that the answer is in the affirmative, and here is a lovely reduction by @lokshtanov showing as much.

A teacher does not teach, a student learns.

— snippet from this interview of Ustad Zakir Hussain

I’ll pose some how/what/why questions in the context of teaching.