マガジンのカバー画像

AQ CASE＆KNOWLEDGE

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

#p5js

ブラザーSDGsストーリー リニューアル WebGL舞台裏

こんにちは、AQUARING かに です。 今回は今年２月にサイトリニューアルを担当した Brother様 の「ブラザーSDGsストーリー」サイトの WebGL の舞台裏をご紹介します。 リニューアルの経緯リニューアル前のサイトでも同じキャラクターを用いた表現をしていましたが、旧サイトではアニメーション付きの glTF モデルを WebGL でリアルタイムで再生する形で実装していました。 幅広いデバイスでのキャラクターのクオリティ担保やローディング軽量化などを考慮した結果、

かに

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

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

かに