使用工具
Visual Studio Code+p5.js
下載地址
Visual Studio Code：https://code.visualstudio.com/Download
p5.js:https://p5js.org/zh-Hans/download/
目標(biāo)
在網(wǎng)頁(yè)上用簡(jiǎn)單的線條畫(huà)出一輛自行車(chē)
具體流程
首先我們建立一個(gè)index.html文件（主頁(yè)）和一個(gè)sketch.js文件（碼繪實(shí)現(xiàn)文件），并把sketch.js和p5.js鏈接到index.html上。
在sketch.js的draw()中通過(guò)使用簡(jiǎn)單的圖形函數(shù)畫(huà)出自行車(chē)。

// sketch.js function setup() {createCanvas(1280, 1080); }function draw() {ellipse(200, 200, 80, 80);ellipse(350, 200, 80, 80);line(200,200,230,120);line(210,110,250,130);line(210,110,225,110);line(250,130,260,125);ellipse(290, 200, 30, 30);line(295,175,285,225);line(285,175,305,175);line(275,225,295,225);line(290,185,350,200);line(290,215,350,200);line(220,150,275,195);line(295,175,310,145);line(310,145,370,150);line(350,200,355,150);triangle(310,145,285,133,325,135); }

效果圖

碼繪與手繪相比

從思路方面來(lái)考慮，編程和手繪的差距其實(shí)并不大，手繪一開(kāi)始要做的事情就是構(gòu)圖，確定好畫(huà)面的大致框架和分布，用p5來(lái)進(jìn)行編程作畫(huà)也是一樣，確定好畫(huà)布的大小和作圖的關(guān)鍵點(diǎn)位，確定框架。從技術(shù)上來(lái)說(shuō)，手繪的要求更高一點(diǎn)，因?yàn)槭褂胮5作畫(huà)是依靠調(diào)用現(xiàn)成畫(huà)出的都是標(biāo)準(zhǔn)的圖形，而手繪有諸多因素的影響，如畫(huà)筆、紙張、繪畫(huà)者的技術(shù)等，但正是如此，手繪才會(huì)顯得多樣化。創(chuàng)作體驗(yàn)上來(lái)說(shuō)，使用p5編程作畫(huà)比較適合重復(fù)性強(qiáng)的作畫(huà)，手繪更適合創(chuàng)造性的作畫(huà)，p5自帶的曲線函數(shù)要確認(rèn)點(diǎn)位才能夠連出直線，沒(méi)有手繪那樣隨心所欲。從創(chuàng)作偏好方面，我喜歡用p5畫(huà)一些簡(jiǎn)單、重復(fù)性高的畫(huà)面，手繪更適合創(chuàng)造性的作畫(huà)。

總結(jié)

以上是生活随笔為你收集整理的码绘：使用p5.js进行简单的作画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。