主題

用編程方式創作一幅介紹自己的作品

編程環境

p5.js網頁版，網址點擊這里

設想

由于自己熱愛騎車，并且夢想是擁有一輛S-WORKS公路車，于是決定用代碼繪制出一輛屬于自己的公路車

過程

第一步就是找到最養眼的一輛車并從網上保存下來作為參考

接著開始繪制過程，這里將整輛車分解為圓形、不同粗細的線條，三角形以及弧形

1、背景即變量設計

創建一個背景寬600，高400像素，將其刷新率定為60次每秒

function setup() {createCanvas(600, 400);frameRate(60); }

為了能使圖形動起來，設置一個時間變量x

let x=1;

并在draw函數中加入其算法

x+=2;

2、車輪設計

根據圖片，車輪由三種不同粗細顏色的圓形組成，并且其內部無填充，先是繪制黃色圓弧，為了能夠看出旋轉效果，我決定用四個圓弧組成一個圓，每個圓弧之間留一些空隙，然后是最外層黑色圓弧，最后是內部最粗的圓弧，這里用了兩種不同顏色的圓弧組成內圈，也是為了能夠體現出旋轉效果

fill(0,0,0,0);//無填充stroke(209,162,84); //線條顏色 strokeWeight(8);//線條粗細arc(140, 260, 161, 161, radians(5+x), radians(90+x));arc(140, 260, 161, 160, radians(95+x), radians(180+x));arc(140, 260, 161, 161, radians(185+x), radians(270+x));arc(140, 260, 161, 161, radians(275+x), radians(360+x));stroke(0,0,0);//無線條strokeWeight(2);arc(140, 260, 165, 165, radians(x), radians(360+x));strokeWeight(18);arc(140, 260, 139, 139, radians(x), radians(120+x));strokeWeight(18);arc(140, 260, 139, 139, radians(180+x), radians(300+x));stroke(40,40,40);strokeWeight(18);arc(140, 260, 139, 139, radians(120+x), radians(180+x));arc(140, 260, 139, 139, radians(300+x), radians(360+x));

然后是重中之重，繪制輻條，這里運用了極坐標使線條能夠繞著一個端點做圓周運動，循環是為了能夠同時繪制出角度間隔一樣的輻條，這里繪制了10根

for(i=0;i<=2*PI;i+=0.2*PI) //輻條{stroke(0,0,0);strokeWeight(2);line(140,260,60*cos(x/(18*PI)+i)+140,60*sin(x/(18*PI)+i)+260);}

一開始沒有加入/(18PI)，運行后由于其轉速太快與輪胎轉動不一致，于是通過不斷地嘗試令x除以(18PI)，最終輻條轉速和輪胎轉速基本吻合

3、車架和車座設計

整體的車架都是用不同粗細的線條組裝而成，另外將線條的端點設為圓弧形

strokeCap(round);

這里沒什么需要解釋的，直接上代碼

/車架///strokeCap(round);strokeWeight(6);line(140,260,215,195);strokeWeight(8);line(140,260,240,280);strokeWeight(8);line(240,280,195,130);//立管strokeWeight(15);line(240,280,360,165);strokeWeight(9);line(400,260,350,130);strokeWeight(9);line(212,180,355,150);//上管

另外車座是用三角形繪制而成

strokeWeight(1);fill(0,0,0);triangle(193,130,170,115,240,115);

4、車把設計

這里最困難的是將圓弧契合到車架上，通過不斷調整圓心和高寬，得到以下位置代碼

arc(367,139,60,40,radians(-30),radians(75))；

5、牙盤和腳踏設計

牙盤很簡單，就是兩個同心圓結合在一起

牙盤strokeWeight(2);ellipse(240,280,40,40);strokeWeight(4);ellipse(240,280,60,60);

腳踏則有一定的難度，但是和之前輻條的算法類似，兩個踏桿的算法和之前一致，而踏板則需要將之前固定的端點也添加上運動端點的級坐標，就是x軸方向有些數值差，具體見代碼

//踏桿//strokeWeight(8);line(240,280,42*cos(x/(18*PI))+240,42*sin(x/(18*PI))+280);line(240,280,42*cos(x/(18*PI)+PI)+240,42*sin(x/(18*PI)+PI)+280);踏板//strokeCap(square);line(42*cos(x/(18*PI))+230,42*sin(x/(18*PI))+280,42*cos(x/(18*PI))+250,42*sin(x/(18*PI))+280);line(42*cos(x/(18*PI)+PI)+230,42*sin(x/(18*PI)+PI)+280,42*cos(x/(18*PI)+PI)+250,42*sin(x/(18*PI)+PI)+280);

6、商標設計

這里用到了textsize()，text()，rotate()，translate()等函數
先輸入字“S-WORKS”，坐標為(0，0)，然后設置字體顏色和粗細，接著對其平移、旋轉、使其能夠和車架吻合，源碼如下

strokeWeight(0);fill(225,0,0)textSize(18); translate(270,260);rotate(-0.24*PI);text("S-WORKS", 0, 0);

成果

總結

以上是生活随笔為你收集整理的创意编程绘制的全部內容，希望文章能夠幫你解決所遇到的問題。

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