【p5.js】p5.jsと組み合わせて面白かった表現4選
この記事は Processing Advent Calendar 2021 19日目 の記事です。
Processing Advent Calendar 2021
寒すぎてMacBookで手をあたためています、ritocoです。
前日は TaitoOtani さんの「P5JSで作るオーディオビジュアルスケッチ、そして2021年の振り返り。」でした。
かっこいい音楽と白黒のスケッチのコラボがドストライクだったので、本記事の執筆時の BGM にしました。
気になった方はリンクからぜひ覗いてみてください◎
さて、今回は p5.jsと組み合わせて面白かった表現4選 をご紹介します。
本記事では組み合わせるツール(表現)、どんな風に使うのか、組み合わせた例をまとめています。
皆様のクリエイティブコーディングの引き出しになれば幸いです。
- Processing Advent Calendar 2021
- 1.Fancy Border Radius Generator
- 2. Clippy — CSS clip-path maker
- 3.Smooth Shadow
- 4 Chromatic Vision Simulator
- 実験を終えて
1.Fancy Border Radius Generator
組み合わせた結果
CSSのcanvas属性に入力するとフヨフヨの丸型に変わります。
使い方
動画内の解説
① Fancy Border Radius Generator にアクセス後、copyを押す
② くりぬきたいスケッチをOpenProcessing上で用意する
③ 右側のメニューより、HTML/CSSをクリック
④ OpenProcessing内のCSSのタブをクリック
⑤ CSSエディタに下記のようにcanvas要素、border-radius、①でコピーした数値を記述
/* CSS */ canvas{ border-radius:30% 70% 70% 30% / 30% 30% 70% 70% ; }
⑥ 更新ボタンを押すと⑤で設定した形にくり抜かれる。
2. Clippy — CSS clip-path maker
組み合わせた結果
canvasをさまざまな形に変形することができます。
使い方
動画内の解説
① Clippyにアクセス後、好きな図形を選んで値をコピー
② くりぬきたいスケッチをOpenProcessing上で用意する
③ p5.js内でcanvasを入れる変数を宣言
// p5.js
let canvas;
④ p5.jsのsetup内で変数の中にcreateCanvasを入れる
// p5.js function setup() { canvas = createCanvas(500,500); .
⑤ p5.jsのdraw内に、④で指定した変数にstyleを当て、
①でコピーした数値を記述
// p5.js function draw() { canvas.style("clip-path", " polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%)"); . .
⑥更新ボタンを押すと⑤で設定した形にくり抜かれる。
takawoさんの下記のツイートを参考に、上記の表現を取り入れました。
ということは……
— TAKAWO Shunsuke (@takawo) 2021年11月16日
reference: https://t.co/I65GE61B5k pic.twitter.com/gppGcS67Q9
3.Smooth Shadow
組み合わせた結果
細かく影が調整できるツールです。
box-shadow
openprocessing.org
使い方
動画内の解説
① 影をつけたいスケッチをOpenProcessing上で用意する
② Smooth Shadowにアクセス後、影の位置等を調節し、値をコピー
③ OpenProcessing右側のメニューより、HTML/CSSをクリック
④ OpenProcessing内のCSSのタブをクリック
⑤ CSSエディタに下記のようにcanvas要素と②でコピーした数値を記述
/*CSS*/ canvas{ overflow: hidden; position: fixed; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028), 12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07); }
4 Chromatic Vision Simulator
ツールの概要
色の見え方に特徴がある方に向けて、色の区別に配慮しているかどうか検証することができます。
いろんな方に作品を楽しんでもらえたら嬉しいなと感じて、今回アートに応用する形で取り上げました。
色覚多様性ついてもっと知りたい方は こちら。
使い方
gyazo.com
① Chromatic Vision Simulator にアクセス
② フォルダのアイコンをクリックし、検証したい画像を開く
③ 検証したい見え方をクリックしたり、画面を分割することができます
Chromatic Vision Simulatorで実験
① 検証してみた結果、今回の場合は左斜め下の色の強弱が弱く、見分けづらいと判断しました。
② 解消するために カラーユニバーサルデザイン推奨配色セット から、色を選びました。
ただ、リンク先のガイドブックを見たらRGB表記だったためカラーコードに変換します。
使いたい色のスクリーンショットを撮影し、Adobe Colorを使用して、カラーコードに変換しました。
③ 作品に色を当てて、Chromatic Vision Simulatorで検証しました。
④ 最終的に下記のようになりました。
最初の画像比べて、どの部分でも色の強弱がはっきりし、
区別がつきやすくなりました。
実験を終えて
ツールと組み合わせることで細部まで表現できたり、少し制約があることでいつもと違う景色が見れたりと、さまざまな角度からp5.jsでの作品制作をすることができて、実験はとても新鮮でした。
特に最後のカラーバリアフリーについては、先日行われた Tokyo Demo Fest からインスピレーションを受けました。「配慮の技術」があることに非常に感動し、自分の中でも今後取り入れて行きたいテーマだと感じました。
皆さんの制作ネタのお役に立てれば幸いです!
ハッピーコーディング!