AQ CASE＆KNOWLEDGE

本

アクアリングの事例やナレッジを紹介するマガジンです。実際のプロジェクトで、アクアリングが強みとする「UI/UX」「共創的課題解決」がどのように発揮されているのか、PJメンバーか… もっと読む

運営しているクリエイター

#クリエイティブコーディング

p5.jsでshadowBlurにグラデーションを適用する

こんにちは、AQUARING かにです。 p5.js で drawingContext.shadowBlur を使うと簡単にシャドウを描画することができますが、drawingContext.shadowColorには単色しか設定できませんよね。今回は shadowBlur にグラデーションを適用する方法を紹介します。最終的なコードはページ下部の追記220401：p5.Image.mask()でアルファマスクするにあります。黒背景に白でシャドウを描画let d

GLSL Tips #02 輪郭のジャギーをなめらかにする

こんにちは、AQUARING かにです。今回はGLSLでテクスチャをマスクする際によくある輪郭のジャギーをなめらかにする方法について書いていきます。 GLSL側で円形のマスクを作成するコードを例に説明していきます。マスクがジャギる例まず普通に円形のマスク関数を書くと以下のようになります。 precision mediump float;varying vec2 vTexCoord;/** * 円形マスク * @param {vec2} uv UV座標 * @pa

GLSL Tips #01 レイヤーの結合

こんにちは、AQUARING かにです。 WebGLやopenFrameworksなどでGLSLを書くたびに毎回「どうやるんだっけ？」となることが多々あるので、こまめに記事にして備忘録として残していこうと思います。今回はレイヤーの結合についてです。距離関数で描いた複数の円を重ねるコードを例に説明していきますが、テクスチャを使ったマスクでも同様の処理でレイヤーを結合できます。背景レイヤーと結合precision highp float;varying vec2 v

ORIGAMI LETTER フロントエンドBreakdown

こんにちは、AQUARING かにです。昨年制作したブラザー工業さまの「ORIGAMI LETTER」が今年4月にiFデザインアワード2021 コミュニケーションデザイン部門でゴールドを受賞しました！🎉 このWebサイトでは、Webサイト上で折り紙を折るDigital Origami Letterと、プリントした折り紙を折るPrinted Origami Letterの、2つ方法でメッセージを送ることができます。今回はCanvas2DやWebGLなどのフロントエン

AQUARINGサイトリニューアルフロントエンドBreakdown

こんにちは、AQUARING かにです。今回は昨年12月にリニューアルしたAQUARINGサイトのフロントエンドについて解説していきます。 WebGL表現まずGLSLとp5.jsで２種類のスケッチを作成しました。メタボール円のスケッチ（GLSL）距離関数を用いてふたつの円を重ねて、44行目のstep関数を通すことで画像を二値化してマスクを作成し、最後に水色で塗っています。この行をコメントアウトすると二値化前の状態が確認できます。 mask = step(0.5