Ted Piotrowski

Code to live. Live to spend time outdoors.

Page 4


Spring update on Shade Map

A couple of exciting things have happened during the past three months:

  • traffic to the site grew substantially
  • performance improved and new features were added
  • I’ve started to think about a monetising strategy

Traffic

Screenshot 2021-06-08 at 12.13.47.png

Snapshot of live traffic

I always anticipated that Hacker News would be the place to get traffic from. The users are highly technical and appreciate novel uses of technology. It may still be true that Shade Map would be a big hit IF it made it to the front page but without gaming the system it’s proved impossible to get enough upvotes. Shade Map is visual eye candy and it’s hard to showcase that on a text based community like HN.

I’ve never been a reddit user, but I posted a link to Shade Map in r/webgl and received some modest interest and valuable feedback. I stumbled across r/MapPorn at some point and its visual nature captured my attention. It’s true what they...

Continue reading →


Adding search to Shade Map

I added search functionality to shademap.app today. The correct term is actually Geocoding, which is the process of converting search terms into latitude and longitude coordinates. Because Google is a leader in search technology, I decided to use Google Maps API for the task.

Screenshot 2021-05-05 at 13.27.36.png

I like the way the Google Maps search bar looks, so I used Developer Tools to copy the relevant markup and styles into my project as a React component. The search bar stretches from edge-to-edge on mobile devices but has a bit of margin on larger screens. I chose not to implement an auto-complete dropdown at this point because I have no revenue and the Google Autocomplete api is an extra cost. Without autocomplete, the Google Maps free-tier allows for 40,000 geocode requests per month.

Screenshot 2021-05-05 at 13.27.10.png

Some errors I encountered. The first was the result of using the wrong NPM library.

"error_message" : "API keys with referer
...

Continue reading →


Monkey Face - Smith Rock

Monkey Face is a distinct pillar in the center of Smith Rock State Park outside of Bend, OR. One side of it resembles the face of a monkey (although, I would say ape) with eyes and forehead slanting away from a protruding mouth and nose. There’s also a relatively accessible climb, Pioneer Route, leading up the monkey’s neck, through its mouth, over the nose and up the forehead. In the end you get to stand on top of the monkey’s head with cliffs dropping away from you on all sides.

IMG_8337.JPG

Getting ready in the parking lot

Cassondra and I saw the climb in March on our first visit to Smith Rock. A few friends of mine had climbed it about a decade ago. I think I missed out because I had moved back to the midwest. Either way, it sounded epic. Aid climbing a bolt ladder - something I had never done, and a 60m free hanging rappel - something guaranteed to make you poop your pants. It’s also...

Continue reading →


Adding buildings to Shade Map

Screenshot 2021-04-27 at 10.43.18.jpg

I added buildings to Shade Map (may take a few seconds to load)

From the beginning, Shade Map used contour maps in order to calculate which valleys are in the shade and which hill tops are in the sun. However, most cities are relatively flat and the main contributor to shade in these areas are buildings. I stumbled across a free GeoJSON API for buildings and decided to add buildings to Shade Map.

The elevation data I use for shading mountains and valleys is encoded in an image. Each pixel of the image corresponds to an elevation at that point. Here is an example elevation data map tile:

Screenshot 2021-04-27 at 10.29.10.png

In contrast, the building data comes is GeoJSON format which is a text representation. Here is an example:

