We recently produced a newspaper-themed (Sea Harvest) website. And one of the features we wanted to build into this site was a functioning word search, with a catch… we wanted you to be able to use this word search without having your line snapped to the letters (basically you could draw anyway on the word search and if it was straight enough we would count it).

This article is a description of our wonderful journey back into the world of year 12 algebra and linear equations ultimately leading to a well functioning and artistically forgiving word search widget

This was our method:

Step 1

Now obviously our first attempt was to try just using hover states on div elements. This rose a few possible problems

Example word search just using hover states

• Selecting words on a diagonal was a real problem. Any time you tried to select along a diagonal you would end up selecting the letters next to the one you were actually trying to get
• It was also just really hard to draw straight lines, anybody who has tried to draw with their mouse can agree  it is an unpleasant experience
• Browsers are inconsistent with hover (/mouse) events. Sometimes they might choose to drop (not send) some if they are running behind their computational schedule

This problems eventually lead us to our second direction

Step 2

Eventually, after some internal discussion, we came up with the idea of using linear equations to see whether a user is selecting in a straight(ish) line.

Our first step was to get the position where a user first clicks and where all the following cursor positions are:

 

Next, we needed to construct a linear representation from those points. To do this we wrote a custom Line class. This let us do useful things like being able to pass a Line instance to a canvas and have it draw the line for us (so we never had to specify actual coordinates).

 

Then we needed a way to “lock in” the line after the user had moved a certain distance from their starting point. (So we could tell which line you were trying to draw). To do this we just used the d = √((x2 - x1)2 + (y2 - y1)2) distance formula.

 

Then after making the lock in functionality work we also needed to make the line snap to 45 degree intervals (because on a word search you can only select in horizontal, vertical or diagonal directions) to do this we too the slope of the current line and converted it to degrees, we then rounded it to the nearest multiple of 45. We then used that new value to create another separate Line object

(Also note that unlike a normal Cartesian plane all the coordinates in these graphs start with Coord (x: 0, y: 0) being the top left of the page).

 

After snapping the line we needed a way to tell whether the user was drawing in a somewhat straight line.

To do this we took the users current position and the reciprocal gradient of our original Line. With these pieces of data, we could create a new line and find the point where the two lines intercept (we will call this point p1).

Using our new point p1 we could then find the distance from the users current position and the closest point on our original Line.

 

And then finally we bring it all together into the crossword (click and hold):