斜度を細かく知れるツールの続き（グラフ表示の最適化＋微改修）

こんにちは

先週記事にした高度グラフを表示するツールですが、気になってた所が有ったので修正しました。

ツールのURLは以下になります。

→　https://road-bike.net/tools/gpx/calc_slope_graph.html

前の記事を以下に貼ります。

→　斜度を細かく知れるツールを作ってみようかなと思ってみました

→　斜度を細かく知れるツールの続き（ファイル読み込み）

→　斜度を細かく知れるツールの続き（グラフを表示してみた）

気になってたのは、フラグの表示領域のドット数を描画データの表示ポイント数を超えた場合なんですよね。

グラフ自体は、修正で少し変わってしまいましたが、全体の横幅が800pixelで、グラフ自体の描画領域の横幅が730pixelでした。

例えば、描画データのポイント数が73ポイントの場合は、横幅が10pixelの塗りつぶした四角を73個並べて描画します。

描画ポイント数が730ポイントの場合には、幅1pixelの四角（実際には線）を730個横に並べます。

じゃあ、730ポイントを超えるとどうなるかというと、同じ位置に重ねて描画する場所が出ます。

例えば、描画ポイント数が1460の場合には、基本的には2個のデータを横軸で見て同じ位置に太さ1pixelの線を2回描画します。

ただし、前の線を消す様な事はしていないので、単純に上書きします。

そうすると、上昇している箇所では単純に上書きされますが、降下していると縦の長さが先に引いた線より短くなります。

なので、同じ位置に長さの違う線を引くことになり、長い方のグラフだけの残ります。

色が違うと、前の線より低くなった所は、後の線の色になり、縦の長さが足りなかった箇所は、前の線の色に残ります。

そうなると、同じ位置でも2色以上の線が縦に存在する可能性があります。

原理的にはそのはず。。なんですよね。

「斜度計算単位(m)」を小さくして、描画ポイント数を増やして検証してみます。

下りの方が微妙な所がありますよね？

拡大してみるとこんな感じです。上りより下りの方が変ですよね？こうなるはずと思ってましたが、やっぱり。。

と言う事で、一番楽な方法で修正してみました。

線が細く見えるのは、手抜きの結果と、スクリーンショットの取り方です。(^_^;)

回避方法ですが、1pixel中に複数の点や線を引く事は原理上できません。

やり方としては、複数のデータを平均する等して、描画ポイント数を減らす方法が思いつきますが、斜度を色分けする目的（辛い場所の探す？）を持って作ったので、平均して均してしまうのはイマイチです。

なので、単純にグラフの方を大きくしてみました。

ページ上に表示する時に縮小してしまえば、画面上での大きさは変化しませんし。。

ついでに、100kmを超えると、横軸の目盛りの値がはみ出してました。

はみ出さない様に修正しました。

あと、グラフの下にダウンロードと、別ウインドウで原寸大表示するリンクを追加しました。

ついでに注意点ですが。

最初のページにこんな数値があります。

「斜度計算単位(m)」ですが、GPXデータから、これで指定されている距離(メートル）を進む毎に、高度や進んだ距離からの斜度を計算します。

これを小さくすると、詳細な高度グラフ（斜度）を算出できるのですが、限界があります。

サイコン等のGPXを記録する装置によって、データの保存粒度が違いますが。。。

ガーミンだと、初期設定は可変（多分移動距離などで細かくしたり、荒くしたりしているはず？）で、Polar V650は確か。。2秒間隔だったような。。気がします。

この記録間隔の間に進んだ距離が、「斜度計算単位(m)」を超えると、グラフが正常に表示できず圧縮されます。(^_^;

例えば、2秒間に5m進んだとします。「斜度計算単位(m)」を10mとすると、GPXデータの記録データ2つで、1つのデータを生成します。この際には、10m進んだとして、2つの記録データから斜度や高度を計算します。

下り等で、2秒間に20m進んだとします。

「斜度計算単位(m)」を10mとすると、記録データの次のデータを見ると既に20m進んでしまっていますが、記録単位は10mです。

無いデータを生成する事はしていませんので、20m進んだデータを元に計算して1ポイントのデータを生成します。

20m進んだからと言って、2つは生成していません。。。

なので、実際の進んだ距離にかかわらず、距離的に圧縮されてしまいます。(^_^;)

と自分でも良く分からなくなってきましたが。。実際にやってみます。

先日の美ヶ原のヒルクライムのデータを100m単位で、グラフを出してみると左右対称な感じで描画されます。

上った山を、そのまま下ったので当然です。

2mで作ってみると。。下りの部分が圧縮されています。ゆっくり走った所は、正しい横幅で。。

早かった所は、横幅が圧縮されます。

しかも、グラフの横軸の目盛りは等分されていて、目盛りの数字は、総走行距離から等分した数字が記載されます。

グラフの描画は、算出したデータ数を全部均等に描画しているので、目盛りの距離と、実際のグラフの距離が不一致します。(^_^;)

これを正しくするのは、かなりハードルが高そうなので、対応しないでおこうかと思ってます(^_^;

なので、「斜度計算単位(m)」は細かくしすぎない様にしてください。

あと。。。描画ポイント数が多すぎるとできた画像がでかくなるのと、横が25000Pixel付近を超えると、目盛りが足りないのかグラフが表示できませんでしたので、最大描画数を15000に制限しました。

と言う感じです。

余談ですが、美ヶ原のグラフ。。ですが。下りの方が斜度キツイじゃん！と思うと思いますが。。

言われて分かりましたが。。上りは斜度をゆるくするのに、コーナーのアウトよりを走って斜度を下げてる所もありました。

下りはイン側を走る事が多かったから。。だと思われます（笑）

なるべく道路の左側を走ってますが、車が来ない＋斜度がキツイとつい。。