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

皆さまごきげんよう。こちらも東京アラートが解除され、ようやく日常を取り戻しつつある今日この頃ですが、メディアを開けば何かと不安を掻き立てられるニュースで満ち満ちております。

しかし私はこのコロナ自粛で、コロナ後の生き方を考える時間を得たと思っております。今後リモートワークはデフォルトになり、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シャツなんていかがですか?(笑)

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

CodeCampGATE CodeCamp

ワードプレスで任意の要素ににp5.jsを実装する

皆さまごきげんよう。
現在、地球規模でコロナウイルスが猛威をふるっており大変心配ですね(´ω`。)。
こんな緊急事態にもかかわらず、朝晩満員電車に乗って通勤しなければならないなんて絶対どうかしてると思います!
これを機に、一刻も早くテレワークが世の中に普及することを切実に願う今日この頃です。

さて、本日は前回の”ウェブサイトの任意の要素ににp5.jsを出力する”の実践編として、ワードプレスで任意の要素にp5.jsを表示させてみようと思います!(最初から読んでみたい方はこちら↓も合わせてご覧くださいませ)

目次

  1. p5のsketch.jsファイルを用意する
  2. sketch.jsファイルをphpファイルに読み込ませる
  3. ワードプレスに外部ファイルを読み込ませる
  4. まとめ
“ワードプレスで任意の要素ににp5.jsを実装する” の続きを読む

ウェブサイトの任意の要素ににp5.jsを出力する

皆さまごきげんよう!

未だ正月病が抜けきらずボーッと生きてますが、そんな時こそ
”やる気が出るまで待っていないで、とりあえず始めてみる”
ことを今から実践していきたいと思います!
不思議なことに、気づけば夢中になってやっていますからお試しください(笑)


さて本日は前回の続きになりますが、p5で作ったスケッチを今度は任意の要素に出力してみようと思います。

前回の記事はこちら→ウェブサイトの背景画像にp5.jsを使う方法

目次

  1. p5でsketch.jsファイルを作る
  2. htmlファイルを作る
  3. 任意の要素ににp5.jsを出力する
“ウェブサイトの任意の要素ににp5.jsを出力する” の続きを読む

ウェブサイトの背景画像にp5.jsを使う方法

皆さま、明けましておめでとうございます。

今年は兎にも角にもアウトプットの年にしていこうと思っております!
(毎年同じことを言っている様な気もしますが気のせいでしょう😅)
どうぞ宜しくお願いしますm(_ _)m

さて、本日はp5.jsで作った作品をウェブサイトの背景画像にするにはどうするか?の備忘録です。動画を使わなくても、画面に動きが出て目を引くこと間違いなしですよ!
意外と簡単に出来ますのでサクッとやってみましょう。

“ウェブサイトの背景画像にp5.jsを使う方法” の続きを読む

jQueryで画像を書き換える

皆さまごきげんよう。
ようやく春めいてきた今日この頃というのに、既に花粉と戦う日々を送っております(><);皆さんは大丈夫ですか?

さて、実は何気に当サイトのトップ画像(=ヘッダーの画像)が、1日のうちに4回入れ替わっているんですよ。びっくりですよね∑(゚Д゚)
一体何の意味があるのか?というツッコミは置いといて、今回はjQueryを使って背景画像を時間で切り替えてみる、ということをやってみます。
“jQueryで画像を書き換える” の続きを読む

cssアニメーションで文字を点滅させてみよう

皆さまごきげんよう。
サイトのどこかに小さな動きがあると一瞬目を惹きますよね。
本日はcssで文字を点滅させてみようと思います。

1.CSS animationを使って文字を点滅させる

まず、このサイトのヘッダー部分のタイトルをご覧ください。実際に実装してみましたよ。cssはこんな感じです。
“cssアニメーションで文字を点滅させてみよう” の続きを読む

ワードプレスをカスタマイズする方法

皆さま、ごきげんよう。
ワードプレスのカスタマイズといえば色々な方法があると思いますが、本日は私のカスタマイズの仕方について語ってみたいと思います。
twenty seventeenをベースにしたこのブログをカスタマイズした時の注意点や、調べ方についての備忘録です。

ベースとなるテーマを決める

“ワードプレスをカスタマイズする方法” の続きを読む

イラストレーターでシームレスなパターンを作ろう

皆さまごきげんよう。
厳しい残暑が続いておりますがですがいかがお過ごしでしょうか?まだまだ日中は暑いとはいえ日の入りが早くなってきて、季節は着々と秋に向かっているのだなぁ..と嬉しいような寂しいような今日この頃です。

さて、本日はイラストレーターでシームレスなパターンを作ってみようと思います♪
“イラストレーターでシームレスなパターンを作ろう” の続きを読む

skrollrでパララックスのランディングページを作ってみよう〜追記あり〜

パララックスもすっかり定着した感のある今日この頃( ˘ω˘)…

webデザイナー同志の皆さま、こんにちは(^^)ゞ
本日はskrollr再び!skrollrを使ってペラいちのランディングページを作ってみようの巻です。
まずはこちらにDEMOを作ってみましたのでご覧ください。
(※firefoxブラウザではきちんと表示出来ないかもしれません。その際はお手数ですが他のブラウザでお試し下さいませm(_ _)m )

skrollrってなに?

パララックス(視差)効果で立体感のあるページが簡単に作れるJavaScriptライブラリです。スマホにも対応してます!まずはダウンロードしてみよう。
“skrollrでパララックスのランディングページを作ってみよう〜追記あり〜” の続きを読む

アイコンの重要性とデザイン

最近クラブのメンバーからお借りした、
「デザインセンスを身につける/ウジトモコ著」
という本を読みました。

デザインについての内容としては、
☆黄金比
☆三分割法
等、デザイン入門書にあるような基本的なものがサラッと書かれてはいますが
この本を読む事で “デザインセンスを身につけられる” のか?? どうかはさておき^^;
本書の中で一番考えさせられたのが
アイコンの重要性についてです。

一億総表現社会の到来といわれるネット時代、
ツイッターやフェイスブックのアイコン(プロフィール写真)ひとつで
自分が何者であるかを視覚化出来る。だからこそ、デザインセンスを身に付け
なりたい自分をデザインしてこの小さなアイコンの中に表現しましょう、と。

例えばこのアイコン、面倒だからとデフォルトのままにしておけば、
どんなに面白い情報を発信していてもスパムにみえて読んでもらえない、とか
猫や風景のアイコンでは、あなたがどんな人であるかわからない→スルーされやすい、等々。

なるほど、たかがアイコンではありますが、直感的に自分の好きか嫌いかでスルーしたり、
逆にどんな人だろうと興味を持ったりしてるかも。

SNSの中では名刺の様なものですものね。
今一度、真面目にアイコン作成してみようかな?