だらっと学習帳

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




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









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

会期: 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.




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

↑このページのトップヘ