本稿は「Basic gradient shader based on texture coordinates」ページを翻訳したものです。 テクスチャ座標にもとづいた基本的なグラデーションシェーダー このグラデーションは、 […]
続きを読むカテゴリー: p5.js シェーダー
p5.js shader 基本的なサンプル 1 グラデーションシェーダー
本稿は「Basic Gradient Shader based on pixel coordinates」ページを翻訳したものです。 ピクセル座標にもとづいた基本的なグラデーションシェーダー 次のコードは、キャンバスのピ […]
続きを読むp5.js shader スタート 8 テクスチャ座標の使用
本稿は「Using Texture Coordinates」ページを翻訳したものです。 テクスチャ座標の使用 TexCoordとFragCoord。シェーダーサンプルコードの中でこれらを使った変数に気づかれたかもしれませ […]
続きを読むp5.js shader スタート 7 変数修飾子の使用
本稿は「Using Variable Qualifiers」ページを翻訳したものです。 変数修飾子を使用することで、変数の使用方法がさらに定義できます。変数修飾子は変数の型(floatやvec2など)の前に置きます、 変 […]
続きを読むp5.js shader スタート 6 シェーダーの重要な概念
本稿は「Important shader concepts」ページを翻訳したものです。 シェーダーの重要な概念 このページにはシェーダーの使用を開始するに当たって”知っておく必要のある”情報が多く含まれています。みなさん […]
続きを読むp5.js shader スタート 5 シェーダーの書き方
本稿は「How to write a shader」ページを翻訳したものです。 シェーダーの書き方 ロードするシェーダーファイルについて見ていきましょう。 シェーダーを作成するには、p5スケッチフォルダ内に２つのファイル […]
続きを読むp5.js shader スタート 4 シェーダーの設定
本稿は「Setting up shaders in p5.js」ページを翻訳したものです。 シェーダーのセットアップ シェーダーとはどのようなもので、p5 スケッチとは書き方の異なるものだということが分かったので、簡単な […]
続きを読むp5.js shader スタート 3 シェーダーとは何か？
本稿は「Why use shaders?」ページを翻訳したものです。 シェーダーとは？ シェーダーはわれわれの身の回りで使われているので、自分で記述したことがなくても、必ず目にしているはずです。シェーダーは、コンピュータ […]
続きを読むp5.js shader スタート 2 シェーダーを使う理由
本稿は「Why use shaders?」ページを翻訳したものです。 パフォーマンス loadPixels()やset()、updatePixels()を使ったり、p5.jsでピクセル単位の計算をしたことのある方なら、そ […]
続きを読むp5.js shader スタート 1 p5.js shaderへようこそ
本稿は「Welcome to p5.js shaders」ページを翻訳したものです。 シェーダーは、みなさんのプロジェクトで使用できるグラフィックスを作成するための優れた方法です。これまでみなさんはrect()関数やel […]
続きを読む