p5.js對動態(tài)圖形的原創(chuàng)創(chuàng)作
繼續(xù)上一個p5.js的專欄，這次來畫原創(chuàng)自畫像。
因為上一次臨摹圖時采用了“rotate”語句，感受到了惡意。橫向?qū)Ρ龋R摹相同圖的代碼量高達900行，較于其他人的20行什么的，過程上十分難受。
不過，在學習“rotate”的過程中，找到了Fibonacci函數(shù)可以畫出螺旋圖形。
努力不能白費，我打算用Fibonacci函數(shù)畫出精神污染的圖形。
background(255);
?stroke(0);
?noFill();
?strokeWeight(5);
?translate(windowWidth/2, windowHeight/2);
?rotate(-PI / 6 * frameCount);
?for( var i = 0; i < 20; i ++){
? var a = i <= 1 ? 1 : Fibonacci[i-1] + Fibonacci[i-2];
? Fibonacci.push(a);
? arc(0,0,a * 2,a * 2,0,PI / 2);
? rotate(PI / 2);
? translate(-Fibonacci[i-1],0);
此為轉(zhuǎn)動的Fibonacci螺旋的代碼，現(xiàn)在我們讓它更惡心（變多）一些。
rotate(-PI / x* frameCount);
用這個來控置旋轉(zhuǎn)速度。
translate(300, 300);
? rotate(-PI / x* frameCount);
? for( var i = 0; i < 20; i ++){
? ? var a = i <= 1 ? 1 : Fibonacci[i-1] + Fibonacci[i-2];
? ? Fibonacci.push(a);
? ? arc(0,0,a * 2,a * 2,0,PI / 2);
? ? rotate(PI / 2);
? ? translate(-Fibonacci[i-1],0);
我把其中“x”設置為參數(shù)，并用以下代碼進行多重設置
for(b=5;b<20;b=b+0.5){
再把背景和線條搞成讓人不適的顏色
background(220,0,140);
stroke(0,200,130);
嗯，紫色和綠色。
以下是全部代碼。
function setup(){
? createCanvas(600,600);
? background(255);
? frameRate(10);
}
function draw(){
? let b=-PI/4;
? background(220,0,140);
? stroke(0,200,130);
? noFill();
? strokeWeight(10);
? push();
? fi(5);
? pop();
? for(b=5;b<20;b=b+0.5){
? ??
? push();
?
? fi(b);
? pop();
? ? b=b+0.5
? }
??
?
??
}
function fi(x){
?
? translate(300, 300);
? rotate(-PI / x* frameCount);
? for( var i = 0; i < 20; i ++){
? ? var a = i <= 1 ? 1 : Fibonacci[i-1] + Fibonacci[i-2];
? ? Fibonacci.push(a);
? ? arc(0,0,a * 2,a * 2,0,PI / 2);
? ? rotate(PI / 2);
? ? translate(-Fibonacci[i-1],0);?
? }
}
function windowResized(){
? resizeCanvas(windowWidth, windowHeight);
}
我們看看效果
