STAGE」ステージに配置されているカラーパレットには、各ウィジェットで変更した内容が反映されます。段階でブレンドされます。なるのですが、このときに「LAYERS」ウィジェットで変更した値もデフォルトに戻しています。そのため、ホバー状態を解除すると再び変更した値が有効になり、独特のアニメーションが生まれます。この仕組みによって、レイヤーの重なり方によっては波紋のような効果を出すことができます。つのコーナーのカラーを変更できます。使用してほぼ均等の割合で混色されます。それぞれに配置されているボタンで、表示のオン・オフを切り替えることができます。色(!)のブレンドを確認することができます。色域を超えた指定も可能です。使用しているカラーピッカーのライブラリの制約上、ポップアップで表示されるカラーの選択は「Hex」「RGB」「HSL」に限定されます。エラーにはなりません)。色の補間方法として使用する色空間を選択します。つの色空間のキーワードから選択できますが、仕様上はさらに多くのキーワードが存在します。これらの色空間は「矩形(rectangular)」タイプと「極座標(polar)」タイプに分かれており、後者の場合は色相補間のアルゴリズム(<hue-interpolation-method>)を選択できます。つの色空間が極座標タイプです。つのカラーによって描かれた弧に対して、以下のアルゴリズムを選択します。キーワードを付与しますが、説明をシンプルにするために省略しています。均等(50%)に混色したときに、色相がどのように補間されるかを視覚化しています。2135deg<hue-interpolation-method>shorterlongerincreasingdecreasing中心のドットと、そこから伸びている罫線の先にある中間のドットには、初期の状態では以下と同等のコードが適用されています。2」のスライダーを動かすと色相の位置が変化します。それにともない、中心のドットおよび中間のドットのカラーも変化します。度位置が変わることが確認できます。「BACKGROUND」では、背景画像と背景色を指定できます。ドロップするか、「UPLOAD」ボタンから画像ファイルをアップロードすることができます。アップロードした画像は背景画像として指定され、その上にはレイヤーが重なっています。そのため、レイヤーのブレンドモードによっては背景画像は下に隠れたままになります。作成して一時的に表示しているだけなので、外部には送信していません。画像アップロードの下のセレクトメニューでは、アップロードした背景画像と背景色との合成方法(background-blend-mode)を変更できます。SIZE」アップロードした画像の表示サイズを選択できます。これは画像を削除せずに一時的に画像を非表示にしたいときに使用できます。COLOR」ステージの背景色を変更できます。「BG」ラベルが付いているボタンで表示のオン・オフを切り替えることができます。「LAYERS」では、各レイヤーをブレンドモードで合成方法を変更したり、レイヤー内のスウォッチを変形することができます。つのレイヤーが重なっています。「LAYER-1」の上に「LAYER-2」が重なっていますが、それぞれブレンドモードの変更と形状の変形(transform)ができます。レイヤー名の隣に配置されているスイッチで、レイヤーの表示・非表示を切り替えることができます。「LAYER-1」と「LAYER-2」のカラー指定を個別に変更することはできません。本アプリでは、色と色が隣接している部分で縁辺対比という現象が発生しやすくなっているため、この現象について簡単に説明します。混色して明度のみに変化を加えているデモです。🙇‍♂️size100%gap0%各色が隣接している部分に注目すると、暗い領域はより暗く、明るい領域はより明るく見えることが確認できます。現象が確認できない場合には、「size」のスライダーを操作してサイズを変更してみたり、画面から少し離れて試してみてください。「gap」のスライダーを操作すると各色の間に余白(距離)ができますが、そのときにはこの現象は見受けられません。このように色と色の縁(ふち)の対比によって起こる現象を縁辺対比といい、網膜の側抑制(そくよくせい)というメカニズムによって発生していると考えられています。つのウィジェットは、タイトル領域をドラッグすることで位置を移動することができます。右上の閉じるボタンか、元の位置に表示される「RESET」ボタンを選択することで位置をリセットすることができます。適用されるので、水平方向に対して一定量のリサイズが可能になります。この機能を利用して、ワークスペースを自由にアレンジすることができます。基礎編」というブログ記事で作成したものを流用していますが、この記事で実装されている位置をリセットするときのアニメーションは、相互に影響しない独立したレイアウトでなければ難しいため、本アプリでは無効にしています。本アプリには、現時点では実装できていない機能や問題点がいくつか存在します。以下に主要な課題をピックアップします。形式でエクスポートできるといった編集内容を保存する機能を用意したかったのですが、まだ実装できていません。開発工数がかかるので単に後回しにしたのがおもな理由ですが、別の理由としてアップロードした画像の保存方法をどうするかが決まっていません。使用した保存方法を模索するか、いっそのこと画像は保存の対象外とする方向のいずれかで検討したいです。したイメージをダウンロードする機能の実装も検討していました。保存方法の選択肢としては以下が考えられます。html2canvas」は、ブレンドモードに対応していないといった制約により、目的を達成できないため選択肢から外れました。系のブラウザに限定されるのと、実行時にユーザの同意も必要になるので一旦見送りました。ファイルとして保存」が、もっとも現実的な方法であり、途中まで実装を試してみたのですが、画像を含める方法と、複数レイヤーにブレンドモードを適用する方法を見つけることができずに挫折しました。今後、効果的な方法が見つかれば機能を実装するかもしれませんが、もし作成したイメージを保存したいときには、お手数ですがブラウザのスクリーンショット機能などを使用してください。見出し「カラーピッカー」カラーピッカーには、過去のプロジェクト「RECTGRAPH」「RECTBEATS」でも使用している、「Coloris」というライブラリを使用しています。色域を超えたカラーを選択できないため、表現力を制限してしまっている点が惜しいと感じています。見出し「モバイルデバイスでの使用」スマートフォンのようなスクリーンサイズが限られているタッチデバイスでは、ユーザビリティ上の問題があります。ホバーした要素を一時的に非表示にすることで波紋が生まれる効果ですが、タッチデバイスでは反応こそするものの、タップした要素のみが変わるため連続的な変化による効果を楽しむことができません。スワイプでスクロールした際に不意にウィジェットのタイトルをドラッグしてしまい、ウィジェットごと移動する点なども使い勝手が悪いと感じています。細かい点を挙げれば尽きませんが、ひとまず以上が認識しているおもな課題です。関数を学ぶために作成したデモに対して、あれもこれもと手を加えていくうちにできました。ブレンドモードの組み合わせによっても興味深い変化が生まれるので、レイヤーの合成に対する理解も深まるかもしれません。上記で挙げたように課題も多く残っているので、今後も少しずつ改修していければと考えています。本アプリやブログ記事の作成にあたり、以下のウェブページを参考にしました。Functions)については、以下の記事を参考にしました。