Palette

ritocoのクリエイティブコーディング記録

【p5.js】p5.jsと組み合わせて面白かった表現4選

この記事は Processing Advent Calendar 2021 19日目 の記事です。


Processing Advent Calendar 2021

寒すぎてMacBookで手をあたためています、ritocoです。
前日は TaitoOtani さんの「P5JSで作るオーディオビジュアルスケッチ、そして2021年の振り返り。」でした。

かっこいい音楽と白黒のスケッチのコラボがドストライクだったので、本記事の執筆時の BGM にしました。
気になった方はリンクからぜひ覗いてみてください◎


さて、今回は p5.jsと組み合わせて面白かった表現4選 をご紹介します。
本記事では組み合わせるツール(表現)、どんな風に使うのか、組み合わせた例をまとめています。
皆様のクリエイティブコーディングの引き出しになれば幸いです。





1.Fancy Border Radius Generator

9elements.github.io

組み合わせた結果

CSScanvas属性に入力するとフヨフヨの丸型に変わります。

openprocessing.org




使い方

gyazo.com

動画内の解説

① 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

bennettfeely.com

組み合わせた結果

canvasをさまざまな形に変形することができます。

openprocessing.org





使い方

gyazo.com



gyazo.com

動画内の解説

① 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さんの下記のツイートを参考に、上記の表現を取り入れました。





3.Smooth Shadow

bennettfeely.com

組み合わせた結果

細かく影が調整できるツールです。
box-shadow openprocessing.org





使い方

gyazo.com

動画内の解説

① 影をつけたいスケッチを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

asada.website

ツールの概要

色の見え方に特徴がある方に向けて、色の区別に配慮しているかどうか検証することができます。
いろんな方に作品を楽しんでもらえたら嬉しいなと感じて、今回アートに応用する形で取り上げました。 色覚多様性ついてもっと知りたい方は こちら

f:id:ritocopalette:20211219133355p:plain


使い方

gyazo.com ① Chromatic Vision Simulator にアクセス
② フォルダのアイコンをクリックし、検証したい画像を開く
③ 検証したい見え方をクリックしたり、画面を分割することができます




Chromatic Vision Simulatorで実験

① 検証してみた結果、今回の場合は左斜め下の色の強弱が弱く、見分けづらいと判断しました。

f:id:ritocopalette:20211219133407p:plain





② 解消するために カラーユニバーサルデザイン推奨配色セット から、色を選びました。
ただ、リンク先のガイドブックを見たらRGB表記だったためカラーコードに変換します。
使いたい色のスクリーンショットを撮影し、Adobe Colorを使用して、カラーコードに変換しました。

gyazo.com




③ 作品に色を当てて、Chromatic Vision Simulatorで検証しました。 f:id:ritocopalette:20211219141151p:plain


④ 最終的に下記のようになりました。
最初の画像比べて、どの部分でも色の強弱がはっきりし、 区別がつきやすくなりました。
f:id:ritocopalette:20211219144629p:plain



実験を終えて

ツールと組み合わせることで細部まで表現できたり、少し制約があることでいつもと違う景色が見れたりと、さまざまな角度からp5.jsでの作品制作をすることができて、実験はとても新鮮でした。
特に最後のカラーバリアフリーについては、先日行われた Tokyo Demo Fest からインスピレーションを受けました。「配慮の技術」があることに非常に感動し、自分の中でも今後取り入れて行きたいテーマだと感じました。
皆さんの制作ネタのお役に立てれば幸いです!
ハッピーコーディング!