p5.js繪制旋轉的正方形

 更新時間:2019年10月23日 16:06:16   作者:qq_43387305   我要評論
這篇文章主要為大家詳細介紹了p5.js繪制旋轉的正方形,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

使用p5.js繪制旋轉的正方形,供大家參考,具體內容如下

要還原的效果圖

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

首先建立畫布大小,按照比例應該是5:3

function setup() {
 createCanvas(500, 300);
}

設定矩形繪制格式,以及邊線粗細

function setup() {
 createCanvas(500, 300);
 rectMode(100);
 strokeWeight(4);
}

讓我們根據畫布坐標先把靜態的圖形畫出來

(關于顏色的rgb數據可以通過ps取色器獲得)

只需要用到rect()進行繪制即可

仔細觀察可以發現,圖中的矩形為圓角矩形,繪制圓角矩形可以直接在rect()里加入四個角的弧度
以左一黑色矩形為例

rect(77.5,122.5, 55, 55, [5], [5], [5], [5]);

[ ]里的則是每個角的圓角弧度,按順序分別是左上,右上,左下,右下

經過修改后的圖像

目前基本圖形已經構建好了,目前我們需要做的就是讓他旋轉起來
這里需要用到幾個函數

translate()
rotate()

我們用translate()將旋轉中心設定為矩形中心,再調用rotate()讓圖像旋轉起來
但是我們會發現一個問題,經過設定后,啟動程序,我們會發現整個圖形進行了旋轉,這并沒有達到我們想要的效果,所以現在需要使用到push()和pop()兩個函數將矩形分隔開來

push();
angle=angle+0.01;
let c=angle+PI;
translate(100,150);
rotate(c);
stroke(255,255,255);
fill(0,0,0);
rect(-22.5-22.5, 55, 55, [5], [5], [5], [5]);
pop();

運行即可讓左邊第一個矩形旋轉起來。要介紹的是,angle后所加的數值(此處為0.01)所代表的含義為旋轉速率的大小

如果需要反向旋轉,將rotate()中的參數轉換為負數即可

按照第一個矩形將另外三個矩形也更改過來,就可以得到圖中的效果啦!

最后完成的效果↓

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論

2019开奖结果