溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
作業成果展示
實驗原理
主要是要實現小正方形的上下來回運動，并且每個小正方形的跳動有一定的時間差視覺上要呈現依次跳動的感覺。
本來我想用一個if語句來實現這個功能！但是想了很久沒想到正確的代碼……后來經同學提醒用了sin函數！真的很好用！
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函數不但能實現依照時間上下做簡諧運動，而且只需要改變sin前面的振幅和里面的參數就能夠做到小正方形的依次跳動。
小正方形的圓角變化也是用了sin函數，不過因為rect后面控制角的參數是不接受負數的所以用了var b=abs(a)取絕對值。
代碼
let posY;
function setup() {
createCanvas(630, 500);//創建畫布
noStroke();//不給物體描邊
frameRate(60);//幀率設為60
}
function draw() {
background(220);//畫布的背景顏色
//為小正方形圓角變化做準備
var t=millis()/400;
posY=height*0.46;
var a=20*sin(t*0.7);
var b=abs(a);//取絕對值
//為小正方形上下運動做準備
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);
//畫小正方形
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)//每次點擊一下最中間的小正方形都會改變它的顏色
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);
}
//關于鼠標點擊做出響應的函數
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);
}}
總結
以上所述是小編給大家介紹的p5.js碼繪“跳動的小正方形”的實現代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
