p5.js シェーダー – HIM.CO ヒム・カンパニー

p5.js shader 基本的なサンプル 2 テクスチャ座標を使ったグラデーションシェーダー

本稿は「Basic gradient shader based on texture coordinates」ページを翻訳したものです。テクスチャ座標にもとづいた基本的なグラデーションシェーダーこのグラデーションは、 […]

本稿は「Basic Gradient Shader based on pixel coordinates」ページを翻訳したものです。ピクセル座標にもとづいた基本的なグラデーションシェーダー次のコードは、キャンバスのピ […]

本稿は「Using Texture Coordinates」ページを翻訳したものです。テクスチャ座標の使用 TexCoordとFragCoord。シェーダーサンプルコードの中でこれらを使った変数に気づかれたかもしれませ […]

本稿は「Using Variable Qualifiers」ページを翻訳したものです。変数修飾子を使用することで、変数の使用方法がさらに定義できます。変数修飾子は変数の型(floatやvec2など)の前に置きます、変 […]

本稿は「Important shader concepts」ページを翻訳したものです。シェーダーの重要な概念このページにはシェーダーの使用を開始するに当たって”知っておく必要のある”情報が多く含まれています。みなさん […]

本稿は「How to write a shader」ページを翻訳したものです。シェーダーの書き方ロードするシェーダーファイルについて見ていきましょう。シェーダーを作成するには、p5スケッチフォルダ内に２つのファイル […]

本稿は「Setting up shaders in p5.js」ページを翻訳したものです。シェーダーのセットアップシェーダーとはどのようなもので、p5 スケッチとは書き方の異なるものだということが分かったので、簡単な […]

本稿は「Why use shaders?」ページを翻訳したものです。シェーダーとは？シェーダーはわれわれの身の回りで使われているので、自分で記述したことがなくても、必ず目にしているはずです。シェーダーは、コンピュータ […]

本稿は「Why use shaders?」ページを翻訳したものです。パフォーマンス loadPixels()やset()、updatePixels()を使ったり、p5.jsでピクセル単位の計算をしたことのある方なら、そ […]

本稿は「Welcome to p5.js shaders」ページを翻訳したものです。シェーダーは、みなさんのプロジェクトで使用できるグラフィックスを作成するための優れた方法です。これまでみなさんはrect()関数やel […]