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

// 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); }

效果圖

碼繪與手繪相比

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

總結

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

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