總目錄

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

在我們生活的這個時代，編程是無價之寶扶镀。它具有提升就業(yè)蕴侣、未來發(fā)展甚至是你的智力的超能力。計算機(jī)正在驅(qū)動人類歷史最大的資本擴(kuò)張之一臭觉，沒有比現(xiàn)在學(xué)習(xí)編程的更好時機(jī)了昆雀。

為何學(xué)習(xí)編程

我與編程的第一次正面交鋒是在大學(xué)時。我們要學(xué)習(xí)一門名為 C#(C Sharp)的編程語言蝠筑，第一次考試我就掛科了狞膘，第二次補(bǔ)考也僅僅是勉強(qiáng)通過。帶頭內(nèi)心的挫敗感什乙，很長時間我都和編程保持距離挽封。我把它當(dāng)成一種我不具備的天賦。后來我從工程的工作轉(zhuǎn)到了視覺效果臣镣，因?yàn)槲蚁胍M(jìn)入一個有更多創(chuàng)意表達(dá)空間的領(lǐng)域辅愿。通過視效的工作，我逐漸意識到整個操作都是借力于計算機(jī)運(yùn)算忆某。從使用的軟件到輔助制片(production)的項(xiàng)目管理...点待，編程無處不在。通過它各工作室可以為電影帶來震憾的效果弃舒，并產(chǎn)生數(shù)百癞埠、數(shù)千萬美元的票房。

意識到在我的行業(yè)中編程的魔力，我決定開始我的編程學(xué)習(xí)之旅燕差。最終成為了教授在視效中廣泛使用的編程語言Python 的老師。這給內(nèi)心帶來了滿足感坝冕，不僅讓我能更完整地完成視效作品徒探、創(chuàng)建獲獎的視效，它還讓我在軟件開發(fā)領(lǐng)域獲得更好的職業(yè)發(fā)展喂窟。

寫代碼 vs. 編程

你一定有相似的場景下聽說過寫代碼（coding）和編程（programming）测暗，可能會奇怪兩者的區(qū)別是什么。在過去的幾年中磨澡，寫代碼在表述中被更多地選擇來讓編程走進(jìn)大眾世界碗啄。基本前提是你可能在寫代碼并對數(shù)字經(jīng)濟(jì)做著貢獻(xiàn)稳摄，而實(shí)際并不是在編程稚字。

讓我來舉個例子：你可能在使用網(wǎng)頁語言HTML和CSS，而它們并非編程語言厦酬。所以在使用這些語言時你并不是真的在編程胆描，崦是為網(wǎng)站添加樣式和結(jié)構(gòu)（下面一部分會講解其用法）。但通過編程語言JavaScript來寫代碼就是在編程了仗阅。通過編程語言我們只可以讓計算機(jī)“做事”昌讲。每當(dāng)編程時，你也在寫代碼减噪，但寫代碼時并不一定在編程短绸。寫代碼是一個更能用的詞語，用于描述與計算機(jī)通訊的各種情況筹裕。

基本上可以把編程當(dāng)做寫代碼的一個子集醋闭，但說句實(shí)話這兩個詞現(xiàn)在通常可以互換朝卒。本書的主要目的是教授編程目尖。我們將使用編程語言JavaScript來寫代碼編程。

HTML 和 CSS

回看我的學(xué)習(xí)編程之路扎运，我發(fā)現(xiàn)我缺乏對教授初學(xué)者寫代碼方面的努力瑟曲，其中一個主要原因是這個領(lǐng)域使用HTML和CSS作為入門語言。

這些語言的問題在于它們甚至不是編程語言豪治。HTML是一種標(biāo)記語言洞拨，用于定義瀏覽器所能理解的文件結(jié)構(gòu)。比如负拟，HTML中教你如何為瀏覽器編寫文件烦衣，然后瀏覽器會知道文件的哪一部分是頭部、段落等。

同樣花吟，CSS也不是編程語言秸歧，它是一種樣式語言，能讓HTML文檔更加美觀衅澈，并且理想情況讓它比之前對用戶更友好键菱。此外，雖然CSS可用于創(chuàng)建非常好看的效果今布，但使用時通常是反直覺的经备，并且即便對于軟件工程師也是很難進(jìn)行推理的。學(xué)習(xí)CSS不僅不是在學(xué)習(xí)編程部默，而且如果給網(wǎng)站添加樣式不是你的唯一目的的話侵蒙，它還會是一種讓初學(xué)者覺得非常無趣的事情。

