だらっと学習帳

Processingとか p5.jsとか 好きです

カテゴリ: Processing

今週は技術書典の準備の息抜きにつぶやいていました。

#つぶやきProcessing - Twitter検索 / Twitter













このエントリーをはてなブックマークに追加

9月12日〜 技術同人誌オンライン即売会 技術書典9 にサークル参加します!
サークル名 : メルトラテクノロジーズ

頒布物は新刊2冊です。
どちらも電子版 / 1000円です。
めちゃくちゃ頑張って執筆しました。
よろしくお願いします!!





できるだけ毎日続けるためのデイリーコーディング戦略 [第2版]:メルトラテクノロジーズ
2時間でクリエイティブコーダーになる本 p5.jsではじめるアートプログラミング:メルトラテクノロジーズ
このエントリーをはてなブックマークに追加

西洋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シャツ作ったのでこちらもよろしくお願いします!!
このエントリーをはてなブックマークに追加

約1年ぶりにつぶやいたぞ!

#つぶやきProcessing - Twitter検索 / Twitter











このエントリーをはてなブックマークに追加


上記のスケッチは写真から輪郭抽出したimageを2枚用意し、
片方はBLURをかけてぼやけさせてtintで水色に着色し、
もう片方を透明度を上げてハイライト的に上から重ねる…という手法で実装しています。

輪郭抽出には「filter_sobel.js」を利用しました。



使い方
何年か前に撮った秋葉原の写真をサンプルとして輪郭抽出してみます。

DSC_1245
コードはこんな感じです。
p5.jsと一緒に上記「filter_sobel.js」も読み込んでおいてください。


実行結果はこんな感じになります。
輪郭出てますね〜。
ダウンロード - 2020-09-02T132948.403

setup内で輪郭抽出の関数を利用していますが、
draw関数内でやると輪郭抽出を輪郭抽出して輪郭抽出するサイクルにハマるので注意してください。
これはこれでかっこいいのですが…frameRate(1)で撮影。
9月-02-2020 13-39-34

【追記】
ネオン系の作例を増やしましたので見てってください。
このエントリーをはてなブックマークに追加

↑このページのトップヘ