The limits of my ... mean the limits of my ...
このブログのデザインを大幅に変更しました。
変更した経緯としては、2つあります。 以前のブログのデザインは、Astroのfuwariテーマを参考にして作成していたのですが、fuwariベースの派生テーマが公式の方でも増えてきており、ブログのデザインが他の人と被るのが嫌だなとなり思い切ってデザインを大幅に変更してみました。
また、以前は記事にカテゴリーを設定していたのですが、この雑記ブログにはタグのみの方が記事の分類として迷いがなくなって書きやすくなると感じたので、カテゴリーを廃止して一覧性をよくしようと思いました。
この記事では、デザインを変更したAstro製のこのブログについて、サムネイルに記事の一部を表示する方法を紹介します。
笠間日動美術館は好きな美術館でよく行きます。今回の企画展は笠間日動美術館所蔵の中から女性たちのファッションの変遷に着目した作品が何点か展示されていました。副社長の長谷川智恵子の肖像画が 7~8 点くらいありました。
ポスターの松樹路人「ベネチアン・グリーン」が印象深かった。グリーンのドレスが透けて見えるような描写と、青リンゴが印象的。
笠間日動美術館には、鴨居玲の展示が一室あり、気になっていて本も購入したので読むのが楽しみ。2 月から石川県立美術館で没後 40 年の企画展があるけれど気になる。3 月くらいに雪が積もっていなければ行ってみたいな。
美術館に行くのが好きなので、忘れないように 2025 年度に行きたい美術館をまとめました。 私は、宇都宮に住んでいるので関東地方の美術館が多くなります。
[!note] Note 開催が近くなったら、ニュース記事などを追記していきます。
| 場所 | 期間 |
|---|---|
| 東京国立近代美術館 | 3 月 4 日 ~ 6 月 15 日 |
https://art.nikkei.com/hilmaafklint/
以前、彼女のドキュメント映画を観てヒルマ・アフ・クリントを知って感銘を受け、いつか生で作品を観たいなと思っていました！今回、初の回顧展を行うとのことで絶対に行きたいと思います！
このブログのデザインを大幅に変更したいのと、記事の一覧を更新順で表示したいと思ってたのですが、更新日の取得方法に悩んでいました。
Astro の公式のチュートリアルでは更新日は記事のフロントマターに設定する方法が紹介されていましたが、毎回手動で設定するのは面倒です。
そこで自動で取得する方法を考えた結果、Git のコミット日時を取得してその日付を更新日として表示する方法を実装できたので紹介します。
それでは、Git のコミット日時を取得する方法について説明します。
Git 関連の情報はgit logコマンドで取得できます。
次のようにコマンドを打ってみましょう。
# 指定したファイルの最新のコミット日時を取得する
## -1 : 最新の1件のみ取得
## %ai : 日付
## filePath : 調べたいファイル
git log -1 --format=%ai -- filePath
オプションについてはコメントの通りになります。
この本の著者である高田裕美さんと UD デジタル教科書体については、以前 Youtube の SCIENCE CHANNEL(JST)での動画ニュースで紹介されていて知りました。
<Youtube videoId="1JcXa2u7kX0" />
ちょうどフォントについてや、書体デザイナーについても興味があるので、この本を読んでみました。
ロービジョン(弱視)やディスレクシア(発達性読み書き障害)といった症状があることを知っていますか？私は、この本で初めて知り、教科書が読めない子どもたちがいることを知りました。フォントによっては、文字が重なってみえたり、ぼやけて見えたり、フォントの装飾が刺さるように感じる人がいる事実に驚きました。
そのような経緯を知り、著者は UD デジタル教科書体の開発を始めます。UD デジタル教科書体は、開発から 8 年を経てリリースされることになるのですが、その様々な経緯などを本書の中盤から書かれていきます。
水戸芸術館で磯崎新の回顧展を観ました。自分は以前茨城県に住んでいたのですが、恥ずかしながら水戸芸術館を設計者である磯崎新さんのことを今回初めて知ることができました。
回顧展として半世紀以上に渡るキャリアを、建築模型や図面、映像などを用いて紹介されています。自分が好きだったのは、シルクスクリーンとして遺した「還元」シリーズです。
水戸芸術館の塔は水戸市内でも特徴がある建物ですが、三角形ですべてできていることに今回はじめて気づくことができました。
ライブラリを使用せず素の WebGL で書けるようになりたいと思い、最近はいろいろ勉強してます。WebGL を触るうえで行列演算は避けては通れません。WebGL 用の行列演算の既存のライブラリだと glMatrix がありますが、今回は線形代数の勉強も兼ねて自作で作ってみました。(自作といっても、ほぼほぼ OGL の数学演算系をもって来ているだけですが)
足し算などの簡単なのは飛ばして、何をやってるか忘れそうな処理について備忘録的に書いていきます。長くなるので、主に 3x3 行列をみていきます。
数学演算系のコードは以下に置いてます。
https://github.com/nono-k/webgl-study-note/tree/main/src/lib/webgl/math
3x3 (Mat3)行列のクラスは次のようにしてます。
演算系の関数はMat3Funcで書いています。
import * as Mat3Func from "./functions/Mat3Func";
export class Mat3 extends Array<number> {
constructor(
m00 = 1,
m01 = 0,
m02 = 0,
m10 = 0,
m11 = 1,
m12 = 0,
m20 = 0,
m21 = 0,
m22 = 1
) {
super(m00, m01, m02, m10, m11, m12, m20, m21, m22);
}
// ...
}
数式で書くと次のような行列表記になります。
せっかく雑記ブログを作ったので、今月から月報をつけていくことにしました。毎年、1 年が短く感じてしまうので、あとからも振り返られるようにしたいとの思いもあります。
今月は美術館に 2 回行きました。
絵本のひみつ展では、宮城県美術館の絵本原画コレクションが展示されてる企画展でした。 今まで絵本に興味は持っていなかったのですが、はじめて原画で見て、さまざまな画材や技法の質感を目にして、絵本作家に対して興味を持つことができました。
この展示で気になった作家
「リアルタイムグラフィックスの数学」の第 8 章の 3D レンダリングについての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
地面とレイの交点を計算し、地面に市松模様をテクスチャとしてマッピングします。市松模様のテクスチャは次のようになります。
float text(vec2 st) {
return mod(floor(st.s) + floor(st.t), 2.0);
}
ここで 3D 空間のカメラの設定をします。カメラの向きを$\bm{x} = (0, 0, -1)$とし、カメラの上方向を$\bm{y} = (0, 1, 0)$とします。この値に対して外積をとることで、撮影する向きに対する水平方向$(1, 0, 0)$を得ることができます。実際の計算は次のようになります。
「リアルタイムグラフィックスの数学」の第 7 章の距離と SDF についての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
胞体ノイズでは近傍点との距離を返す関数でしたが、近くの「点」ではなく「図形」との距離を返す関数を考えます。ここでは図形との負の値もありうる距離を返す関数を導入します。これがSDF(Signed Distance Function, 符号付き距離関数)となります。
円の SDF について考えてみます。円は中心点 C と半径 r から決まりますが、C からの距離が r より小さければ円の「内部」、r より大きければ円の「外部」となり、r と等しい場合は円の「境界」です。平面上の点 P に対して、円の外部では値は正、内部では値が負とします。これが円の SDF を定めます。
「リアルタイムグラフィックスの数学」の第 8 章の 3D レンダリングについての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
地面とレイの交点を計算し、地面に市松模様をテクスチャとしてマッピングします。市松模様のテクスチャは次のようになります。
float text(vec2 st) {
return mod(floor(st.s) + floor(st.t), 2.0);
}
ここで 3D 空間のカメラの設定をします。カメラの向きを$\bm{x} = (0, 0, -1)$とし、カメラの上方向を$\bm{y} = (0, 1, 0)$とします。この値に対して外積をとることで、撮影する向きに対する水平方向$(1, 0, 0)$を得ることができます。実際の計算は次のようになります。
「リアルタイムグラフィックスの数学」の第 7 章の距離と SDF についての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
胞体ノイズでは近傍点との距離を返す関数でしたが、近くの「点」ではなく「図形」との距離を返す関数を考えます。ここでは図形との負の値もありうる距離を返す関数を導入します。これがSDF(Signed Distance Function, 符号付き距離関数)となります。
円の SDF について考えてみます。円は中心点 C と半径 r から決まりますが、C からの距離が r より小さければ円の「内部」、r より大きければ円の「外部」となり、r と等しい場合は円の「境界」です。平面上の点 P に対して、円の外部では値は正、内部では値が負とします。これが円の SDF を定めます。
「リアルタイムグラフィックスの数学」の第 6 章の胞体ノイズについての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
値ノイズと勾配ノイズは格子点でのランダムな値を使ったノイズ関数でした。一方この章で学ぶ胞体ノイズは距離を使ってつくられます。胞体（セル）とは生物の細胞などのことで、胞体ノイズは「近さ」によって空間をバラバラに分割します。
胞体ノイズは空間内に点をバラまいて、各点への距離を測ることで得られますが、バラまかれたこれらの点は特徴点と呼ばれます。ここで特徴点を$A_1,...,A_n$とします。空間内の点 P を定めたとき、P から特徴点$A_i$への距離を$d(P, A_i)$で表すと、すべての特徴点までの距離の最小値は次のように求まります。
$$ \mathrm{min}(d(P, A_1), ... , d(P, A_n)) $$
「リアルタイムグラフィックスの数学」の第 5 章のノイズの調理法についての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
再帰関数とは、関数の中で自分自身の関数を呼び出すような関数のことです。GLSL では再帰関数は使えませんが、for 文を使って再帰的な処理を行うことができます。
1 以下の定数 G に対し、1 変数ノイズ関数 noise(x)の周波数を 2 倍するごとに値を G 倍して、それを足し合わせてみましょう。式にすると次のようになります。
$$ noise(x) + Gnoise(2x) + G^2noise(4x) + ... + G^knoise(2^kx) $$
ここで素材となるノイズ関数 noise(x)はどのような関数でもいいですが、値の範囲を$[-0.5, 0.5]$区画にずらしておきます。このように加工されたノイズ関数は非整数ブラウン運動(fractional Brownian motion, fBM)と呼ばれます。
「リアルタイムグラフィックスの数学」の第 4 章の勾配ノイズについての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
前回は値ノイズについて見てきました。値ノイズは計算量も少なく、簡単につくれるノイズですが、格子で区切っているのでブロック状に見えてしまいますし、ムラが現れやすいです。値ノイズを改善したノイズが勾配ノイズになります。
値ノイズの場合は、格子点での乱数の「値」を使うのに対し、勾配ノイズは乱数のベクトル値を「勾配」として使用します。ノイズ関数でよく使用されるパーリンノイズは、この勾配ノイズの一種であります。この章では、勾配ノイズと 2002 年の Perlin による改良版勾配ノイズ（パーリンノイズ）について見ていきます。
値ノイズは乱数値をエルミート補間してつくりました。ここで別の見方として、$h(0) = 0$,$h(1) = 1$,$h'(0) = h'(1) = 0$ を満たすエルミート補間関数$h(x)$に対して、$w(x)$を次のように定義します。
「リアルタイムグラフィックスの数学」の第 3 章の値ノイズについての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
まずは 2 次元の値ノイズの構成法について見てみましょう。
平面上の正方形の 4 つの頂点（格子点）を用いて、値ノイズを構成します。各格子点での乱数値、または乱数ベクトルを使って生成されるノイズを格子ノイズと呼びます。格子点の成分は整数になるようにします。点$(x, y)$に対して床値$[]$を使って、$(x, y)$を取り囲むマスの格子点は次の 4 つのベクトルで表します。
「リアルタイムグラフィックスの数学」の第 2 章の疑似乱数についての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
GLSL ES 1.0 ではビット演算が使えないため、ハッシュ関数ではなくサイン関数を使用した乱数生成が行われていました。The Book of Shaders ではサイン関数を使用した乱数生成の方法が紹介されています。
https://thebookofshaders.com/10/?lan=jp
サイン関数自体には乱数性はないですが、サイン関数の値に大きい値をかけて桁を上げ、fractで小数部分を取り出すことで乱数のように見えることができます。
レガシー乱数の 1 変数と 2 変数のコードは次のようになります。
// 1変数のレガシー乱数
float fractSin11(float x) {
return fract(1000.0 * sin(x));
}
// 2変数のレガシー乱数
float fractSin21(vec2 xy) {
return fract(sin(dot(xy, vec2(12.9898, 78.233))) * 43758.5453123);
}
「リアルタイムグラフィックスの数学」の第 1 章の補間についての勉強ログです。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
GLSL における mix 関数は以下のような数式になります。
$$ \bm{a} + x\overrightarrow{AB} = \bm{a} + x(\bm{b} - \bm{a}) = (1 - x)\bm{a} + x\bm{b} $$
これは、線分 AB があり、その線分上を動く 0 以上 1 以下の x に対して、線分 AB を x: (1 - x)に内分する点の位置ベクトルを表しています。上記の式のベクトルをmix(a, b, x)として定義しています。このように 2 点間をつなぐことを補間と呼び、上記の式は線形補間（Linear Interpolation）の公式です。
コード 1.1 のように、赤(1, 0, 0)と青(0, 0, 1)を mix 関数でつなぐことで 2 色のグラデーションを作ることができます。
vec2 RED = vec3(1.0, 0.0, 0.0);
vec3 BLUE = vec3(0.0, 0.0, 1.0);
vec3 col = mix(RED, BLUE, pos.x);
シェーダに再挑戦したいと思い、「リアルタイムグラフィックスの数学」の本をまた読み直してます。
<AmazonLink imageId="61CP8Asy52L.SY522" linkId="3Iy0agT" title="リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング" author="巴山竜来" />
勉強する際に、本に書いているサンプルコードを Web サイトですぐに確認できるように、Astro と Three.js を使用して GLSL コードを表示するサイトを作成しました。サイトはこちらになります。
リポジトリはこちらになります！
https://github.com/nono-k/book-of-realtime-graphics-math
いったん、本を読みながらローカルの VSCode 上で GLSL コードを書いて確認して、Web サイトに GLSL のコードと実行結果のサムネをアップしていきたいと思います。
また、このブログで勉強した内容を章ごとに残していきたいと思います。以下はリンクになります。
笠間日動美術館は好きな美術館でよく行きます。今回の企画展は笠間日動美術館所蔵の中から女性たちのファッションの変遷に着目した作品が何点か展示されていました。副社長の長谷川智恵子の肖像画が 7~8 点くらいありました。
ポスターの松樹路人「ベネチアン・グリーン」が印象深かった。グリーンのドレスが透けて見えるような描写と、青リンゴが印象的。
笠間日動美術館には、鴨居玲の展示が一室あり、気になっていて本も購入したので読むのが楽しみ。2 月から石川県立美術館で没後 40 年の企画展があるけれど気になる。3 月くらいに雪が積もっていなければ行ってみたいな。
水戸芸術館で磯崎新の回顧展を観ました。自分は以前茨城県に住んでいたのですが、恥ずかしながら水戸芸術館を設計者である磯崎新さんのことを今回初めて知ることができました。
回顧展として半世紀以上に渡るキャリアを、建築模型や図面、映像などを用いて紹介されています。自分が好きだったのは、シルクスクリーンとして遺した「還元」シリーズです。
水戸芸術館の塔は水戸市内でも特徴がある建物ですが、三角形ですべてできていることに今回はじめて気づくことができました。
せっかく雑記ブログを作ったので、今月から月報をつけていくことにしました。毎年、1 年が短く感じてしまうので、あとからも振り返られるようにしたいとの思いもあります。
今月は美術館に 2 回行きました。
絵本のひみつ展では、宮城県美術館の絵本原画コレクションが展示されてる企画展でした。 今まで絵本に興味は持っていなかったのですが、はじめて原画で見て、さまざまな画材や技法の質感を目にして、絵本作家に対して興味を持つことができました。
この展示で気になった作家
PhotoShopやLightroomなどの画像処理でどのような表現ができるのかを知りたくて読みました。
個人的にはバズらせるために過剰なエフェクト処理は好きではないのですが、どのようなレイヤー分けをしてレタッチなどをしているのかを知れてよかったです。
RAW現像を考慮してか、beforeの画像は思ったよりも暗い写真を撮っているのだなと気づきを得ました。
著者はUDデジタル教科書体の開発者のひとり。フォントによって文字の見やすさや読みやすさが変わるということを初めて知った。
著者のフォント開発に対する情熱さ、ユニバーサルデザインについて、そもそもフォント開発をする書体デザイナーのことについて本書を読むと分かるかと思います。
田所さんの書籍は何冊か持っていて、音楽関係だと「演奏するプログラミング、ライブコーディングの思想と実践」を以前読んだ際にプログラミングと音楽の関連性を強く意識するようになりました。今回SuperCollider本が出るということで買いました。
本書ではSuperColliderでどのような音が作れるかをメインで紹介されています。次々とサンプルコードで紹介されていく感じなので、ある程度音楽知識やその裏の数学の知識がなければ難しい本だと思いました。
今回はサンプルコードだけを軽く触っただけで終わりましたが、いつか音楽を再開する際には、波形をプロットしたりなどじっくり取り組みたいと思いました。
自分はPhotoshopを使うことはあまりないのですが、画像処理として実際はどうなっているのかが知りたくてこちらの軽そうな入門書・実践書を読みました。
読んだ感想は、よく見るデザインはレイヤーを重ねてフィルタ処理(乗算・オーバーレイなど)をして作成する場合が多いのだなと知れたことが良かったです。
この本では日本の建築を30選紹介しています。1864年施工の大浦天主堂から梅田スカイビル・グラングリーン大阪までをカラー写真で紹介しています。自分は関東圏に住んでいるのですが、この本で紹介されていたいくつかの建築について実際に訪れてみたいと思いました。
訪れてみたい建築
建築について知りたくなって読んだ本。古代の建築から近代建築まで、カラーの写真付きで簡単に建築史をおいながら見ていくことができます。
押さえておくべき箇所については、太字で書かれていたり、最初の方でポイントがまとめられてるので、建築史の入門として良かったです。
本書はフーリエ級数の話から始まり、積分の再定義の必要性が説明されたのち、集合論の導入にいたります。集合論や位相の成り立ちを、人物コラムを挟みながらストーリー仕立てで進んでいくので面白く読んでいくことができます。
最初から本格的な集合論などの数学書を読む前に、本書みたいな軽めな本を読んでいくと概要のイメージを持ちながら勉強できるでしょう。
Python・R・Mathematicaの3つの言語を使用してコンピュータで数学の問題を解いていく形になっています。実際に自分でコードを書いて読むのが良いでしょう。
確率や統計の知識がないので、この箇所は難しく感じましたが、微分積分・線形代数に関してはいい復習になりました。
未経験で現在の Web 制作会社に転職して、そろそろ 2 年が経ち転職がしたいなと思っていたところ、本書を Twitter で見て購入して読みました。
IT エンジニアをメインにしており、Web 制作とは違った視点で転職について書かれていたので、正直あまり参考にできる部分がなかったです。ですが、現在の自分の仕事の仕方があまりにも作業者としての経験しかつめていないことに気づけたので、もう少し視野を広げないとまずいなと危機感を覚えました。
宇都宮美術館での企画展「ライシテからみるフランス美術」を鑑賞してから、ライシテについて気になったので読んだ。
あまり現・近代フランスの歴史のことや政教分離にいたった経緯などの知識がないため、本書を読んでいくのが難しかった。
本書の終章には日本にもライシテがあると言及している。だが現代の日本で、この国の歩みを振り返り将来像を描き出すことに関わるキーワードとして、「ライシテ」という言葉を挙げる人はいないだろう。ではその言葉の代わりとなるものは何だろうかと問いをなげかける。
kamenono / かめのの
音楽・読書・数学・プログラミングが好き。
SNS 関係は下記です。フォローはお気軽にどうぞ。
私を構成する 42 枚は下記です。
趣味が合う人がいたら仲良くしてください。