使用這些語言教授寫代碼的推力是可以理解的傅蹂。畢竟網(wǎng)頁應(yīng)用無處不在并且有些還帶有巨額收益纷闺，這讓人們都想要在網(wǎng)上創(chuàng)建自己的項(xiàng)目。如果你要創(chuàng)建的是網(wǎng)站份蝴，就需要在某種程度上使用這些語言急但。但從這些語言入手會形成對寫代碼的誤解。在創(chuàng)建程序或應(yīng)用時寫代碼會更有回報性并更有趣搞乏，因?yàn)檫@樣可能性會更泛波桩。如前面所討論，我們需要使用編程語言來創(chuàng)建程序请敦，那么問題很顯了：什么樣的語言是編程語言镐躲？

你可以查看維基百科獲得半正式的定義。但對我而言侍筛，編程語言需要帶有能允許我們表述一些基本運(yùn)算的某些控制結(jié)構(gòu)萤皂。這一定義對于初學(xué)者可能沒什么意義。意思是說在編程語言中存在結(jié)構(gòu)來讓計算機(jī)執(zhí)行邏輯運(yùn)算匣椰。這些結(jié)構(gòu)在稍后我們將更深入介紹裆熙，它們有：根據(jù)給定條件和存儲值的變量輸出不同結(jié)果的條件結(jié)構(gòu)，或讓程序重復(fù)執(zhí)行指定次數(shù)的循環(huán)結(jié)構(gòu)禽笑。如果尚不能理解不必?fù)?dān)心入录，本書就是讓我們學(xué)習(xí)所有這些基本編程概念的。

幾乎所有編程語言都有這類基礎(chǔ)結(jié)構(gòu)佳镜，讓我們可以構(gòu)建更為復(fù)雜的應(yīng)用僚稿。以英語或其它你熟悉的語言來類比，有動詞蟀伸、名詞和形容詞蚀同，使用這些作為基礎(chǔ)缅刽，人們既可以說簡單的事情，也可以去寫偉大的小說蠢络。這些基礎(chǔ)正是HTML和CSS所缺失的衰猛，而在編程語言中可以獲取。

本書中我們將學(xué)習(xí)所有這些基本結(jié)構(gòu)刹孔，并讓我們通過JavaScript編程語言來向計算機(jī)傳達(dá)編程意圖啡省。

為何學(xué)習(xí)JavaScript？

市面上有很多種編程語言芦疏，本書將使用非常流行的編程語言JavaScript來進(jìn)行代碼編寫的教學(xué)冕杠。

JavaScript是使用最廣泛的編程語言之一微姊，因?yàn)樗鼉?nèi)置在瀏覽器中酸茴。因此，幾乎所有的網(wǎng)頁和應(yīng)該都在某種程度上使用JavaScript兢交。近年來薪捍，JavaScript不僅用在網(wǎng)頁用戶交互編程中，還用于服務(wù)端：后臺應(yīng)用配喳，物聯(lián)網(wǎng)(IOT) 設(shè)備或安卓酪穿、iPhone等平臺移動端應(yīng)用。盡量它來自網(wǎng)頁開發(fā)晴裹，JavaScript的知識可應(yīng)用于其它大量領(lǐng)域被济。

因?yàn)镴avaScript的流行性和無處不在，在碰到問題時可以很容易找到相關(guān)資源和信息涧团。它背后有強(qiáng)大和活躍的社區(qū)只磷。在知名的問答網(wǎng)站 StackOverflow上有數(shù)百萬與JavaScript相關(guān)的問題。如果使用該語言并碰到了問題泌绣，很可能其他人也碰到過同樣的問題钮追，并在該網(wǎng)上提問過，可以在上面找到供你學(xué)習(xí)的答案阿迈。

