Nov 30, 2017

To Chairman Ajit Pai and Commissioners Michael O’Rielly and Brendan Carr:

This has always been a web development blog, and I’ve always followed a simple content rule:  Posts must be about a web/IoT-related project or technology. Sadly, your choices now threaten the projects I post about and the ecosystem in which they exist. Truly your short-sighted, selectively-applied ideology threatens my entire lifestyle.

The internet plays a role in nearly every aspect of my life. I develop online services via an internet connection from a home office. The vast majority of my social interaction with family and friends occurs online. I met my significant other first online. My entertainment (from video to gaming to books) is almost exclusively consumed online. The majority of my learning occurs online through classes, blogs, repositories, and wikis. All of my finances from my checking account to my bills to my retirement are managed online, and always have been. Access to the internet is genuinely more essential to my everyday life, career, and place in society than having running water in my home. That might strike you as an exaggeration. It is not.

I have anxiously watched the entrenchment of an increasingly predatory oligopoly this past decade, and I know you see it too in spite of your deeply disingenuous Myth vs. Fact bullshit. I have watched our last-mile providers explicitly state they do not compete with each other. I have watched them capture cities’ utility poles and deny attachment to any who would compete. I have watched them block and throttle traffic, perform shakedowns on businesses by deliberately sabotaging bandwidth during negotiations, sell services they cannot and do not intend to deliver, and handle and price traffic differently for popular services. Only once have I lived at an address where more than one company provided an adequate connection for my needs.

"We never will, but it’s very important that we be able to. But we won’t. So let us do it. Because we won’t do it. Which is why we’re spending so much money to make sure we can. But we won’t. But let us."

You know there isn’t a free market, and you know that killing net neutrality will not change that at all. You know you are setting the FTC up for failure. For all your bluster about competition, you seem blind and deaf to the issues currently preventing it. For all your zealotry about deregulation, you seem concerned only with removing the regulations that protect me. You know you will get away with this and collect your payoff because in today’s post-truth world there are no longer consequences for being flagrantly evil.

I expect I will soon have data caps and surcharges for low-latency traffic, VPN connections, web-accessible ports, and p2p sharing. My web experience will be parceled out into bundles with price tags and restrictions, and I will simply have to deal with it since there is a regional monopoly and without my connection I no longer have a career. I expect my future, and our country’s future will be strip-mined thanks to your choices.

America’s online innovation has been the envy of the world for decades. What a terrible joke that the regulatory capture of a mere three people can allow all of it to be skimmed and double-dipped by a couple of entrenched telecommunications conglomerates.

Jan 5, 2017

Normally in web application development, clicks are a matter of listeners. Either a click hit a thing or it didn’t. When using the HTML5 canvas, this isn’t the case. Images and features are rendered onto it, but you can’t attach a listener to them. Instead, you monitor where these elements visually reside versus where clicks land.

If an object is rectangular and will never rotate, the solution is easy. If click X is between object start X and object end X, and click Y likewise, then it hit. If not, it didn’t.

In this post we’ll construct a simple series of functions for determining the same thing if the rectangle has rotated, then look at how the idea can apply to more complex shapes. Nothing new or groundbreaking, and nothing language-specific — consider this a StackOverflow answer.

Visualization

For a developer who hasn’t mathed in a while, this can seem tricky at first. Once you see a few images it’s perfectly sensible.

We’ll be drawing four triangles. Each one consists of the click point and two vertices of the object. We then compare the area of the object to the combined area of the triangles. If they’re the same, the click had to be in the object. If the triangles are larger, the click couldn’t have been in the object.

Rotated Rectangle - Click hit

If the click was inside, the areas are equal.

Rotated Rectangle - Click miss

If the click was outside, the combined area of the triangles is bigger than the area of the rectangle.

How much it’s rotated doesn’t matter. Where it’s at doesn’t matter. That’s literally all there is to this.

First things first

To figure out if the click hit, we’ll need four pieces of data:

  • The coordinates of the click
  • The position of the rectangle
  • The size of the rectangle
  • The angle of rotation of the rectangle

Those last three pieces we’re just putting together so we can find the vertices. Once we know the click position and the vertex positions, figuring out if the click hit is easy.

Finding the vertices

Since you’re probably not tracking the individual locations of the vertices and are instead tracking the position of the object, you’ll want to start with a function that can find these by the object’s size and position. How this will be done is hugely variable depending on where you’re measuring from (tracking left top? center?) and if/how the object has been scaled.

If we pretend like there’s no scaling or rotation and we’re measuring from left and top, the function may initially look like this:

Since this doesn’t take into account rotation yet, we’ll need a utility function to find a point’s new location after it’s been rotated by X degrees around another point:

Modifying our previous findRectVertices  function to also use rotation may then look like this, assuming we’re rotating objects around their center:

Calculating the areas

Now that we have all the necessary points, all that’s left are three things:

  • Calculate the area of the rectangle
  • Calculate the area of the triangles
  • Compare the two

If you recall high school geometry, point two is the loaded one there. To find the area of an unknown triangle we’d use Heron’s formula, but first the distances of each side will be needed. The two utility functions may look like this:

With those functions ready, we can now write a complete function that performs the three bullet points and returns a simple True or False:

Common issues

By far the most frequent annoyance with this approach when working in the DOM is going to be getting good position numbers. So many variables can throw a wrench in how you’re measuring where the object is. If your reported object position doesn’t match up with the reported mouse or touch position, all of the above is useless.

Look for situations in which clicking near something instead of on it reports a hit, then try to identify elements that match the size of the inaccuracy. Everything from margins on the HTML or body elements, borders on divs, document scroll position, and box-sizing settings can play havoc on your ability to get clean measurements that match up with what’s plainly visible.

Going farther

This method isn’t just good for rectangles. It would be straightforward to apply to triangles, too, or for any other convex polygon. Consider how you might implement the ability to check if a click landed inside a hexagon. As a brain teaser, what would happen on a concave polygon?

Jan 4, 2017

My team does a holiday card promotion each year, which gives us a chance to create something unusual. This year we decided on a “create your own holiday card” image editor idea. We’d specify a couple of backgrounds and design a bunch of “sticker” graphics, then users could arrange these how they liked and print off a foldable […]

Continue reading...
Sep 15, 2016

Update:  Now with more style. The most important thing in life is to have your pokémon arranged neatly. That’s a fact. While I understand you can just rename boxes with numbers so that Box 1 is 1-30 and Box 2 is 31-60, etc., there’s still a tiny bit of basic arithmetic slowing down your sorting […]

Continue reading...
Fork me on GitHub