p5.jsでネオン看板っぽいものを描く : だらっと学習帳

この前、↑こういう記事を書きました。
これを読み返してて、テキストじゃなくてsvg画像を使えばイラストでネオン看板っぽいものが描けるのではないかなーと思い、
さっそく試してみました。

svg画像は以下のフリー素材サイトからお借りしました。
アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト
本記事で利用しているsvg画像・png画像は全て「icooon-mono」から用意しています。

上記素材サイトから、以下のような画像を用意しました。
なお、下に掲載している画像自体はpngですが、実際にはsvgをダウンロードして利用します。
ハンバーガーの無料アイコン7

svg画像を扱うのでp5.jsからProcessingにバトンタッチします。
シンプルにsvg画像を表示するだけならこんな感じです。
display
PShape shape;

void setup() {
size(400, 400);

shape = loadShape("./images/hamburger.svg");
shape.disableStyle();
shapeMode(CENTER);
}

void draw() {
background(0);

fill(150, 0, 0);
shape(shape, width/2, height/2, 300, 300);
}

これを前回の記事をふまえてネオンっぽく描いてみます。
hamburger_neon
PShape shape;

void setup() {
size(400, 400);
colorMode(HSB, 360, 100, 100);

shape = loadShape("./images/hamburger.svg");
shape.disableStyle();
shapeMode(CENTER);
strokeJoin(ROUND);
}

void draw() {
background(0);

blendMode(SCREEN);
for (int i = 1; i < 50; ++i) {
strokeWeight(i);
stroke(
i,
80,
map(i, 1, 50, 15, 1),
100
);

noFill();
shape(shape, width/2, height/2, 300, 300);
}
}
良い感じにネオン感出てますね!
矢印と点滅をあわせてgifアニメにしたらこれはもうアメリカのハンバーガーレストランの看板ですね!
あれですよ、古いモーテルの居抜き物件で営業してる、幹線道路沿いの、駐車場収容台数が自慢の店ですよ……Webp.net-gifmaker

以下の画像のような、塗りつぶしではなく枠線で表現されているアイコンは、
fillも合わせて表現するとしっくりきて良い感じになりました。
ピザの無料イラスト6

pizza
PShape shape;

void setup() {
size(400, 400);
colorMode(HSB, 360, 100, 100);

shape = loadShape("./images/pizza.svg");
shape.disableStyle();
shapeMode(CENTER);
strokeJoin(ROUND);
}

void draw() {
background(0);

blendMode(SCREEN);
for (int i = 1; i < 50; ++i) {
strokeWeight(i*0.7);
stroke(
map(i, 1, 50, 0, 80),
80,
map(i, 1, 50, 15, 1),
100
);

fill(map(i, 1, 50, 360, 1) , 10);
shape(shape, width/2, height/2, 300, 300);
}
}
これはもうホントに、アメリカンなピザ屋さんのネオン看板ですね!

アメリカンな要素を並べるととにかくしっくりきます。
Vaporwave感が出るのもお気に入りです。
面白いのでぜひやってみてください。
neon