我不會講到編程語言或靜態(tài)語言的細(xì)節(jié)元媚，但作為動態(tài)語言的JavaScript，與其它靜態(tài)語言相比代碼更簡潔苗沧，也更易于書寫刊棕。例1-1和1-2 中為不同語言向屏幕輸出‘hello world’ 的簡單語句的寫法。注意使用JavaScript來寫代碼有多簡短：

1-1 使用C++在屏幕上打印Hello World(來源: http://helloworldcollection.de/)

// Hello World in C++ (pre-ISO)
#include <iostream.h>
main()
{
    cout << "Hello World!" << endl;
    return 0;
}

1-2 使用Java在屏幕上打印Hello World(來源: http://helloworldcollection.de/)

// Hello World in Java
class HelloWorld {
    static public void main( String args[] ) {
        System.out.println( "Hello World!" );
    }
}

使用JavaScript在屏幕上打印Hello World

console.log('Hello World');

學(xué)習(xí)JavaScript的另一個優(yōu)勢是待逞，因?yàn)樗蔷W(wǎng)頁語言鞠绰，我們能以最簡單的方式向其它分享我們的創(chuàng)意。我覺得在學(xué)習(xí)新技能時能夠分享并獲得反饋非常的重要飒焦。

總結(jié)一下蜈膨，有學(xué)習(xí)編程以及JavaScript是一個很好的選擇有很多的原因屿笼，因?yàn)樗?/p>

• 易于編寫
• 很流行并且無處不在
• 應(yīng)用于大量領(lǐng)域

為什么會存在不同的編程語言？

你一定會想為什么要有這么多功能相近的編程語言呢翁巍？

這是一個很好的問題驴一。存在不同的編程語言是因?yàn)樗鼈兊脑O(shè)計原則各不相同。有些語言很冗長灶壶，但可以讓你對自己程序的穩(wěn)定性和速度有更多的控制肝断。有些語言很簡潔但執(zhí)行速度較慢。有些語言適合特定的任務(wù)驰凛。JavaScript適于全棧網(wǎng)頁開發(fā)胸懈，Matlab適用于數(shù)學(xué)計算，C++在游戲開發(fā)具有統(tǒng)治力恰响，Julia用于數(shù)據(jù)科學(xué)趣钱。但這不并說這些領(lǐng)域就不能使用其它語言了。Unity游戲引擎提供了C#來進(jìn)行游戲開發(fā)胚宦。Python也很適合數(shù)據(jù)科學(xué)首有。GoLang或很多其它語言可用于后臺網(wǎng)頁開發(fā)。有時歸結(jié)于開發(fā)人員偏好哪種語言或已了解哪種語言枢劝。有時又取決于給定項(xiàng)目本身的限制井联。

我曾就職于視效行業(yè)，在該領(lǐng)域能夠使用的軟件包可通過Python或C++進(jìn)行自動化您旁。因此在這一領(lǐng)域它們就是很好的選擇烙常，提供了對我們所使用工具的大量支持。對于視效來說學(xué)習(xí)Java幾乎就沒什么用鹤盒，除非你后面想要學(xué)習(xí)的其它語言與它也有很多相似的原則蚕脏。

選擇第一門語言有時非常難，因?yàn)橛泻芏嗖诲e的選項(xiàng)昨悼。有時選擇受應(yīng)用領(lǐng)域所限蝗锥。如果你想要使用Unreal引擎來創(chuàng)建游戲，那么就應(yīng)該學(xué)習(xí)C++率触。但是如果這是你第一次學(xué)習(xí)編程語言终议，你將而對陡峭的學(xué)習(xí)曲線，積極性被打消葱蝗。

JavaScript是初學(xué)編程語言時一個很好的選擇穴张。如前面所述，它廣泛用于大量的應(yīng)用領(lǐng)域两曼，可以通過大量應(yīng)用進(jìn)行實(shí)驗(yàn)和測試皂甘。它背后有一個強(qiáng)大、活動的社區(qū)悼凑，語法也很簡潔偿枕，這讓它很人類語言非常相近璧瞬。

通過 p5.js 學(xué)習(xí)JavaScript

