https://labs.cybozu.co.jp/blog/akky/tags/%E3%82%AB%E3%83%BC%E3%83%88%E3%82%A5%E3%83%BC%E3%83%B3/ Recent content in カートゥーン on akky@サイボウズラボ・ブログ Hugo ja Wed, 18 Aug 2021 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/ Wed, 18 Aug 2021 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/ <p><a href="https://steveattewell.com/manga-map/">Manga map</a> は、OpenStreetMap のデータから MapBox でマンガ調(カートゥーン調?)に変化させた地形を表示するwebサービスです。<a href="https://steveattewell.com/">スティーブ・アトウェル氏 (Steve Attewell)</a>の作品。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-rainbow-bridge.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-rainbow-bridge_hu_963d00abe5ecdfd1.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-rainbow-bridge_hu_ed02ae4a5b40d980.webp 768w, https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-rainbow-bridge_hu_1683e7bb7d96b293.webp 1222w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-rainbow-bridge.png" width="1222" height="812" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>これはレインボーブリッジ。面を塗る色数を減らしたり、境界線を強調したりするトゥーン・レンダリングの技法で、独特の見え方に変換されます。</p> <p>ビルのデータは含まれていて高さを含めて出てきますが、土地の高低や直方体以外の建物については形が面白くなってしまうことも。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-national-stadium.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-national-stadium_hu_fd9c96b0d715aa31.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-national-stadium_hu_1084a4d25bad982.webp 768w, https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-national-stadium_hu_58a08b0ec233df7.webp 1223w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-national-stadium.png" width="1223" height="822" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>検索から地名や観光ポイントの名前を入れることで、世界のいろいろな場所をマンガ調にできます。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-key-west.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-key-west_hu_601a87f5b9e8cc7d.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-key-west_hu_b92047f40942a170.webp 768w, https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-key-west_hu_46b50b33385bb6d2.webp 1202w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-key-west.png" width="1202" height="795" alt="" loading="lazy" decoding="async"> </picture></a></p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-mount-fuji.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-mount-fuji_hu_217dee2481d456d8.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-mount-fuji_hu_a493aee1832d1e7.webp 768w, https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-mount-fuji_hu_1c67f2e1826a7211.webp 1351w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/08/manga-map/manga-map-mount-fuji.png" width="1351" height="808" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>via <a href="http://googlemapsmania.blogspot.com/2021/08/the-manga-map.html">Maps Mania</a></p>