p5.jsでスライダー付きパターンを作る方法

2022.1.16 更新

皆さまごきげんよう。

今回は、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シャツなんていかがですか？

それでは皆さんもプログラミングで素敵なアートライフを〜(^^)/

SVGアニメーションで動くロゴを作ってみよう