作業(yè)成果展示
創(chuàng)新互聯(lián)主要業(yè)務(wù)有網(wǎng)站營(yíng)銷(xiāo)策劃、做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開(kāi)發(fā)、重慶小程序開(kāi)發(fā)公司、HTML5建站、程序開(kāi)發(fā)等業(yè)務(wù)。一次合作終身朋友，是我們奉行的宗旨；我們不僅僅把客戶當(dāng)客戶，還把客戶視為我們的合作伙伴，在開(kāi)展業(yè)務(wù)的過(guò)程中，公司還積累了豐富的行業(yè)經(jīng)驗(yàn)、成都全網(wǎng)營(yíng)銷(xiāo)推廣資源和合作伙伴關(guān)系資源，并逐漸建立起規(guī)范的客戶服務(wù)和保障體系。
實(shí)驗(yàn)原理
主要是要實(shí)現(xiàn)小正方形的上下來(lái)回運(yùn)動(dòng)，并且每個(gè)小正方形的跳動(dòng)有一定的時(shí)間差視覺(jué)上要呈現(xiàn)依次跳動(dòng)的感覺(jué)。
本來(lái)我想用一個(gè)if語(yǔ)句來(lái)實(shí)現(xiàn)這個(gè)功能！但是想了很久沒(méi)想到正確的代碼……后來(lái)經(jīng)同學(xué)提醒用了sin函數(shù)！真的很好用！
var y1=posY+30sin(t); var y2=posY+28sin(t-1); var y3=posY+26sin(t-2); var y4=posY+24sin(t-3); var y5=posY+22sin(t-4); var y6=posY+20sin(t-5);
這種sin函數(shù)不但能實(shí)現(xiàn)依照時(shí)間上下做簡(jiǎn)諧運(yùn)動(dòng)，而且只需要改變sin前面的振幅和里面的參數(shù)就能夠做到小正方形的依次跳動(dòng)。
小正方形的圓角變化也是用了sin函數(shù)，不過(guò)因?yàn)閞ect后面控制角的參數(shù)是不接受負(fù)數(shù)的所以用了var b=abs(a)取絕對(duì)值。
代碼
重慶分公司
重慶分公司
let posY;
function setup() {
createCanvas(630, 500);//創(chuàng)建畫(huà)布
noStroke();//不給物體描邊
frameRate(60);//幀率設(shè)為60
}
function draw() {
background(220);//畫(huà)布的背景顏色
//為小正方形圓角變化做準(zhǔn)備
var t=millis()/400;
posY=height*0.46;
var a=20*sin(t*0.7);
var b=abs(a);//取絕對(duì)值
//為小正方形上下運(yùn)動(dòng)做準(zhǔn)備
var y1=posY+30*sin(t);
var y2=posY+28*sin(t-1);
var y3=posY+26*sin(t-2);
var y4=posY+24*sin(t-3);
var y5=posY+22*sin(t-4);
var y6=posY+20*sin(t-5);
var y11=posY+30*cos(t);
var y22=posY+28*cos(t-1);
var y33=posY+26*cos(t-2);
var y44=posY+24*cos(t-3);
var y55=posY+22*cos(t-4);
var y66=posY+20*cos(t-5);
//畫(huà)小正方形
fill(211);
rect(10, y1, 15, 15,b);
fill(192)
rect(30, y2, 20,20,b);
fill(169)
rect(60, y3, 30,30,b);
fill(128)
rect(100, y4, 40,40,b);
fill(105)
rect(150, y5, 50,50,b);
fill(0)
rect(210, y6, 60,60,b);
fill(r, g, b, 127)//每次點(diǎn)擊一下最中間的小正方形都會(huì)改變它的顏色
rect(280,posY ,70,70,b);
fill(0)
rect(360, y66, 60,60,b);
fill(105)
rect(430, y55, 50,50,b);
fill(128)
rect(490, y44, 40,40,b);
fill(169)
rect(540, y33, 30,30,b);
fill(192)
rect(580, y22, 20,20,b);
fill(211);
rect(605, y11, 15, 15,b);
}
//關(guān)于鼠標(biāo)點(diǎn)擊做出響應(yīng)的函數(shù)
function mouseClicked() {
let d = dist(mouseX, mouseY, 360, 200);
if (d < 100) {
// Pick new random color values
r = random(255);
g = random(255);
b = random(255);
}}總結(jié)
以上所述是小編給大家介紹的p5.js碼繪“跳動(dòng)的小正方形”的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
