皆さまごきげんよう。こちらも東京アラートが解除され、ようやく日常を取り戻しつつある今日この頃ですが、メディアを開けば何かと不安を掻き立てられるニュースで満ち満ちております。
しかし私はこのコロナ自粛で、コロナ後の生き方を考える時間を得たと思っております。今後リモートワークはデフォルトになり、5GでVR、ARが普及すれば遠隔での作業や接客なども可能になるでしょう。ヴァーチャルな世界では仕事は世界中で探せますし、年齢でやりたいことを諦めなくたっていいんです！そう考えると未来はワクワクでいっぱいです♪ 禍を転じて福と為す。この、時代の転換点を注視してまいりましょう。
さて、前置きが長くなりましたが今回はp5でジオメトリックパターンを作ってみましたよ。
左上にスライダーを設置して値の変更を簡単に出来るようにしてみました。
ちょっと小さくて見にくいんですけど、上からval(カーブの振り幅)、H(色相)、S(彩度)、B(明度)の値になりますので、それぞれ動かしてみてください。(CODEPENのロゴをクリックするとCODEPENのサイトに飛びますので、色々いじってみてください。)
See the Pen p5.js-sin-cosWave-pattern by kowalski k (@polkadotsandsky) on CodePen.
p5.jsでのスライダーの作り方
では、スライダー作成のポイントを色の部分を使って説名しますね♪
カラーモードは今回はHSB（HSL）Hue/Saturation/Brightness (or Lightness)にしました。
- カラーモードを定義する 3行目
- スライダーを定義する 20〜22行目
- スライダーの値の範囲と初期値を設定する 6行目
- スライダーの位置を設定する 7行目
- スライダーの幅を設定する 8行目
- スライダーの項目名を表示する 26〜28行目
- backgroundの引数に変数を入れる 24行目
↓ ↓ ↓
function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB);
// create sliders
hSlider = createSlider(0, 360, 50);
hSlider.position(20, 40);
hSlider.style('width', '80px');
sSlider = createSlider(0, 100, 50);
sSlider.position(20, 70);
sSlider.style('width', '80px');
bSlider = createSlider(0, 100, 100);
bSlider.position(20, 100);
bSlider.style('width', '80px');
}
function draw(){
var h = hSlider.value();
var s = sSlider.value();
var b = bSlider.value();
background(h,s,b);
text('H', 5, 50);
text('S', 5, 80);
text('B', 5, 110);
}他にもsin・cosの波の高さを変えるスライダーを作ってみたり、stroke(線)を図形に変更してみたり、工夫次第で色んなパターンが作れそうです。
p5で作ったパターンで、オリジナルグッズを作ってみるのもいいですね！ジェネラティブ・アートTシャツなんていかがですか？(笑)
それでは皆さんもプログラミングで素敵なアートライフを〜(^^)/