p5.jsのサンプルコードで出てきたインデックス番号の計算の意味がわからない

Question

質問内容

下記の本のP.1.2.2「画像で作るカラーパレット」にて出てくるコードの中で、

   var i = (py * img.width + px) * 4; //⇦ 不明な箇所

という記述があります。（本文中では、ピクセルは配列pixels[]に格納されるため、px, pyから対応するインデックス番号を計算する必要がある、と記載があります）

このインデックス番号を計算する理由と、その式がなぜ、このような形なのかがわからなくて困っています。
（プログラム自体は、画像をロードして、画像をグリッドで分割し、分割したグリッドを色で並び替えることで写真から抽象画を作るようなプログラムです）

Generative Design with p5.js　［p5.js版ジェネラティブデザイン］ ―ウェブでのクリエイティブ・コーディング Kindle版

// P_1_2_2_01
//
// Generative Gestaltung – Creative Coding im Web
// ISBN: 978-3-87439-902-9, First Edition, Hermann Schmidt, Mainz, 2018
// Benedikt Groß, Hartmut Bohnacker, Julia Laub, Claudius Lazzeroni
// with contributions by Joey Lee and Niels Poldervaart
// Copyright 2018
//
// http://www.generative-gestaltung.de
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
 * extract and sort the color palette of an image
 *
 * MOUSE
 * position x          : resolution
 *
 * KEYS
 * 1-4                 : load different images
 * 5                   : no color sorting
 * 6                   : sort colors on hue
 * 7                   : sort colors on saturation
 * 8                   : sort colors on brightness
 * 9                   : sort colors on greyscale (luminance)
 * s                   : save png
 * c                   : save color palette
 */
'use strict';

var img;
var colors = [];
var sortMode = null;

function preload() {
  loadImage('data/pic1.jpg', setImage);
}

function setup() {
  createCanvas(600, 600);
  noCursor();
  noStroke();
}

function draw() {
  var tileCount = floor(width / max(mouseX, 5));
  var rectSize = width / tileCount;

  img.loadPixels();
  colors = [];

  for (var gridY = 0; gridY < tileCount; gridY++) {
    for (var gridX = 0; gridX < tileCount; gridX++) {
      var px = int(gridX * rectSize);
      var py = int(gridY * rectSize);
      var i = (py * img.width + px) * 4; //⇦ 不明な箇所
      var c = color(img.pixels[i], img.pixels[i + 1], img.pixels[i + 2], img.pixels[i + 3]);
      colors.push(c);
    }
  }

  gd.sortColors(colors, sortMode);

  var i = 0;
  for (var gridY = 0; gridY < tileCount; gridY++) {
    for (var gridX = 0; gridX < tileCount; gridX++) {
      fill(colors[i]);
      rect(gridX * rectSize, gridY * rectSize, rectSize, rectSize);
      i++;
    }
  }
}

function keyReleased() {
  if (key == 'c' || key == 'C') writeFile([gd.ase.encode(colors)], gd.timestamp(), 'ase');
  if (key == 's' || key == 'S') saveCanvas(gd.timestamp(), 'png');

  if (key == '1') loadImage('data/pic1.jpg', setImage);
  if (key == '2') loadImage('data/pic2.jpg', setImage);
  if (key == '3') loadImage('data/pic3.jpg', setImage);
  if (key == '4') loadImage('data/pic4.jpg', setImage);

  if (key == '5') sortMode = null;
  if (key == '6') sortMode = gd.HUE;
  if (key == '7') sortMode = gd.SATURATION;
  if (key == '8') sortMode = gd.BRIGHTNESS;
  if (key == '9') sortMode = gd.GRAYSCALE;
}

function setImage(loadedImageFile) {
  img = loadedImageFile;
}

Answer 1

ピクセル数の計算

   var i = (py * img.width + px) * 4; //⇦ 不明な箇所

pyはy軸のピクセル数ですが、今のピクセルまでの行数と考えられます。
1行のピクセル数はimg.widthなので、これまでの行の総ピクセル数はpy * img.widthになります。

そこに今の行における横のピクセルpxを足すと、そこまでのピクセル数が求まります。

（おそらく）ピクセルの色情報は[Red,Green,Blue,Alpha]の4つ存在します。
なので、1ピクセルあたり4つ配列を使用することになります。

そのため、今のピクセルの色情報の先頭のインデックスがvar i = (py * img.width + px) * 4;で求まります。

色の作成

その後、img.pixels[i](R)、img.pixels[i + 1](G)と順番に色情報を取り出して色としてまとめています。

 var c = color(img.pixels[i], img.pixels[i + 1], img.pixels[i + 2], img.pixels[i + 3]);

Comments

[TaichiNakajima]

ありがとうございます！
1. ピクセルの総数のお話
2. 1ピクセルあたりRGBで4つの数字を取っている
でよく理解できました。ありがとうございます！