西洋SF映画ってなんでアジアがよく出てくるんですか?
パシリムとかドクター・ストレンジとか、あとトランスフォーマーとか…
ブレードランナー以前もこのパターンあったんですか?
SFにお詳しい方、情報お待ちしております。気になるので。

というわけで、今回はp5.jsでアジアンゴシックなネオンサインを描いていこうと思います。
まずはネオンサインにする文字を用意します。
適当な言葉を思い浮かべます。

エンゲル係数 - Wikipedia
(最近食費がうなぎのぼりなので)

「多言語版」から「中文」を選択し、中国語での表記を調べます。

恩格尔定律 - 维基百科,自由的百科全书

この文字列が表示できる、かつ雰囲気のあるフォントをGoogleフォントから探します。
Googleフォントはサンプル文が変えられるので便利ですよね。
今回は「恩格尔定律」の文字をサンプル文としてフォントを探します。
また、Language欄から「Chinese(Simplified)」を選択します。

よさげ!採用!
このフォントを選択後、「Select this style」を押し、「Embed」タブを押します。
このタブのlinkタグのテキストをコピーしておきます。


p5.jsのスケッチを作っていきます。
p5.jsのライブラリ同様、html側で先ほどのlinkタグを読み込みます。

textFont()でフォント名を指定し、先ほど選んだフォントでtextを描画します。


See the Pen
NeonLogo01
by reona396 (@reona396)
on CodePen.





ネオンっぽく味付けしていきます。
strokeWeightを太めに設定して、drawingContextのshadowをつけます。
アジアンネオンっぽいビカビカした色にしましょう。
drawingContextについては以下の記事もどうぞ。
今、p5.jsのdrawingContextがアツい! : だらっと学習帳


See the Pen
NeonLogo02
by reona396 (@reona396)
on CodePen.




細め・白に設定した文字でハイライトを入れ、加算合成でよりビカビカにします。


See the Pen
NeonLogo03
by reona396 (@reona396)
on CodePen.




枠線をつけて完成です。
rectの角をまるくするオプションをつけつつ、ハイライトはやや内側にしてみました。


See the Pen
NeonLogo04
by reona396 (@reona396)
on CodePen.




いい感じのネオンサインになりましたね。
完成です!
アニメーションにしてもいいですね。
文字のshadowを消してハイライトを暗くした画像を生成してAnimated GIF Makerでくっつけました。
output_1xXFgM


他のネオン系記事や作例もよろしくです!
てか@reona396、ネオン描くの好きすぎでは?






あと今回解説した内容でネオンTシャツ作ったのでこちらもよろしくお願いします!!