前兩篇因為遮罩的部分有使用到get()，他本身也是圖像像素操作方法，這邊會介紹到取出圖像像素的做法，以及可以發揮的變化。
圖片可以想像成是由很多的光點排列而成的，如下圖整齊的棋盤狀

畫素高，代表光點很多；解析度很高，光點很密集。而電腦當中，整數 0 到 255 ，代表著光點的亮度。 0 最暗， 255 最亮。

RGBA

一個像素基本有有三個數值，分別代表紅光、綠光、藍光的亮度；簡稱 RGB ，紅綠藍的字首，另外A代表透明度，0為完全透明，255為完全不透明。

圖片像素的組成一班是使用二維陣列，像是這樣

[[R,G,B,A],[R,G,B,A],[R,G,B,A]...]

但在在JS canvas 中 圖片資料結構 是一條一維陣列，依序存放每個像素的 RGBA 值。

[R,G,B,A,R,G,B,A,,R,G,B,A...]

像素函數

先來使用createImage()作為示範，可以在canvas憑空製作出一張圖像並設定其中的像素，就可以得出以下的效果

createImage()

可以創建一個新的p5.Image，p5.Image是用於存儲圖像的數據類型，且可以設定圖像寬高

loadPixels()

將當前的圖像像素數據加載到像素陣列中

set()

可以用來更改圖像中的像素，透過座標來設定，也可以填入顏色

set(x,y,color)

updatePixels()

更新修改過的像素陣列

function setup(){
  const canvas = createCanvas(windowWidth, windowHeight);
  imageMode(CENTER);
}

function draw(){

  
    let pic = 500

    let img2 = createImage(pic, pic);
    img2.loadPixels(); //是一條一維陣列
    for (let i = 0; i < img2.width; i++) {
        for (let j = 0; j < img2.height; j++) {
            let b = map(i,0,pic-1,0,255)
            img2.set(i, j, color(i,j,255- b));
        }
    }
    img2.updatePixels();
    image(img2, 0, 0);
  
}

小結

網路上有相當多的資料來源，第一次看可能會覺得複雜，但其實組成方式很單純。謝謝大家今天收看

https://web.ntnu.edu.tw/~algo/Image.html