這篇會進一步利用圖像數據來製作canvas創作，除了上篇講到的可以自由設定圖像的顏色外，還可以透過既有的圖像來更改設計與顏色，甚至取材圖像中的資料，製作成規則作畫。下面我們先來使用單色試做看看

單色取材

我假設今天要取財的是以下這個小粉紅方塊，於是我第一步先把顏色標示出來，接下來利用前面 Day8 - 上色處理[加開場] ，那些顏色的物件函數，來取得粉色當中的RGB數值，最後再把顏色印回去，來記得上偏有說到在js中顏色數組是一條一維陣列，分別有RGBA 四項，所以在設定迴圈的時候要特別 * 4，每跳四個執行一次迴圈。

let pink = color(255, 102, 204);
  let img = createImage(100, 100);
  img.loadPixels();
  for (let i = 0; i < 4 * (img.width * img.height); i += 4) {
    // console.log(i)  => 出來會是 0 ,4 ,8 ,12 ......
    img.pixels[i] = red(pink);
    img.pixels[i + 1] = green(pink);
    img.pixels[i + 2] = blue(pink);
    img.pixels[i + 3] = alpha(pink);
  }
  img.updatePixels();
  image(img, 17, 17);

圖像取材

示範圖像原圖如下，我們可以透過取得每個像素位置，以及像素的數據，在個別座標進行繪圖，把座標改成幾何形狀，甚至利用flag與判斷式控制像素出現與否，要改變顏色與否

let bg2;
function preload() {
  bg2 = loadImage('index20/7.jpg');
}
function setup() {
	createCanvas(windowWidth, windowHeight);
	noLoop();
    noStroke()

}

function draw() {
    bg2.loadPixels();
    for (let y2 = 0; y2 < bg2.height; y2 += 5) {
        for (let x2 = 0; x2 < bg2.width; x2 += 5) {
            let c2 = bg2.get(x2, y2)
            let ran2 = random(2, 4);
            fill(c2);
            arc(x2, y2, 20, 20, 0, red(c2)/50);
        }
    }
}

翻玩圖像

既然知道取圖像數據的方法，也知道可以針對個別像素進行什麼操作，那現在可以來進行手法更多元的繪圖了

把draw的內容加入判斷式

function draw() {
    bg2.loadPixels();
    for (let y2 = 0; y2 < bg2.height; y2 +=10) {
        for (let x2 = 0; x2 < bg2.width; x2 +=10) {
            let c2 = bg2.get(x2, y2)
            let ran2 = random(5, 10);
            if(ran2<8){
                fill(c2);
                circle(x2, y2, red(c2)/20);
                noStroke()
            }else{
                noFill();
                stroke(c2);
                strokeWeight(3)
                ellipse(x2, y2, ran2, ran2);
            }
        }
    }
}

改變顏色

let bg2;
function preload() {
  bg2 = loadImage('index20/7.jpg');
}
function setup() {
	createCanvas(windowWidth, windowHeight);
	noLoop();
    noStroke()

}

function draw() {
    bg2.loadPixels();
    for (let y5 = 3; y5 < bg2.height; y5 += 10) {
        for (let x5 = bg2.width; x5 >= 0; x5 -= 15) {
            let c5 = bg2.get(x5, y5);
            let c5_map = map(blue(c5), 0, 255, 200, 330);
            colorMode(HSB, 360, 100, 100);
            fill(c5, 100, 100, 0.2);
            triangle(x5-5, y5-6, x5, y5+5, x5+5, y5-6);
        }	
    }
}

小結

熟悉了以後可以對整張圖像的進行設計，馬賽克磚、油畫感、潦草素描風，甚至可以進行互動，對邊角進行限制如下圖一樣，發揮的空間很大以外，也可以不放上圖像，只利用像素數據資料來額外設計畫畫布，謝謝大家今天的閱讀。