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

wordpressのサイトをPWA化させてみよう

皆さまごきげんよう。
秋の日は釣瓶落とし。気がつけば日が落ちるのも随分早くなってきましたね〜
( ==)旦シミジミ。

さてそんな秋の夜長に、最近話題のwebサイトのpwa化にチャレンジしてみましたので、本日はその備忘録でございます。

目次
1.アイコン画像を作りwordpressに設置する
2.manifest.jsonファイルを設置する
3.serviceWorker.jsを設置する
4.header.phpにファイルを読み込む記述をする
5.ホーム画面に追加してみる
6.追記

“wordpressのサイトをPWA化させてみよう” の続きを読む

履歴書に書ける!Googleの認定資格にチャレンジしてみたよ

皆さまごきげんよう。
長かった梅雨が明けた途端の連日の猛暑、皆さまいかがお過ごしでしょうか?

さて本日は、履歴書にも書ける「googleの認定資格」にチャレンジしてみた感想や勉強方法などについてお届けします。

目次

“履歴書に書ける!Googleの認定資格にチャレンジしてみたよ” の続きを読む

PaintsChainerで自動着彩を試してみたよ

皆さまごきげんよう。
突然ですが、もう全部自動化したくないですか?

最近はなんでもかんでも「AIだ、自動化だ!」と言うのが流行ってますが、ならそろそろ所有者の文体や絵の癖なんかを学んで、下書きくらいまで自動でやっておいてくれるOSとか出来てもよくないですか?…なんて、映画「her/世界でひとつの彼女」な未来を思う今日この頃です。

そこで本日は、今話題の自分の描いた絵に自動で色を塗ってくれるという近未来感溢れる神サービスPaintsChainerを試してみました!

PaintsChainerへGO!
“PaintsChainerで自動着彩を試してみたよ” の続きを読む

ワードプレスの新エディタGutenbergが使えない場合の解決法

皆さま、ごきげんよう!
久しぶりにサイト更新しようと思ったら、いつのまにか新エディタになっていてびっくり。わけがわからず、旧エディタが使えるプラグイン、その名もClassic Editorを急遽インストールしてみたものの、いずれは使わなければならないなら、今から使って無理やり慣れていくしかないだろう、ということで本日は新エディタ・Gutenbergを試してみようと思います!

“ワードプレスの新エディタGutenbergが使えない場合の解決法” の続きを読む

コンテンツをプロテクトしてくれるcss

