溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了p5.js臨摹動態圖片的具體代碼，供大家參考，具體內容如下
1、臨摹圖片
2、圖像運動規律
原圖中一共有36個等大的四分之三圓形，按照一定的規律轉動，可以等效為圓形不動，每個圓上有以其半徑為邊長的矩形在繞圓形的原點轉動，每四個為一組，其他部分都是在重復這四個的轉動規律
3、完整代碼
function setup()
{
createCanvas(402,402);
}
function draw()
{
background(0);
var dx=0;
dx+=PI/180;
var t=(millis()/5)*sin(dx);//返回自程序開始的毫秒數
if(dx==PI)
{
dx=0;
}
for(var i=0;i<6;i++)//每行每列六個圓形
{
for(var j=0;j<6;j++)
{
fill(255);
ellipse(i*66+36, j*66+36, 60, 60);//繪制半徑30的圓形，間隔6
fill(0);
translate(i*66+36, j*66+36);//矩形的移動，共四種運動狀態
if(i%2==0&&j%2==0)
{
rotate(-t); //逆時針旋轉
rect(0,0,30,30);//旋轉的邊長30黑色矩形
}
else if(i%2==1&&j%2==0)
{
rotate(t);//順時針旋轉
rect(-30,0,30,30);
}
else if(i%2==1&&j%2==1)
{
rotate(-t);
rect(-30,-30,30,30);
}
else if(i%2==0&&j%2==1)
{
rotate(t);
rect(0,-30,30,30);
}
resetMatrix();
}
}
}
4、臨摹結果
5、拓展圖像
運動規律：
一段螺旋型的運動弧線，中心顏色較深，越向外顏色越淺，形成一種線在向中心運動的趨勢。繪制時是由無數個沒有邊框的圓形一起按照規律運動，形成線。
完整代碼：
function setup()
{
createCanvas(500, 500);
noStroke();
}
function draw() {
background(0);
for (var i =1;i <3000; i++)
{
drawcircle(255-0.1*i,255-0.1*i,255-0.1*i, i);
i++;
}
}
function drawcircle( r, g, b, interval){
fill(r, g, b);
var x = 250;
var y = 250;
var t = millis() /3+ interval *0.5;
var xi;
var yi;i
var radius = interval *15;
xi = 0.01*radius * Math.cos(t * Math.PI/180);
yi = 0.01*radius * Math.sin(t * Math.PI/180);
x += xi;
y += yi;
ellipse(x, y, 20,20);
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
