だらっと学習帳

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

カテゴリ: Processing




NFTアート作品のオークション企画に参加しています!
よろしくお願いします!
▼▼▼
Pattern Maker 02 - function draw() | OpenSea
https://opensea.io/assets/0xe8a6564540a7a79bccaac7b9b2c7925c6858ccea/38
このエントリーをはてなブックマークに追加









よろしくお願いします!!

会期: 11/18〜12/10
場所: https://play.decentraland.org/?position=-117,-35
MetaTokyoのプレスリリース: https://prtimes.jp/main/html/rd/p/000000109.000017258.html

スクリーンショット 2021-11-18 18.42.24

ディセントラランドのアバター作るの難しすぎる…
このエントリーをはてなブックマークに追加

p5.jsではこんな感じで色を配列で管理できます。


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



決まった色合いの中から色を利用できるので便利なんです!

配列に入れている色の中からランダムに着色したい場合はこんな感じで書けます。


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



random()は引数に配列を渡すと、その配列の要素の中からひとつをランダムにピックアップしてくれます。
reference | random()

配列のシャッフルも可能です。


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



今度はシャッフル後に配列の先頭の色を背景色として設定しつつ配列から削除してみました。
円の塗りつぶしの色は背景色以外の中からランダムに塗られるようにしています。


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



配列の作り方のTipsとして、Coolorsのようなカラーパレットを提供してくれるサービスを利用する際、
URLの文字列に含まれているカラーコードを配列の形式になおすのが面倒…みたいな時はこんな感じで書けます。
(この書き方はChe-Yu WuさんやAlminaさんのコードを参考にしました。ありがとうございます!)
Che-Yu Wu - OpenProcessing
Almina - OpenProcessing


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



注意点として、色の透明度を後から変更できるsetAlpha()や、
2つの色の間の度合いを計算できるlerpColor()については、
いったんcolor()ではさんであげる必要があります。
配列の値そのままでは動作しないようです。
reference | setAlpha()
reference | lerpColor()
例えば、setAlphaで後から透明度を操作する場合はこんな感じです。


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



lerpColorを使ってグラデーションを描画するならこんな感じです。


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





こんな感じで配列で色を管理すると便利なことができます!
ぜひ試してみてください〜
このエントリーをはてなブックマークに追加

lerpColor()って便利なんですがたまに「あれ?」ってなるのでメモ!

p5.js reference | lerpColor()


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



カラーパレットを配列にhexで入れている場合、
lerpColorで使う場合はいったんcolor()ではさむ必要があるようです。
グラデーションにならない時は見直したいですね!
このエントリーをはてなブックマークに追加

例えばこんな感じのスケッチを作ったとします。


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



スケッチ上にマウスカーソルをあわせると、オレンジ色の四角の右に青い四角が現れます。
青い四角はマウスカーソルの縦の位置に追従してインタラクティブに長さが変わります。

現状は上方向にカーソルを移動させると黒い線を越えて四角が裏返るような挙動になります。

また、下方向にカーソルを移動させればさせるほど、青い四角は下方向に伸びています。
わかりにくいですが、実はスケッチの外部にカーソルを移動させても追従しているようです。

ここから「青い四角もオレンジ色の四角と同じサイズの範囲で長さが変わってほしい」と考えたとします。
つまり、2本の黒い線の間でだけでサイズが変わるようにしたいということです。
これをバシッと書ける関数があるんですよ。
それが constrain() です!!

p5.js reference | constrain()

「constrain」とは制限するという意味です。
その言葉のとおり、指定した値を下限と上限の間で制限します。
要はUnityでのClampみたいです。

p5.jsでconstrain()を使って先ほどの条件にそったコードを書いてみます。


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



黒い線の上部、下部だと青い四角が伸びなくなっています。
青い四角が黒い線の間でだけ伸びたり縮んだりする挙動になっていますね。
これは青い四角の縦の長さをconstrainで0から250までに制限しているためです。
便利!!

この関数を使った作品がこちら。

この作品は画像の上にさらに画像を重ねて「変身」を表現しています。
上から重ねる画像はmouseYで表示領域を変えています。
この時、単純にmouseYで制御するとスケッチの下部にマウスカーソルが進んだ時、
上に重ねた画像だけがどんどん伸び続ける…という挙動になってしまっていました。
というわけで、constrainを使って0からheightまでに制御しています。

---

こんな便利な関数なのに全然知らなかったんですよね…
調べてみたらゲームの所持金の制御に使ったりすることもあるみたいですね。
¥0より下にならないように、かつカンスト値より上にならないように、みたいな!
汎用性がある!!
このエントリーをはてなブックマークに追加

↑このページのトップヘ