皆さまご機嫌よう。
以前、画像の右クリック、ドラッグ&ドロップ禁止のプラグインのご紹介をしましたが、私のワードプレスのテーマといつのまにか互換性が無くなってしまったのでしょうか?原因不明なのですが、全く効いていないことに最近気付きました((((( ;゚Д゚)))ガクガクブルブル

そこで今回は、一行でコンテンツをプロテクトしてくれるcssのご紹介です。
“コンテンツをプロテクトしてくれるcss” の続きを読む

pixivの3Dキャラ作成ツール「VRoid Studio」を試す、の巻

皆さまご機嫌よう。
VRに興味津々な今日この頃、最近ではヴァーチャルオフィスなるものも登場し、これからはアバターも3Dだ!さてどうしよう?と思っていたところ、タイムリーに公開されたpixivによる無料の3Dキャラ作成ツール、「VRoid Studio」。早速使ってみましたよ♪

まずはこちらからVRoidをダウンロードします。
VRoid Studio

VRoid Studioを開きます。
編集画面は 顔、髪型、体型、衣装、撮影のタブに分かれており、左側のツールパネル、中央のカメラパネル、右側のプロパティパネルの3分割画面で構成されています。
“pixivの3Dキャラ作成ツール「VRoid Studio」を試す、の巻” の続きを読む

画像を守るワードプレスプラグイン No Right Click Images Plugin、Easy WaterMark、Image Watermark

明けましておめでとうございます。
今年はもっと更新頻度を上げていくことを目標に(と毎年言っている感(;_△_)=3 ドテッ) どうぞよろしくお願いいたします。

さて、本日は今年最初にインストールしたプラグインをご紹介したいと思います。

もしサイトにUPした絵や写真などを知らず知らずに盗用されていた、なんてことになっていたら気分悪いですよね。
最近は画像の上で右クリックしたり、ドラッグアンドドロップが出来ないサイトも増えてきたように思います。
せっかく苦労して作った画像や写真を盗用されないためにも、自分で出来る最低限の防衛対策はとっておきたいもの。それがプラグインをインストールするだけで簡単に出来ますのでぜひ取り入れてみて下さい♪
“画像を守るワードプレスプラグイン No Right Click Images Plugin、Easy WaterMark、Image Watermark” の続きを読む

ロリポップでワードプレスをhttps化しよう

皆さまこんにちは♪
本日はロリポップサーバーで独自SSLの設定をしてみます!

今や個人のブログであっても、SSL化していないサイトでは接続するのが心配…と思われてしまいますよね。。
今まではサイトをSSL化するには追加料金を払わなければならなかったのが、今年の7月に無料の独自SSL「Let’s Encrypt」を、基本のご利用料金のみで全プランで常時SSL化が可能、とのこと!
ということで、遅ればせながら早速ロリポップでワードプレスのサイトを無料でSSL化してみます。
(ちなみに私のワードプレスはマルチサイトになっておりますので、その手順で書いております。)
“ロリポップでワードプレスをhttps化しよう” の続きを読む

最近入れてみたワードプレスプラグイン、Q2W3 Fixed Widget、Yet Another Related Posts Plugin

皆さま、新年明けましておめでとうございます!今年はもう少し更新頻度を上げていくことを目標に、ユルく頑張ります(笑)
どうぞよろしくお願いいたします m(__)m

さて、ワードプレスの今年のテーマ、twenty seventeenが出ましたね〜!
当サイトはこれまでtwenty fourteenの子テーマでずっとやってきたのですが、2017を試してみると…これがシンプルかつトレンドも押さえてあったりと、なかなか使い勝手が良さそうなので、暫くこちらのテーマに変えて色々カスタマイズしてみようと思っています。

ということで本日はテーマの変更に伴い、最近入れてみたプラグイン2種類をレビューいたします。
“最近入れてみたワードプレスプラグイン、Q2W3 Fixed Widget、Yet Another Related Posts Plugin” の続きを読む

コードをハイライトさせるワードプレスプラグイン「WP Code Highlight.js」を使ってみた

皆さまごきげんよう。ジメジメとうっとおしい季節、いかがお過ごしですか?
これから梅雨明けも間近に控えて、夏が大の苦手な私が最近気になっているのが「空調ざぶとん」って云うんですか?お尻にヒンヤリ空気を運ぶという、ファンが付いた座布団です。どの程度の音がするのか?気になるところですが、これを会社で使いたい(笑)。あと冷房服。すごく着てみたい(笑)。

さて、今まで使っていたコードをハイライトさせるプラグイン、「Crayon Syntax Highlighter」が一体いつ頃からなのか?なぜか今まで通りに表示されなくなっていまして、まぁ、動作が重かったこともありますし、この度これに代わるプラグイン「WP Code Highlight.js」を使ってみることにしました。
“コードをハイライトさせるワードプレスプラグイン「WP Code Highlight.js」を使ってみた” の続きを読む

Jetpackのタイルギャラリーで画像をタイル風に並べてみよう

インターネッツのみなさまこんにちは!
本日はワードプレスの人気プラグイン、Jetpackのタイルギャラリーを使ってみた感じをレポートいたします(^^)ノ

Jetpackとは、30種類以上の機能を備えたプラグインです。これひとつ入れておけば大体のことは出来てしまうのでは?というくらい多機能ですのでよかったらお試しください。
“Jetpackのタイルギャラリーで画像をタイル風に並べてみよう” の続きを読む