{
            "id": "27915177",
            "type": "Feature",
            "properties": {
                "levels": 2,
                "type": "school",
                "roofLevels": 0
...

Continue reading →


Accumulating knowledge

Screenshot 2021-04-06 at 20.46.20.png

Photo by abe livi on Unsplash

I tried to make Cassondra French toast this morning. The thing is that I’ve never made French toast before. So while she was showering I Google’d how to make French toast and I realised that I need milk. We don’t have milk. A feeling of failure welled up inside me. Expectation failing to meet reality can be devastating to our ego.

But…

I reminded myself that not all is lost. I did learn that to make French toast you need bread, egg, vanilla extract, cinnamon and of course, milk. So now I know whether French toast is even possible when I open the fridge. Or maybe next time I’m at the grocery store I can get the ingredients I need.

I learned to program in this way. I set out with lofty goals to build an iPhone app. I did not understand Objective C, but I did learn that Xcode and Tools don’t come installed by default and that there is an iPhone simulator...

Continue reading →


Winter update on Shade Map

This winter, coding Shade Map took lowest priority behind skiing, climbing and reading on the couch. I ran into some large technical challenges which I was unable to tackle in a single coding session (more on this at the end) and did a poor job of breaking them down into manageable chunks. This led to a few marathon coding sessions where I could not quite get across the line and ended up throwing most of the code away and starting from scratch. I should have documented/salvaged things that worked. But first, the good news…

Traffic

Screenshot 2021-03-29 at 10.07.53.png

I had over 400 visitors in the past 3 months. The two noticeable spikes were a mention on Hacker News under a “What are you currently working on” thread. Most other traffic is coming via my react-leaflet-canvas-overlay NPM package where Shade Map is listed as an example in the README. In Google search results for “shademap” already list the website on the...

Continue reading →


WebGL Shader precision on MacBook Pro vs iPhone

Screenshot 2021-03-01 at 14.39.19.png

Photo by David Monje on Unsplash

I learned something new today. When developing in WebGL, you are required to set a default precision for the fragment shader. Here are the options:

precision lowp float;
precision mediump float;
precision highp float;

I read somewhere that lower precision calculations are faster, so if the result is the same you should attempt to use lowp if possible. I switched shademap.app to use lowp precision and everything looked good UNTIL I checked it on the iPad and my iPhone. It was broken.

Both were using lowp, how could this be? Well, it turns out that the precision is not identical across hardware. (I suspect the reason is that the iPhone uses an Apple chip while the MacBook uses an Intel chip). The lack of precision was causing my shade calculations to lose accuracy and the final result was incorrect.

Here is what lowp, mediump, highp correspond to on...

Continue reading →


McCully Basin traverse

IMG_7518.JPG

The Wallowa Mountains

After some Googling, I discovered that Wing Ridge and McCully Basin are the two most popular destinations for backcountry skiing out of Joseph. Since we love slogs, McCully Basin was the obvious choice. The plan was to skin up McCully Creek, find a low angle ramp onto the west ridge and traverse it back to Mount Howard where a 4WD road would take us back to the parking lot.

IMG_7467.JPG

Heading up McCully Creek

It’s hard to get out of bed in winter especially when the skies are cloudy. We packed up as it got light out and even glimpsed a small patch of blue sky out the window. Although the forecast called for light snow, the sky looked promising. We tried to shave a mile and a half off our journey by parking at McCully trailhead, but the road wasn’t plowed and we had to start in the parking lot next to Ferguson Ridge ski resort instead. We finally got underway around 8...

Continue reading →


My first NPM package

Woke up this morning to a world that’s mostly unchanged despite publishing my first NPM package yesterday. The library is called react-leaflet-canvas-overlay and it’s a React component for React Leaflet. The library pins a canvas element on a map and it remains above the same location as you pan and zoom the map. I use a canvas on shademap.app to display the earth’s shadows in real time. I hope others find a use for it in their projects.

Screen Shot 2021-01-22 at 10.37.11 AM.png

Moving on…

The main purpose of this blogpost is to share two cryptic errors that I ran into when running npm publish for the first time.

Make sure you are logged in

npm ERR! code E404
npm ERR! 404 Not Found - PUT https://registry.npmjs.org/react-leaflet-canvas-overlay - Not found
npm ERR! 404 
npm ERR! 404  'react-leaflet-canvas-overlay@0.0.1' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name
...

Continue reading →


Shade map

I’ve been working on a new project for about two months now and it will never be ready but it’s time to share some progress. Shade map uses elevation data across the world and the sun’s position to determine where you can currently see the sun.

Screen Shot 2020-12-01 at 11.18.41 AM.png

Click here to see what Los Angeles will look like at 4:32 PM.

And one more video showing sunrise in the Seattle area:

I’m not sure where I want to take this yet, but it has been fun learning WebGL, raytracing and mastering trigonometry again for the first time since high school. Also, GPU’s are amazing and underutilized by web developers.

Continue reading →