學(xué)習(xí)編程的最大挑戰(zhàn)之一是能隨手找到一個既有趣、印象深刻又對主題具有描述性的示例渐夸。一旦掌握了編程嗤锉，它會是一個回報性和有趣性都很強(qiáng)的事情，但對于初學(xué)者墓塌，那些專業(yè)編程人員需要處理的大部分問題會顯示無趣甚至無聊瘟忱。這也是為什么我們使用一個叫p5.js的JavaScript庫來進(jìn)行編程入門的教學(xué)。p5.js讓我們可以創(chuàng)建很有趣的交互和視圖片斷苫幢，創(chuàng)建過程也很有意思访诱，同時也能鞏固軟件開發(fā)基礎(chǔ)。這個庫的視覺屬性讓我們可以通過圖像來看到我們的腳本的效果韩肝，并對編程結(jié)構(gòu)有很近距離的掌握触菜。

p5.js是一個編程庫。編程庫可以認(rèn)為是一個為特定目的創(chuàng)建的代碼集合伞梯，這樣在執(zhí)行與該目的相關(guān)的操作時玫氢，都不需自己實(shí)現(xiàn)功能而只要使用這個庫就可以了帚屉。庫是建立在語言核心功能之上并對其的擴(kuò)展谜诫。對于JavaScript，有幾萬種庫可以執(zhí)行大量不同的操作攻旦。所以在嘗試實(shí)現(xiàn)自己的功能之前最好能去看看是否其它人已創(chuàng)建相同功能的開源甚至是收費(fèi)庫喻旷。這樣的庫一般經(jīng)過實(shí)戰(zhàn)檢驗(yàn)，我們可以從容地使用牢屋，而不是自己去設(shè)計解決方案且预，可能會在開發(fā)程序時所沒有預(yù)料到的問題。對于JavaScript這種內(nèi)核不帶有內(nèi)置標(biāo)準(zhǔn)庫的程序語言尤其如此烙无，因此開發(fā)中會重度依賴第三方庫來解決通用問題锋谐。下面舉例說明幾個比較有意思的庫來讓讀者品味個中選擇：

• Faker.js : 生成大量假數(shù)據(jù)
• franc : 檢測給定文本的語言
• jimp : 圖像處理庫
• cylon.js : 針對機(jī)器人、特惠計算和物聯(lián)網(wǎng)的機(jī)器人庫

p5.js是一個基于草圖想法的創(chuàng)意代碼庫截酷。正如草圖可供快速將創(chuàng)意繪制成原型一樣涮拗，p5.js可寫最少的代碼來將視覺、交互或動畫創(chuàng)意呈現(xiàn)到屏幕上迂苛。p5.js是知名的叫Processing 這個基于Java 編程語言的庫在JavaScript中的實(shí)現(xiàn)三热。

值得一提的是Java和JavaScript是毫不相關(guān)的兩種語言。JavaScript名稱中包含Java是當(dāng)時品牌和市場決策的一個失誤三幻。

p5.js的簡潔屬性讓其成為非常易于學(xué)習(xí)的庫就漾。但不要以為p5.js 的能力非常有限。p5.js擁有大量的功能念搬，驚人的發(fā)展歷史和背后的社區(qū)抑堡，這些無不讓那些想要使用代碼創(chuàng)建藝術(shù)摆出、設(shè)計、動捕或交互作品的人對它的學(xué)習(xí)成為一筆非常有價值的投資首妖。p5.js程序短至潦潦數(shù)行懊蒸，多至幾千行。因?yàn)閜5.js遵循極簡的原則悯搔，有時小的p5.js程序也被稱為草圖（sketch）骑丸。雖然這是一種非常聰明的描述方式，但我個人對該稱呼從來都不太感冒妒貌，因?yàn)檫@會混淆我們在做編程這一事實(shí)通危。

可以看到p5.js一些實(shí)際應(yīng)用，如創(chuàng)建數(shù)據(jù)可視化（圖1-1）

p5.js創(chuàng)建數(shù)據(jù)可視化

圖1-1. p5.js的數(shù)據(jù)可視化

或者你可以使用它創(chuàng)建抽象生成藝術(shù)（圖1-2）

p5.js創(chuàng)建抽象生成藝術(shù)

圖1-2. p5.js的抽象生成藝術(shù)

你甚至可以創(chuàng)建動畫或交互視覺作品灌曙，在本書最后我們將使用p5.js來創(chuàng)建一個交互式游戲菊碟。

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