https://labs.cybozu.co.jp/blog/akky/tags/%E3%83%97%E3%83%AD%E3%83%83%E3%82%BF/ Recent content in プロッタ on akky@サイボウズラボ・ブログ Hugo ja Fri, 21 May 2021 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/ Fri, 21 May 2021 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/ <p><a href="https://javier.xyz/pintr/">PINTR</a> は、プロッタで描いた絵のように画像を変換してくれるというwebサービスです。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/pintr.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/pintr_hu_4ba6e4536ac511cf.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/pintr_hu_9f89f31ceea8bc3a.webp 768w, https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/pintr_hu_ea223b0c54106429.webp 1177w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/pintr.png" width="1177" height="778" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>4つのスライダーを調整するたびに、プロットをしなおします。SINGLE LINE は一筆書きにするかどうかの選択。</p> <p>LINE で線の量を多くすると描きこみが多く真っ黒な画像になります。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/printr-many-lines.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/printr-many-lines_hu_b8a604bd1737b653.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/printr-many-lines_hu_dce7190570607afc.webp 532w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/printr-many-lines.png" width="532" height="536" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>サンプルの顔写真で見ると、顔の中心部分を最後に描いているため、LINE を減らすほど顔の輪郭が出ない、より抽象画っぽくなりました。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/printr-less-lines.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/printr-less-lines_hu_382d1d75827a79c4.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/printr-less-lines_hu_a0a82588e4c10335.webp 534w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/printr-less-lines.png" width="534" height="537" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>元の画像の選択が難しいですね。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/PINTR-a-kid.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/PINTR-a-kid_hu_390efae0e0666f0c.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/PINTR-a-kid_hu_5bf53ed56a1b9f4b.webp 768w, https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/PINTR-a-kid_hu_929cb71f4b5dfd81.webp 1138w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/05/pintr-make-image-plotter-like/PINTR-a-kid.png" width="1138" height="557" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>どんな画像でもそれっぽくなるわけではなく、コントラストがはっきりしていることが重要そうです。グレースケールに変換してから処理をしてるとあるので、狭い領域を色で塗分けているような画像ではうまくいきませんでした。</p> <p>GitHubでソースコード(<a href="https://github.com/javierbyte/pintr">javierbyte/pintr</a>)も公開されています。GitHub の方では、プロッタで紙に出力する様子の動画も掲載されています。</p>