總目錄

第一章 導(dǎo)學(xué)：對寫代碼和編程進行概述
第二章 準(zhǔn)備工作：學(xué)習(xí)JavaScript命令和操作的基礎(chǔ)來開啟p5.js的學(xué)習(xí)之旅
第三章 p5.js中的顏色：這一章是針對p5.js的，將學(xué)習(xí)如何在p5.js中定義顏色，并不適用于常規(guī)的JavaScript
第四章 操作符和變量：在p5.js 中使用第二章所學(xué)的JavaScript知識
第五章 條件語句和比較運算符：使用條件語句和比較運算符來編寫不同條件下的分支程序
第六章 p5.js中的更多變量：本章也是針對p5.js的，將學(xué)習(xí)針對某些特定庫的變量
第七章 循環(huán)：學(xué)習(xí)編寫可處理大量運算的循環(huán)程序
第八章 函數(shù)：函數(shù)是JavaScript的基石，我們更深入的學(xué)習(xí)函數(shù)來創(chuàng)建可擴展、模塊化的健壯程序
第九章 對象， 第十章 數(shù)組：對象和數(shù)組是JavaScript的數(shù)據(jù)結(jié)構(gòu)，通過它們可以更智能的方式組織代碼及處理復(fù)雜問題
第十一章 事件：事件處理讓我們可以編寫處理用戶交互的程序
第十二章 p5.js擴展知識：這也是僅針對p5.js的一章，在進入最終的項目前更深入的學(xué)習(xí)函數(shù)庫相關(guān)功能
第十三章 最終項目：使用全書所學(xué)知識創(chuàng)建一款游戲

既然已經(jīng)可以使用p5.js繪制各種圖形了，就讓我們來學(xué)習(xí)如何進行顏色的控制吧。我們已經(jīng)在background函數(shù)中傳入220, 220, 220來設(shè)置背景鈀為淺灰色了。

p5.js中的顏色函數(shù)

默認情況下p5.js使用RGB色彩模式，其中R代表紅色，G代表綠色，B代表藍色。這表示我們需要向顏色函數(shù)中傳入三個參數(shù)來設(shè)置指定顏色。每種色彩的值在0到255之間。也就是說如果我們向background函數(shù)中傳入0, 0, 0，獲取的背景將為黑色，而如果傳入255, 255, 255，則為白色。p5.js這個庫在我們只傳入一個值時，會將三處色彩設(shè)為相同值。所以傳入0, 0, 0和單個0是等價的。

只要三種色彩的值相同，獲得的結(jié)果一定是白色、黑色或某種灰色。所以在設(shè)置顏色的函數(shù)中傳入單一值有助于我們獲取灰度顏色。但如果要在顏色中包含色調(diào)，就需要傳入三個值來指定每種色彩的量。255是一種色彩可接受的最大值，如果傳入255, 0, 0來作為background函數(shù)的參數(shù)，會得到純紅色，如果傳入pass 0, 255, 0，就會得到純綠色，以此類推。

RGB色彩模式是一種加法混合模式，這表示把這些色彩以最高的強度混合在一起會產(chǎn)生白色，與減法混合模式的涂料顏色形成對比，它們混合在一起會產(chǎn)生暗棕色。如果我們沒熟悉RGB加法混合模式，通過修改這些值很難獲取具體的顏色。這時我們可以使用在線顏色拾取器來幫助我們找到想要的顏色。在網(wǎng)上搜索“顏色拾取器”可以獲取到一堆結(jié)果用于得到具體顏色的 RGB 組成。以下是來自火狐的一個服務(wù)示例（圖3-1）。

• 顏色拾取工具

圖3-1. Firefox顏色拾取工具

譯者注：Alan 早年間曾使用過一個工具可以拾取顏色來獲取對應(yīng)的英文名稱，感興趣的讀者可以試一下：英文顏色名稱查詢器

使用這類服務(wù)，我們可以記錄下所選顏色的RGB對應(yīng)值，然后在p5.js中進行使用。

實際上我們還在向顏色設(shè)置函數(shù)傳入第四個參數(shù)。第四個參數(shù)，你做顏色的alpha通道，用于控制顏色的透明度，同樣也可接受0到255之間的值。0會產(chǎn)生全透明，而255則為不透明。

因此我們可以在顏色設(shè)置函數(shù)中傳遞一個值、三個值或者四個值。我不希望將你淹沒在過多的信息中，但我們還可以傳遞兩個參數(shù)。如果傳入兩個參數(shù)，則設(shè)置一個灰度顏色及該灰度顏色的alpha通道。

如果大量的選擇讓你頭昏腦脹，請記住它們的存在只是為了方便我們使用。p5.js可以將顏色函數(shù)限制為只接受四個參數(shù)，這樣就可以覆蓋所有的情況，但在我們僅需設(shè)置不透明白色是地就會因輸入額外數(shù)據(jù)而浪費時間，而這種情況并不在少數(shù)?？雌饋韕5.js的開發(fā)者將函數(shù)創(chuàng)建的足夠智能，可以在輸入不同數(shù)量參數(shù)時產(chǎn)生不同結(jié)果。

