かに

Creative Developer

かに

Creative Developer

  • AQ CASE＆KNOWLEDGE

    • 30本

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

p5.js 水彩毛筆風描画のつくりかた

こんにちは、AQUARING かに です。 今回は最近のスケッチでよくやっている、noise() を使った水彩毛筆風描画を紹介します。手順はとても簡単なのでクリエイティブコーディングを始めたばかりの方でも挑戦しやすいテクニックかと思います。 作例こんな感じの淡い水彩絵の具と毛筆で線を引いたような画が作れます。 作り方なんとたったの3ステップで作れます！ 1. circle() を直線上にたくさん並べる function setup() { createCanvas(

かに

    • つぶやきProcessingでFlow Fieldやってみた

      こんにちは、AQUARING かに です。 今回は @gin_graphic さんが主催されているp5.js勉強会の第一回で紹介されていた Flow Flield（ベクトル場）を使ったつぶやきProcessingのスケッチを紹介していきます。 TweetProcessing - 230208 いままでは時間をかけて描画する系のスケッチをあまり書いてきませんでしたが、やってみると一発描画ではできない綺麗な画ができたり、描画されていく過程を眺めるのも楽しい、という気づきがあり

      かに

      • GENUARY 2023 スケッチ まとめ

        こんにちは、AQUARING かに です。 今年初めてGENUARYに参加したので、今回の記事ではGENUARYで作ったスケッチを一言ずつコメントを添えながら紹介していきます！ GENUARYは１月に１日１テーマずつ取り組むコーディングチャレンジみたいなもので、公式サイトの PROMPTS のページに各日のテーマが載っています。 DAY 1 : "Perfect loop / Infinite loop / endless GIFs" 今年の年賀スケッチです。 GSAP

        かに

        • DailyCoding 振り返り 2022

          こんにちは、AQUARING かに です。 早いもので2022年もあっという間にあと数日ですね。 ということで、今回はデイリーコーディング（ほぼつぶやきProcessingですが）の１年分の振り返りをやっていきます！ 1月@_unshift さんの年賀サイト（three.js製）の背景をp5.jsで目コピしました。 構図やメッシュの歪ませ方など、自分が普段しない感じのもので勉強になりました。 2月2月は #AltEdu2022 のコーディングチャレンジに挑戦しました。 「

          かに

        マガジン

        • AQ CASE＆KNOWLEDGE
          30本

        記事

          インラインSVG効率化テクニック

          こんにちは、AQUARING かに です。 ここ最近はつぶやきProcessingネタの記事ばかりになってしまっていたので、たまにはフロントエンドネタの記事を書こうと思います。 今回はHTMLにSVGタグをインラインで埋め込む際の効率化について紹介します。 インラインSVGについて 基本的には単色アイコンの場合はアイコンフォント化してしまう方がいいので、インラインSVGを採用する際の条件としては「複数色で色のバリエーションがある」または「パーツごとにアニメーションさせ

          かに

          インラインSVG効率化テクニック

          かに

          つぶやきProcessing drop-shadow()活用術 その２

          こんにちは、AQUARING かに です。 今回は、前回紹介した drop-shadow() の重ねがけと drawingContext.clip() を組み合わせることで、ちょっと複雑なグラデーションつきのマテリアル表現ができるので、その方法とつぶやきProcessingでの作例を紹介します。 ↓前回の記事はコチラ drop-shadow() を clip() とあわせてみるやることは簡単で、シャドウつきの図形を描画する前に一度同じ図形を描画してから、drawingCo

          かに

          つぶやきProcessing drop-shadow()活用術 その２

          かに

          つぶやきProcessing drop-shadow()活用術

          こんにちは、AQUARING かに です。 今回は、p5.js の drawingContext.filter で適用できる drop-shadow() を使って、自然な影を描画するテクニックを紹介します。 ドロップシャドウの描画は drawingContext.filter のほかにも drawingContext.shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY を使って実装する方法もありますが、つぶやきPro

          かに

          つぶやきProcessing drop-shadow()活用術

          かに

          つぶやきProcessing specularMaterial()活用術

          こんにちは、AQUARING かに です。 今回は、前回の記事で紹介した ellipsoid() などの丸みのある3D形状と supecularMaterial() の組み合わせでの表現テクニックを紹介します。 supecularMaterial() の書き方// Grayscale (+ Alpha)specularMaterial(gray, [alpha])// RGB (+ Alpha)specularMaterial(v1, v2, v3, [alpha])//

          かに

          つぶやきProcessing specularMaterial()活用術

          かに

          つぶやきProcessing ellipsoid()活用術

          こんにちは、AQUARING かに です。 今回は最近つぶやきProcessingでよくやっている、ellipsoid() （楕円体）を使った表現テクニックを紹介します。 調整できるパラメーターが多いため、ellipsoid() だけもでいろんな形状が作れます。そのため複数の関数を使わなくて済むのでつぶやきProcessingにおいては文字数削減にもなります。 ellipsoid() の書き方ellipsoid( [radiusx],// X方向の半径 [radiusy

          かに

          つぶやきProcessing ellipsoid()活用術

          かに

          つぶやきProcessingでeasingを使う

          こんにちは、AQUARING かに です。 昨年10月からデイリーコーディングを始めて、ここ2ヶ月ほどはほぼ毎日つぶやきProcessingでスケッチを描いてTwitterに投稿しています。 今回は最近よくやっているeasing関数を組み込んだ表現を紹介します。 イージング関数スケッチで使用する関数はこちらのサイトにあるものを使用しています。 easeOutElastic縦長 box() を XZ 方向に並べて、原点からの距離を easeOutElastic に入れてY方

          かに

          つぶやきProcessingでeasingを使う

          かに

          「Tiny Sketches」を観に行ってきました

          こんにちは、AQUARING かに です。 5月21, 22日 にクリエイティブコーダー高尾俊介（@takawo）さん初の個展「Tiny Sketches」を観に行ってきました。 当日のツイートや写真とともに展示の感想や思ったことなどを振り返っていきます。 展示の感想240 Daily Coding Sketches 圧倒的作品数！ まず1500点以上ある作品を240点に絞るという時点で大変なことが容易に想像できるのに、その上で240点の作品を全て印刷出力して展示しよう

          かに

          「Tiny Sketches」を観に行ってきました

          かに

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

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

          かに

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

          かに

          p5.js 累乗テクニックで自然な印象のスケッチをつくる

          こんにちは、AQUARING かに です。 今回は数値の累乗を使った表現のテクニックを紹介します。 p5.js というよりは数学寄りの内容になりますが、数学が苦手な方でもすぐできて、いろんな場面で応用が効くテクニックなのでぜひやってみてください！ 累乗とは？累乗（るいじょう）とは同じ数を何度も掛け合わせることです。 指数は掛け合わせる回数のこと。 Math.pow() （p5.jsでは pow()） や **（べき乗演算子） を使うことで累乗が書けます。 let x =

          かに

          p5.js 累乗テクニックで自然な印象のスケッチをつくる

          かに

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

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

          かに

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

          かに

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

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

          かに

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

          かに

          GLSL Tips #01 レイヤーの結合

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

          かに

          GLSL Tips #01 レイヤーの結合

          かに