![見出し画像](https://assets.st-note.com/production/uploads/images/98424168/rectangle_large_type_2_1239d90b4b7e54b8c724c5d8ea269800.png?width=1200)
画像をブロック化
こんにちは。
まず、こちらを御覧ください。
![](https://assets.st-note.com/img/1676809994929-iFKppmAbe6.png?width=1200)
なんと、これ…全部文字なんです!(諸事情により文字をペーストできません。)
ブロック要素というものがあります。「█」とか「▌」とか「▚」とか。
僕は思いました。
これを使って画像を描けるんじゃない?
▏どうする?
どうしよう。
思いついたはいいけど
どうしよう。
うーん。
▎あ!
ああすればいいじゃん。
Scratchで作ればいいじゃん。
で、どうする?
![](https://assets.st-note.com/img/1676811561021-aRVy5YfcLT.png?width=1200)
なるほど。
![](https://assets.st-note.com/img/1676855298062-U1xgPwRvYS.png?width=1200)
こうすればいいのね。
黒色に触れている且つ赤色に触れているなら「▄」みたいに。ね。
▍プログラム
じゃあ、画面の端から動かす→触れている部分を検知→どのブロック要素かを決める→文字列に追加!
ようし。完成っと。(楽)
▌実行
うん。成功。
そこで問題に差し掛かる…
![](https://assets.st-note.com/img/1676950431349-eo8Vw27hOr.png?width=1200)
取り乱しました。
「▚」が出てくる時がほとんどないんです。
なぜなら四隅で検知しているから。
説明しよう。
この図を見てほしいです。
![](https://assets.st-note.com/img/1676951355810-UNB43JrrdV.png?width=1200)
こういうとき(緑と赤が検知したとき)に「▚」が出てきてほしいけど、
この画像、
少しだけ黒と黄色も少しだけ検知している!
だから、「▚」じゃなくて「█」が結果になっちゃう…
どうしよう…
▋あ!(思考時間5秒)
これを、
![](https://assets.st-note.com/img/1676951546680-1z9xGbUtDw.png?width=1200)
こうすればいいんじゃない?
![](https://assets.st-note.com/img/1676951615664-saAeNVH2Du.png?width=1200)
そうすれば「▚」が表示される!
▊リンク
完成!
コチラのリンクから実際に作れます。
▉画像のアップロード方法
リンクに飛ぶとこのようなページが出てきます。
そしたら、右上の「See inside」か「中を見る」を押します。
![](https://assets.st-note.com/img/1676953705122-ZiiL2WpYgU.png?width=1200)
左やや下の長方形を押します。
![](https://assets.st-note.com/img/1676953768807-0l0GcSS85L.png?width=1200)
このようになるので、左上の「🖊️Backdrops」か「🖊️背景」を押します。
![](https://assets.st-note.com/img/1676953832317-bu7oyCj0kN.png?width=1200)
文字を打ち込むか白黒の画像をアップロードしてください!
![](https://assets.st-note.com/img/1676953935694-tJ0CcSuF3f.png?width=1200)
緑の旗を押して開始です!
![](https://assets.st-note.com/img/1676953993749-ytfZBfdnpe.png?width=1200)
コピーするにはは文字列をトリプルクリックしてコピーしてください!
█スライダーの使い方
一番目のスライダーを動かすと、線の太さを調節できます。
![](https://assets.st-note.com/production/uploads/images/98546956/picture_pc_81828b1737d81f04e77ac67d5c8eedfe.gif)
二番目のスライダーを動かすと、間隔を調節できます。
![](https://assets.st-note.com/production/uploads/images/98546916/picture_pc_6bffefd72965e985fe53c5e7249ba585.gif)
三番目のスライダーを動かすと、キャンバスの大きさを調節できます。(諸事情により反比例関係になっています。)
![](https://assets.st-note.com/production/uploads/images/98547151/picture_pc_de85f0c2bfa2171e70f4beb651a69dfb.gif)
▓最後に
このプログラムは様々なものに活用できます。
例えば、、、
うーん。何に使えるんだろう。
いいなと思ったら応援しよう!
![tozaburo/小林都央](https://assets.st-note.com/production/uploads/images/90332425/profile_335d9e2cbcbb14f2cc08f241fea29502.png?width=600&crop=1:1,smart)