← チャプター一覧
第3章 · ディスプレイの魔法
🖥️ 画面の「文字」はどうやって生まれる?
ディスプレイをよ〜く近づいて見ると、無数の小さな点の集まり!その点(ピクセル)が色を変えることで、文字も絵も動画も表示される。クリックして色を変えてみよう!
👆 ピクセルをクリックして色を変えよう!
第3章 · Step 1/4
🎨 Step 1:1ピクセル = R + G + B の光
液晶・有機ELのピクセルには赤(R)緑(G)青(B)の3つのサブピクセルがある。それぞれ0〜255の強さで光って混ぜると1670万色を表現できる!
100
180
200
このピクセルの色
💡 白 = R255,G255,B255 / 黒 = R0,G0,B0
1ピクセルに3バイト(24bit)使われることが多い。4K画面なら約25MB必要!
第3章 · Step 2/4
🖼️ Step 2:フレームバッファ — 画面全体のメモリ
画面全体のピクセルデータはフレームバッファというメモリ領域に格納される。GPUが毎秒60回(60fps)読み出してディスプレイに送る!
💾 フレームバッファ(メモリ)
🖥️ ディスプレイ出力
💡 フルHD(1920×1080)なら約6MBのフレームバッファが必要。
ゲームや動画は毎フレームこの領域を書き換えて「動き」を表現する!
第3章 · Step 3/4
🔤 Step 3:「A」という文字はどうやって描かれる?
フォントファイルには各文字のアウトライン(輪郭)が数式で入っている。それをグリッドに当てはめてON/OFFを決める→ビットマップができる!
文字を選ぼう
ビットマップ(8×8)
スムージング後
💡 現代のフォントはアンチエイリアスで斜め部分をぼかして滑らかに見せる。
Retina/4Kディスプレイではピクセルが細かいためよりきれいに描ける!
第3章 · Step 4/4
⚡ Step 4:なぜ動画は「なめらか」に見えるの?
ディスプレイは毎秒60〜144回画面を書き換えている(リフレッシュレート)。人間の目は素早い変化を「動き」として認識する — これが動画やゲームの仕組み!
10 fps
💡 映画は24fps、テレビは60fps、ゲーミングモニターは144〜360fps。
フレームバッファを高速で書き換えるほどなめらかな映像になる!
第3章 · クイズ
📝 理解度チェック!
Q1. 1ピクセルが持つ色の情報は何の組み合わせ? 🎨
赤・黄・青
赤・緑・青(RGB)
明るさだけ
シアン・マゼンタ・イエロー
🎉

第3章クリア!

ピクセルの光から文字の描画まで、
ディスプレイの魔法を解き明かした!

📚 今日学んだこと

  • ピクセルはR・G・Bの3色の光の組み合わせ
  • 各色0〜255で1670万色を表現
  • フレームバッファがメモリ上の画面データ
  • GPUが毎秒60回読み出してディスプレイに送る
  • フォントはアウトラインからビットマップに変換