修改形狀顏色

了解p5.js中顏色如何使用很棒，但到現(xiàn)在為止我們只能修改背景的顏色。要修改形狀的顏色，我們還需要用到其它函數(shù)。

要了解的第一個函數(shù)是fill。fill讓我們可以為形狀設(shè)置填充色。填充色就是形狀內(nèi)部填充的顏色，如果你在想是否還有其它對形狀的顏色控制，還存在描邊顏色用于定義形狀的外邊框顏色。填充和描邊的默認顏色分別是白色和黑色。除線條之外的所有形狀都包含填充色和描邊色。

我們可以通過調(diào)用fill函數(shù)并向該函數(shù)傳入前述的參數(shù)來設(shè)置形狀的填充色。fill函數(shù)會將所選顏色設(shè)置為當(dāng)前填充色，直到我們使用其它的fill函數(shù)進行顏色設(shè)置。

stroke函數(shù)的運行方式極其相似。傳入顏色參數(shù)，它將會為所有的形狀設(shè)置描邊的顏色，直至新的描邊函數(shù)的設(shè)置。fill或stroke會對前面的填充和描邊函數(shù)進行覆蓋。

說到這里，另一個我們要了解的有用函數(shù)是strokeWeight，它讓我們可以設(shè)置邊框的厚度/粗細。

示例3-1用到了本章所討論到的函數(shù)來繪制簡單圖形?？赏ㄟ^圖3-2來查看示例3-1的運行結(jié)果。

示例3-1

function setup() {
    createCanvas(800, 400);
}

function draw() {
    background(220);

    // circle 01
    fill(51, 51, 51);
    strokeWeight(2);
    stroke(75);
    ellipse(400, 200, 300, 300);

    // circle 02
    stroke(0);
    fill(522, 53, 139);
    ellipse(400, 200, 275, 275);

    // circle 03
    fill(1, 176, 240);
    ellipse(400, 200, 250, 250);

    // circle 04
    fill(174, 238, 0);
    ellipse(400, 200, 150, 150);
}

圖3-2. 使用fill, stroke和strokeWeight函數(shù)來進行輸出

注意我們是如何在形狀前使用fill函數(shù)來設(shè)置所需的顏色的。反復(fù)使用來為不同的圓形設(shè)置不同的顏色。

還有兩個要提到的函數(shù)分別是noFill和noStroke函數(shù)。從名稱可以看出，在調(diào)用時，這兩個函數(shù)分別去除形狀的填充色和邊框色。調(diào)用這些函數(shù)無需傳入任何參數(shù)。

noFill();
noStroke();

總結(jié)

本章中我們并沒有學(xué)習(xí)新的JavaScript功能或新的編程結(jié)構(gòu)。只是了解了p5.js庫的運行原理以及它所自帶的一些特定函數(shù)。具體來說，我們學(xué)習(xí)了在p5.js中一些顏色設(shè)置函數(shù)的運行方式，如fill, stroke和 strokeWeight。我們還學(xué)習(xí)了一些其它和填充與描邊相關(guān)的函數(shù)，如noStroke和noFill。此外我們學(xué)習(xí)了RGB色彩模式。

雖然本章并沒有提升我們的JavaScript編程知識。我覺得有一點需要提一下。你可能會覺得自己不會進入創(chuàng)意編程領(lǐng)域，在編碼時不需要了解本書中針對p5.js的具體知識。但像使用RGB混合值的這操作原理，或經(jīng)常用到的填充、描邊的概念，雖然看似是針對p5.js的，但卻是其它的畫圖庫或程序也會用到的基本原理或概念。理解這些內(nèi)容在我們的編程學(xué)習(xí)之旅中也會有幫助的。

練習(xí)

將示例3-1中的腳本進行改寫，用一個變量控制所有圓的大小（就是說如果修改變量就會修改圓的大?。?，另一個變量可控制圓的半徑差（結(jié)果請見圖3-3和圖3-4）。

圖3-3. 練習(xí)圖像

圖3-4. 練習(xí)圖像 - 2

譯者補充：

function setup() {
    createCanvas(800, 400);
}

function draw() {
    var radius = 300;
    var difference = 40; // 圖3-3
    // var difference = 80; // 圖3-4
    background(220);

    // circle 01
    fill(51, 51, 51);
    strokeWeight(2);
    stroke(75);
    ellipse(400, 200, radius, radius);

    // circle 02
    radius = radius - difference;
    stroke(0);
    fill(522, 53, 139);
    ellipse(400, 200, radius, radius);

    // circle 03
    radius = radius - difference;
    fill(1, 176, 240);
    ellipse(400, 200, radius, radius);

    // circle 04
    radius = radius - difference;
    fill(174, 238, 0);
    ellipse(400, 200, radius, radius);
}

本文首發(fā)地址：Alan Hou的個人博客