2 Liverpool Lane
Darlinghurst NSW 2010
02 9051 0561
121 Rokeby Street
Collingwood VIC 3066
03 9070 5737
4.03, 33 Allara St
Canberra ACT 2601
02 6190 1210
81 Prospect St
Brooklyn, NY 11201
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
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):